レイアウトも整えた。誤字脱字もない。なのに、プレビュー画面を見るとなぜか「読みにくい」「素人っぽい」と感じることはありませんか？
実は、その違和感の正体の9割は「メリハリ不足」と「視線の疲れ」です。
今回は、読みやすいレイアウトを目指す人が陥りがちな「NGポイント」と、それを劇的に改善するテクニック（特にジャンプ率！）を解説します。
目次
チェック1：見出しが「遠慮」していませんか？（ジャンプ率の問題）
「どこが悪いか分からない」一番の原因はこれです。
本文と見出しのサイズ差（＝ジャンプ率）が小さすぎるのです。
NGな例：
- 本文：16px
- 見出し：18px（太字にしただけ）
- 読者の心理： 「どこから新しい話が始まるのか分からない…」
これでは、画面全体が「ただの文字の羅列」に見えてしまいます。
WEBサイトにおける見出しは、「流し読みする読者の視線を止めるアンカー（錨）」の役割があります。
解決策：見出しは「デカすぎるかな？」くらいで丁度いい
思い切ってジャンプ率を上げましょう。
「太字にするだけ」は卒業し、本文の1.5倍〜2倍のサイズに設定してください。
- 本文が16pxなら、見出しは 24px〜32px に！
これだけで画面に強弱が生まれ、「ここは見出し！」「ここは中身！」と、脳が情報を処理するスピードが格段に上がります。
チェック2：視線移動の「マラソン」をさせていませんか？（行長の問題）
PC画面で見たとき、文章が画面の左端から右端まで、ずら〜っと続いていませんか？
NGな例：
- 横幅いっぱいに文字が詰まっている
- 読者の心理： 「次の行の頭を探すのが大変…目が疲れる」
人間の目は、横に長すぎる文章を追うのが苦手です。
行の端まで行って、次の行の頭に戻る視線移動が長いと、読者は無意識にストレスを感じて離脱します。
解決策：読みやすい「幅」に制限する
デザイン全体を狭める必要はありません。テキストエリアの幅（max-width）だけを制限しましょう。
- 目安： 1行あたり 35文字〜40文字 程度
- 余った左右のスペースは、贅沢な「余白」として残しておけばOKです。それだけで洗練された印象になります。
チェック3：情報の「塊（かたまり）」が見えていますか？（余白の問題）
見出しの「上」と「下」の余白が、同じ幅になっていませんか？
NGな例：
- （前の文章）
- [余白 30px]
- 見出し
- [余白 30px]
- （次の文章）
これだと、見出しが「前の文章の続き」なのか「次の文章のタイトル」なのか、直感的に分かりません。
解決策：「近接」のルールを使う
「関係するものは近づけ、違うものは遠ざける」のが鉄則です。
見出しは下の文章のタイトルなので、下の余白を狭く、上の余白を広く取ります。
- 上の余白（margin-top）： 60px
- 下の余白（margin-bottom）： 20px
こうすることで、「ここから新しい塊が始まるんだな」と視覚的に整理されます。
まとめ：まずは「見出し」を大きくすることから！
「どこが悪いか分からない」と迷ったら、まずはジャンプ率を見直してください。
- ジャンプ率： 見出しを本文の 2倍 近くまで大きくする
- 行長： 横に長すぎる文章を 短くカット する
- 余白： 見出しの 「上」を広く、「下」を狭く する
この3つを調整するだけで、あなたのサイトは「なんとなく読みにくい」から「プロっぽくて読みやすい」へ劇的に変わります。まずはCSSでfont-sizeを変更するところから始めてみましょう！
参考資料
- Webデザインの「ジャンプ率」とは？: 事例とともにジャンプ率の効果を解説しているデザインブログなどを参照推奨。
- Chrome検証ツール: 実際のサイトでリアルタイムに数値をいじって確認するのに最適です。