フレームワーク活用ガイド
押さえておきたい用語
- F型パターン: Webページを閲覧する際、視線が上部を水平に走り、下に移動して再び水平に走り、最後に左側を垂直に走るF字型の動きをする傾向
- アイトラッキング: 視線追跡装置を使ってユーザーの視線の動きを記録・分析する手法
- ファーストビュー: スクロールせずに最初に表示される画面領域
- スキャナビリティ: ページを流し読みしたときに必要な情報を素早く見つけられる度合い
1
ヒートマップ分析
既存ページの視線分布を確認 → ホットゾーン特定
こんな悩みに効く#
- 「ページ下部のCTAがほとんどクリックされない」
- 「重要な情報を右側に置いたのに見てもらえない」
- 「テキスト主体のページの読了率が低い」
使い方#
現状の視線パターンを確認する
ヒートマップツール（Hotjar、Microsoft Clarityなど）で既存ページの注目エリアを確認する。F型パターンが発生しているか、重要な情報がホットゾーンの外に配置されていないかを診断する。
上部の水平走査帯を最適化する
ファーストビューの上部に最も伝えたいメッセージ（見出し、価値提案、主要CTA）を配置する。この領域はほぼ全ユーザーが目を通すため、情報の優先度が最も高い。
左端の垂直走査帯を活用する
見出し・小見出しを左揃えにし、各段落の冒頭にキーワードを置く。箇条書き、アイコン、番号付きリストを左端に配置すると、垂直走査時のスキャナビリティが上がる。
F型に抗わず情報を構造化する
F型パターン自体を変えようとするのではなく、パターンに沿って情報を流す。ただし長いページでは小見出しや画像で「新しいF字」を作り、注意を再喚起する。
具体例#
メディアサイト — 記事一覧ページの改善
状況: ニュースメディアのトップページCTRが業界平均の半分。記事見出しを中央揃えで美しく配置していたが読者に届いていなかった。
適用プロセス:
- ヒートマップでF型パターンを確認。中央揃えの見出しはスキャンされず、左端のサムネイルだけが注目されていた
- 見出しを左揃えに変更し、冒頭2語に記事の核心を入れるルールを策定
- サイドバーの広告枠は右端（低注目域）に残し、本文エリアの横幅を拡大
成果: 記事一覧のCTRが3.2%→5.8%に向上。平均セッション時間も2分18秒→3分42秒に延びた。
BtoB LP — 資料請求率の改善
状況: SaaSのランディングページで資料請求CVRが1.1%。機能説明は詳細に書いてあったがフォームへの遷移が少なかった。
適用プロセス:
- 視線パターンを分析。ユーザーは最初の水平走査帯（ヒーロー領域）と2番目の水平走査帯（機能概要）は読むが、その下は左端だけをスキャンして離脱
- ファーストビューにCTAボタンを追加し、2番目の水平走査帯の直下にもフォームへの誘導を配置
- 左端の垂直走査帯上に顧客ロゴとNPS数値を配置し、信頼性を視覚的に訴求
成果: 資料請求CVRが1.1%→2.7%に改善。特にファーストビューCTAからの遷移が全コンバージョンの42%を占めた。
社内ポータル — 通知の見落とし対策
状況: 社内ポータルの重要通知を画面右上のバナーで表示していたが、社員の78%が「気づかなかった」と回答。
適用プロセス:
- F型パターンの知見から、右上は2回目の水平走査の到達点で注目度が低いと判断
- 重要通知をページ最上部の全幅バナー（1回目の水平走査帯）に移動
- さらに左端の垂直走査帯にも「未読通知あり」のアイコンバッジを表示
成果: 通知の認知率が22%→89%に改善。確認までの平均時間が4.2時間→37分に短縮し、社内周知の即時性が大幅に向上した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| すべてのページに適用 | 画像中心のギャラリーページではZ型が適切 | コンテンツタイプに応じて使い分ける |
| 右側を完全に無視 | サイドバーの機能が全く活用されなくなる | 左メインの情報設計にしつつ補助要素を右に |
| 左揃えの過信 | 左端に情報を詰め込みすぎると可読性が低下 | 余白を確保し、左端のスキャン性を保つ |
| モバイル未考慮 | スマホでは画面幅が狭くF型が成立しにくい | モバイルでは1カラムの縦スクロール設計を優先 |
まとめ#
F型パターンは「ユーザーはページをくまなく読まない」という現実を視覚化したものだ。上部の水平走査帯と左端の垂直走査帯がもっとも注目される領域であり、重要情報をこの「ゴールデンゾーン」に配置することで伝達効率が大きく変わる。パターンに逆らうのではなく、パターンを味方につけたレイアウトが離脱率の低下とコンバージョン改善につながる。