Webサイトの印象はフォントで大きく変わります。同じレイアウトでもフォントを替えるだけで、堅く見えたりやさしく見えたりします。
この記事ではGoogle Fontsで無料で使える日本語フォントのうち、制作の現場で候補になりやすい16書体を、ゴシック体・明朝体・丸ゴシック体に分けて紹介します。
Google Fontsとは
Googleが提供しているWebフォントのサービスです。日本語や英語など多くの言語に対応しており、商用利用もできます。ライセンスはフォントごとに確認できます。案件で使うときは、各フォントのページを見ておくと安心です。
フォントを選ぶときの3つの視点
- 誰に、どんな印象を届けたいか（信頼感、やさしさ、高級感など）
- 本文の小さいサイズでも読みやすいか
- ウェイト（太さ）の種類が豊富で、見出しと本文に強弱をつけやすいか
ゴシック体
Noto Sans JP
GoogleとAdobeが共同開発した、定番のゴシック体です。シンプルでクセが少なく、小さなサイズでも読みやすいのが特徴です。ウェイトが豊富で多言語にも対応しているため、迷ったときは、まず候補に入れたい一本です。ほかのフォントと組み合わせる土台にもしやすく、幅広いデザインに合わせられます。
Sawarabi Gothic（さわらびゴシック）
Noto Sans JPと比べてやわらかさがあり、本文での使用を想定したゴシック体です。小さなサイズでも文字がつぶれず、幅広いデザインで活用できます。
Zen Kaku Gothic New（ZEN 角ゴシック New）
モダンでシャープな印象のゴシック体です。バランスや文字の間隔まで、読みやすさに配慮されています。全体に小ぶりで上品なので、見出しにも本文にも使えます。余白を広めに取ったレイアウトと相性が良い書体です。
M PLUS 1
Noto Sans JPと同様に汎用性が高く、よく使われるフォントです。かな文字に丸みがあり、親しみやすくやわらかい印象になります。可愛らしさやポップさを出したいデザインに向いています。ウェイトが豊富で、見出しにも本文にも使えます。
BIZ UDPGothic
モリサワが提供するユニバーサルデザインフォントで、より多くの人が読みやすいように設計されています。情報量の多いサイトや、読みやすさを優先したい場面に向いています。大きいサイズにしてもバランスが崩れにくい点も特徴です。
Kosugi（小杉）
シンプルで直線的な、クセの少ないゴシック体です。可読性が高く、どんなデザインにも合わせやすい書体です。
明朝体
Noto Serif JP
Noto Sans JPと同じく、GoogleとAdobeが共同開発した明朝体で、広く使われています。日本語が美しく見えるよう洗練された設計で、可読性も高い書体です。信頼感や高級感を出したいデザインに向いています。
Sawarabi Mincho（さわらび明朝）
さわらびゴシックと同様に、本文での使用が想定された明朝体です。丸みのあるやわらかいデザインで、ほどよい太さの安定感があります。やさしい雰囲気を出したいデザインに向いています。
Shippori Mincho（しっぽり明朝）
エッジが丸く、なめらかなタッチのオールドスタイルの明朝体です。上品な印象で、縦書きでも横書きでも整って見えます。信頼感やスタイリッシュさを出したいデザインに向いています。似た書体のShippori Mincho B1は、Shippori Minchoに墨だまりを加えたデザインです。
Zen Old Mincho（ZENオールド明朝）
クラシックなデザインで、毛筆の流れるようなやわらかさがあります。曲線的なひらがなと漢字のバランスが美しく、古風な印象です。和風のデザインや、誠実さを出したい場面に向いています。
Hina Mincho（ひな明朝）
ひな人形をイメージして作られた、古風なオールドスタイルの明朝体です。全体に丸みがあり、細めの漢字と墨だまりが特徴です。伝統や品格を出したいデザインに向いており、見出しなど大きめのサイズで使うと特徴が活きます。
BIZ UDPMincho
BIZ UDPGothicと同様に、モリサワが提供するユニバーサルデザインフォントです。明朝体でありながら横線を太めに設計し、読みやすさに配慮しています。汎用性が高く、読みやすさを保ちつつ明朝体の雰囲気を出したいときに向いています。
丸ゴシック体
Zen Maru Gothic（ZEN丸ゴシック）
深い丸みのある、ナチュラルでやさしい印象の丸ゴシックです。やや縦長のフォルムで読みやすく、見出しにも本文にも使えます。ノスタルジックな雰囲気もあり、安心感や可愛らしさを出したいデザインに向いています。
M PLUS Rounded 1c
丸みのあるフォルムで、可愛らしく親しみやすい印象の書体です。ウェイトが豊富なので、デザインに合わせて太さを選べます。
Kiwi Maru（キウイ丸）
手書き風の丸みがあり、可読性が高く親しみやすい丸ゴシックです。カジュアルなデザインや、子ども向けのデザインと相性が良い書体です。
Kosugi Maru（小杉丸）
Kosugiと同様に、直線的でスタイリッシュな印象の丸ゴシックです。モダンな雰囲気で、小さいサイズでも読みやすい書体です。
Webサイトで使うときのポイント
- 読み込むウェイトは、本文用と見出し用の2〜3種類に絞ります。日本語フォントは容量が大きく、ウェイトを増やすほど表示が遅くなりやすいためです。
- 使う書体は、多くても2種類程度に抑えると統一感が出ます。
- 行間と字間は、フォントと同じくらい印象を左右します。本文は行間をやや広めに取ると読みやすくなります。
- PCとスマホやブラウザでは見え方が変わります。実際の画面で確認してから決めましょう。
まとめ
フォント選びは、デザインの印象を大きく左右します。DEGINAのホームページ制作でも、デザイナーがサイトの目的や読み手に合わせて、案件ごとにフォントを検討しています。
気になる書体があれば、まず見出しや本文に当てて、読みやすさと雰囲気を確かめてみてください。
デジタルとデザインの力で
課題を解決します
Webやデザインのお悩み、まずはお気軽にご相談ください。
お客様の課題に合わせた、最適なサービスをご提案いたします。
