其の35　視線の移動を意識したレイアウトに

Webサイトのページ上には、さまざまな要素が配置される。制作者はまず、その要素のプライオリティー（優先順位）を考え、配置やゾーニングを行っていくわけだが、制作者が意図するプライオリティーに沿って、ユーザーにページの内容を見せていくにはどうしたらいいか？

ユーザーがサイト上で、テキストや画像、写真を目にするとき、個々の要素自体の色や背景色といった視覚的な情報も、同時にとらえている。キャッチコピーやインパクトのある写真も視線を誘導するパーツのひとつだが、ここでは色彩を利用してユーザーの視線を誘導させることを考えてみよう。

ユーザーの目線を最初にどこに誘導し、次にどこに移動させるか。制作する側が意図する通りにページを見せるには、まず人間の視線の流れを考えなければならない。ここで大切なのは目線の動きは左から右、上から下が基本になるということ。それにより、個々の要素配置はもちろん、配色も決まってくる。

左右横並びに、異なる色を使用した複数の見出しを配置したとする。視覚的に「横並び＝並列」と認識されるため、横並びに配置さえすれば、どんな色を使っても問題ないと考えていると、飛ばし読みされてしまう可能性がある。

前述したように、視線の流れは左から右・上から下だ。たとえば誘目性が高いオレンジを中央に配置し、残りの見出しをその他の色にした場合はどうだろう。視線の流れから考えて、オレンジが一番最初に目に入り、オレンジから右の見出ししか目に入りにくい【1】。

異なる色を並列に並べる場合も、やはり視線の流れと配置の順番を同時に考慮し、目立つ色を一番左側に置く。あとは自然にユーザーの視線が右側に流れていくだろう【2】。