インタフェースにおけるオレンジと黄色の文脈について考える
インタフェースにてユーザーへ注意や警告を伝える際には、よくオレンジや黄色などの「警告色」を用いてメッセージを表示します。しかし、その警告色にどちらの色を採用するかは、プロダクト開発者の判断によって分かれます。
さまざまなデザインシステムにおいても、採用されている警告色は一様ではありません。
例えば、Primer (GitHub) では黄色が使われていますし、Lightning (Salesforce) ではオレンジが使われています。Polaris (Shopify) では警告のレベルに応じて黄色とオレンジを使い分けている他、デジタル庁デザインシステムはコンポーネントでは黄色が採用されているものの、ガイドラインやトークンではオレンジと黄色をどちらも警告色として使用できるように定義されています。
いずれも警告色としての機能を持つ色ですが、それではどちらの色がユーザーに対してより効果的に警告を伝えることができるのでしょうか。
この問いに答えるために、本記事では実際の使用例や文化的な背景、色彩心理学などの科学的アプローチを用いてこれらの2色について分析し、より良いインタフェースデザインのための指針を導き出すことを目指します。
オレンジについて
オレンジは黄色と赤の中間色で、JIS慣用色名では「黄赤色」とも規定されています。
色彩心理学において、オレンジはエネルギーや活力、創造性を象徴する色であり、同時に緊急性や注意を促す色としても認知されています。また、赤に近い色相であるため、強い感情的な反応を引き出す効果も持っています。
オレンジの使用例
オレンジは空や海の色である青の補色であることからも、薄暗い場所や水面で最も見やすい色の一つとされています。
アメリカでは「セーフティオレンジ」と呼ばれ、救命いかだや救命胴衣、ブイなどの安全装備や警告表示に広く採用されています。
航空宇宙産業では「インターナショナルオレンジ」という特定のオレンジ色も定義されています。
「インターナショナルオレンジ」が使用されている最も有名な事例はNASAのスペースシャトル打ち上げ時や再突入時に着用する宇宙服「Advanced Crew Escape Suit (ACES)」でしょう。
このオレンジは緊急脱出時の視認性を高め、宇宙飛行士の安全を確保するために採用されています。
建造物では、「ゴールデンゲートブリッジ」や「東京タワー」の塗装にもインターナショナルオレンジが使用されています。これらの建造物はいずれも事故を未然に防ぐために視認性を高め、警告を発する目的でオレンジが選ばれています。
ゴールデンゲートブリッジは周囲が自然豊かかつ雨や霧が多い環境に位置するため、船舶からの視認性を高めるために塗装にインターナショナルオレンジが採用されています。
東京タワーは航空機が安全な飛行を支援するために、日本の航空法で制定されている「昼間障害標識」として機能するようにオレンジとホワイトの2色で塗装されています。
近年ではAppleが「Apple Watch Ultra」のアクションボタンや「Apple Vision Pro」のリリースタブにインターナショナルオレンジを採用したことも記憶に新しいでしょう。
Apple Watch Ultraは高地や水中などのの過酷な環境での使用を想定しており、そのような状況下でも重要なアクションボタンを素早く視認して操作できるよう、オレンジが採用されていると考えられます。オレンジのアクションボタンを操作することで最大180メートル先まで聞こえるサイレン (警告音) を鳴らすことができる機能が備わっていることからも、そのインタフェースとインタラクションには非常に強い関連性があります。
Apple Vision Proに備わっているオレンジのリリースタブはデバイスとヘッドバンドの着脱を行う重要な役割を持っており、こちらも操作性と安全性を高めるためにオレンジが採用されていると考えられます。
このように、オレンジはその高い視認性から、さまざまな分野で強い注意喚起を行う役割を果たしています。エネルギーや活力を象徴しつつ、緊急性を促して安全性を高める色として、安全装備や建造物、デジタルデバイスなどで効果的に活用されています。
黄色について
黄色もオレンジと同様に高い視認性を持つ色です。特に黒との組み合わせることで非常に目立つコントラストを生み出すため、黄色と黒の組み合わせは「警戒色」や「警告色」として知られています。
色彩心理学において、黄色は明るさや幸福感や希望を感じさせる色であり、同時に注意喚起を象徴し、人々の注意を引きつける色としても認知されています。
黄色の使用例
アメリカでは1939年からスクールバスが「スクールバスイエロー」と呼ばれる特別な黄色で塗装されています。これは遠くからでもバスをはっきりと視認できる色です。スクールバスイエローを見ることで周囲のドライバーはバスの存在を認識し、減速や停止などの適切な対応を取ります。スクールバスに黄色が採用されていることは子どもたちの安全を守る上で重要な役割を果たしています。
日本では幼稚園児の通園バッグや通学帽、小学生のランドセルカバー、児童用の雨傘などに黄色が多く使用されています。これらも子どもたちが黄色の衣類を着用することでその存在を周囲に強くアピールし、警告を行うことで交通事故を防止する目的があります。
同じ道路交通の分野では交通信号機にも黄色が使用されています。信号の配色は国際照明委員会 (CIE) が定義した国際規格で、全世界で共通のカラーリングが用いられています。
信号機の黄色は注意を意味し、緑から赤への切り替わりをドライバーに知らせます。これにより、ドライバーは安全に停止する準備ができるため、交差点での事故防止につながります。
自然界に目を向けるとハチの体色にも黄色が備わっています。特にハチの黄色と黒の縞模様は、その色彩パターンを視認した多くの生物が強力な警告として受け取り、危険が及ぶことを察知します。
そのため、生物学の分野でも黄色は外敵による補色行動を弱める効果がある「警戒色」として扱われています。
このように黄色は、その高い視認性と強い警告効果から、交通、安全対策、さらには自然界においても欠かせない色です。人々の注意を引きつけ、危険の回避や安全性の向上に大きく寄与する色であると言えるでしょう。
オレンジと黄色の併用について
オレンジと黄色はどちらも警告を示す色です。多くの場合は警告のためにいずれか片方の色を選択して使用していますが、記事冒頭で紹介したPolarisのように、文脈に応じてオレンジと黄色を使い分けて併用しているケースもあります。
オレンジと黄色の併用例
日本の道路標識において、警告を表す標識の背景に用いられている色は黄色のみですが、アメリカの道路標識は以下のように標識の種別によってオレンジと黄色が明確に使い分けられています。
オレンジ色の標識
一時的な警告や注意を示します
「工事中」や「迂回路」など、特定の期間のみ対応が必要な注意を促します
黄色の標識
恒久的な警告や注意を示します
「合流地点」や「踏切」、「学校区域」など、道路状況や周辺情報にまつわる不変的な注意を促します
また、日本国内でオレンジと黄色を併記している事例には「JIS安全色」があります。JIS安全色 (JIS Z 9103:2018) とは、日本産業規格 (JIS) が定めた安全色と安全標識の使用方法についての規格です。JIS安全色ではオレンジと黄色は以下のように定義されています。
黄赤色 (オレンジ)
危険、警告、航空・船舶の保安施設を示す色です
高い危険性を伝えるために使用されます
黄色
注意警告を示す色です
危険の可能性がある状況での注意喚起に使用されます
JIS安全色に対応する国際規格はISO 3864ですが、ISO 3864ではJIS安全色の黄赤色 (オレンジ) に相当するガイドラインは存在せず、黄色のみが警告色として定義されているという差分があります。
一般的的にはオレンジと黄色のどちらかを選択して警告に使用するケースが大多数ですが、今回紹介したアメリカの道路標識や日本のJIS安全色のように、緊急度の違いを明確に伝えて適切な行動を促すためにオレンジと黄色を使い分けるケースも存在します。
文脈と効果の考察
オレンジを採用する場合
オレンジは赤に近い色相であることからも、緊急性や危険性を強く示す色です。即時的な対応が必要な警告をユーザーに伝える際にはオレンジを使用することで効果的に注意を引くことができると考えられます。
また、オレンジは文字色とのコントラスト比を確保しやすく、ユーザーが識別しやすい色であることも利点の1つです。
懸念点
オレンジを警告色として使用すると、ユーザーに過度な緊張感やストレスを与える可能性があります。ユーザーが頻繁に強い警告を受けることで警告に対して鈍感になってしまうリスクも考えられます。また、オレンジは赤に近い色であるため、最も危険性を強調したい場合に使用する赤との区別が付けづらくなってしまう懸念があります。
黄色を採用する場合
黄色は赤やオレンジに比べて緊急性が低く感じられるため、穏やかな警告を伝える際に適していると考えられます。ユーザーに過度なストレスを与えずに注意を促したい場合に効果的でしょう。
ただし黄色を使用する場合はユーザーに危険が及ぶ前に、危険が発生する可能性を提示するコミュニケーションに留める必要があります。
懸念点
黄色で緊急性や重大な警告を伝える際には、インパクトが不足する可能性があります。ユーザーが警告の重要度を正確に理解できず、適切な対応が遅れるリスクも考えられます。
また、インタフェースにおける黄色は文字色とのコントラスト比を確保しづらい色であるため、選択する色によってはアクセシビリティが低下する懸念があります。
オレンジと黄色を併用する場合
オレンジと黄色を併用することで、警告の重要度や緊急度の違いなどの様々な文脈をユーザーへ伝えることが可能になります。例えば、軽度の注意には黄色を、重大な警告にはオレンジを使用することで、ユーザーは情報の優先順位を直感的に理解できる可能性があります。
懸念点
2色の警告色を併用することで、ユーザーは色の意味を覚える必要が生じ、混乱を招く可能性が高まります。色の使い分けが明確でない場合、かえって警告の理解を妨げる懸念もあります。また、メンテナビリティは上昇するため、プロダクト開発者の運用コストが肥大化することは避けられないでしょう。併用する場合は慎重かつ厳密に定義する必要があります。
まとめ
様々な事例や前述の考察の結果、警告色として効果的である色は「黄色」であると考えられます。黄色は多くの文化圏で注意喚起の色として広く認知されており、ユーザーへ直感的に警告を促す役割を果たします。また、ユーザーに過度なストレスを与えずに重要な情報を柔和に伝えることができる点においても非常に優れています。
しかしながら、ブランドカラーが黄色である場合や、緊急性をより強調したい特定の状況では、警告色にオレンジを使用することが効果的でしょう。オレンジを活用することで、ブランドイメージと警告色を明確に区別でき、ユーザーの注意を迅速に引き、素早い行動を促すことができます。
また、プロダクトによっては黄色とオレンジを併用することも効果的です。ユーザーの学習コストやプロダクト開発者の運用コストを要する課題はありますが、危険が発生するまでの時間や発生しうる問題の重要度に応じて様々な警告を使い分けられるため、適切に活用することで丁寧なコミュニケーションが実現します。
警告色の選択はユーザー体験に大きな影響を与える重要な要素です。
プロダクトやサービスの特性、ユーザー層、ブランド戦略を総合的に考慮し、適切な警告色を採用しましょう。
「インタフェースにおけるオレンジと黄色の文脈について考える」はGoodpatch Design Advent Calendar 2024 3日目の記事でした。