色彩をUXに活かすための4つのポイント
- 2017年4月21日
- 4,516
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 執筆記事一覧はこちら
「色」というものは、どんなデザインにおいても最も重要な要素のひとつです。
ホームページやアプリでは、ボタンをハイライトしたり、まわりのコントラストを絞って要素を目立たせたり、特定の部分にだけ限定的に着色したりして、「色」をうまく活用しているデザインも多くあります。
色によって見せ方やヒエラルキーも変化し、ユーザーがどう受け止めるかにも影響するので、デザイナーにとっても無視できない要素のひとつになっています。
しかし、色彩理論を学んだだけでは、どのように色をデザインに活かしていけばいいかが分かりにくいので、色彩をUXに活かしきれていないと感じている人もいるのではないでしょうか。
今回は、戦略的に色を使って最高のUXに近づけるための4つのポイントをご紹介します。
色彩をUXに活かすための5つのポイント
1. 視線が奪われるようにアクセントカラーを使う
色の使い方というと、どの色の組み合わせを選ぶかだけを考えてしまいますが、それだけにとどまりません。
実際、色の選び方と同じくらい、その色をどのくらいの割合で使うのかという色同士の「比率」を考えることも重要です。
最近ではかすかな色を使った背景のホームページが増えていますが、そうした背景のホームページでは、部分的に「アクセントカラー」を用いると、そこに注目が集まります。
Scheduled — Schedule your text messages for your favorite messenger
例えば、リマインドを設定できるアプリ「Scheduled」の紹介サイトでは、周囲の色に比べて認識しやすい彩度の高い赤色を使ってダウンロードボタンを目立たせています。
同様に、非常にシンプルなオンライン履歴書を作ることができるサービス「Glyph」は、Twitterアカウントにログインすることで簡単にサインアップができますが、やはりそのボタンを配置するとともに、背景色と近い色ではなくはっきりと識別できる青色を使ってボタンを認識しやすくしています。
一方、背景に比べてボタンが質素すぎると、かえって目立たなくなるケースもあります。
例えばslackを使ってデザインのプロジェクト管理を行う「Paste」のホームページでは、Slackのアイコンがあるものの、白いボタンのログインボタンがあまり目立っていません。
パッとみたときに視線が奪われる場所にログインボタンや購入ボタンのような重要なUIがあれば、ユーザーを望ましい方向に誘導することができます。
もちろんボタンの大きさやタイポグラフィも重要ですが、色の変化によって成果も大きく変わってしまうでしょう。
2. 色を使ってUXのリズムを作る
心地いいUXには、「一貫性」が不可欠です。
デザインによって次に何が起こるのかをある程度予測できる「予測可能性」を高めると、一般的に離脱率を下げることができると言われています。
配置やタイポグラフィの繰り返しによっても「一貫性」を生み出すことはできますが、何より最も分かりやすく「一貫性」を作り上げられるのは、「色」を使った場合です。
たくさんの色を使い過ぎずに、できるだけ色彩数を絞って一貫した世界観を作り上げることで、UXを改善することができます。
その例が、スクリーンショットをチームで共有することができるMacOS用アプリ「Teampaper Snap」のページです。
このホームページでは、水色を「背景色」として使ったりボタンの「文字色」として使ったりしていますが、原則としてこの水色を使うことで一貫性を生み出しています。
Facebookメッセンジャーのチャット機能を使ってカメラを操作することができるサービス「Cheeze」では、紫色がUIカラーとして採用されています。ボタンの色だけでなく、イラストにも紫色が使われており、ホームページ全体を見たときに統一感があります。
一方、一度にたくさんの色を取り入れすぎると、かえってユーザビリティが低下してしまう恐れもあります。
上のポートフォリオサイトのように、グリッドで大きさは区切られているものの、色によるヒエラルキーが成立していないデザインの場合は、どれをクリックしたらいいのか分からず、ユーザーの選択を鈍らせてしまい、コンバージョン率を下げてしまう原因にもなります。
3. 色のヒエラルキーを作る
デザインにおける「ヒエラルキー」とは、重要度の「階層」のことを指します。
重要度の階層は大きさや配置によっても生み出すことができますが、色彩によってヒエラルキーを作り上げることも大切なことです。
Setlr - The Human Translation Engine
複数の色を使う場合には、色面を広く採るメインカラーとそのほかの色をパッと見て分かるようにデザインします。
例えば人力の翻訳エンジン「Setlr」のホームページは、ブルーの色面が広くなっており、次にエメラルドグリーンがアクセントとして採用されています。
サイト内にはそのほかの色も使われていますが、一貫性を崩さないようにわずかに使われているだけとなっています。
一方、スタートアップ企業の動画の作成方法をレクチャーしている「How to Make a Startup Video」は、ブルー・ピンク・イエローの3色が同じような割合で使われています。
文字の大きさによってヒエラルキーは生み出されていますが、色を使ったヒエラルキーがないので、例えばブルー・ピンク・イエローのボタンが並列しているときにどれを最初にクリックすればいいのかをためらってしまいます。
ユーザーに最も伝えたい情報があっても、色によって台無しになることもあるので、戦略的に色の使い方を決めておきたいものです。
4. 同系色による美しさを演出する
色の組み合わせを選ぶときに、ある色の補色を選んだり三和色を選んで鮮やかに演出する方法もあります。
一方で、メインカラーとなる１色を選んだときに、あえてその同系色を使うことでブランドカラーのイメージを構築する方法もあります。
Co-motion | Design & Branding Studio
クリエイティブエージェンシー「Co-motion」のトップページは、同系色による美しさを上手く演出できている好例のひとつです。
薄いブルーの背景に、水色の鮮やかなパッケージが目に飛び込みます。
また、スマートフォンで簡単に決済するプラットフォームを提供している「Instant Access」のホームページのように、同系色同士のグラデーションを使うのも、一貫性が生み出されて美しく見えます。
まとめ
以上、戦略的に色を使って最高のUXに近づけるための4つのポイントをご紹介しました。
色の使い方ひとつとっても、戦略的に考えてデザインすることで、見た目も使い勝手も大きく変わることがご理解いただけたのではないでしょうか。
ユーザーにとって使いやすく、見やすく、好きになってもらえるホームページにするために、まずはご自身のホームページの「色」を見直してみてはいかがでしょうか。
