事例制作ログ

事例の制作・活用に関するアレやコレ、かなり雑談

ウェブと紙のデザイン考察 ―視線の動き編― 紙はZ型、WebはF型

      2015/10/20

ame

こんにちは、安藤です。最近は雨が多く猛暑から一転、じめじめした天気が続きますね。こんなときは、マイペースに仕事を進めていきたいものです。はい、典型的なB型です。そんな私が今回はF型とZ型について考えてみました。

視覚の導線を定義する言葉として、Z型、F型というものもあります。Z型は、いわゆる斜め読みのことで、横書きの紙媒体に親和性が高いといわれています。視線が左上から始まり、右上に水平移動、その後左下に斜めに移動し、最後に右下に至るというもので、紙媒体などレイアウト領域が決められている場合、まずは全体把握をするためにこのような視線の動きになるようです。

 

一方、F型はweb媒体に親和性が高いといわれています。視線が左上から右上へと水平に流れ、少し下に移動した後、その点を始点としてもう一度、左から右へと水平に移動。最後にサイトの左側を上から下へと視線を動かすというものです。Z型の全体像の把握に対して、F型は具体的な内容を把握するための視線移動と考えられています。情報が無限に広がるWEBサイトなどは全体把握をすることなく、具体的にZ型ではなく、F型の視線の動きになるようです。


01

ウェブのユーザビリティ研究の第一人者であるデンマークのニールセン博士よるヒートマップを使ったアイトラッキング調査ではこのF型が顕著に表れています。こんな感じです。


02

出典:http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
ユーザーの視線の滞在時間が長い順に、赤>黄色>青>灰

 

ニールセン博士によれば、

  • ユーザーまず、水平に読み、コンテンツエリアの上部を、横に読み進むのが一般的である。この一つ目の要素がFの上の横棒を形成する。
  • 次に、ユーザーは視線を少し下に移動し、また水平方向に視線を動かす。はじめの水平移動よりも少し短い距離で視線が止まるのが一般的。これにより、Fの下の横棒が形成される。
  • 最後に、ユーザーの視線はコンテンツの左側を縦に動く。ゆっくりと上から下へと視線を移動させる場合は、ヒートマップ上でソリッドな実線となり、素早く視線を移動した場合には、斑な線となる。この最後の要素が、Fの縦の棒を形成する。

とのことです。この点から考えると、

  • 赤い部分は上部または左側に集中していて、ウェブの場合じっくり読まれないことが多い。
  • 上の方に重要な(読んでもらいたい)要素を盛り込む必要がある
  • 見出しを目立たせる、コピーをキャッチーするなど、左側の縦の視線移動時に視線が止まる工夫必要

ということなのかもしれません。


紙はじっくり、ウェブはさらっと。紙からウェブに転用する場合などはこのあたりに注意しながら展開するといいかもしれませんね。

 

この記事を書いた人

あんどぅ
あんどぅ
プロフィール準備中

 - マーケティング

  関連記事

IoT、AI、VRの進化で革新が起こる

アーキテクチャーでは年間に100取材以上の導入事例制作を行っています。その中で感 …

導入事例2.0を目指して

2016年もそろそろ終わろうとしていますが、振り返ると今年も100本近くの導入事 …

今年のテーマは「導入事例でマーケティング」。事例制作ログ2016始まります。

みなさまこんにちは。社長のきたみーです。花粉症真っ盛り、お花見真っ盛りですね。 …

導入事例でマーケティング「どのへんからIoTですか?」

今年になって、予想通りというかIoT関連の事例取材が増えています。熱中症対策や在 …

マーケティングに貢献する導入事例制作は、最初の“設計”が肝心

「導入事例って、よくあるA4ペラのあれでしょ?」・・・という会話。もちろんそれは …

2016年は「IoT導入事例」「インダストリー4.0導入事例」やります

にわかに業界キーワードとして急上昇を続けている「IoT」と「インダストリー4.0 …

媒体特性を考えて事例を使い分ける

導入事例を1つ2つ作ったけれど、営業活動や販促活動の中に、導入事例をどう活用した …

コンテンツSEOを事例記事で実現できる?(テストもしてみた)

「コンテンツSEO」というものをご存じだろうか?検索エンジンで上位を目指す検索エ …

ウェブマーケティングと導入事例の相性

自社のウェブサイトを営業マンとして最大限に活用し、優良な問い合わせ(インバウンド …

導入事例テンプレートを提供開始しました

このたび、より効率的にお客様の事例制作をご支援するため、導入事例専用のオリジナル …