フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント
WEBサイト制作の時、色づかいなどのデザインはこだわっていても、テキスト部分は適当になっていませんか？
意外と見落とされがちな、見出しやコンテンツなどのテキスト部分。
特に設定せず、デフォルトのまま制作している人も多いのではないでしょうか。
WEBデザインは情報を伝えることが目的なので、デザイン面はもちろんのこと、文章の読みやすさも大切です。
いくら画像が美しくて文章の中身が良くても、文字が読みにくいとユーザーに内容は伝わりません。
文字の読みやすさの基準は、読者の年齢やサイトの目的・雰囲気によっても異なりますが、フォントサイズなどの文字に関する要素によって大きく左右されるのです。
ここでは、読みやすいサイトをデザインするために必要な、フォントに関する重要ポイントをご紹介します。
このポイントを押さえることで、文章が読みやすく伝わりやすくなるうえ、サイト全体の雰囲気も見違えるように洗練されますよ。
WEBデザインの初心者や、「自分のデザインしたサイトが、なんだか読みにくい……」という方は、ぜひ参考にしてください。
こちらの記事では、フォントのサイズについて説明していきますが、フォントの種類について知りたい方はこちらの記事を参考にしてみてくださいね！
参考記事▼
WEBデザインで誰もが使う定番フォント18選！基礎知識も解説します
最適なフォントサイズは？
文字が読みやすいサイトをデザインするには、まずは本文テキストのフォントサイズを決めて統一し、それをもとに見出しサイズを調整します。
では、実際にフォントサイズの設定はどうすればいいのか、お伝えしていきますね。
フォントサイズは16pxが基本！
基本となる本文テキストのフォントサイズは、16pxがおすすめ。
現在、読みやすさを重視して作られたWEBサイトは、ほとんどがこのフォントサイズです。
多くの人が見慣れた読みやすいサイズになるので、これを基準に考えましょう。
Googleも読みやすいフォントサイズの基準として、16pxを推奨しています。
しかし、ユーザーの年齢層によってはもう少し大きいほうが良い場合もあります。
例えば、子供向けのサイトや高齢ユーザー向けのサイトであれば、文字は大きいほうがユーザーに優しくなりますよね。
その場合、フォントサイズは多少大きめの17pxまたは18pxがおすすめです。
読みやすさを優先しよう
フォントは、読みやすい大きさに設定することが最も大切です。
デザイン性を優先しているサイトの場合は基本サイズが14pxのものもありますが、人によっては読みにくいと感じます。
また、昔のWEBデザインは、12pxくらいのフォントサイズが主流でした。
以前はパソコン画面のサイズが小さく、なるべく文字を小さくして画面上に多くの文字を表示させるという考えだったからです。
現在は大きいモニターが普及しているので、文字は小さいサイズにする必要はありません。
読みやすさを優先させ、特別な場合をのぞいては16px〜18pxの間で調整しましょう。
タイトルの文字サイズは「ジャンプ率」を意識しよう
本文のフォントサイズを設定したら、それに合わせて見出しのサイズを設定します。
小見出し・中見出し・大見出しの順に、フォントサイズは大きくします。
それぞれ情報の優先度に応じて、適切な大きさに設定しましょう。
ここでポイントとなるのは「ジャンプ率」です。
ジャンプ率とは、要素の大きさの差のことです。
この場合、本文サイズに対しての見出しサイズの比率になります。
本文と見出しの大きさの差が大きいと「ジャンプ率が高い」と表現され、差が小さいと「ジャンプ率が低い」と表現されます。
ジャンプ率によって、印象が大きく異なります。こちらの画像を見てください。
ジャンプ率が高いと、メリハリがつき、レイアウト次第ではダイナミックで躍動感溢れる印象を与えることもできます。
若い人向けのサイトなどでは、ジャンプ率を高めにしてメリハリをつけたデザインもよく見かけます。
インパクトが強くなるので、読者の視線は本文よりも見出しに集中します。
見出し以外にも明確に伝えたいポイントとなる箇所がある場合、ジャンプ率を高くすると訴求力が高くなるので使ってみてください。
ジャンプ率が低いと、落ち着いた上品な印象になります。
また、安心感や信頼といった印象を与えるので、法律関係や医療関係のサイトはジャンプ率が低めに設定されています。
見出しだけにかたよらずに全体に視線が向くので、本文の内容を細かくじっくり伝えたい場合は、ジャンプ率を低くするのがおすすめです。
サイトの雰囲気と内容に応じた適切なサイズの見出しになるように、ジャンプ率を意識してみてください。
モバイルで見た場合は？
モバイルでみた時のことを考えて、フォントサイズを調整する必要があるように感じますよね。
しかし、パソコンとモバイルでサイズを変更する必要はないんです。
さきほどフォントサイズの基本として紹介した16px〜18pxは、スマートフォンやタブレットなどで見たときも、同様に読みやすいサイズになります。
実際に多くの大手サイトでも、パソコンとモバイルで本文サイズの設定は変更していませんが、読みづらいと感じることはあまりないのではないでしょうか？
ただ、見出しについては調整したほうが読みやすくなります。
本文に対してあまりに見出しが大きいと、パソコン画面では違和感がなくても、モバイル端末の小さい画面上では大きすぎて見づらくなりがちです。
モバイル端末用の見出しのジャンプ率は、パソコン用よりも少し抑えるとよいでしょう。
一行あたりの文字数とコンテンツ幅について
読者が目で追いやすく快適に読めるデザインにするためには、１行あたりの文字数とコンテンツの幅も重要なポイントとなります。
一行あたりの文字数の基準は35文字〜50文字
1行あたりの文字数は、35文字〜50文字になるように設定しましょう。
読者の視線の移動にかかるストレスが少なく、快適に読み進められるからです。
1行の文字数があまりに多いと、横への視線移動が大きく負担になりますし、次の行を見失いやすくなるため、読みにくく感じてしまいます。
反対に文字の量が少なすぎると、改行が多くなるため内容が頭に入りにくくなります。
参考に、利用者が多いサービスの１行あたりの文字数を実際に調べてみたところ、以下のようになりました。
Twitter：36文字
Facebook：50文字
note：35文字
どのサービスも読みやすく設計されており、世間の人は見慣れた文字数です。
このことからも、1行あたりの文字数は、35文字〜50文字が最適だということがわかりますね。
コンテンツの幅は640px〜900pxが目安
画像などは画面の幅いっぱいに使うこともありますが、文章の場合はあまりに横に長すぎると読みにくくなります。
読みやすい文章コンテンツの幅は、640pxを目安に設定しましょう。
このサイズは、読者が視線移動するときに目や脳にストレスがかからず読み進めやすいサイズとなります。
また、基準となるフォントサイズに対してちょうど良い文字数にもなるのがこの幅です。
フォントサイズを16pxに設定した場合、640pxのコンテンツ幅に入る最大文字数は640÷16＝40文字です。
文字の間隔を考慮すると実際は35文字くらいとなり、読みやすい文字数になります。
フォントサイズが18pxであれば、最適なコンテンツ幅はもう少し広めになります。
ただし、あまり広すぎると視線移動が大きくるため、最大900pxあたりを目安に考えてください。
適切な行間・文字間隔・余白をつけよ
行間や文字の間隔・周囲の余白の取り方によっても、文章の読みやすさは異なります。
見やすい行間は1.5~2.0
WEB上の文章の行間は、1.5〜2.0に設定するのがおすすめです。
行間が狭すぎると、びっしりと文字が並ぶので目が疲れてしまいますし、次に読む行を見失ってしまいそうになりますよね。
かといって行間が広すぎると、読者の視線は縦の移動の幅が大きく、目や脳に負担がかかります。
また改行の度に文章が途切れて見えてしまうので、内容が頭に入りにくくなります。
適切な行間（1.5〜2.0）を設定することで、1行のラインがわかりやすく、読者の目や脳にストレスをかけない快適な読みやすい文章デザインになるのです。
文字の間隔を適切に
文字と文字の間隔にも注意しましょう。
間隔が狭いとキリッとした印象が生まれますが、狭すぎると文字が密集して読みにくくなります。
逆に文字間隔が広いと1文字1文字は見やすくなりますが、広すぎると間延びして内容が伝わりにくくなります。
WEB上で最適な文字間隔の目安としては、文字サイズの5%~10%です。
フォントサイズによって、読みやすくなるように多少の調整をしてください。
なお、WEB上の文章は読者の環境によって改行位置が変わります。
「うまく1行に収めたい」などの理由で、特定の箇所だけ文字間隔を変更しないように注意しましょう。
文章の区切りや周囲には余白をつける
デザインにおいて、余白はとても大切です。
余白の取り方によって、見た目の美しさはもちろん、文章の読みやすさも大きく異なります。
それぞれの見出しや文章のかたまりの周囲に余白があることで、ここまでは関連した情報、それ以外は別の情報だというふうに、区切りがわかりやすくなります。
また、重要な情報を目立たせるために余白を調整することもあります。
そして、余白があることで読者は自然に脳を休められるため、内容を理解しやすくなるのです。
もし、コンテンツの間に余白がなくびっしりが並んでいたなら、読者は目が疲れるうえに混乱してしまいます。
見やすく・わかりやすく・読者に優しいサイトをデザインするためには、適切な余白をとることが大切です。
その他、文字の見やすさに関わること
その他、読みやすいサイトにするために気を付けるべきポイントをご紹介します。
文字の色はコントラストに注意
サイト内のテキストでよく使われている色というと、「黒」を思い浮かべますよね。
ですが黒といっても実は「ソフトな黒」や「濃いグレー」が使われていることが多く、「真っ黒」はあまり使われていません。
白い背景に真っ黒の文字はコントラストが強く、目に負担がかかりストレスとなります。
なので、少しソフトな黒や濃いグレーを使い、コントラストを弱めて負担を軽減しているんです。
見出しなどの目立たせたい部分はコントラストを強く、本文の長い文章はコントラストを和らげる色を使うと読みやすくなります。
関連記事はコチラ▼
初心者でもわかる！WEBデザインで色を選ぶ基本のポイント
太字を効果的に使う
本文や見出しの中で強調したいものがある場合、太字にするとメリハリがつきます。
フォントの種類やサイズを変えずとも、その部分を目立たせることができ、印象も変わります。
ただし、太字が多いと目が疲れるので、長文は通常の太さのほうが読みやすくなります。
なので、太字は部分的に使うのがおすすめです。
フォントサイズや行間などは本文と見出しそれぞれで統一することが、整然と美しく読みやすいデザインにするコツです。
重要な部分には太字を使うことで、フォントサイズや行間を変えずとも効果的に目立たせることができるので、ぜひ使ってみてください。
文字の見せ方をマスターして、美しく伝わるサイトデザインに
WEBデザインは、色や画像だけではなく、文字の見せ方もとても大事です。
サイト内の文章が読みやすいほど、内容が読者に伝わりやすくなるのです。
また、文字の見せ方のポイントを押さえることで、サイト全体の雰囲気が整然として美しくなります。
サイトが美しく、かつ情報をわかりやすく伝えられるデザイナーは、クライアントの評価にもつながります。
自分のデザインしたサイトが雑然としていまいち分かりにくい・読みにくいという場合は、今回の記事を参考にして文字を見直してみてくださいね。
フォントの見せ方をマスターして、美しく伝わるサイトを作りましょう！
日本デザインスクールでは、WEBデザインのTipsや、幸せに生きるためのちょっとしたコツを発信中
＼毎週火曜・木曜 23:00〜デザインLIVE開催／
デザインTipsを発信、日本デザインスクールのインスタはこちら
＼毎週 月.水.金 12:30〜聞くだけで整うLIVE開催中／
日本デザインスクール校長、久保のインスタはこちら
インスタライブやDMでの質問もお待ちしております。
最後までお読みいただきありがとうございました＾＾