UIデザインにおける赤色と緑色の使い方

色は私たちの認識や感情に大きな影響を与えます。正しく使用された場合、その色はユーザーの特定の反応を引き出す事ができます。ここでは下記の理由に則り、赤と緑という２つの色に注目したいと思います。 

赤色と緑色はどちらも実用的な色であるため、UIデザインにとって非常に重要です。

UIのアクセントカラーとして赤と緑を使用する、一般的な方法を見ていきましょう。

赤色

• 重要さを意味します。即座に注目を集め、ユーザーに迅速な決断を促す非常に目立つ色です。
• 赤色はとても高い温度を示す色です。情熱から怒りというような感情が含まれている強烈な色でもあります。
• 警告または危険を意味します。 赤いライトが点滅している場合、人々は危険または緊急事態を連想します。

エラー表示

赤色は多くの場合、警告や非常に重要で確認が必要なもののいずれかに関連付けられています。そのため、エラー表示について考えるときに最初に思いつくのは赤色です。バツ（×）アイコンと並ぶくらいに赤色は一瞬で、何かがうまくいかなかったというメッセージを伝えます。

イメージ: Mailchimp

イメージ: Ben Dunn

感情を表す反応

赤色は、愛と情熱に関連づけられる色でもあります。デザイナーは「いいね」などの感情を伴うリアクション用に、赤系統の色（ラズベリーレッドなど）を使用します。

ツイッター上での「いいね」

ショッピングカートからの削除

e-コマースでは、「カートから削除」アクションのカートサマリーに赤色を頻繁に使用します。

カートからのアイテム削除

危険なアクションの可能性

赤色は、一般的に潜在的な危険行動に関連付けられています。赤を正しく使用することにより、ユーザーが元に戻すことができない危険な操作を実行することを事前に防ぎます。

アプリなどで削除ボタンに赤色が使用されている場合、ユーザーは自然にそのサインを受け取り、一旦停止します。

ファイルの削除やアカウントを閉じることも、デザインに赤を使用する良い例です。ユーザーがそのようなダイアログを見るとき、赤を使うことによってユーザーが最終決定をする前にもう一度考えるよう、促すことができるのです。

緑色

• 緑色は青色と同じように、人を落ち着かせる要素を多く含みます。人がものを見るとき、最も安らかでリラックスできる色の１つです。
• 緑色は成長の象徴です。 緑色は新たな始まりと成長を表します。
• 緑色は安全性や成功を示す際によく使われます。

成功を表す表示

通常、緑色は肯定的な結果に関連しています。そのため、完了したアクション、保存されたファイル、または発注されたオンライン注文など、 操作が正常に完了したときのメッセージは、緑色で表示されます。

緑色のチェックマークアイコンは、ユーザー操作が正常に完了したことをユーザーに確信させてくれるのです。

イメージ: Ed Poole氏

クレジット: Colin Garven

イメージ: Phil LaPier氏

アクションの奨励

赤色は「止まれ（Stop）」を意味し、緑色は「進め（Go）」を意味します。従って、緑色を使用する事により、ユーザーに何らかのアクションを促すことができます。たとえばStripeでは、緑色のボタンにより、ユーザーのサインアップを促します。

赤と緑を組み合わせるケース

着信があった際に「承諾」または「辞退」するなどの２つの選択を促す場合、関連する操作を見つけやすくするために、赤と緑の両方が使用されています。赤いボタンは電話を切ることをユーザーに警告し、対して緑色はユーザーがその電話を承諾しているというメッセージを意味します。これはユーザーが単純な選択に費やす時間を、より短縮することにつながるのです。

赤と緑の組み合わせで重要なのは、両方のオプションがユーザーにとって同じように重要である場合にのみうまく機能するということです。もしユーザーを特定の行動に誘導したい場合は、別の選択肢を視覚的に目立たせる方法もあります。以下の例では、「はい、受け取ります。」のオプションに背景と対照的な緑色を使用しています。 

イメージ: Telerik

色の違いによるコンバージョンの差

「赤色」と「緑色」のどちらがユーザーにインパクトがあるかについては、ウェブ上でも長期にわたって意見が分かれており、 オンライン上でたくさんのケーススタディを見つけることができます。最もポピュラーなものの一つはHubspotの、Joshua Porter氏による研究です（The Button Color A/B Test: Red Beats Green） 。この研究では、赤いボタンのほうが緑色のボタンよりも21％上回る効果がありました。

ですが、この結果を他の同様のケーススタディの結果と同じように一般化してはいけません。ある特定のページに対して機能するものが、別のページで必ずしも機能するとは限らないからです。

同時に、CTAの色を選択する際には、２つの点を考慮する必要があります。

• ランディングページのCTAは人目を引くべき、これはボタンが周囲のオブジェクトや背景と大きく異なり対照的である場合にのみ有効です。
• 選択する色と、それらを示す文脈の両方の面から考慮することが極めて重要です。

Stripeのランディングページで、CTAの色を緑から赤に変更するとどうなるでしょうか？ ボタンは明らかにもっと目立つものとなりますが、同時にこのデザインでは赤は機能しません。このページのデザインに明らかに調和しないからです。

赤色のCTAが他のデザイン要素と明らかにぶつかり合っている

アクセシビリティ

色覚異常に関する調査によると、人口の4.5％の人が何らかの色覚異常であることがわかっています。色覚異常を持つデザイナーは少ないため、色覚異常のユーザーを考慮したデザインは忘れられがちです。

色覚異常には様々なタイプがありますが、そのほとんどは、第２色弱（緑色弱）または第１色弱（赤色弱）です。 彼らは一般的に赤、緑、茶色、そしてオレンジ色を見分けるのが困難だと言われています。

色覚異常者は、色覚が正常な人に比べて赤と緑の見え方が非常に異なります。

このため、UIデザインで最も重要なルールの１つに下記のようなものがあります

意味を伝える方法として、色だけに頼るべきではない。

つまり、 色（赤と緑）だけを使用するインターフェースは、色覚異常のユーザーを混乱させる危険性があるということです。 色覚異常の人々にとってより良いユーザー体験を生み出すために、エラーや成功の状態を表すアイコンやテキストメッセージなど、常に付属した情報を提供することが大切です。

配色に関する参考資料

最適な色を簡単に探し出して選べるリンクを共有します。ぜひ参考にしてみてください。

Colors - UX Pro