スマホで読みやすいブログの文字サイズ・行間・タップのしやすさの目安|当サイトの実測つき

パソコンで確認すると、読みやすいのに、スマホで開くと、文字が小さくて読みにくい。ボタンやリンクが、近すぎて、押し間違えてしまう。そんな経験は、ありませんか。

ブログを読む人の多くは、スマホで読んでいると、考えられます。スマホで読みやすいかどうかは、読者の満足度にも、ページの評価にも、かかわります。

この記事では、スマホで読みやすい文字サイズ・行間・タップのしやすさの目安を、Chromeやweb.devの公式の説明にもとづいて整理します。あわせて、当サイトの実際の測定結果も紹介します。

記事のポイント

スマホで読みやすいブログの、文字サイズと行間

スマホでは、画面が小さいぶん、文字が小さいと、読みづらくなります。Googleのツール「Lighthouse」には、かつて、文字サイズを調べる項目がありました。その基準は、12px未満の文字を「小さすぎる」とみなし、ページのテキストの60%以上は、12px以上にする、というものでした。

なお、この項目は、Lighthouse 13で、削除されています(Chromeの公式ドキュメントで確認)。基準そのものが、無くなったわけではなく、ひとつの目安として、参考になります。

行間(行と行のあき)が狭いと、文字がつまって見え、読みにくくなります。行間の「これが正解」という数字は、公式の基準としては、示されていません。読みやすさを、目で確かめながら、調整しましょう。

スマホは、横幅が狭いため、1行に入る文字数が、少なくなります。1つの段落が長いと、画面が、文字で埋まってしまいます。当サイトは、一文を短くして、1〜2文ごとに段落を分ける、書き方にしています。

web.dev(Googleの開発者向け情報)では、スマホでタップする要素の大きさの目安を、約48×48ピクセルと説明しています。アイコン自体が小さくても、周りに余白を足して、48×48ピクセルの、タップできる範囲を、確保できます。実際の大きさでは、約9mmで、指の腹と同じくらいです。

web.devでは、タップする要素どうしの間隔は、横・縦とも、約8ピクセル空けると、隣の要素を、間違ってタップしにくくなる、とされています。

文章の途中のリンクは、行間が狭いと、上下の行のリンクと、近づいてしまいます。リンクを連続して並べたり、1行に何本も入れたりすると、押し間違いが起きやすくなります。リンクは、文章の流れの中で、必要なものに、絞りましょう。

ナナ

リンクをたくさん貼ったほうが、親切じゃないですか?

リク

貼りすぎると、かえって押しにくいし、どれを読めばいいか迷うよ。Googleの公式ガイドでも、リンクの数に決まった上限はないけれど、多すぎると感じるなら、たぶん多すぎるよ、と説明されているんだ。

自分のサイトの文字サイズと行間は、Chromeの開発者ツールで、調べられます。

当サイトの記事1本を、スマホの幅(約370px)で開き、本文の文字サイズと行間を、測りました(2026年10月8日)。