UXの信号色「赤・オレンジ・緑」はどのように使うべきか?

Ben Mulholland

Ben氏はProcess Street社で、ライターとして活動しています。戦略構築と、悪いgifファイル、リサーチなどに精力を注いでいます。網を破れなかったり、アバランチェを閲覧したりする時は、彼をツイッターで見つけて下さい

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

The Traffic Lights Of UX: Staying Smart With Color

色彩理論がUXにおいて重要な役割を果たすことは、説明するまでもありません。CTAの色による強調からテキストの可読性をあげる効果まで、コンテクストにあった色の選択については最大限考慮する必要があります。適切に配色をすることによって、ユーザーからの反応を上手く引き出し、あなたの製品のユーザー体験を最大限ポジティブなものにすることを期待できます。

UXにおける信号色:赤・オレンジ・緑

おそらく最も重要な色彩は、赤・オレンジ・緑なのではないでしょうか。この3色は、「UXにおける信号色」と言えます。これは、一般的な組み合わせの中で最も使いやすい色彩だからという理由ではなく(実際、その意味で最良な色彩ではありません)、この3色が「行動を誘発する」色彩だからです。

青い色のボタンを見て、「このボタンは絶対に押さなくてはならないものだ」と思ったことはあったでしょうか? また「これはやってはいけないことだ」と瞬間的に認知させる茶色のサインはありましたか? そんなことは今までなかったでしょう。なぜなら、世の中の広い範囲で、赤・オレンジ・緑は、私たちの心の中に潜在的な意味をもつ色として植え付けられているものだからです。

Hubspotの記事では、単一のCTAの色を変更するだけで、21%もクリック率が増加したことが分かっています。その結果、たった数日間の間だけで大きな利益が得られました。

いまあなたのサイトでは、周囲のコンテンツの中から対象の要素を目立たせるために、これらの色彩を使っているかも知れません。ですが、UXに関して言えば、配色とはボタンを目立たせる以上の意味を持ちます。最初から最後までユーザー体験をつくることが求められます。これには、一連のイベントから、ユーザーが感じる満足の度合いや頻度、さらに潜在的にはすべての過程におけるユーザーの感情も含まれます。

色彩とは気まぐれな女王のようなもので、既に述べた通り以前使ったことのあるボタンで同じ効果を得ることは出来ません。あなたとユーザーの両方にとってベストな方法を見つけたいなら、赤の代わりに緑のボタンを使うことで、どのようにユーザーに伝わるかを理解する必要があります。

よく知られていること:色彩のコンテクスト

色彩をどのように用いるかを知るためには、大多数のユーザーがそれぞれの色に対してどのようなことを無意識に連想するか知る必要があるでしょう。ここで全ての色についてくまなく議論することもできますが、まずは今回のテーマである信号色について注目していきたいと思います。

:警告と重要性

一般的に、赤は「警告」や「重要なコンテンツ」を無意識に連想させます。その理由は誰を対象とするかにより変わりますが、毎日利用しているアプリやゲームなどを少し注意深く見てみるといくつか例を見つけることが出来ると思います。

例えば、(Windowsユーザーの人は)ブラウザの右上にある「閉じる」のボタンを見てみましょう。見つかったら、そこにマウスを重ねてください。赤くなりましたね。これは、閉じようとするあなたに警告を与え、閉じる前に再確認するように伝えようとしているからです。

ユーザーが赤を警告として(または、少なくとも望ましくない行動として)認識するのが習慣化している他の例として、エラーメッセージがあります。黄色が使われることもありますが(この場合、やや重要度は低いです)、エラーのほとんどは赤いシンボルアイコンと一緒に表示され、これを表示させてはいけないのだと、ユーザーによく理解させます。

traffic_02

”STOP”を赤で表示するエラーメッセージ

潜在的な色彩の意味合いは、アプリやウェブサイトに限らず、OSでも使われています。色のユーザー体験に関する文化、考え方は、生活の隅々まで広がっていると言えるでしょう。

例えば、テレビゲームにおける色彩を見てみましょう。テレビゲームは、アプリやウェブサイトにおけるUXと同じようなゴールを達成しようとして作られます。制作者は、視覚に訴えるビジュアルやインタラクティブなステージ演出を使い、プレイヤー(または視聴者)にプレイし続けてもらおうとします。このような目的に向かい、仮説を検証しながらユーザーとコミュニケーションをとる必要があります。色彩はムードを作り出したり重要なアイテムを強調したり、その他もっと多くの様々な効果を作り出すために使われます。

結果としては、赤は危険なアイテムや最重要アイテムに対して使用されるのが、共通的な使われ方となっています。ゼルダの伝説を例に挙げてみると、プレイヤーにとって最重要なライフポイントが、画面の上の方に、赤いハートとして表示されています。

traffic_03

「ゼルダの伝説」のスクリーンショット。プレイヤーの状態を赤いハートを使って表示している。

同様に、ミラーズエッジ(フリーラン形式のゲーム)でも、アイテムを赤で強調させたり、主人公が登って進んでいくところに赤を使用しています。

オレンジ:一時的な警告

オレンジは一般的には、即座にユーザーの注意をひく必要があるアイテムや、待ち時間の表示に対して使用されています。赤と少し役割が似ていますが、オレンジはより「一時的な性質」を持っています。

オレンジからは、これはUXを考える時に知っておくべき2つのことが連想されます。1つはユーザーに対して即座の指示を表示する場合であり、もう一つは待機の必要がある場合です。例えば、Process Streetのアプリでは、内容の変更を保存していない時の警告で活用されています。

Process Streetのアプリは、変更を保存していないことを知らせるのにオレンジを使用しています。

Process Streetのアプリは、変更を保存していないことを知らせるのにオレンジを使用している。

または、Inboxの画面での「待機」状態でも使われています(大変素晴らしいUXをしています)。

traffic_05

Googleが提供する、Inboxのサイトは、表示に時間がかかるアイテムを表示する時にオレンジを使っている。

他にも具体的な事例が必要でしょうか? まさにこの記事のタイトルそのもの、信号機と同じ役割に使用されています。オレンジは見ているものに対して待機を知らせるか、変化が起こる前兆を示すという考え方を、日常の中で私たちは教え込まれているのです。

同様に、車のウィンカーはオレンジのライトを点滅させて、どちらの方向に曲がろうとしているのかを周囲に知らせています。即座に行われますが、警告としては一時的です。

ユーザーはプロダクトにおける最初の体験の中で、オレンジがどのように使われるかを認識します。もし、すぐに従うべき指示が多すぎる場合は、ユーザーは困惑してしまうでしょう。

:成功と行動の促進

緑はポジティブな意味をもち、さらに学習を加速させ、あらゆる面でユーザーの行動を促進する効果があります(少なくともUXの意味では)。一般的な認識としては、緑はアクションが完了したことを表し、保存の完了や選択などが正しく行われたことを示す状況で使われます。つまり、一番最後のポジティブなアクションで使われるものです。

そのため、多くのCTAがユーザーの行動を促進するために緑を活用しているのを見ることができると思います。例えばSlackのホームページは、ユーザーのサインアップを促すのに、「Create New Team(新しいチームを作る)」という表示に緑を使っています。これは私の憶測ですが、赤よりも緑が使われているのは、Slackがマーケティングのあらゆる場面でそのトーンを繰り返し用いているからでしょう。Slackは、気取らずカジュアルで前向きなムードが会社のカラーなので、赤いCTAだと赤のもつ危険性や警告の意味合いが無意識下で強調されて、サイトそのものの雰囲気を壊してしまいかねません。

traffic_06

Slackのホームページでは、CTAのボタンに緑を使っている。

同様に、Pomello(ポモドーロスタイルの時間管理用アプリ)では、仕事の合間の長い休憩を表示する時にウィンドウを緑色にしています。緑色は、ユーザーへの報酬や成功を示す時にも使われます。これは、アプリやゲームにおいて、(ほとんどの)進行状況を示すバーが緑色で表されるのと同じです。

Pomelloは、業務中の長時間休憩を、緑で表している。

Pomelloは、業務中の長時間休憩を、緑で表している。

緑がUXにおいて「成功」を意味しているという例で、もう少しだけ複雑な事例を見てみましょう。ポケモンGOです。

ゲームの最初に、どのモンスターで開始するかを選び、その後ジムバトル(捕獲画面)へと進んでいきます。プレイヤーとその対戦相手の体力バーは緑色で表示され、体力は最大の状態から始まります。ダメージがモンスターに蓄積されると、体力バーはオレンジ色に変わり、プレイヤーに「気を付けろ、やられるぞ」と教えます。最後に、勝ち負けが決まる直前に、鳴り続くアラームのサウンドとともに体力バーは赤く点滅します。プレイヤーが負けそうであり、何とかしなくてはいけないという最終警告を意味するものです。

このように、UXのスキルを向上させる目的において、テレビゲームは学びの宝庫です

最後に:より複雑な状況に対応する

「信号機の色彩」は実用的な考え方ですが、UXを形作る場合において必ずしもあらゆる状況に適応できるわけではありません。普通のテーマと対比するために、サイトや製品のカラースキームを変えることもあるでしょう。また、クリックできるアイコンが、色を使わず枠線だけでデザインされることもあるでしょう。

また、どのような決定に落ち着いたとしても、常に視野を広くもって考え、より多岐にわたる状況に対応できようにしなくてはなりません。例えば、色彩に対してハンディキャップのあるユーザーに対してはどうするでしょうか? あなたがユーザーへの第一印象を重視して配色を決めているとしたら、そのメリットとデメリットについてもっと考慮するべきでしょう。

例えば、あなたがHubspotの記事にある事例に従い、CTAの色を変更してサインアップ率を上昇させたい思っているとします。あなたはどの部分を変えるかは分かっているだけでは、どの色を使うかを決めることは出来ません。多くの人に合わせたパーフェクトな色彩について考えますか? それとも緑と赤を区別できない色盲の人が4.5%存在するという事実を考慮しますか?

文化の違いについてはどうでしょうか? これは世界中で使われているサイトの場合に限られますが、異なる文化圏の人から見たら、色のもつ意味合いが変わる可能性があることを考慮しなければなりません。このような文化を要因とする影響により、過去においても色が変えられるということがありました。例えばゲームの「レイマン海賊船からの脱出」がこれにあてはまります。

日本で公開されたレイマン2は、色遣いがオリジナルとは大きく違っている。

日本で公開されたレイマン2は、色遣いがオリジナルとは大きく違っている。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて