design
【WEBデザイン】フォントの選び⽅、使いやすいと思うGoogleフォント
今回はデザインにおいて重要な、フォントの選び⽅についてお話ししていきます。デザインの印象を作るものとして写真やカラーと同じくらいフォントは重要で、⽬指すイメージに合わせてフォントを⾒極めて設定していくことが必要です。
フォントにまつわる部分で、⽂字詰めや⾏間の設定に関しても、紙とWEBではそれぞれの概念があるのでその部分についても触れていきたいと思います。今実際にWEBデザインを勉強している⽅や、デザインに興味がある⽅、デザイナー初⼼者さんに参考にしていただけたらうれしいです。
フォントの選び⽅
フォントデザインの印象を決めるに当たって、⽇本語フォントは⼤きく分けて「ゴシック体」か「明朝体」、欧⽂フォントは「サンセリフ」と「セリフ」に分かれます。それぞれ印象が違うのでこの時点から、⾒極めていきましょう。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/46fa33c0ec36442ba462fa54727ad1c1/02-1.png)
⽇本語
・ゴシック体
何にでも合います。可読性からゴシック体の⽅が多く使⽤される傾向にあると思います。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/3e5a158593e74e1eb69c0b1b13d39c8d/28a2bd2c21c54dcc0423231d89d00d7d.jpg)
・明朝体
和⾵、落ち着いた、しっとりした印象になります。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/b8e748d807e24f09b3c282eea44c081e/47181679eba318930ae7bd7386fca0e5.jpg)
欧⽂フォント
・サンセリフ
セリフのない書体になります。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/ffe276d603a94645b4c18a9086de1923/05d17f447fbdd06bdcdae9964b856a0e.jpg)
・セリフ
「セリフ」とは、⽂字の線の端につけられる線・飾りのことです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/48dae269bce94861a2f9164ede5ed66c/916f123999bcaec4ba0fc4d35b84a331.jpg)
その他ポイント
・⽂字の太さ(ウエイトのファミリーがあるかないか)
太いと⼒強いイメージになりますし、細い⽅が繊細なイメージになります。
レギュラー、ミディアム、ボールドなど、⽂字の太さが選べるかもポイントです。
サイズによりますが、⽂字は太さによって印象が変わりますし視認性にも関わるので要注意です。⽂字を⼩さいまま読みやすいくしたいときなど、太さがあれば視認性が上がるので、フォントファミリーがある⽅がデザインの融通が利くと思います。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/49cb204c8a994b91b7ed2a15217f6fa2/48a83e1a52f1cbecb3d439645e7ef33d.jpg)
・数字
お店の電話番号や、デザインとして「POINT.1」といったように、数字が出てくることが多いので、数字のデザインもポイントです。
電話番号など、基本的に数字で構成する部分は欧文フォントを使用する方が綺麗だと思います。また、欧文フォントはベースラインの位置が下がったり、数字だけクセが強かったりする場合もあるので要注意です。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/3ee0dca057614fd3b259201013373241/de7599952436eb1e463a900620bf9cf1.jpg)
・アルファベットの大文字、小文字
欧文フォントで、アルファベットの小文字のデザインが無い(大文字と同じ)場合があります。
商品名など、必ず小文字で表記しなければならない場合は注意が必要です。使用する欧文フォントに小文字表記があるか、確認しておきましょう。小文字の表記がなくても支障が無い場合は気にしないで使用してください。
紙のDTPデザインとWEBデザインにある大きな違い「文字詰め」「行間」
紙のデザインとWEBデザインでの文字詰めや行間の設定については、それぞれの概念があります。
WEBデザインではデザイナーが作成した後、エンジニアによるコーディングの作業があるので、文字ツメや行間設定は単純にルール化しておくことが不可欠です。また、紙のデザインはスペースが限られているので、読みやすくすることと、キレイに収める必要があり、文字詰めに関しては細かく設定しています。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/1a17355c6d604e85a8aeb5a3f0d6b7e4/03-1.png)
文字詰め
【紙】
「」、。のような約物、数字、英⽂、カタカナなどで⽂字と⽂字の間に隙間が出てしまう場合、⽂末をキレイに保つために⽂字詰めのアキ量を設定します。段落のあるテキストは⾏末を揃えて⾒せることが基本で、ジャスティファイという均等に保つ効果を必ず⼊れます。また、⾒出しのような⼤きく⽬⽴つ部分も格好よくするため、⽂字詰めを細かく⾏います。
【WEB】
コーディングの設定において分かりやすくするため、それぞれ⽂字詰めを変えて設定することは無く、ベタ詰めで作成するのが基本です。
⾏間
【紙】
基本的には統⼀していますが、⾒出しなどは変更しても特に問題ありません。※デザイナーが構成したあとコーディングのような作業がないので、多少誤差があっても⼤きな問題にはなりません。
【WEB】
⾒出し(タイトル部分)はフォントサイズの150%、200%等、ページ全体の数値を設定しておく必要があります。
使いやすいGoogleフォント
個⼈的に使いやすそうだと思ったGoogleフォントをまとめました。
好みとしてはクセが強くなく、少しすっきりして⾒える(⽂字幅)ものが好みなので、そういった点を踏まえて参考にしていただければ幸いです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a5974589bb7447c19847e31dc9846f44/00-1.png)
引用元:Google Fonts https://fonts.google.com/
⽇本語
・Noto Sans JP
クセがなく、キレイで使いやすいフォントだと思います。
ベーシックに使⽤されているのは納得です。レギュラーはキレイに⾒えるけど、ボールドにするとしっかりと⽬⽴つので万能だなと思います。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/c16470f7efb24827a7a37a03b19f49f2/a6dc8e0f5ab08f2e735cd36ee566cf44.jpg)
・Sawarabi Gothic
ゴシックだけど少しハネがあって丸みがあって、キレイに⾒えると思います。ウエイト(ファミリー)がないのが残念です。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/231d1724cb744b59bb481e7bed74e06c/2afac6276c7861358ccebae1a465f297.jpg)
・Noto Serif JP
Noto Sans JPと同じく、ベーシックな明朝体だと思います。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/6758bd19999c451bb5aa465085f97eb3/b8711d4ded938d64811d6ab14347eb80.jpg)
・Shippori Mincho
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/24d3fbf9814548dfa035b734a73b124f/e96e5bdd156783b5ee558a10822df7c8.jpg)
キレイな明朝体だと思います。流れるようなハネがあるのが特徴ですね。クセとも⾔えますが。ウエイト(ファミリー)がしっかりあります!
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/2c9175aa76c24a659efadc77e8d514ce/84e53147f1a6b95fda3bd32de35c8a4d.jpg)
欧⽂フォント
・Overpass
スッキリ、スタイリッシュな感じで好きです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e510d155bc9e4f41865c19b2780b5628/58e4809514ee8c469d07ff539b928be3.jpg)
・Prompt
丸っこくて平べったくて形が好きです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/230d6cebcb054c09a59f38b52b458015/1a3bd19a2757f17176d65cecfd357904.jpg)
・Jost
角があるけど形がシンプルです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/24d3fbf9814548dfa035b734a73b124f/e96e5bdd156783b5ee558a10822df7c8.jpg)
・Montserrat
丸っこいです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/6715eaad090947d69996f029d0697568/cf4e148d0856cef1048fd5c0a33e3a9f.jpg)
・PlayfairDisplay
セリフでキレイだなと思ったフォントです。
![](https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a22b209ab01e4b3e9e3bcfb65b2ba9fe/7287ec0230a4aa23fabe6855f9078197.jpg)
まとめ
いかがだったでしょうか。
今回はフォントの選び方と、使いやすいGoogleフォントについてまとめてみました。
フォントはデザインの印象を決めるとても大事な要素です。
「Googleフォント」には魅力的なフォントがあることが少しずつ分かってきたので、どんどん利用して、デザインの幅を広げていきたいと思います。
ぜひフォント選びにはこだわって、より良いWEBデザインの作成を心がけていきましょう。
この記事がお役立ていただけましたら幸いです。
最後までお読みいただき、ありがとうございました。