色彩をUXに活かすための4つのポイント

2018年01月31日

「色」というものは、どんなデザインにおいても最も重要な要素のひとつです。
ホームページやアプリでは、ボタンをハイライトしたり、まわりのコントラストを絞って要素を目立たせたり、特定の部分にだけ限定的に着色したりして、「色」をうまく活用しているデザインも多くあります。
色によって見せ方やヒエラルキーも変化し、ユーザーがどう受け止めるかにも影響するので、デザイナーにとっても無視できない要素のひとつになっています。

しかし、色彩理論を学んだだけでは、どのように色をデザインに活かしていけばいいかが分かりにくいので、色彩をUXに活かしきれていないと感じている人もいるのではないでしょうか。

今回は、戦略的に色を使って最高のUXに近づけるための4つのポイントをご紹介します。

色彩をUXに活かすための5つのポイント

1. 視線が奪われるようにアクセントカラーを使う

色の使い方というと、どの色の組み合わせを選ぶかだけを考えてしまいますが、それだけにとどまりません。
実際、色の選び方と同じくらい、その色をどのくらいの割合で使うのかという色同士の「比率」を考えることも重要です。

最近ではかすかな色を使った背景のホームページが増えていますが、そうした背景のホームページでは、部分的に「アクセントカラー」を用いると、そこに注目が集まります。

Scheduled — Schedule your text messages for your favorite messenger

例えば、リマインドを設定できるアプリ「Scheduled」の紹介サイトでは、周囲の色に比べて認識しやすい彩度の高い赤色を使ってダウンロードボタンを目立たせています。

Glyph — Super simple resumes

同様に、非常にシンプルなオンライン履歴書を作ることができるサービス「Glyph」は、Twitterアカウントにログインすることで簡単にサインアップができますが、やはりそのボタンを配置するとともに、背景色と近い色ではなくはっきりと識別できる青色を使ってボタンを認識しやすくしています。

Paste by FiftyThree

一方、背景に比べてボタンが質素すぎると、かえって目立たなくなるケースもあります。
例えばslackを使ってデザインのプロジェクト管理を行う「Paste」のホームページでは、Slackのアイコンがあるものの、白いボタンのログインボタンがあまり目立っていません。

パッとみたときに視線が奪われる場所にログインボタンや購入ボタンのような重要なUIがあれば、ユーザーを望ましい方向に誘導することができます。
もちろんボタンの大きさやタイポグラフィも重要ですが、色の変化によって成果も大きく変わってしまうでしょう。

2. 色を使ってUXのリズムを作る

心地いいUXには、「一貫性」が不可欠です。
デザインによって次に何が起こるのかをある程度予測できる「予測可能性」を高めると、一般的に離脱率を下げることができると言われています。
配置やタイポグラフィの繰り返しによっても「一貫性」を生み出すことはできますが、何より最も分かりやすく「一貫性」を作り上げられるのは、「色」を使った場合です。

Teampaper Snap

たくさんの色を使い過ぎずに、できるだけ色彩数を絞って一貫した世界観を作り上げることで、UXを改善することができます。
その例が、スクリーンショットをチームで共有することができるMacOS用アプリ「Teampaper Snap」のページです。
このホームページでは、水色を「背景色」として使ったりボタンの「文字色」として使ったりしていますが、原則としてこの水色を使うことで一貫性を生み出しています。

Cheeze

Facebookメッセンジャーのチャット機能を使ってカメラを操作することができるサービス「Cheeze」では、紫色がUIカラーとして採用されています。ボタンの色だけでなく、イラストにも紫色が使われており、ホームページ全体を見たときに統一感があります。

Johnson Banks

一方、一度にたくさんの色を取り入れすぎると、かえってユーザビリティが低下してしまう恐れもあります。
上のポートフォリオサイトのように、グリッドで大きさは区切られているものの、色によるヒエラルキーが成立していないデザインの場合は、どれをクリックしたらいいのか分からず、ユーザーの選択を鈍らせてしまい、コンバージョン率を下げてしまう原因にもなります。

3. 色のヒエラルキーを作る

デザインにおける「ヒエラルキー」とは、重要度の「階層」のことを指します。
重要度の階層は大きさや配置によっても生み出すことができますが、色彩によってヒエラルキーを作り上げることも大切なことです。

Setlr - The Human Translation Engine

複数の色を使う場合には、色面を広く採るメインカラーとそのほかの色をパッと見て分かるようにデザインします。
例えば人力の翻訳エンジン「Setlr」のホームページは、ブルーの色面が広くなっており、次にエメラルドグリーンがアクセントとして採用されています。
サイト内にはそのほかの色も使われていますが、一貫性を崩さないようにわずかに使われているだけとなっています。

How to Make a Startup Video

一方、スタートアップ企業の動画の作成方法をレクチャーしている「How to Make a Startup Video」は、ブルー・ピンク・イエローの3色が同じような割合で使われています。
文字の大きさによってヒエラルキーは生み出されていますが、色を使ったヒエラルキーがないので、例えばブルー・ピンク・イエローのボタンが並列しているときにどれを最初にクリックすればいいのかをためらってしまいます。

ユーザーに最も伝えたい情報があっても、色によって台無しになることもあるので、戦略的に色の使い方を決めておきたいものです。