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

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

しかし、色彩理論を学んだだけでは、どのように色をデザインに活かしていけばいいかが分かりにくいので、色彩を 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色が同じような割合で使われています。
文字の大きさによってヒエラルキーは生み出されていますが、色を使ったヒエラルキーがないので、例えばブルー・ピンク・イエローのボタンが並列しているときにどれを最初にクリックすればいいのかをためらってしまいます。

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

4. 同系色による美しさを演出する

色の組み合わせを選ぶときに、ある色の補色を選んだり三和色を選んで鮮やかに演出する方法もあります。
一方で、メインカラーとなる１色を選んだときに、あえてその同系色を使うことでブランドカラーのイメージを構築する方法もあります。

Co-motion | Design & Branding Studio

クリエイティブエージェンシー「Co-motion」の トップページ は、同系色による美しさを上手く演出できている好例のひとつです。
薄いブルーの背景に、水色の鮮やかなパッケージが目に飛び込みます。

Instant Access

また、スマートフォンで簡単に決済するプラットフォームを提供している「Instant Access」のホームページのように、同系色同士のグラデーションを使うのも、一貫性が生み出されて美しく見えます。

まとめ

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

色の使い方ひとつとっても、戦略的に考えてデザインすることで、見た目も使い勝手も大きく変わることがご理解いただけたのではないでしょうか。
ユーザー にとって使いやすく、見やすく、好きになってもらえるホームページにするために、まずはご自身のホームページの「色」を見直してみてはいかがでしょうか。