スマホ時代の“行間・文字サイズ”基準：読ませるUIタイポの実務ルール

スマホでLPや記事を見たとき、「内容は悪くないのに読みづらい」と感じて離脱した経験は多いはずです。ここで厄介なのは、原因が“文章”ではなく見え方（UIタイポ）にあるケースが多いこと。文字サイズを少し変えただけでは、行間・行長（1行の文字数）・余白・強調ルールが噛み合っていなければ、読みやすさは安定しません。

さらに、文字サイズの“正解px”を探すのは実務では非効率です。iOSにはDynamic Typeがあり、ユーザーが文字サイズを変える前提があるからです。
本記事では、WCAG 1.4.12（テキスト間隔）と、行長50–75文字の目安を軸に、スマホで“読ませる”UIタイポをルール化する方法を、テンプレとして整理します。

なぜスマホでは“文字”が原因で離脱が起きるのか

文字サイズだけでは解決しない（行間・行長・余白）

可読性は「文字サイズ」だけの問題ではありません。スマホの読みづらさは、だいたい次の組み合わせで起きます。

• 行間が詰まり、文字が“塊”に見える
• 1行が長すぎて、視線が迷子になる
• 段落が長く、スクロール疲れが起きる
• 余白がなく、どこが重要か分からない

行長（1行の文字数）が読みやすさに影響し、50–75文字程度が目安になり得る、という整理は研究・実務記事でも繰り返し言及されています（ケースによります）。

スマホは「読む体力」が削れやすい前提

スマホは移動中・片手・通知など、集中が切れやすい環境です。だから“読ませる”には、内容以前に読む負担を減らす設計が必要です。ここで効くのが「基準を決めて、誰が作っても崩れない」仕組み化です。

まず結論：基準は「固定px」ではなく“壊れない設計条件”で決める

WCAG 1.4.12が示す「テキスト間隔」の最低要件

WCAG 1.4.12（Text Spacing）は、ユーザーがテキストの間隔を調整しても内容や機能が失われないことを求め、目安として以下を挙げています。

• 行間：少なくとも 1.5倍
• 段落後の間隔：少なくとも 2倍
• 文字間隔：少なくとも 0.12em
• 単語間隔：少なくとも 0.16em

重要なのは「この値に設定しろ」ではなく、ここまで広げても崩れない設計にしておくという点です。

行長（50–75文字）を“先に”決める

行長は読みやすさを左右します。本文の行長として50–75文字を目安として挙げる解説があります（ケースによります）。

タイポが崩れる現場は「文字サイズをいじる前に行長が無制御」というケースが多いです。まずは“本文の表示幅（左右余白込み）”を決め、行長を安定させるのが近道です。

iOSはDynamic Type前提：ユーザー設定でも読めること

iOSはユーザーが文字サイズを調整できる仕組み（Dynamic Type）を前提にしています。つまり、固定pxで作り切るより、ユーザー設定や拡大でも読み崩れない設計が重要になります（実装方法によります）。

実務ルール1：本文・見出し・注釈の階層を固定する

どの要素を大きくするか（注釈を小さくしすぎない）

LPや比較表で揉めるのは注釈（条件・対象外・追加費用）です。ここが読めないと「騙された感」が生まれます。

• 注釈は“読めるサイズ”を下回らない
• 代わりに文章量を削る/分割する

この順番が実務的です。

強調（太字/色）は意味で統一する

強調は増えるほど弱くなります。

• 太字は1段落に1〜2箇所
• 色は意味を固定（例：注意/推奨/条件）
• 強調ルールはドキュメント化して共有

「誰が作っても同じ判断」ができる状態が、読みやすさを安定させます。

実務ルール2：行間（line-height）と段落間（margin）をセットで設計

「詰めない」ではなく「1.5倍まで広げても崩れない」

“詰めない”は主観になりやすいので、基準を条件で持ちます。

• 行間を1.5倍にしても、文字が重ならない/見切れない
• 段落間を2倍にしても、レイアウトが破綻しない

これを満たすようにCSS/コンポーネントを設計しておくと、改善や追加ページでも崩れにくいです。

段落は“短く区切る”が正義（chunking）

運用ルールとしては、次のように文章側のルールもセットにすると効果が出やすいです。

• 1段落1テーマ
• 見出し直下に結論1行
• 4〜6行以上続く段落は分割検討

実務ルール3：行長（1行の文字数）で読みやすさを安定させる

50–75文字の目安と、スマホでの落とし込み

目安として50–75文字が挙げられることがあります（ケースによります）。スマホは画面幅が狭いので結果的に文字数が短くなりがちですが、注意点は「端末やレイアウトで急に長くなる」ことです。

• 余白が少ないLP
• 横向き表示
• 大画面端末

だから“表示幅”を制御する発想が重要になります（max-widthやコンテナ設計など）。

文章量は減らすのではなく“分割する”

情報を削れないときは、次の方法で処理負荷を下げます。

• 箇条書き化
• 小見出し追加
• カード分割

「削る」より「分割して理解を速くする」が実務で効きます（ケースによります）。

よくある失敗と修正（LP/記事で頻出）

• 注釈が小さすぎる：読めるサイズに戻し、文章量を分割（条件は隠さない）
• 1段落が長すぎる：結論1行→補足、に分解
• 行が長すぎて迷子：コンテナ幅と余白を見直し、行長を安定させる
• 行間を広げると崩れる：テキスト間隔の調整に耐える実装へ
• 強調だらけ：強調ルールを固定し、意味で使う（量を減らす）

テンプレ：FigmaとCSSに落とす「基本セット」

Figma：Text Styleの最低セット

最低限これだけ固定すると運用が安定します。

• 見出し（大/中/小）
• 本文
• 注釈
• リンク/ボタン（ラベル）

加えて、各スタイルにline-height（行間）も含めて固定します。

CSS：line-heightとclampの考え方（設計手順）

数値の断定ではなく、設計手順を固定します。

1. 本文の表示幅（コンテナ）を決めて行長を安定
2. line-heightを1.5まで広げても崩れないかを確認
3. 端末幅で文字サイズが自然に追従するようclamp等を検討
4. 段落間・見出し前後の余白をルール化

実機確認チェックリスト

• 行間1.5、段落間2倍にしても見切れ/重なりがないか
• 行長が伸びすぎていないか（50–75文字の目安を意識）
• 注釈が読めるか（重要条件ほど読める必要）
• 文字サイズを拡大しても破綻しないか（OS設定前提）

よくある質問（FAQ）

Q1. スマホの本文文字サイズは何pxが正解ですか？

固定値の正解は示されていません。端末・フォント・表示幅・ユーザー設定で見え方が変わるため、行長（50–75文字の目安）と、テキスト間隔を広げても崩れない設計条件を軸に決めるのが安全です（ケースによります）。

Q2. 行間は広いほど良いですか？

広ければ良いと断定はできませんが、少なくとも行間1.5倍まで広げても内容や機能が損なわれない設計が求められます（実装方法によります）。

Q3. 注釈は小さくしてもいいですか？

小さすぎる注釈は誤解や不信感に繋がりやすいので、重要条件ほど読める状態にするのが実務的です。まずは文章の分割・整理で対応すると安全です。

Q4. 1行の文字数は本当に重要ですか？

可読性に影響する要素として、50–75文字程度が目安として示されることがあります（ケースによります）。行長が無制御だと読み疲れが起きやすいので、表示幅（コンテナ）から設計するのが実務的です。

Q5. iPhoneとAndroidで見え方が違って困ります

OSの文字表示やユーザー設定の影響があるため、固定値で作るより「拡大しても破綻しない」設計と実機確認が有効です。特に本文・注釈・ボタン周りは必ず確認してください。

まとめ

スマホ時代のUIタイポは、固定pxの“正解探し”よりも、壊れない条件でルール化する方が成果に直結します。テキスト間隔（行間1.5倍など）に耐える実装を前提にし、行長は50–75文字の目安で安定させる。さらに、本文/見出し/注釈の階層、段落の分割、余白、強調ルールまでをテンプレ化すると、誰が作っても“読ませる”品質が揃います（ケースによります）。

ブランディングから集客まで、広島のデザインなら「広デザ」までお問い合わせください