サイトのフォント選びは非常に重要です。サイト開発にはさまざまな側面がありますが、その中でもその重要度は上位に位置します。
HTMLフォントは、サイト訪問者に与えるすべてのコンテンツの印象を決定づけます。読みにくいフォントを選んでしまうと、ユーザーがコンテンツを読むのに苦労することになり、ユーザー体験に悪影響を与えます。
ブログ記事の本文などのメインコンテンツには、スクリプト書体(筆記体)でないものを選ぶのが基本ですが、ウェブセーフなフォントであることも重要です。その上で、デザイン要素として筆記体フォントを使用すると、サイトをおしゃれにすることができます。
今回は、おすすめの筆記体フォントをご紹介します。まずは、スクリプト書体(筆記体フォント)の簡単な歴史と、効果的な使用方法から見ていきましょう。
スクリプト書体の歴史(ざっくり紹介)
筆記体フォントは、正式にはスクリプト書体と呼ばれ、タイプライターやワープロが登場するよりもはるか昔、数百年前から存在しています。18世紀頃の実際の筆跡から着想を得ており、羽根ペンとインクで書かれた写本に見られるような、紙の端が丸まったような曲線的な筆跡が特徴です。
当時、英国貴族の間では西洋の書道とも言える「カリグラフィー」を嗜んでおり、ペン先を尖らせてカリグラフィーを書いていました。この優雅な印象を持つレタリング(本来は「手で文字を書く」を意味し、印刷を前提としてデザインされたタイプフェイスなどを指す)は銅版に彫られれ、印刷物に使用されていました。この時代のスタイルが1970年代に復活し、華やかなスクリプトがニッチな分野の広告で多くみられるようになりました。

ちなみに、筆文字自体が誕生したのはアジアで、筆を使った羽毛のような繊細なスタイルは書道が生みの親です。
今日の筆記体フォントは、この軽量な印象を模倣し、あえて不完全さや手で書いたような筆跡を残しているため、親しみやすい印象やプロフェッショナルな印象まで、あらゆるものに使用することができます。

現在、印刷物やオンラインで目にするスクリプト書体は20世紀に開発されたもので、それ以前のものよりもクセがなく、読みやすい傾向にあります。
もちろん、かなり読みにくいスクリプト書体も存在します。たとえば、ゲール語のスクリプト書体は、ブロック体でありながら筆記体の要素を残しているため、読みづらさが否めません。同様に、カリグラフィーフォントも読みにくさに欠けることがあります。
スクリプト書体は、現在もさまざまな場所で使用されています。結婚式の招待状から広告に至るまで、誰もが一度が目にしたことがあるはずです。
タイトルやちょっとした要素にスクリプト書体を利用することで、サイトにスタイルとおしゃれな雰囲気を与えることができます。まるで手書きのようなスタイルから、個性的なタッチを加えることも可能です。
筆記体フォントの効果的な使用方法
すでにいくつかの使用例を挙げましたが、WordPressサイトで筆記体フォントの用途として、華やかさを出したい場合に理想的です。また、以下のような特定の用途にも適しています。
- フォーマルなコンテンツ─結婚式の招待状、賞状や表彰状、ビジネス文書、雑誌のヘッダーなど、上品さや洗練さを出したい場合
- マーケティング資料─特に英語の資料を作成する場合は、会社のレターヘッド、サイトのヘッダー、ブログ記事のタイトルなど
- ラグジュアリーブランド─高額な製品を扱う企業やブランドにも
- ヘッダーとタイトル─筆記体フォントは短い文に適しているため、本文には不向き。ユーザーの目の負担やアクセシビリティを考慮し、タイトルなどにのみ使用するのが得策
- 1種類のみを効果的に使用する─サイトに筆記体フォントを使用する場合、ごちゃごちゃとした見栄えになるのを避けるため、1種類に絞って使用すること。また、あくまでタイトルや特定の行(小見出しやキャッチフレーズなど)を目立たせるために使用する。サイト全体で使用すると、コンテンツが読みづらくなる。
以上を念頭に置き、洗練されたサイトを作るのに便利なおすすめの筆記体フォントを見ていきましょう。
おすすめ筆記体フォント
サイトを構築する際には、ヘッダーやタイトルなど、特定の要素を目立たせるために筆記体フォントの使用を検討してみてください。
1. Dancing Script

Dancing Scriptは、リラックスした印象の筆記体フォントで、あらゆる用途に適しています。どちらかと言えばカジュアルな見た目ですが、ビジネスサイトやブログ、ヘッダーやタイトルにも使えそうです。
2. Allura

Alluraの華やかさは、結婚式の招待状や結婚式場のウェブサイトで活躍します。ブランドのロゴやサイトのタイトルにも適しています。
3. Tangerine

Tangerineは文字の傾斜が少なく、昔の印刷物のような雰囲気があります。クラシックとファンタジーの間といったスタイルで、サイトをオシャレにしたい場合に検討したい選択肢です。
4. Cookie

Cookieもまた、あらゆるタイプのサイトに適したフォントです。線が比較的太いのが特徴で、ロゴやタイトルにおすすめです。
5. Herr Von Muellerhoff

Herr Von Muellerhoffは、少し読みにくさがありますが、品があり、サイト全体に華やかな印象をもたらすことができます。
6. Precious

Preciousは、タイトルやヘッダーに適した曲線を多用した美しいフォントです。上の「P」からもわかるように、特に大文字にアクセントが施されており特徴的です。イルミネーション(写本装飾)のレンダリングから着想を得ています。
7. Scribble

Scribbleは、今回ご紹介するフォントの中でも特にカジュアルで、実際の手描き文字が忠実に再現されています。派手さこそありませんが、繊細で美しいフォントです。文字間隔が広く、まるで誰かが紙にペンを走らせているような見た目が特徴です。
8. La Sonnambula

La Sonnambulaは、華やかな装飾要素が少なく、カリグラフィー用のペンで書かれたようなおしゃれな魅力があります。レストランのロゴやメニューでよく見られるようなスタイルで、様々なシーンに利用できます。
9. Popsies

Popsiesは、サイトのデザインを際立たせるのにおすすめです。例えば、コンテンツに手書きしたようなサインを表示したり、ブログの小見出しを手書きに見せたりしたい場合に適しています。
メインとなる文章にちょっとしたアクセントを加えるのに使用したいフォントです。
10. Agatha

Agathaも全体としてカジュアルな印象を持っていますが、装飾にこだわりのあるフォントです。
クールで硬い印象をもつ曲線の代わりに、各文字に長めで緩やかな曲線が施されています。Popsies同様、名前のサインを載せるのに適した選択肢です。
11. 18th Century Kurrent

サイトに華やかさを与えたい場合は、18th Century Kurrentもおすすめです。かなり読みにくいため重要な情報には使えませんが、独自の魅力的なスタイルを持っています。また、テキストを透過してバナーの背景に使用するという手もあります。
あくまでデザイン要素として、筆記体を見せたいという場合に適しています。
12. Self Deception

Self Deceptionも素敵な筆記体フォントです。ゆるやかで繊細な曲線と細い線と太い線の組み合わせが、本物の筆記体のように見せてくれます。
13. Lemon Jelly

Lemon Jellyは大胆な印象を持つ筆記体フォントで、太く強調された線が特徴です。
各文字の構成は平凡ですが、文字から文字へのつながりが独特で、特にロゴに適しています。
14. Lovely Coffee

Lovely Coffeeも注目に値します。家の表札に見られるような手書きのレンダリングの印象を持ち、リラックスした雰囲気があるものの、フォーマルな用途にも向いています。
15. The Scientist

The Scientistは、やや読みにくさがありますがインパクトがあります。多くの合字や独自のスタイル要素があり、サインやヘッダー、タイトル、サブセクションを見せるためのアクセントにぴったりです。
また、クラシックな外観を作りたいサイトにもおすすめです。
16. Attraction

Attractionは、アメリカのスポーツチームのロゴのようなデザインを思わせる、個性的で大胆なフォントです。断定的かつ明瞭で、目に楽しく、本文に使用できるほどの読みやすさはありませんが、サイト上のあらゆる要素に使えそうです。
17. Streetwear

Streetwearもまた、ひと昔前のレトロな雰囲気を持つフォントです。1970年代のファッションやスポーツシーンで使われていたフォントにインスピレーションを受けています。明るい印象を持ち、「ヴィンテージ感」を出したいサイトに理想的です。
18. Cadency

今時のフォントならCadencyもおすすめです。線が太いため、ヘッダーやタイトルなど、目を引きたいテキストに使ってみてください。
19. Bayshore

Bayshoreは、1980年代に影響を受けたフォントです。これはモノラインフォントと呼ばれ、手書きの風合いを持ち、1980年代の外国のヘアケア製品やテレビ番組で使われていたレンダリングを彷彿とされます。こちらもレトロな雰囲気が欲しいサイトに適しています。
20. Retro Vibes

レトロつながりで、Retro Vibesも。厳密には筆記体ではありますが、50の合字が筆記体に近い印象を与えてくれます。1970年代のアメリカの雑誌の表紙から飛び出してきたかのようなスタイルです。レトロフォントについてはこちらで詳しくご紹介しています。
21. Harlott

Harlottは、今回ご紹介する他のフォントと比べるとやや異質で、古い書物に書かれたカリグラフィーやかなり昔の手書きのレンダリングを彷彿とさせるものがあります。目を引くデザインのため、強調したいコンテンツの近くに使用すると効果的です。
22. Shalma

Shalmaもおすすめしたいフォントで、Lovely Coffeeと似て、家の表札などに使用されていそうな雰囲気を持っています。大胆でありながら繊細な曲線には、女性的な印象と芯の通った印象がちょうどよく組み合わされています。
23. Maghrib

Maghribは、ロゴやヘッダーに本物の筆跡のような質感を与えることができるおすすめのフォントです。サイトのヘッダーに使用するのが良いアイデアかもしれません。ガツンと目立ち親しみやすいフォントでありながら、他にはないタッチも光ります。
24. Tomatoes

サイトの印象をちょっと変えたいという場合には、Tomatoesもおすすめです。線は軽く繊細で、文字周りの余白が多めなのが特徴です。合字はインクペンを使ったときの筆圧の変化のように、バリエーションが豊富です。
25. Amsterdam

Amsterdamは、クラシックなタイポグラフィの要素と今時のフォントを組み合わせた美しいフォントです。サイトで華やかな印象を出したい際に検討したい選択肢です。
26. Make Summer Fun

Make Summer Funはその名の通り楽しく軽快で、学校で配られた先生の手書きのプリントのような雰囲気を持っています。教育、子供、手芸、アート、ペットなど、あらゆる分野のサイトで活躍しそうです。また、場合によっては商用サイトでも使用できるかもしれません。
27. Lovtony

Lovtonyは、通常の筆記体よりもラフな曲線を特徴とするChicken Scratch(チキンスクラッチ)フォントと言えます。
軽快で、長い曲線が印象的で、特定の単語にスタイルを与えたり、バナーやヘッダーを作成したりするのにおすすめです。サイトのトップページやAboutページの名前のサインなんかにも合いそうです。
28. Feeling lonely

その名前とは裏腹に、Feeling lonelyも素敵なフォントです。筆記体フォントとしてはこれと言って個性的ではありませんが、上のように、単語の前後に美しい装飾があり、流れるような表情を与えることができます。
29. Unicorn Confetti

Unicorn Confettiは、線が細く繊細な雰囲気を持つフォントですが、文字の配置が個性的です。本当に手書きで書かれているかのように見えて、あらゆるサイトデザインに向いています。
30. Hamster Script

Hamster Scriptは、グラフィック感の強いがっちりとした大胆なフォントです。四角いエッジとサインペインティングのような見た目が魅力的で、さまざまバナー、サイン、タイトルに使用できます。
31. Glory Culture

Glory Cultureは手描きのブラシストロークが気持ちのいいフォントです。不透明度にはいくつかバリエーションがあり、サイトのヘッダーやタイトルに個性的なタッチを加えて、おしゃれなサイトを作ることができます。ブランドロゴとの相性も抜群です。
32. Berrylicious

Berryliciousもブラシストロークを取り入れたフォントです。文字の高さに様々なバリエーションがあり、単語の前後に華やかな装飾が施されます。あらゆる分野で使用できそうです。
また、その読みやすさから、SNSで使用するグラフィックにも適しています。
33. Shathika

最後にご紹介するShathikaは、カリグラフィーを彷彿とするデザインに、合字には美しく大胆な装飾が施されています。
上品さがあり、使用すると全体のデザインがぱっと洗練された雰囲気になりそうです。
まとめ
真に美しく、サイトに華を与えてくれる筆記体フォントは、今回ご紹介したとおり多数存在します。スクリプト書体はサイト全体で使用できるフォントではありませんが(特に本文には使用しないこと)。タイトル、ロゴ、バナー、ヘッダー、サブヘッダー、名前のサインなど、さまざまな使い道があります。
筆記体フォントは、18世紀に作られた活版印刷がルーツです。デジタルで活版印刷の奥深い見た目を模倣するおしゃれなフォントで溢れる今日、あえてヴィンテージな雰囲気を出したり、サイトに個性を出したりするために、筆記体フォントもよく使用されています。
今回ご紹介したものの中から、サイトにぴったりのフォントが見つかりますように。
メールに適したおすすめのフォントはこちらでご紹介しています。