べんりワザ・見た目をワンランク上げる

おすすめのGoogle Fonts

Google Fontsは数が多すぎて、どれを選べばいいか迷いがち。まるっこい・すっきり・しっとり・手書き風・インパクト大・英字のおしゃれ系のタイプ別に、実際に文字を出した見本つきで22種類をたっぷり紹介します。

Google Fontsは無料でたくさんのフォント(文字の形)が使えて便利ですが、種類が多すぎてどれを選べばいいか分からない、というのが最初のかべです。そこでこの記事では、初心者でも失敗しにくいおすすめをタイプ別に、実際に文字を出した見本つきでまとめました。全部使う必要はありません。眺めて「これ好き」と思うものを1つ2つ、ブックマークしておきましょう。

べんりワザGoogle Fontsで文字の顔を変えるそもそもフォントの入れかたが分からない人は、まずこちらから。読みこんで指定するまでの手順を紹介しています1

タイプ1:まるっこくて、やさしい(丸ゴシック)

角がまるい丸ゴシックは、やわらかくて親しみやすい印象。子ども向けのページや、あたたかい雰囲気を出したいときにぴったりです。日本語フォントの中でもいちばん人気のタイプ。

M PLUS Rounded 1c

丸ゴシックの大定番。太さも7段階から選べて使いやすい。

「しまちゃんのおへや」という文字が、角のまるいやわらかな丸ゴシック体で大きく表示されている見本
まるっこくて読みやすい、迷ったらこれ。本文にも見出しにも合う万能タイプです。

M PLUS Rounded 1c

Zen Maru Gothic

ふところが広く、ふっくら上品な丸ゴシック。

「しまちゃんのおへや」が、ふっくらまるみのある上品な丸ゴシック体で表示されている見本
M PLUSより少し落ち着いた大人っぽさ。やさしいけれど品もほしいときに。

Zen Maru Gothic

Kosugi Maru

軽やかで細めの丸ゴシック。すっきりかわいい。

「しまちゃんのおへや」が、細めで軽やかな丸ゴシック体で表示されている見本
線が細めなので、たくさん文字を並べても軽い印象。ポップだけどうるさくない。

Kosugi Maru

Kiwi Maru

まるでハンコのような、レトロでやわらかい丸ゴシック。

「しまちゃんのおへや」が、ハンコ風のレトロでやわらかい丸ゴシック体で表示されている見本
どこかなつかしい、ぽってりした形。個性を出したい見出しにおすすめ。

Kiwi Maru

タイプ2:すっきり読みやすい(ゴシック)

かざりの少ないゴシック体は、どんな場面でもハズさない安心のタイプ。長い文章でも読み疲れせず、まじめ・清潔な印象を与えます。「まず1つ入れるなら」の筆頭。

Noto Sans JP

Googleが作った、世界標準の日本語ゴシック。困ったらこれで間違いなし。

「しまちゃんのおへや」が、クセのないすっきりした標準的なゴシック体で表示されている見本
クセがなく、どんなページにもなじみます。太さも9段階そろっていて、本文から見出しまで1つでまかなえます。

Noto Sans JP

Zen Kaku Gothic New

角ゴシックをていねいに整えた、現代的で美しいゴシック。

「しまちゃんのおへや」が、現代的でていねいに整えられた角ゴシック体で表示されている見本
Notoよりほんの少しおしゃれ。きれいめなサイトにしたいときの定番です。

Zen Kaku Gothic New

BIZ UDPGothic

「ユニバーサルデザイン」フォント。誰にでも読みやすいよう設計されている。

「しまちゃんのおへや」が、太めでくっきりした読みやすさ重視のゴシック体で表示されている見本
文字がくっきり大きめで、とにかく読みやすさ最優先。資料っぽいページや、大事なお知らせに向いています。

BIZ UDPGothic

タイプ3:しっとり上品(明朝)

たての線が太く、はらいのある明朝体は、大人っぽくて上品。落ち着いた雰囲気や、和風・高級感を出したいときに効きます。見出しに使うとしまります。

Shippori Mincho

「しっぽり」の名の通り、しっとり美しい明朝。和のページに。

「しまちゃんのおへや」が、しっとりとして美しい明朝体で表示されている見本
はらいやとめがきれい。和菓子屋さんのような、しっとりした世界観にぴったり。

Shippori Mincho

Zen Old Mincho

昔ながらの本の明朝を思わせる、正統派の明朝。

「しまちゃんのおへや」が、昔ながらの本のような正統派の明朝体で表示されている見本
物語や読み物のページに。ちゃんとした本を読んでいる気分になります。

Zen Old Mincho

Sawarabi Mincho

線が細めで、軽やかでモダンな明朝。

「しまちゃんのおへや」が、細めで軽やかなモダンな明朝体で表示されている見本
明朝の上品さはほしいけど重くしたくない、というときに。すっきりした余白が生きます。

Sawarabi Mincho

タイプ4:手書き風・かわいい

まるで人が書いたような手書き風のフォント。やわらかく、あたたかく、親しみのある雰囲気に。見出しやひとことメッセージに使うと、「手作り感」が出ます。

Yomogi

やわらかいえんぴつ書きのような、ゆるくてかわいい手書き。

「しまちゃんのおへや」が、やわらかいえんぴつ書きのようなゆるい手書き風で表示されている見本
肩の力がぬけた、ゆるふわな雰囲気。日記や自己紹介にぴったりです。

Yomogi

Yusei Magic

マジックペンで書いたような、元気でポップな手書き。

「しまちゃんのおへや」が、マジックペンで書いたような元気でポップな手書き風で表示されている見本
太めで元気いっぱい。ポスターや、目立たせたいひとことに向いています。

Yusei Magic

Zen Kurenaido

ボールペンでさらっと書いたような、ナチュラルな手書き。

「しまちゃんのおへや」が、ボールペンでさらっと書いたようなナチュラルな手書き風で表示されている見本
自然でクセが少なめ。手書き風だけど本文にも使えるバランスのよさ。

Zen Kurenaido

Hachi Maru Pop

まんが風のぷっくりかわいい手書き。とにかく甘い雰囲気。

「しまちゃんのおへや」が、まんが風でぷっくりと甘くかわいい手書き風で表示されている見本
まるでシールやステッカーのような甘さ。かわいさ全開のページに。

Hachi Maru Pop

タイプ5:インパクト大(見出し・タイトル向け)

とても太かったり個性が強かったりする、見出し専用のタイプ。本文に使うと読みにくいので、タイトルやロゴ、目立たせたい1行だけに使うのがコツです。1か所キメると全体がしまります。

Dela Gothic One

これでもかと太い、超極太ゴシック。とにかく目立つ。

「しまちゃんのおへや」が、これ以上ないほど太い超極太ゴシック体で表示されている見本
タイトル1行にドンと使うと迫力満点。ポスターの見出しにおすすめ。

Dela Gothic One

RocknRoll One

太めで角がまるい、元気でポップな見出しフォント。

「しまちゃんのおへや」が、太めで角のまるい元気でポップな見出し向けフォントで表示されている見本
極太だけどまるくて親しみやすい。楽しい雰囲気の見出しにどうぞ。

RocknRoll One

Reggae One

グラフィティ風の、クセが強くてカッコいい見出しフォント。

「しまちゃんのおへや」が、グラフィティ風でクセが強くカッコいい見出し向けフォントで表示されている見本
ストリート感のあるおしゃれさ。個性でガツンといきたいときに。

Reggae One

DotGothic16

昔のゲームみたいな、ドット(点)で描いたレトロフォント。

「しまちゃんのおへや」が、昔のゲームのようなドット(点)で描かれたレトロなフォントで表示されている見本
レトロゲーム好きにはたまらないドット文字。ゲームやピクセルアートのページに最高です。

DotGothic16

タイプ6:英字のおしゃれフォント(ロゴ・見出しに)

日本語には効きませんが、英語のロゴやタイトルに使うとおしゃれになるのが英字専用フォント。サイト名やコーナー名など、英語のひとことに添えてみましょう。

Poppins

まんまるで幾何学的な、今どきの人気サンセリフ。

「Shima’s Room」という英字が、まんまるで幾何学的な今どきのサンセリフ体で表示されている見本
oがまんまるでかわいい。英語のサイト名やボタンをおしゃれに見せる定番です。

Poppins

Pacifico

なめらかな筆記体。サインみたいで、こなれた印象に。

「Shima’s Room」が、なめらかな筆記体でサインのように表示されている見本
カフェの看板のような雰囲気。ロゴやキャッチコピーを1行だけおしゃれに。

Pacifico

Bebas Neue

背が高くてスタイリッシュな、全部大文字のフォント。

「Shima’s Room」が、背が高く全部大文字でスタイリッシュに表示されている見本
ずらっと並べるとポスターのようにカッコいい。数字やタイトルによく合います。

Bebas Neue

Playfair Display

上品でクラシックな明朝系(セリフ)。高級感を出したいときに。

「Shima’s Room」が、上品でクラシックなセリフ体で高級感をもって表示されている見本
ファッション誌のような大人っぽさ。英語の見出しに気品をそえます。

Playfair Display

選ぶときの3つのコツ

たくさん見てきましたが、実際に使うときはこれだけ意識すれば大丈夫です。

コツ中身
本文と見出しは分けてよい本文は読みやすいゴシック、見出しだけ好きなフォント:が失敗しにくい
使うのは1〜2種類まであれこれ混ぜると散らかる。読みこみも重くなる
雰囲気で選ぶやさしい=丸ゴシック、上品=明朝、元気=手書き、と気分で選べばOK

組み合わせの見本(見出し×本文)

見出しと本文で2種類を組み合わせるなら、この記事の中から選んだ失敗しにくい定番ペアがこちらです。

作りたい雰囲気見出し本文
やさしい・かわいいKiwi MaruM PLUS Rounded 1c
きれいめ・今どきZen Kaku Gothic NewNoto Sans JP
和風・上品Shippori MinchoNoto Sans JP
元気・ポップDela Gothic OneZen Maru Gothic
英語ロゴ+日本語本文PoppinsNoto Sans JP

じつは、同じフォントの太さちがい(見出しは太く・本文は細く)でまとめるのも立派な組み合わせです。種類を増やさないぶん読みこみが軽く、統一感もくずれません。

日本語フォントを重くしないコツ

日本語フォントはひらがな・カタカナ・漢字で文字数がけた違いに多く、英字フォントよりファイルが大きめです。とはいえGoogle Fontsは、ページで実際に使われている文字のかたまりだけを小分けに配信してくれるので、ふつうに使うぶんは心配しすぎなくて大丈夫。意識するのは2つだけです。

  • 太さ(ウェイト)は使うものだけ選ぶ:全段階ではなく、本文用と見出し用の2つで十分
  • 種類は1〜2つまで:3種類以上はデザインも散らかりやすい

まとめ

  1. Google Fontsはタイプ別に選ぶと迷わない:丸ゴシック / ゴシック / 明朝 / 手書き / インパクト / 英字
  2. 本文は読みやすいゴシック、見出しだけ好きなフォント、が失敗しにくい黄金パターン
  3. 使うのは1〜2種類まで。雰囲気で気軽に選んでOK
CSSフォントを選ぼう選んだフォントをCSSで指定するfont-familyの書き方は、CSSコースのこの回で

よくある質問

日本語で使えるGoogle Fontsはどれ?
この記事のタイプ1〜5(丸ゴシック・ゴシック・明朝・手書き風・インパクト系)で紹介しているものは、すべて日本語対応です。タイプ6の英字フォントは日本語には効かないので、日本語用のフォントと組み合わせて使います。
Google Fontsは商用サイトでも無料で使えるの?
使えます。すべてオープンソースのライセンスで提供されていて、個人・商用を問わず無料。クレジット表記もいりません。
見出しと本文でフォントを分けてもいい?
分けてOKです。本文は読みやすいゴシック、見出しだけ好きなフォント、が失敗しにくい定番です。ただし1ページで使うのは2種類までにすると、見た目も読みこみも軽くまとまります。