Webサイトを作る時にGoogle Fontsを利用すると一気に雰囲気がオシャレになりますよね。
しかし種類がとても多く、そのうえ自分のサイトで使うときは日本語と交えて使うため選考が難しいと感じるのではないでしょうか？
今回はそんなあなたのために当サイトで厳選したフォントを、更に日本語のサンプルと交えて簡単にデザインを作ってみましたのでご紹介したいと思います。
プロフィール タカハシ@VOGELKUCK
Webデザイナー歴20年、Adobe歴25年のフリーランス。これまで多数の大手企業Webサイト制作を行いながら同時にWebメディアVOGELKUCKを運営しています。
Google Fontsとは？
そもそもGoogle Fontsって何？という方はご紹介しているサイトが大量に存在しますのでこのページでは省略させて頂きます。
簡単に言うと無料で利用できるクラウドフォントサービスですが、詳しくは“google fonts 使い方”などのキーワードで探してみてくださいね。
ゴシック系フォント
Source Sans Pro
似たようなフォントはとても多いのですが縮小してみると見づらかったり、ちょっとしたクセが気になったりします。
しかしSource Sans Proはクセがなく拡大縮小してもとても見やすいため、サイトのベースフォントとして利用することが多いです。
ちなみに上記デザインの日本語は同じくGoogle FontsのNoto Sans CJK JPを利用して表現しています。
- Source Sans Pro ※Source Sans 3に変更になりました。
Yanone Kaffeesatz
Yanone Kaffeesatzは細いラインとコンデンスドな形がとてもスタイリッシュなフォントです。
雰囲気がテラスハウスのロゴに似ていますが、まさにあのスタイリッシュな雰囲気を表現したい場合はこのフォントを試してみてください。
Raleway
このRalewayもサイトをスマートに、スタイリッシュに表現してくれます。細いラインでデザインしましたが太さが9種類もあります。
飾りがなくニュートラルに作られていますが、それでいて個性がありサイトを上質に表現してくれるフォントですね。
明朝系フォント
Playfair Display
クラシカルに、上品にサイトを表現したい場合はこのPlayfair Displayを使うことが多いです。ただし文字が小さくなると多少読みづらくなるため、似た印象で読みやすいSource Serif Proで表現した方が良いかもしれません。
なお、上記デザインの日本語フォントはTypeSquareで利用可能な日本語Webフォント「A1明朝」で表現しています。
Cinzel
古代ローマ字をベースに現代風にアレンジしたというこのフォントは、威厳・博物館的なアカデミックな印象を表現したい場合にとてもハマると思います。
一方で、ウェディング系でも上質なクラシカル感が表現できるのでおすすめです。似たフォントがありますがCinzelが最もバランスとりやすくて好きですね。
Nixie One
Nixie Oneはゴシックっぽい印象があります。一応ヒゲがありますので明朝系でご紹介させて頂きましたが、どちらも混ざっていると思います。その通りスタイリッシュでありながらも知的な印象も表現されたフォントです。
手書き風フォント
Amatic SC
ラフな手書きでオシャレに書かれたAmatic SCは、サイトをカジュアルに表現したい時に利用したいフォントです。
ゴシックと違いバランスをとるために多少工夫が必要ですが、ラフな感じはサイトをとても豊かに表現してくれます。アパレル・サーフ系にハマりそうです。
Kranky
Krankyはまた違ったラフな印象を与えるフォントです。
こちらは少し文字間隔を開けて子供向けのサイトでカラフルに利用すると良いかもしれませんね。オシャレな子供向けサイトにハマりそうです。
Life Savers
こちらはスッキリしながら、文字の位置を少しズラした形がワクワク感を感じさせるフォントです。
ラフな感じにしたいけれど、やりすぎたくないような時に、このフォントはバランス良くハマってくれますね。
まとめ
Google Fontsは今や800種類以上ありますが、そんな中から厳選した9書体をご紹介してまいりました。更にイメージが伝わりやすいよう日本語の文字と組み合わせてみましたが、いかがでしたでしょうか？厳選書体はどれもバランス良く使いやすいものばかりです。
現在では日本語のフォントもリリースされ始めていますので、気になるフォントなどあれば積極的に利用してみてくださいね！
