私たちはウェブサイトや雑誌の記事を読むとき、細かいレイアウトであっても無意識に正しい順番で読むことができる。これは単なる偶然ではない。視線誘導という手法により、読ませる順番が意図的にコントロールされているのである。

もしレイアウトが悪いとどうだろうか？私たちはたちまち読む気を失くしてしまうのである。

Timewitchのスライドでは、メッセージがスライドの左上から右下へ流れるように意識している。それは人の視線が動くパターンという生物学的な特性を考慮しているためである。

人の視線の動きは左から右、上から下

では人はどのように視線を動かしているのだろうか。

人の視線パターンに関する研究は、アイトラッキングという方法で100年以上前から行われてきた。

2000年代に入ってから、アイトラッキングはウェブやアプリの開発に応用されるようになった。ユーザーがどのコンテンツを重点的にみているのか知ることで、より効果的なシステムデザインを構築することができる。

出典：Nielsen Norman Group

そして、これまでのウェブデザインにおけるアイトラッキング研究から、人の視線の動きは、主に3パターンあることが知られている。

• グーテンベルク・ダイヤグラム
• F型
• Z型

グーテンベルク・ダイヤグラム

15世紀に活躍した活版印刷技術の発明者、ヨハネス・グーテンベルクの名に由来する。

「均一に配置された情報を見る時、視線は左上から右下に流れるように習慣づけられている」という考えである。記事などテキストが多い場合に当てはまる。

① 最初の視覚領域から②終着領域へ視線を動かしながら、③強い休閑領域と④弱い休閑領域を横見していく。

F型

アメリカNielsen Norman Groupの共同経営者であり、ウェブユーザビリティ研究の第一人者ヤコブ・ニールセン博士が、2006年に明らかにしたウェブコンテンツにおける視線パターンである。

Nielsen, J. (2006) F-Shaped Pattern for Reading Web Content.

視線がアルファベットのFのように、左上→右上→左下へと動く。

情報量が多いウェブコンテンツによくみられる。F型では右下のコンテンツはなかなか関心を持たれない。

Z型

視線がアルファベットのZのように、左上→右上→左下→右下へと動くパターンである。

軽めの内容、画像、複数のオブジェクトがある場合によく当てはまる。ウェブサイトのトップページやプレゼンテーション用スライドの多くがこのパターンである。

上記の３パターンで共通しているのは、最初に見る場所が左上ということである。それから視線の流れは右下（あるいは下）に向かう。

スライドのレイアウトへの応用

ではスライドにはどのようにコンテンツを配置すればよいのだろうか。

1800年代後半に、ドイツの心理学者ヘルマン・エビングハウスが発表した研究によると、人間は物事を記憶する際、最初と最後はよく覚えているが、中間の部分は記憶に残りにくいという特性をもつ（系列位置効果）。

Ebbinghaus, H. (1885) Memory: A Contribution to Experimental Psychology
Translated by Henry A. Ruger & Clara E. Bussenius (1913)
Originally published in New York by Teachers College, Columbia University.
Preface

この説は、現在でも実験によって確認され、支持されている。

よって最も注目されやすい最初の部分・左上には、重要な見出しを持ってくる。そして記憶に残りやすい最後の部分・右下（あるいは下）には、重要な結論やCall to action（行動喚起）する情報を持ってくる。

当たり前のことのようだが、スライドを作る際には、見る人の視線ラインを意識してみるのが、わかりやすいスライドをデザインするコツである。

こぼれ話

日本語を含む多くの言語では、横書きの文章を左から右へと書く。そのため多くの文化圏では、人間の視線は自然と左から右へと移動する。

しかしアラビア語は右から左へと書くため、アラビア語話者の場合、その視線は自然と右から左へと動く。

よってアラビア語圏においては、スライドは逆Ｚ型を意識して作ると、見る人にとってわかりやすい。

この記事の執筆者