TOP › UX用語 › Fパターン
デザイン・情報設計

FパターンF-Shaped Pattern

Fパターン(F-shaped pattern)とは、ウェブの文章を読むとき、人の視線が、アルファベットのFの形に動きやすい、という傾向である。ページの上のほうの行と、左端に、視線が集まる。 たとえば、見出しも太字もない、長い説明文を開いたと […]

Fパターン(F-shaped pattern)とは、ウェブの文章を読むとき、人の視線が、アルファベットのFの形に動きやすい、という傾向である。ページの上のほうの行と、左端に、視線が集まる。

たとえば、見出しも太字もない、長い説明文を開いたとする。最初の1〜2行は、横に読む。少し下で、もう一度、短く横に読む。そのあとは、左端だけを、上から下へ眺める。右側の文章は、ほとんど読まれない。

Fの3つの部分

NN/g の記事(カラ・パーニス、2017年)では、次の3つの動きが、Fを作る。

  1. 上のほうを、横に読む。
  2. 少し下で、短く、もう一度横に読む。
  3. 左側を、縦に眺める。これがFの縦棒になる。

その結果、最初の行は、あとの行より見られる。各行の最初の数語も、残りより見られる。

見出しのない文章でFの形に視線が集まる画面と、小見出しと箇条書きで視線が広がる画面の比較
図1:Fパターンと、崩す書き方(説明用に作った例。Fの形は NN/g の記事に基づく)

なぜ起きるのか

起きやすいのは、次の条件が重なったときである。文章に、太字、箇条書き、小見出しがない。早く済ませたい。全部を読むほどの興味はない。目を導く手がかりがないと、人は、Fを描くように読む。読み進める手がかりが弱いと、途中でやめることもある。

Fパターンを崩す書き方

  • 大事なことは、最初の2段落に書く。
  • 小見出しを、目立たせる。情報の多い言葉から始める。
  • 関連する内容をまとめて、大事な言葉を太字にする。
  • リンクの文字は、行き先が分かるものにする。
  • 箇条書きや、番号付きの一覧を使う。
  • 要らない内容は、削る。

使うときの注意

  • Fは、守るべき形ではない。NN/g は、Fで読まれることを、問題として扱っている。右側にある大事な内容が、読み飛ばされるからである。
  • 決まりではなく、普段の癖である。興味のある段落は、じっくり読まれる。形がEに近くなることもある。
  • パソコンでも、スマートフォンでも、見られる。
  • 右から左へ読む言語(アラビア語など)では、左右が逆になる。
  • 本文の話である。ナビゲーションバーには当てはまらない。
  • 読み方は、Fだけではない。NN/g は、ほかにも、いくつかの読み方を挙げている。

語源・位置づけ

Fパターンは、2006年に、視線計測の調査から見つかった。NN/g の2017年の記事は、その後の調査でも、同じ傾向が見られたと報告している。視線計測やビジュアルヒエラルキーと、あわせて考える。

出典

関連用語

「UX用語」のカテゴリー