WEB作成時に押さえたいPOINT 2章2016/02/18

サイトデザイン

見てもらいコンテンツが充実していたとしても、それを効果的にユーザーへ伝えることが出来なければ意味がありません。また、見てもらってるにもかかわらず、求めているターゲット層でなければ目的を達したとは言えないでしょう。

目的に合わせたデザイン

いきなり見た目を作り始めるわけではありません。まずはデザインをするために必要な情報を集めます。

1.サイトの目的：コーポレートサイト、ブランディングサイト、ECサイト…
サイトレイアウトの方向性を決定づける要素です。ブランディング強化が目的なら、ファーストビューで大きい写真を使用したレイアウトが向いています。ECサイトなどでは、素早く目的に導くために商品などの情報を一覧できるレイアウトが向いています。

2.ブランドイメージ：清潔感、安心感、高級感…
メインカラーを決める際に重要となります。色によって心理的に受ける印象は異なります。例えば、青は冷静さ・クールな印象を与えます。対照に、赤は人の感情を興奮させるため、躍動感をもたらします。イメージに合わせたカラー選択をすると良いでしょう。

3.ターゲット層：男性・女性、地域、年齢層…
サイトの装飾を決める際に参考となる要素です。シニア向けマンションを紹介するサイトに、若い家族写真使用しないように、それぞれの対象に合った写真・装飾選びが必要になります。

これら3つの要素を意識してデザインすることで、ユーザーを惹きつけ、感覚的に選びとってもらえるサイトになります。
ただし、場合によってはこれらの要素をそのまま採用すると逆効果になることもあります。サイトの目的を見つめ直し、何が一番重要かを考慮して柔軟にデザインすることも必要です。

ユーザーを迷わせないデザイン

WEBサイトが紙媒体（チラシや雑誌）と大きく異なるのは、ユーザー自らに動いてもらい求める情報にたどり着いてもらわなくてはならない点です。雑誌であればページをめくれば自然と次の情報に移れますが、WEBサイトはまずユーザーに「欲しい情報に繋がるリンクを探してもらう」ところから始まります。
ユーザーを迷わせることのないデザインのポイントをまとめてみました。

・ボタン
ボタンは押せることがひと目でわかるデザインにします。四角く囲んだデザインが多いですが、周りにボタン以外の要素で四角く囲ったデザインある場合は、それらと区別をつけた工夫が必要になります。

・アイコン
最近はシンプルにアイコン一つを配置するものが増えてきました。その際、ここで使用するアイコンはひと目で意味がわかる形を選ばなければ、ユーザーはこのアイコンをスルーしてしまします。凝った形のものより汎用的なデザインを選びましょう。

・テキストリンク
テキストにリンクを貼る場合は、非リンクテキストにまぎれてテキストリンクと気づかれなければ意味がありません。テキストリンクには色味や下線などで区別をつけたデザインスタイルを入れる必要があります。

・よく使用するメニューは格納しない
スマートフォンではよく見られる格納型メニューですが、目的のものがどこにあるのかわかりにくくなります。使用頻度の高いものに関しては、極力格納せず、ひと目で見つけられるようにすると良いでしょう。

・いま見ているページがどこかわかるようにする
ページ数が多いサイトでは、いま見ているページがどこをたどってたどり着いたページかわかりにくくなります。ひとつの方法に「パンくず」を設置する手もありますが、現在地のメニューボタンの色を通常と違う色を使用するなどの方法もあります。

特に押さえておきたいポイントをピックアップして紹介しましたが、これらをすべて適応したらユーザビリティがあがるわけではありません。WEBサイトを閲覧している環境はユーザーにより様々で、それぞれに合ったユーザビリティの考え方があります。
「これをしたら完璧」ではなく、サイトの目的に合った条件に優先順位をつけてユーザビリティ向上をはかると良いでしょう。

まとめ

designは日本語訳で「設計・意匠」と訳されます。今まで述べてきたように、目的に沿ってレイアウトや色を決めていく過程はまさしく設計です。デザインが世間一般で言う、いわゆる“奇抜で目を引くオリジナリティにあふれたもの”ではないことがわかって頂けたと思います。
オリジナリティを出したい気持ちは誰もが持つものですが、「誰に見てもらいたいのか、そしてどうして欲しいのか」を忘れずにしっかりとdesignすることで、自ずと「良いサイト」に仕上がるでしょう。