UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

ウェブサイト構成する要素の1つに「フォント」があります。
意外と忘れがちですが、フォントを変えることでウェブサイト全体の印象も変わります。

例えば、明朝体だと高級感のある印象になりますし、比較的細いゴシックのフォントを見出しや装飾として使用すると、スマートな印象になります。

しかし、フォントを指定したとしても、アクセスしたユーザーがそのフォントを持っていなければ表示することはできません。
それを解決し、すべてのデバイスで同じフォントを表示できるようにする仕組みがWebフォントです。

今回はWebフォントサービスの中でも有名なGoogle Fontsの中から、見出しや装飾として使いやすそうな筆記体・手書きフォントをいくつか紹介します。

筆記体・手書き風フォント

Tangerine

https://fonts.google.com/specimen/Tangerine

「d」や「h」「f」などのはらいが飛び跳ねるようになっているフォントです。

Miss Fajardose

https://fonts.google.com/specimen/Miss+Fajardose

全体的にはらいなどがくるんと回っているフォントです。
かなり装飾が特徴的なので、読むためというよりあしらいに使うのがピッタリです。

League Script

https://fonts.google.com/specimen/League+Script

全体的にかなり線が細いフォントで、繊細さを感じます。
また、文字間が繋がっているので流れるように書いた印象を持たせられます。

Monsieur La Doulaise

https://fonts.google.com/specimen/Monsieur+La+Doulaise

大文字のラインが特徴的で、全体的にスピードを感じさせるフォントです。

Damion

https://fonts.google.com/specimen/Damion

少しラフ感のあるオシャレなフォントです。
今まで紹介したフォントに比べると線が太く、文字の印象を強められます。

Pacifico

https://fonts.google.com/specimen/Pacifico

少し太めで、Damionからさらに丸みのあるポップなフォントです。

Herr Von Muellerhoff

https://fonts.google.com/specimen/Herr+Von+Muellerhoff

とにかく全体的に鋭く、スピード感の強いフォントです。
手書きで書いたサインのような雰囲気も感じるので、使い方によっては高貴な雰囲気も出せそうです。

Bad Script

https://fonts.google.com/specimen/Bad+Script

こちらは1文字1文字丁寧に書いたようなフォントです。
線の流れが滑らかで、シンプルさと落ち着いた雰囲気があります。

Rock Salt

https://fonts.google.com/specimen/Rock+Salt

最後は荒々しく、名前の通りロックな印象を受けるフォントです。

まとめ

Webフォントを使うことで、どのデバイス・ユーザーでも同じフォントを表示させられます。
筆記体・手書きフォントを適切に使うことでウェブサイトのイメージを変えられますが、その代わりに文章自体が読みにくくなってしまう可能性もあります。

使いどころは注意しつつ、適切に使って表現の幅を広げましょう。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！