視線誘導

4 つのエリア

• 左上(一次視覚エリア): 視線の起点。最重要情報・タイトル・見出し。
• 右上(強い休閑エリア): 視線は通過するが滞在しない。閉じる(×)など補助的な操作にとどめる。
• 左下(弱い休閑エリア): 最も見られない。キャンセルなど低優先の操作を置く。
• 右下(終端エリア): 最終到達点。最も取らせたい操作(主要 CTA)を置く。

注意点

• 右上に主要 CTA を置かない。視線は通過するが滞在しないため見落とされる。
• 主要操作の右にキャンセルを置かない。主要 CTA は終端(右下)に、副操作はその左に並べる。
• 画面内に色・画像・大きなアイコンなど強い視覚要素が複数あると対角線が崩れる。F 型や明示的なフォーカス設計を使う。

3 つのストローク

• 上端の横ストローク: 最初に最も丁寧に読まれる。見出し・ページ主題・最重要のメタ情報を置く。
• 中段の横ストローク: 上端より短く、ざっと流し読みされる。サブ見出しや小見出し直下の重要な一文に向く。
• 左端の縦ストローク: 行頭のキーワードを拾いながら下に降りる。リストの各行は左端に判別キーワードを置く。

いつ使うか

• テキスト主体・行が多い画面(検索結果、一覧、ドキュメント、長文記事)
• 視覚的なメリハリ(画像・色・サイズ差)が少なく、情報が均質に並ぶ画面
• ユーザーが「目的の項目を探す」目線で見る画面(スキャンが前提)

注意点

• 重要な情報を行の中央・右寄りに置かない。スキャン視線は左を通るので、右側に置いた要素は読まれない確率が高い。
• 画像・色付きバッジ・大きなボタン等の強い視覚要素が並ぶと F 型は崩れる。カード型 UI には適用しない。
• 「すべての行を読ませる」ことを期待しない。下に行くほど読まれる量が減るため、最重要のエントリを上に積む配慮が必要。
• F型はNN/gのアイトラッキング研究で実証された観測パターン。ただし読者の意図・目的が明確なら別の見方になるため、設計の出発点として使い、検証で確かめる。

• 操作を完了させる領域（フォーム・ダイアログ・検索パネル）にはグーテンベルク図を当てる。左上を起点に、最も取らせたい操作を右下の終端に置く。
• 目的の項目を探す領域（一覧・履歴・テーブル）にはF型を当てる。判別キーワードを各行の左端に、重要なエントリを上部に置く。
• 1画面に両方の領域が含まれる場合、画面の外枠（見出し・主要アクション・検索フォームの配置）にグーテンベルク図を、行の集合にF型を適用する。