UIXHERO
#003
視覚デザイン
#003

F型パターン

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.
作成: 2026年1月26日
更新: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: