こんにちは、安藤です。最近は雨が多く猛暑から一転、じめじめした天気が続きますね。こんなときは、マイペースに仕事を進めていきたいものです。はい、典型的なB型です。そんな私が今回はF型とZ型について考えてみました。
視覚の導線を定義する言葉として、Z型、F型というものもあります。Z型は、いわゆる斜め読みのことで、横書きの紙媒体に親和性が高いといわれています。視線が左上から始まり、右上に水平移動、その後左下に斜めに移動し、最後に右下に至るというもので、紙媒体などレイアウト領域が決められている場合、まずは全体把握をするためにこのような視線の動きになるようです。
一方、F型はweb媒体に親和性が高いといわれています。視線が左上から右上へと水平に流れ、少し下に移動した後、その点を始点としてもう一度、左から右へと水平に移動。最後にサイトの左側を上から下へと視線を動かすというものです。Z型の全体像の把握に対して、F型は具体的な内容を把握するための視線移動と考えられています。情報が無限に広がるWEBサイトなどは全体把握をすることなく、具体的にZ型ではなく、F型の視線の動きになるようです。
ウェブのユーザビリティ研究の第一人者であるデンマークのニールセン博士よるヒートマップを使ったアイトラッキング調査ではこのF型が顕著に表れています。こんな感じです。
出典：http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
ユーザーの視線の滞在時間が長い順に、赤＞黄色＞青＞灰
ニールセン博士によれば、
- ユーザーまず、水平に読み、コンテンツエリアの上部を、横に読み進むのが一般的である。この一つ目の要素がFの上の横棒を形成する。
- 次に、ユーザーは視線を少し下に移動し、また水平方向に視線を動かす。はじめの水平移動よりも少し短い距離で視線が止まるのが一般的。これにより、Fの下の横棒が形成される。
- 最後に、ユーザーの視線はコンテンツの左側を縦に動く。ゆっくりと上から下へと視線を移動させる場合は、ヒートマップ上でソリッドな実線となり、素早く視線を移動した場合には、斑な線となる。この最後の要素が、Fの縦の棒を形成する。
とのことです。この点から考えると、
- 赤い部分は上部または左側に集中していて、ウェブの場合じっくり読まれないことが多い。
- 上の方に重要な（読んでもらいたい）要素を盛り込む必要がある
- 見出しを目立たせる、コピーをキャッチーするなど、左側の縦の視線移動時に視線が止まる工夫必要
ということなのかもしれません。
紙はじっくり、ウェブはさらっと。紙からウェブに転用する場合などはこのあたりに注意しながら展開するといいかもしれませんね。
