#003
視覚デザイン
#003F型パターン
F型パターン
別名・表記:F Shaped PatternF-PatternF型パターン
UIXHERO Definition
Web上の情報を探す目的でテキストをスキャンする際、ユーザーの視線はアルファベットの「F」の字を描くように動く傾向がある。
概要
Nielsen Norman Groupのアイトラッキング調査で発見された、Webページを閲覧する際のユーザーの視線の動き。 文章コンテンツが多いページにおいて、視線は「上部を左から右へ(Fの上の棒)」「少し下がって左から右へ短く(Fの中の棒)」「左側を縦に下へ(Fの縦棒)」という順序で動く傾向がある。
UXでの活用
- 重要な情報は左上に: 最も読まれるのはページの冒頭と、各行の左側であるため、重要なキーワードは「見出しの先頭」や「段落の最初の2単語」に入れる。
- 見出しの活用: ユーザーは本文をすべて読まず、見出しだけを拾い読み(スキャン)して、興味のある場所だけ詳しく読む。見出しを適切に配置することで、F型のスキャンを補助する。
- 結論ファースト: 重要な結論やメリットは、視線が離脱する前のページの最初に提示する(逆ピラミッド型構成)。
💡 使いどころ
記事ページや検索結果一覧のデザイン。重要な情報は左側と上部に配置する(Zの法則も同様)。
⚠️ 注意点・誤用
レスポンシブデザイン(スマホ)では画面幅が狭いため、F型よりもI型(上から下への一直線)に近い視線移動になる。デバイスによる違いを考慮する。
具体例
- 重要な結論やキーワードを、段落の最初の2単語に含める(見出しの左寄せ)
- Google検索結果(上位と左側に視線が集中する)
出典・参考文献:
- Nielsen Norman Group.F-Shaped Pattern for Reading Web Content.