スマホサイトで見やすい文字サイズと行間の目安

スマホでホームページを見ていると、

「文字が小さくて読みにくい」
「大きくしすぎて逆に見づらくなった」
「どのくらいが正解か分からない」

こんな悩みを感じたことはありませんか？

実は、スマホでは文字サイズと行間を少し調整するだけで、読みやすさが大きく変わりますよ。

そこで、この記事では、初心者の方でも迷わず設定できる目安を分かりやすく紹介します。

スマホが普及した現在、スマホでも見やすいホームページを作ることが大切なので、ぜひ参考にしてくださいね！

このページを読んでわかること

なぜスマホでは文字サイズと行間が重要なのか

スマホは画面が小さいため、
パソコンと同じ設定のままだと、文字が詰まって見えてしまいます。

読みにくいページは、すぐ閉じられてしまうことも多く、
せっかくの内容が読まれません。

見やすさはホームページの印象と成果に直結します。

スマホで見やすい文字サイズの目安

まずは、基本となる文字サイズをお伝えします。

本文におすすめのサイズ

👉 16px～18pxくらい

多くのサイトで使われていて、読みやすさも高いサイズです。

見出しにおすすめのサイズ

小見出し：18px～20pxくらい
大見出し：20px～24pxくらい

本文より少し大きめにすると、メリハリが出て読みやすくなります。

スマホで見やすい行間の目安

次は、スマホで見やすい行間の目安をお伝えします。
行間は意外と重要です。

行間がせまいと起こる問題

文字がぎゅうぎゅうに詰まって見える
長文がとても読みにくい
目が疲れやすい

少し広げるだけで印象が大きく変わります。

実際のCSS設定例（初心者向け）

それでは、実際のCSS設定例をご紹介します。
まずは基本設定です。

body {
  font-size: 16px;
  line-height: 1.6;
}

スマホ用に少し調整する場合は、

@media screen and (max-width: 768px) {
  body {
    font-size: 17px;
    line-height: 1.6;
  }
}

これだけでとても読みやすくなります。

よくある失敗例（スマホ文字サイズと行間）

文字を見やすくしようとして、逆に読みにくくしてしまうケースも意外と多いです。
ここでは、特に多い失敗を紹介します。

小さすぎて拡大しないと読めなくなる

パソコン基準のまま文字サイズを設定してしまい、
スマホではとても小さく表示されてしまうケースです。

その結果、指で拡大しながら読まなければならず、
多くの人が途中で離れてしまいます。

スマホでは少し大きめが基本です。

大きくしすぎてスクロール量が増えすぎる

「見やすくしたい」と思って、
文字を極端に大きくしてしまう人もいます。

確かに読みやすくはなりますが、
1画面に表示される情報が少なくなり、何度もスクロールすることになります。

ほどよいサイズが一番読みやすいポイントです。

行間を設定せず文字がぎゅうぎゅうになる

文字サイズだけを大きくして、
行間をそのままにしているケースも多いです。

行間がせまいと、文章が詰まって見え、
長文がとても読みづらくなります。

文字サイズと行間はセットで調整しましょう。

スマホ表示を確認せずに公開してしまう

パソコンで見て問題なさそうなので、そのまま公開し、
スマホで見ると読みにくかった、という失敗もよくあります。

必ずスマホ画面でチェックする習慣をつけましょう。

自分のホームページで確認するときのポイント

自分のホームページで確認するときのポイントをご紹介します。

実際にスマホで見る

必ず実機でチェックしましょう。
パソコン画面だけでは分かりません。

文章をスクロールしながら読む

自然に読めるか、目が疲れないかを確認してみてください。

まとめ｜文字サイズと行間を整えるだけで読みやすさは大きく変わる

「スマホサイトで見やすい文字サイズと行間の目安」の記事はいかがでしたでしょうか？

スマホでは、

本文：16～18px
行間：1.5～1.7

これを目安にするだけで、かなり読みやすくなります。

少しずつ調整しながら、自分のサイトに合った見やすさを見つけてみてくださいね！

でも基本的には、この記事でお伝えした文字サイズと行間で作ることが、良いと思いますよ！