厳選9書体!おすすめのGoogle Fontsをサンプル交えてご紹介

厳選9書体!おすすめのGoogle Fontsをサンプル交えてご紹介

この記事にはプロモーションが含まれています

サイトを作る時にGoogle Fontsを利用すると一気に雰囲気がオシャレになりますよね。
しかし種類がとても多く、そのうえ自分のサイトで使うときは日本語と交えて使うため選考が難しいと感じるのではないでしょうか?

今回はそんなあなたのために当サイトで厳選したフォントを、更に日本語のサンプルと交えて簡単にデザインを作ってみましたのでご紹介したいと思います。

執筆者紹介
Web/UIデザイナー歴17年目のフリーランス。これまで数々のWebデザインスクール取材&体験を行ってきた経験をもとにしたWebメディアを運営。多数の大手企業Webサイト制作経験あり。» 詳細はこちら

タップできる目次

Google Fontsとは?

そもそもGoogle Fontsって何?という方はご紹介しているサイトが大量に存在しますのでこのページでは省略させて頂きます。

簡単に言うと無料で利用できるクラウドフォントサービスですが、詳しくは“google fonts 使い方”などのキーワードで探してみてくださいね。

ゴシック系フォント

Source Sans Pro

似たようなフォントはとても多いのですが縮小してみると見づらかったり、ちょっとしたクセが気になったりします。

しかしSource Sans Proはクセがなく拡大縮小してもとても見やすいため、サイトのベースフォントとして利用することが多いです。

ちなみに上記デザインの日本語は同じくGoogle FontsのNoto Sans CJK JPを利用して表現しています。

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

こちらはスッキリしながら、文字の位置を少しズラした形がワクワク感を感じさせるフォントです。

ラフな感じにしたいけれど、やりすぎたくないような時に、このフォントはバランス良くハマってくれますね。

まとめ

厳選9書体!おすすめのGoogle Fontsをサンプル交えてご紹介

Google Fontsは今や800種類以上ありますが、そんな中から厳選した9書体をご紹介してまいりました。更にイメージが伝わりやすいよう日本語の文字と組み合わせてみましたが、いかがでしたでしょうか?厳選書体はどれもバランス良く使いやすいものばかりです。

現在では日本語のフォントもリリースされ始めていますので、気になるフォントなどあれば積極的に利用してみましょう。

ちなみにAdobe CCにはモリサワなどの日本語書体が324書体ほど無料で使えるAdobeフォントというサービスが付属します。

Adobe CCを年額39,980円(税込)で手に入れる方法についても掲載しておりますので、興味のある方はぜひご覧ください

よかったらシェアしてね!

執筆者

VOGELKUCK編集部のアバター VOGELKUCK編集部 Koichi Takahashi

Web/UIデザイナーになって17年目。普段はフリーランスで活動しながらも、このサイトではデザイナー目線で様々なサービスや商品のご紹介、実践的解説などを行っています。これまで数々の大手サイト制作・ブランド開発の経験あり。9才児のパパでもあります。

タップできる目次