Travelogue(トラベローグ)

Travelogue

分かりやすく伝えるために色を使う

2009.02.23

Webサイトに掲載された内容をユーザーにスムーズに理解してもらうために、色をうまく使うと効果的です。
「この文字は目立たせたいから赤にして下さい」
お客さんからそう言われることがありますが、これもその効果的な色の使い方のひとつです。
背景色にもよりますが、基本的に赤は目を引く色ということは誰でも知っていることです。

先日、テキストリンクのスタイルに関するエントリーの中で、訪問済みリンクの色の変化について少し書きました。
青いテキストはまだ閲覧していないページ、紫になっていたら既に閲覧済みのページ。と、使い勝手の向上につながる情報を色でユーザーに伝えることも可能なわけです。

目次

色を選定するときは、それぞれの色が持つ特性や相性などをよく踏まえる必要がありますが、とりあえず今回はそっちの話にはふれません。

情報の種類と色を関連付ける

例えば、リンクが設定されているテキストの色を青にしているサイトでは「青い文字=リンクが設定されている」という関連付けがされているということになります。
この場合、リンクではないテキストを強調だとか見た目のデザイン上の理由で青にしてしまうと、ユーザーはそれをテキストリンクなのかと誤解してしまう可能性が生じます。
このようにユーザーを混乱させないために、最初に定めたルールを一貫して守りデザインを制作することが大切です。

ちなみに画像のボタンは、テキストリンクと同様にリンクが設定されている要素なのでテキストリンクと同じ色使いだとさらに良いかもしれませんが、何らかの事情で難しければ、ボタンはボタンで統一されていれば特に問題はないと僕は思っています。

その他にも場合によって色々と考えられますが、例えばレイアウトを色で明確に区別したり、もっと細かいパーツ(見出し、箇条書き、引用、注釈、補足、問い合わせ先など)に、特定の色やスタイルを関連付ける(例:薄い背景色を敷いて他の文章と区別する等)と、特に文章がズラ~っと長いページとかでは格段に分かりやすくなり、見た目にも良いアクセントになります。
ただし、ひとつのデザインの中で色の数を増やしすぎるとまとまりが無くなり、様々な意味で逆効果になってしまうので注意しましょう。

現在位置を把握するために色を使う

Webサイトはページ数が多くなればなるほど、ユーザーに構造を把握してもらうのが困難になります。
大抵の場合、ユーザーはひとつのWebサイトにじっくり時間をかけてはくれません。
また、検索エンジン経由で訪れるユーザーはトップページから入ってくるとは限りません。

現在サイト内のどのページを閲覧しているのかを分かりやすく伝えることは、ユーザーがWebサイト閲覧する上でとても役に立ちます。
このためには「パンくずリスト」や「メニュー項目をフォーカスしておく方法」がよく使われます。
フォーカスというのは、並んでいるメニュー項目の中で現在位置の項目だけを別の色に変化させるなど、他のメニュー項目と差別化させておく方法です。

また、大規模なサイト、複数のジャンルの製品を扱っている企業などのサイトで時々使う方法として、カテゴリごとにテーマカラーを変えてデザインすることがあります。
この場合、色は変化してもサイト全体の統一感を保てるようなデザイン上の配慮が必要です。(完全な別サイトとして別デザインを制作するなら問題ありませんが)

Copyright © 2004-2017 Travelogue.

Pagetop