初心者向け講座早見表
前回のWeb系コラムでは余白の持つ役割についてのお話をしました。
今回は、Webサイトに掲載する情報の優先順位について、お話をしたいと思います。
Webサイトに掲載する情報については、重要なものや確実に確認をしてほしいものから、時間があれば一緒に確認をしてほしいもの、あるいは法律や社内規則等のルールによって掲載が義務づけられているもの等、様々な情報が存在します。
従って、Webサイトのレイアウトを考える際には、情報の配置場所をしっかりと決めておく必要があります。言い換えれば、情報に優先順位を設定し、優先順位の高いものから目立つ位置やデザインを割り当てていくことになります。
この際、重要な部分や特に見せたい場所には強い色を置くのが一般的です。
周囲にも強い色があったり、見づらかったりしては、強い色を使っても注意を引くことができません。
通常は強い色を使ったあとは、周囲の色はグレーのような、鮮やかではない色を配置し、また余白を多めに取ることによって色自体をすっきり見せるようにします。
例えば下記のWebサイトでは、左にある強めの配色の周りが、彩度の低い色でまとめられていることが確認できます。
もちろんですが、二番目に目立たせたい場所があった場合、一番目と同じようなデザインにしては、ユーザーはどちらを最初に見たら良いのか迷ってしまいます。従って、二番目に目立たせたいポイントについては一番目よりも控えめな色やデザインを選ぶ必要が出てきます。
航空会社の予約サイトです。目立たせたいキャンペーンなどのバナーを除けば、空席照会のボタンが一番優先順位の高い箇所になると考えられます。実際にこちらのサイトでは「空席照会」ボタンがユーザーの視線の動きを考えた場合に最も注目されやすい位置である「左側」にあるため、ここから空席情報をすぐに検索することが可能です。
グローバルナビゲーションボタンと同じ色で「空席照会」のボタンが作られているのは、その高い優先順位のためであると考えられます。
ここでのもう一つのポイントは色の違いによる優先順位のつけ方です。
例えば、このサイトでは赤色、青色、水色のボタンが左側にあります。
どのボタンも目を引きつける鮮やかな色が使われていますが、最も視覚の誘引性が高いのは赤色です。
ここでは、このWebサイトに来るユーザーがまず何をしたいかということを主眼に置き、よく使うボタンに対しては色も活用して優先順位を設定していることがわかります。ユーザーの目に入りやすくなれば、クリックされる確率も上がります。
「空席照会」といった重要なボタンには赤色のような鮮やかな色を使うことで、ユーザーの操作性がより上がることに繋がるのですね。
Webサイトのレイアウトを考える際には、情報の優先順位も意識して考えていく必要があることをご紹介いたしました。
ぜひこの視点を活用し、ユーザーにとって使いやすいWebサイトとは何かを考えていただければと思います。
（担当：斉藤 万幾子）
