【レイアウト】視線の方向を効果的に使う

視線の方向を効果的に使うヘッダ画像

人物画像の視線の先には文章がある。そうすれば断然読者は文章を読みやすくなる。
視線の先に何があるのか、人は気になるのである。
逆に視線と逆に文章があると、デザインは散漫なものになり読者は文章に集中できなくなる。

大分前だが、以下のようなツイートをしたことがある。
その後、このツイートを見たという何人かに詳細の説明を求められたのでまとめてみた。

視線の先に文章を配置する

文章の中に画像を回り込みで配置する場合がある。その場合、基本的には人物の視線の先に文章を置く。

視線の先に文章がある
視線の先に文章がある
視線とは逆方向に文章がある
視線とは逆方向に文章がある

上の画像は文章が視線の先と後の比較であるが、視線の先に文章がある方が文章に関係のある画像であることが自然にわかるだろう。

二人の人物の視線が異なる方向にある場合
二人の人物の視線が異なる方向にある場合
正面を向いている場合
正面を向いている場合

左の画像のように、複数の人物が異なる方向を向いている場合はどうだろうか。
男性は右を向き、女性は正面を向いている。この場合は左に画像、右に文章を配置すれば収まりが良い。
右のように正面を向いている場合はどうだろう。この場合はどちらでもよい。

方向が分からない場合は、吹き出しを付けたと仮定してみる
方向が分からない場合は、吹き出しを付けたと仮定してみる

視線の方向が微妙な場合はどうするか。上のように「もし吹き出しを付けるとしたら」と仮定してみる。吹き出しを付けた方向が文章になる。しかし微妙な場合はそれほど厳密に考える必要はない。

画像は絶対に逆版(左右を逆にする)を使用してはならない
デジタル画像を使用する以前のフィルムをスキャンして使用していた時は、スキャン時にフィルムの表と裏を誤ってスキャンしてしまい逆版になることが多発していたが、デジタル画像を扱う現在は、Photoshopなどの画像処理ツールで意図的に加工しない限り逆版にはならない。
しかし、上記の視線との関係でどうしても画像を右に配置しないとならないが、視線が逆方向に向いている場合など、逆版にすれば楽だろうとつい加工してしまう。人物の顔というものは逆版にすると、表情が大きく変わる。また顔以外に画像に写っている文字や模様が逆になっていることに気が付かず、後から問題になることが多い。
もし逆版を使う場合は、細心の注意を払い、最終手段として使うべきだろう。

画像に文章が回り込まない場合

実際はデザイン制作をしていると、画像に文章が回り込まない場合の方が多い。その場合はどうするか。基本は回り込む場合と同様、人物の視線の先に文章を配置する。
例としてペラのチラシの場合を考えてみる。

実際に制作したチラシ。視線の先に文章がある
実際に制作したチラシ。視線の先に文章がある
イラストを逆版にした例。読者の視線は文章に向かない
イラストを逆版にした例。読者の視線は文章に向かない
読者の視線を内側に向けるようにする
読者の視線を内側に向けるようにする

上の画像は先日制作したチラシだが、実際には左の画像のようにイラストの視線が内側に向き、その先に文章があるため、読者の視線も内側にある文章に向かう。
だが右の画像のようにイラストの視線を外側に向けてみると、読者の視線も外側に向かいまとまりに欠ける。

書籍など見開きページの場合

書籍など見開きページの場合も基本は同じ。視線を書籍のノド(内側)に向ける。

2つの画像の視線が引き合っている
2つの画像の視線が引き合っている

視線をノド側に向けることによりお互い引き合い、読者は2ページの見開きページをまとまりのある1ページとして認識する効果がある。
また上の例の場合、視線をノド側に向けるだけでなく、対角線上に配置することにより、文章を読む方向と一致するため、レイアウトに流れができる。結果読者は文章を読みやすくなる。

視線を利用し画像を導線設計に利用する

上述してきた画像の視線を内側に向けるのと逆の方法を効果的に使う方法もある。

右ページに配置した画像の視線は次ページに導く
右ページに配置した画像の視線は次ページに導く

これは書籍に限定されるが、横組み書籍の場合、ページによる読者の視線遷移は常に左から右となる。上の例のように右ページに配置した画像の視線が外を向いていれば、読者の意識は次ページへと自然に導かれる。読者は画像人物の視線の先には何があるか気になるのである。

同じようにWEBサイトの場合は、画面遷移は常に上から下なので、最下部に視線が下向きの画像を配置すれば、下に何があるのか読者は気になり下へスクロールする。

まとめ ━━ 視線の向きを常に意識する

人物の写った画像を使用する場合、常に視線の向きを意識することは重要である。基本は視線の先には文章を置く。これは紙媒体やWEB媒体など全てに共通する。デザイナーは読者のことを考えながらデザインをすることが必要だ。これはUXデザインでもある。

Amazon.co.jp: あるあるレイアウト すぐに使えて素敵に仕上がるデザインカタログ集 eBook : ingectar-e: 本
Amazon.co.jp: あるあるレイアウト すぐに使えて素敵に仕上がるデザインカタログ集 eBook : ingectar-e: 本
タイトルとURLをコピーしました