Writer:Asai (20.11.19)
今回はWebデザインのロゴの位置について話をしてみたいと思います。
多くのWebサイトでは、画面の左上にロゴが配置されています。これって何故なのかご存じですか？実は、左上に置いてあるのはたまたまではなく、ちゃんとした理由があるんですよね。
人の視線は2つの型に分かれている。
まず、これはWebデザインではよく言われていることです。それが、「人の視線はZ型、F型で動いている」ということです。では、それぞれについて触れていきたいと思います。
Z型
図のように、視線が「Z」の形をして動く様子を指します。チラシや雑誌などではこの視線の動きを意識したレイアウトを組むことも多いそうです。
F型
図のように、視線が「F」の形をして動く様子を指します。Webサイトではこの視線の動きが多いようですね。左側にはメニュやーバナーがあることもあるので、そのように視線が動くのかもしれません。
「グーテンベルク・ダイヤグラム」という考え方
グーテンベルク・ダイヤグラムとは、「同じ種類の情報が均等に配置されている場合」の視線の動きのことをいいます。図のように、人の視線は同じ種類の情報が並んでいると、左上から右下へ移動していきます。そのため、重要な情報は左上から右下に流れるように配置すると良いと考えられています。
これまで人の視線の動きについて書いてきましたが、一つ気付いたことがありませんか？
そう、どの型も「左上」が始点になっているのです。つまり、大多数のユーザーは「左上から見ている」ということなのです。企業ロゴやサイトロゴというのは、そのサイトのアイデンティティです。そのため、企業ロゴやサイトロゴを左上に配置しているWebサイトが多いんですね。
中央や右上配置はNGなのか？？
左上に配置する理由については、ご理解いただけたと思います。では、「中央」や「右上」ではダメなのか？？という疑問も出てくると思います。
そちらについては、下記のWebサイトに詳細記事が掲載されています。
右上配置は左上配置よりも覚えられにくい
上記の記事では、右上配置は左上配置よりもブランドが覚えられにくいという研究記事が紹介されています。リンク先の研究記事を見てもわかるように、左上と右上では、大きな差が見られていることが分かります。
デザインを優先して右上を取るか、それともブランドを覚えやすくするために左上を取るか。右上に配置するのであれば、Webサイトの目的からずれていないかをしっかりと考える必要がありますね。
中央配置はトップページに戻りにくくさせている
中央配置のロゴは色々なWebサイトで見られています。記事内では、左上に配置する場合と中央に配置する場合は、ブランドの覚えられやすさに違いはなかったと報告されています。
しかし、一方で中央配置のロゴはユーザーがWebサイトのトップページへ移動することを阻害していると報告されています。ユーザーは左上にある要素（ロゴやトップページへのリンク）をクリックしてトップページに移動することが習慣化されているためとのことです。つまり、ロゴを中央に配置する場合は、グローバルメニューの一番左にトップページへ移動するリンクを設置することが望ましいと考えられますね。
だから、ロゴは左上によく配置されている
以上のことより、ロゴは左上に配置することが一番手になると考えられるのではないでしょうか。しかしデザインを行っていくと、全てのWebサイトのロゴを左上に配置できるわけではありません。その場合は、ナビゲーションなどにトップページへのリンクを設置するなどユーザーへの配慮が必要だと考えられます。デザインを優先し、Webサイト本来の目的を達成することを阻害しているのであれば、それは優秀なWebデザインとは言えませんからね。
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。
