LPのフォントサイズはどれくらいにする?デザインのコツを解説します!
2022.11.21

LPやホームページを作成する場合は、文字の大きさをどれくらいにすればいいのでしょうか。画面の文字は、大きすぎても小さすぎても見づらくなります。ユーザーに離脱されないためには、文字の大きさを考慮して、コンテンツを見やすくすることも大切です。本記事では、なぜホームページの文字の大きさが重要なのか、スマホ向けLPを制作する際の、チェックポイントなどについても解説します。
目次
なぜホームページの文字の大きさが重要なのか

ホームページの文字の大きさが重要なのは、以下のような理由によります。
見やすくするため
ホームページには、画像やイラストなども含まれますが、大部分はテキストが使われています。そのため、ユーザーから見て、読みやすいフォントサイズにすることは、非常に重要です。文字サイズが適切でないと、読みづらいためにユーザーはすぐ離脱してしまいます。せっかく訪問してくれたユーザーに、ろくにホームページを見ないうちに離脱されては、苦労してページを作った意味がありません。
そこで、ユーザーに快適な状態でホームページを閲覧してもらうためにも、適切なサイズの文字を使用する必要があります。ホームページを作成する際は、ユーザビリティを意識することが大切です。
しかし、通常ホームページのユーザビリティでは、ページのデザインやクリックボタンをわかりやすくするなどが、重要視されていますが、文字の大きさまでは考慮されていません。見やすいホームページを作るには、文字の大きさを適正にすることも、忘れないようにしたいものです。
そこで、ユーザーに快適な状態でホームページを閲覧してもらうためにも、適切なサイズの文字を使用する必要があります。ホームページを作成する際は、ユーザビリティを意識することが大切です。
しかし、通常ホームページのユーザビリティでは、ページのデザインやクリックボタンをわかりやすくするなどが、重要視されていますが、文字の大きさまでは考慮されていません。見やすいホームページを作るには、文字の大きさを適正にすることも、忘れないようにしたいものです。
スマホの画面対応を意識する
ホームページはパソコンで作成するため、できたホームページのチェックも、パソコンで行うことが多いものです。しかし、最近ではパソコンよりも、スマホでネット検索するケースが増えているので、スマホで見やすいホームページを作ることが大切です。
また、スマホで見やすいサイトにすることは、Googleで検索上位に入るための重要な要素となっています。そのため、スマホで見やすいページを作ることが、SEO対策としても欠かせないことを知っておきましょう。
また、スマホで見やすいサイトにすることは、Googleで検索上位に入るための重要な要素となっています。そのため、スマホで見やすいページを作ることが、SEO対策としても欠かせないことを知っておきましょう。
最適なフォントサイズは?

読みやすいホームページを作成するには、テキストコンテンツの文字サイズを統一し、それをもとに見出しのサイズを決めることが大切です。では、文字サイズはどのように決めればいいのでしょうか。
フォントサイズは16pxが基本
テキストコンテンツの文字サイズは、16px(ピクセル)を基本と考えましょう。読みやすさを考慮したホームページのほとんどが、16pxで作られています。ただし、子供向けや中高年層を対象としたホームページは、もう少し文字サイズを大きくしたほうが見やすくなります。この場合でも、文字サイズは17pxか18pxにして、それ以上のサイズは使わないようにしましょう。
タイトルや見出しとのバランス
見出しは、テキストコンテンツの文字サイズより少し大きくして、タイトルはさらに大きくします。テキストの文字サイズと比べて、見出しやタイトルの文字サイズを大きくすると、インパクトのあるページ作りができます。そのため、インパクトを重視してページ作りをしたい場合は、見出しやタイトルを大きめにするといいでしょう。
しかし、学術関係や法律関係、医療関係のページの場合は、落ち着いた感じのページにしたほうがいいので、テキストの文字に比べて、見出しやタイトルをあまり大きくしないのがポイントです。コンテンツの内容をじっくり読んでもらいたい場合は、文字サイズをあまり大きくしないようにしましょう。
しかし、学術関係や法律関係、医療関係のページの場合は、落ち着いた感じのページにしたほうがいいので、テキストの文字に比べて、見出しやタイトルをあまり大きくしないのがポイントです。コンテンツの内容をじっくり読んでもらいたい場合は、文字サイズをあまり大きくしないようにしましょう。
スマホで見ることを意識する
最近では、スマホでネット検索する機会が多くなっているので、スマホで見た場合にどう見えるかも考える必要があります。基本的に、パソコンの画面で見やすければ、スマホでも見やすくなりますが、念のためスマホで表示して、どのように見えるかチェックすることが大切です。
適切な行間・文字間隔・余白をつける

LPやホームページでは、文字サイズだけでなく行間や文字間隔、余白の取り方も、見やすさを左右する大切な要素となります。LPやホームページでは、文字の行間を1.5〜2.0に設定するのが基本です。行間が狭いと読みにくくなり、行間が広すぎると目の移動距離が長くなるので、長時間読んでいると目に負担がかかります。
また、文字と文字の間隔が狭いと、メリハリのあるコンテンツになりますが、狭すぎると文字がくっつきすぎて読みにくくなり、文字間隔が広いと間延びしたものになってしまいます。WEB上で最適な文字間隔は、文字サイズの5%〜10%くらいにしましょう。余白も、文字を見やすくするためには重要です。
余白はデザイン上も大切ですが、テキストを読みやすくするためにも、余白の取り方を意識する必要があります。余白の取り方はいろいろで、1行ごとに余白を取る場合もありますが、3~4行ごとに余白を取るのが一般的です。また、重要な部分を目立たせるために、余白を多めに取ることもあります。
同様に、目立たせたい部分を太字にしたり、一部分だけ文字の色を変えるなど、読みやすくインパクトを与えるための工夫も考えましょう。テキストを読みやすくするには、文字の色を考慮する必要があります。書籍の場合は、基本的に文字は黒ですが、これは紙が白だからです。
WEBではいろんなサイトカラーを使うので、背景の色によって、文字の色も変えることも大切です。読みやすいLPやホームページを作るには、上記のさまざまな要素を、バランスよく取り入れるようにしましょう。
また、文字と文字の間隔が狭いと、メリハリのあるコンテンツになりますが、狭すぎると文字がくっつきすぎて読みにくくなり、文字間隔が広いと間延びしたものになってしまいます。WEB上で最適な文字間隔は、文字サイズの5%〜10%くらいにしましょう。余白も、文字を見やすくするためには重要です。
余白はデザイン上も大切ですが、テキストを読みやすくするためにも、余白の取り方を意識する必要があります。余白の取り方はいろいろで、1行ごとに余白を取る場合もありますが、3~4行ごとに余白を取るのが一般的です。また、重要な部分を目立たせるために、余白を多めに取ることもあります。
同様に、目立たせたい部分を太字にしたり、一部分だけ文字の色を変えるなど、読みやすくインパクトを与えるための工夫も考えましょう。テキストを読みやすくするには、文字の色を考慮する必要があります。書籍の場合は、基本的に文字は黒ですが、これは紙が白だからです。
WEBではいろんなサイトカラーを使うので、背景の色によって、文字の色も変えることも大切です。読みやすいLPやホームページを作るには、上記のさまざまな要素を、バランスよく取り入れるようにしましょう。
スマホ向けLPを制作する際のチェックポイント

スマホ向けLPを制作する際に、注意すべきポイントをご紹介します。
スマホで見やすくする
パソコンでは見やすくても、必ずしもスマホでも見やすいとは限りません。スマホでネット検索する人は急拡大しているので、必ずスマホで見やすいかどうか、チェックする必要があります。また、スマホの縦横のサイズは機種によって違うので、いろんなスマホを使ってチェックするようにしましょう。
文字のフォントサイズを調整する
パソコンで閲覧するのに比べて、スマホは画面が小さいので、見た目の感じが違います。そのため、パソコンではバランスよく見えても、スマホでは違和感がある場合もあります。そこで、コンバージョンを上げるためには、実機のスマホで見やすいページ作りを、心掛けることが大切です。
デザインをシンプルにする
スマホ向けのLPやホームページは、シンプルなデザインにする必要があります。スマホは、ちょっとした空き時間に閲覧することが多いので、じっくり見る人はあまりいません。そのため、いわゆる「斜め読み」でも、内容がわかるような作りにするのがベストです。
斜め読みでも理解できるようにするには、テキスト部分を減らして画像やイラストを増やし、「見てすぐにわかる」ページにすることが大切です。いわゆる、「直観的にわかる」ページ構成にすることが、重要なのです。
斜め読みでも理解できるようにするには、テキスト部分を減らして画像やイラストを増やし、「見てすぐにわかる」ページにすることが大切です。いわゆる、「直観的にわかる」ページ構成にすることが、重要なのです。
まとめ
LPやホームページを作成するには、文字の大きさを考慮する必要があります。しかも、スマホで閲覧した場合でも、違和感なく読むことができるページにしなければなりません。ページを見やすくするには、テキストの文字サイズと、見出しやタイトルの文字サイズを調整する必要があります。
タイトルや見出しが大きいと、インパクトのあるページになりますが、学術関係や法律、医療関係などの場合は、あまり大きくしないほうが、落ち着いた上品なページになります。また、見やすいページ作りのためには、文字サイズだけでなく、行間・文字間隔・余白も考慮しましょう。スマホで見る場合は、シンプルなデザインのほうが、見やすいことも知っておく必要があります。
タイトルや見出しが大きいと、インパクトのあるページになりますが、学術関係や法律、医療関係などの場合は、あまり大きくしないほうが、落ち着いた上品なページになります。また、見やすいページ作りのためには、文字サイズだけでなく、行間・文字間隔・余白も考慮しましょう。スマホで見る場合は、シンプルなデザインのほうが、見やすいことも知っておく必要があります。