今回はWebフォントの代表格「Google fonts」の数ある中から、ホームページ制作でよく使用する日本語フォントをご紹介します。
使用するフォントによって、サイト全体のトンマナが整い、より魅力あるデザインが構築できます。

｜ゴシック体｜

Noto Sans Japanese

使用率ナンバーワンのフォントです。GoogleとAdobeが共同で開発したフォントで、クセがなく可読性に優れ、太さの種類（ウェイト）も豊富に揃っているため、使い勝手の良さも持ち合わせています。

Zen Kaku Gothic New

一文字の大きさにゆとりがあり、長い文章でも適度な抜け感が出て読みやすいフォントです。またスッキリとした文字ながら親しみやすい印象もあります。太さの種類（ウェイト）も豊富なので、こちらも使い勝手の良いフォントです。

M Plus 1p

カジュアルで、かわいい印象のフォントです。太さの種類（ウェイト）も豊富です。

｜明朝体｜

Noto Serif Japanese

明朝体のフォントの中で、使用率の高いフォントです。クセがなく誰もが読みやすく、汎用性の高い明朝体です。太さの種類（ウェイト）も豊富に揃っています。

Zen Old Mincho

Zen Kaku Gothic同様に一文字の大きさにゆとりがあり、適度な抜け感が落ち着きを与えるフォントです。また漢字とかなの大きさのバランス、曲線の柔らかさが絶妙で、雰囲気を感じさせます。

Shippori Mincho

ひらがなの流れが特徴的で、他の明朝体よりも上質で格式があり、伝統や信頼感を感じられるフォントです。

｜丸ゴシック体｜

Zen Maru Gothic

Zen Kaku Gothic同様に一文字の大きさにゆとりがあり、優しさと安心感が感じられるフォントです。他の丸ゴシック体と比べて、やや縦長なフォルムのため、可読性を確保しています。太さの種類（ウェイト）も豊富です。

Kiwi Maru

かなのフォルムが特徴的で、少し手書き感のあるカジュアルな印象を与えます。太さの種類（ウェイト）は3種類で、やや細めとなっています。

Webフォントのメリット・デメリット

｜メリット｜

《無料でいろいろなフォントが選べ、企業、商品イメージに合ったフォントが使用できる》
ホームページのデザインは、色、写真、イラストなどで変わります。そしてフォントも同様に重要な要素です。それが無料で、数ある中から選べてホームページに搭載できるのは、ホームページ全体のデザインに大きな影響を与えます。

《デバイス、OSに関係なく、統一のフォントになるため、サイトイメージが変わることがない》
スマートフォンの場合、iOSとAndroidでは搭載しているシステムフォントが違います。PCの場合でも同様に、WindowsとMacではシステムフォントが違います。ホームページのデザインを指定するCSSで、サイト内のフォントをゴシック体と記述しても、各OS、デバイスによって、別のゴシック体でホームページが表示されます。

《SEOに強くなる》
タイトル文字を画像で表示すると、Google検索エンジンには理解してもらえず、SEOの観点ではマイナスとなります。しかしWebフォントを使用すると、理解してもらえるためSEOに有効です。

《文字の変更が簡単》
画像で表記している場合、変更するたびに画像編集ソフトで修正する必要があります。しかしWebフォントの場合、コード内の<h2>や<p>などを書き換えるだけなので、変更が容易です。

《レスポンシブに対応》
デバイスによって、サイトを表示する大きさが変わります。PCのウィンドウサイズも人によって変わります。Webフォントはそれらに対応ができます。

｜デメリット｜

《表示速度が遅くなる可能性がある》
Webフォントは、サーバーにあるフォントデータを読み込んで表示するため、その時のネット環境によっては、表示されるまでに一瞬〜数秒時間がかかる場合があります。
ネット環境が高速になっているため、それに気づくことはほとんどありませんが、情報量の多い日本語フォントを何個も搭載しないようにしましょう。
とにかくどの環境にあっても表示速度のデメリットを避けたい場合は、各デバイス、OSのシステムフォントを指定することをオススメします。

フォントの選び方

｜トンマナ｜

サイトのコンセプト、業種、商品などから、全体のトンマナを明確にしてフォントを決めましょう。

｜可読性｜

本文には、読みやすいフォントを選びましょう。 ホームページのイメージにもよりますが、細い明朝体を選ぶと読みづらく可読性が悪くなるため、サイト訪問者にストレスを与え、離脱につながる要因となる場合があります。 多くのホームページの本文にゴシック体が採用されているのは、可読性を考慮している結果です。

｜組み合わせで与える印象を変える｜

• 見出しがゴシック体、本文がゴシック体
• 見出しが明朝体、本文がゴシック体
• 見出しが丸ゴシック体、本文がゴシック体
• 見出しが丸ゴシック体、本文が丸ゴシック体
• 見出しが明朝体、本文が明朝体

いかがだったでしょうか。
当たり前のように表示されているホームページですが、フォントひとつをとっても多くのシーンやイメージを想定して選択しています。

グッドエスのホームページ制作はその細かな積み重ねを大切にしてデザインを構成し、より良いホームページを提供することを心がけています。