Web・LPのデザイン：情報設計・視線の流れ・CTA・スマホ対応｜デザイン・クリエイティブの基本 第6回

人はWebページを「飛ばし読み」する

ユーザー体験の調査で知られるNielsen Norman Group（NN/g）は、視線の動きを計測する調査から、人がWebページの文章を F字の形 に飛ばし読みすることが多いと報告しています（同社の記事「F-Shaped Pattern of Reading on the Web」、2017年）。まず上のほうの行を横に読み、少し下でもう一度、短く横に読み、あとは左端を縦に流し見する、という動きです。

NN/gによると、このF字の読み方が起きやすいのは、次のようなときです。

• 太字・箇条書き・小見出しのない「文字の壁」のようなページ
• 読む人が、効率よく必要な情報を見つけたいとき
• 読む人が、一字一句読むほどの関心をまだ持っていないとき

F字に読まれると、右側や下のほうに書かれた大事な情報が見落とされてしまいます。NN/gは、この読まれ方は利用者にも企業にも良くないとして、避けるための方法を挙げています。主なものは、最も大事なことを最初の2段落に書く、本文と見た目がはっきり違う見出しと小見出しをつけ、最初に大事な言葉を置く、関連する内容を視覚的にまとめ、重要な語句を太字にする、箇条書きや番号付きのリストを使う、不要な文章を削る です。

図2の右は、同じ内容を見出し・太字・箇条書きで整理したものです。見出しを拾い読みするだけで内容がつかめ、気になったところだけを詳しく読めます。これは、第4回の「ジャンプ率」と第2回の「近接」を、ページの単位で使っていることになります。

ファーストビューは「何の話か」を一瞬で

ページを開いて最初に見える範囲を ファーストビュー と呼びます。ここで「自分に関係がある」と感じてもらえなければ、多くの人はスクロールせずに離れてしまいます。ファーストビューのデザインは、前回のバナーと同じ考え方です。メインコピー（何の商品で、誰がどう得をするか）を一番大きく、それを補強するビジュアル、そして次の行動（ボタン）を1つ。情報を詰め込まず、1つのメッセージに絞ります。

ボタンは「押せそうに見える」ことが最優先

ページのゴールは、見る人に行動してもらうことです。その行動の入り口が、ボタン（CTA）です。ボタンのデザインで最も大切なのは、一目でボタンだと分かり、押すと何が起きるか分かる ことです。

図3の左のボタンは、薄い色の枠に「送信」と書かれているだけです。押せるのかどうかがはっきりせず、押したら何が起きるのかも分かりません。右は、背景と明度の差がはっきりある色で塗りつぶし、大きさを十分にとり、「無料で試してみる」と行動の結果が分かる言葉にしています。さらに、ボタンの下に「クレジットカードの登録は不要です」と、押す前の不安を消す一言を添えています。

押されるボタンのポイントは、次のとおりです。

• 塗りつぶして、周りと明度の差をつける：第3回で学んだとおり、ボタンのような操作に必要な要素には、隣り合う色と3:1以上のコントラスト比が求められます（WCAG 2.2の達成基準1.4.11）。
• 押すと何が起きるかを、動詞で書く：「送信」「こちら」ではなく、「資料をダウンロードする」「無料で試してみる」。
• 主のボタンは1つに絞る：同じ強さのボタンがいくつも並ぶと、どれを押せばよいか迷います。主のボタンは塗りつぶし、それ以外は枠線だけにするなど、強さに差をつけます。
• ページの中で何度か置く：長いページでは、ファーストビュー、事例の後、最後など、読み手が「やってみよう」と思いそうな場所にボタンを置きます。

スマホの画面で守ること

今日、多くのWebページはスマホで見られています。パソコンで作ったデザインを、そのままスマホで見られる形にするだけでは、読みにくく、使いにくいページになりがちです。

指で押せる大きさと間隔を確保する

スマホでは、マウスより大きな「指」で画面を押します。リンクやボタンが小さく、詰まって並んでいると、隣のものを押し間違えてしまいます。

WCAG 2.2の達成基準2.5.8「ターゲットのサイズ（最低限）」（レベルAA）は、押したりクリックしたりする対象の大きさを、少なくとも24×24 CSSピクセルにすることを求めています（間隔が十分にある場合などの例外があります）。より厳しい達成基準2.5.5（レベルAAA）では、44×44 CSSピクセル以上とされています。図4の右のように、メニューの項目を大きくし、項目どうしの間隔を空けると、押し間違えが減ります。

横並びは「縦積み」に組み替える

パソコンの画面では横に3つ並べていたカードを、そのままスマホの幅に縮めると、文字が小さくなりすぎて読めなくなります（図5の左）。

スマホでは、横に並んでいた要素を1列に縦に積み替え、文字の大きさを保ったまま、スクロールで読んでもらうのが基本です。画面の幅に合わせてレイアウトを組み替える作り方を、レスポンシブデザイン と呼びます。組み替えるときは、第4回で学んだ文字の設定もあわせて見直します。スマホの狭い幅では1行の文字数が自然に少なくなる一方で、見出しが何行にも折り返して読みにくくなることがあるため、見出しはパソコンより短く、言葉を選び直すことも検討しましょう。作ったページは、必ず実際のスマホで開いて、文字が小さすぎないか、横にはみ出していないか、ボタンが押しやすいかを確かめましょう。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

パーツを決めて、使い回す

ページが増えてくると、ページごとに見出しの大きさやボタンの形が少しずつ違ってくる、という問題が起きます。第2回の「反復」の原則を、ページの単位で守るための方法が、パーツを決めて使い回す ことです。

図6のように、見出し（大・中・本文）、ボタン（主・副）、カードなど、よく使う要素の見た目をあらかじめ決めておき、どのページでも同じものを使います。見た目がそろうだけでなく、新しいページを作る時間も、確認の手間も減ります。こうしたパーツと使い方のルールをまとめたものは、大きな組織では「デザインシステム」と呼ばれます。最初から大がかりなものを作る必要はなく、まずはボタンと見出しの2つから決めるだけでも効果があります。

実務ではこう使う

Webページ・LPのデザインを確認するときは、次のチェックリストを使ってください。

• セクションは見る人の疑問の順に並び、各セクションに見出しがあるか。見出しだけで流れが伝わるか
• ファーストビューで、何の商品で誰がどう得をするかが一瞬で分かるか
• 大事な情報は最初のほうに書かれ、太字・箇条書きで拾い読みしやすくなっているか
• 主のボタンは1つに絞られ、押すと何が起きるか分かる言葉になっているか
• スマホの実機で、文字の大きさ・押しやすさ・はみ出しを確かめたか

公開したページが実際にどう見られているかは、ヒートマップのツールでスクロールの深さやクリックされた場所を見ると確かめられます。ヒートマップツールおすすめ比較や、改善の進め方を扱うLP・CVR改善の教科書もあわせて参考にしてください。自分でページを作るならLP作成ツールおすすめ比較も役に立ちます。

この回のまとめ

• ページは「セクションの積み重ね」として考え、1セクションに1つのメッセージを持たせ、見る人の疑問の順に並べます。
• 人はWebページをF字に飛ばし読みしがちです。大事なことを最初に書き、見出し・太字・箇条書きで道しるべをつけます。
• ボタンは塗りつぶして周りと差をつけ、押すと何が起きるかを動詞で書き、主のボタンは1つに絞ります。
• スマホでは、押す対象を十分な大きさにし（WCAG 2.2の達成基準2.5.8では24×24 CSSピクセル以上）、横並びは縦積みに組み替えます。
• 見出し・ボタン・カードなどをパーツとして決め、使い回すことで、統一感と作業の速さを両立します。

確認テスト

次回予告

第7回では、デザインツールと生成AIの使い分けを学びます。Canva・Figma・Adobe Fireflyなどの得意分野、生成AIを使ってよい場面と避けたほうがよい場面、そしてブランドの統一感をツールで守る方法を扱います。

参考資料

• Nielsen Norman Group「F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)」（Kara Pernice、2017年11月12日）：https://nngroup.com/articles/f-shaped-pattern-reading-web-content/ （2026年11月12日確認）
• W3C「Understanding SC 2.5.8: Target Size (Minimum)」（WCAG 2.2）：https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html （2026年11月12日確認）
• W3C「Understanding SC 1.4.11: Non-text Contrast」：https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast （2026年11月12日確認）