色とUI

名前が示す通り、GUI (グラフィカルユーザインタフェース) は、特徴と機能を目に見えるように表します。人とコンピュータの相互作用は、物を見ること、物を探すこと、そして、グラフィカルなUI要素と相互に作用することに大きく基づいています。コンピュータのスクリーンだけでなく、私たちが物を見るいかなる状況でも、色は視覚的な場面の主な特徴となります。日常生活の中で私たちが見て相互に作用するものはたいてい色づいているので (白、灰色、黒の色合いとは対照的に) 、私たちは色を見慣れています。おそらく、だからこそ私たちは色についてあまり考えません。一方で、黒いボタンの濃い灰色のラベルを読まなければならないとき、私たちは困ります。つまり、色はユーザエクスペリエンスを高めたり、破壊したりする可能性を持っています。この記事は、ユーザエクスペリエンスの概念を紹介し、UIデザインの提案と共に色と色知覚に関する側面をいくつか明らかにします。

ユーザエクスペリエンス

ユーザエクスペリエンス (UX) は、ユーザと対話式技術システムの間の全体的、または、総合的な出会いに関係する概念です。もっと具体的に言えば、それは、ウェブサイトやアプリケーションがユーザに提供するユーザビリティやアピールの度合いのことです。優れたユーザビリティとは、対話式製品によってユーザが効率的に目的を達成できることを意味します。よく知られているガイドラインは、ISO 9241-110 [1] とNielsen氏の経験則 [2] によって提供されています。

アピールとは、ユーザとユーザが相互に作用するシステムの間の感情的なつながりのことを言います。ユーザはこれを好きでしょうか? 嫌いでしょうか? これが魅力的、現代的、または、人を惹きつけるものだと思うでしょうか? これと相互に作用する場合に誇りに思うでしょうか? アピールはユーザビリティと同じくらい簡潔には定義できませんが、製品の成功に同じくらい重要なことです。なぜなら、システムをアピールすることは、もっと楽しく望ましいことでシステムの価値を高めるからです。

色とUI

色は、360nmから720nmの間の波長光が目に当たって視覚体系によって処理されたときに呼び出さる知覚です。[3] 目は3タイプの色の受容体を特色とします。それぞれ長、中、短の波長光を最も強く受け入れます。これらは、L錐体、M錐体、S錐体として知られています。図1で見られるように、530nmの波長光を吸収するのは、M錐体がもっとも多く、L錐体はそれよりわずかに少なく、S錐体はほんの少しです。知覚される色の印象は、その結果、緑になります。

図1: 色知覚は、3タイプの錐体を通して実現されます。([4] より)

コンピュータスクリーンの色は、RGBカラーモデルによって定義されます。(Rは赤、Gは緑、Bは青を意味します) これらの3色は原色と呼ばれ、L錐体、M錐体、S錐体がもっとも受容する波長に一致します。原色は、他の色を混ぜ合わせて作ることはできません。代わりに、原色を混ぜ合わせることによって、他の色すべてを作ることができます。スクリーン上の各ピクセルは、1つは赤、1つは青、1つは緑の光源の相互作用によって作られた色を示します。それらの色は、お互いに接近しているので識別できません。

色のコントラスト

一般的に、UI上の色の付いたオブジェクトや領域を分離して表示することはありません。それらは、他の色の付いたオブジェクトや領域に隣接しているか、層を成しています。これによって対比効果が生み出されます。十分なコントラストがないと、スクリーン上の異なる部分を識別できません。このような理由で、MS Word、PowerPoint、Excel、Outlookなどのオフィスアプリケーションはデフォルトのフォントの色が黒で背景色を白にしています。これにより最大のコントラストとそれゆえ最適な視認性が与えられます。

これ以外に、重要な情報を特徴づけたり、入力を要求したりするUIの関連要素にユーザの視覚的な注意を引くため、色のコントラストが意図的に使われます。

色のコントラストは、また、UIの視覚的なアピールを高めるのに向いています。実験に基づく調査によると、暖色 (赤、黄、オレンジなど) は背景が寒色 (青、緑、紫など) の場合によく使われ、その逆の場合もあります。

対比効果がユーザエクスペリエンスに害をもたらすこともあります。2つの重要な例を以下で明らかにします。一般的に、視野のどの範囲でも、隣り合った領域に補完的な色を生じさせる傾向があります。例えば、灰色の四角は、赤に囲まれた場合に緑がかって見え、緑に囲まれた場合は赤みを帯びて見える傾向があります。この効果は、同時色対比として知られています。[4] UI上で時々見られるのは、押しボタンなどの同じコントロールであっても、背景色が異なっているため著しく違って見えることです。

もう1つの問題である対比効果は、色収差です。[5] 目の水晶体などのレンズは、厚さが異なることで様々な波長の光を曲げます。この影響により、異なった色の刺激は網膜の同じ点に投影されるのではありません。この影響がもっとも目立つのは、バイオレットと赤および青と赤の組み合わせです。(図2参照) なぜなら、バイオレットと青の波長が視覚的な範囲の一方の端にあり、赤の波長がもう一方の端にあるからです。(図1参照)

図2: 色収差

その結果、図2のテキストは背景に対してぼやけて見えます。このため、赤とバイオレット/青のコントラストはUI上では避けるべきです。これにもかかわらず、赤と青の色のコントラストはかなり一般的です。たぶんUIをデザインする人は、色覚異常 (以下の色覚異常を参照) の理由で、赤と緑の組み合わせを避けようとするからです。図3は、よい対比を与える背景色と前景色の組み合わせを示します。

 

図3: よいコントラストを与える色の組み合わせ

色覚異常

人々が色盲について話す場合、通常ある特定の色を認識できないことを言います。これらの状態は色覚異常と呼ぶほうがより適切です。なぜならたいていの場合、人々はある特定の色を完全に認識できないのではなく、その認識が不完全だからです。色覚異常は、錐体のタイプが欠けていたり、働きが異常だったりする場合に起こります。表1は、そのようなL錐体、M錐体、S錐体に基づき、色覚異常の発生率を示します。1000人中80人の男性と1000人中たった4人の女性がある種の色覚異常を持ちます。L錐体とM錐体のカーブはお互いに接近しているので (図1参照)、L錐体とM錐体に基づく色覚異常の影響は良く似ています。L錐体やM錐体に問題がある場合、色の見え方はたいてい青や黄の色に基づきます。補色の組み合わせである赤と緑は、正しく認識できません。

表1: 色覚異常と発生率 ([3] より)

S錐体に基づく色覚異常は、色知覚が赤と緑の色に基づいて行われ、補色の組み合わせである青と黄の認識に支障が出るという影響があります。これは非常にまれなケースですが、10万人中4人の男性と10万人中2人の女性に影響します。目の中で錐体のタイプが欠如しているために起こる完全な色覚異常も同様です。10万人中3人の男性と10万人中2人の女性が色調を見ることができません。従って、彼らが見るものは無色で、単に黒と灰色と白の影に基づいています。

表1のデータによると、色覚異常で苦しんでいる典型的な人は、赤と緑を認識するのに問題がある男性です。人が赤と緑以外の色知覚の問題を持っている可能性は非常に少なくなります。そして、実際に、人がスクリーンのUI部品の点滅によって引き起こされるてんかん発作で苦しむ可能性は、400倍高くなります。[6]

ここで疑問に思うのは、色覚異常が製品のユーザビリティにどの程度問題を引き起こすかということです。その答えは、アプリケーションの性質によります。ほとんどの会社のホームページのように美的な理由で色が使われる場合、色覚異常の問題の影響は少なくなります。コントロールシステムやダッシュボードなどの状態を示すために色を使うシステムでは影響が大きくなります。一般的に、重要な情報をコーディングするのに色だけに頼ることは勧められません。例えば、仮想的に赤と緑のライトを通してシステムの状態を示すことは、赤と緑の色覚異常を持つ人々にとって問題です。彼らは、赤と緑のライトを識別するのに苦労するでしょう。そのため、色のコーディングに加えて、意味のあるテキストラベル(「OK」と「Alarm」) や記号 (チェックマークと感嘆符) を提供することをお勧めします。

色と視覚的なアピール

色は、ソフトウェア製品の視覚的なアピールを高めるのに適しています。私たちは特定の色をある意味に結びつけて考えます。(表2) これらの色のステレオタイプは、UIをデザインするときに活用できます。例えば、白が清潔さと関連するので、この色を病院のソフトウェアアプリケーションの基本色にすることは理にかなったことかもしれません。もう1つの例は、青を使って平和を伝えている国連のホームページです。[7]
 

表2: 西洋の色のステレオタイプ ([8] より)

表2の色の関連は、西洋の文化に関係していることに注目すべきです。色のステレオタイプは文化に左右されるので、世界の他の地域ではまったく異なる可能性があります。例えば、赤は、エジプトでは「死」、インドでは「生命」と「創造性」、中国では「幸福」を意味します。[9]

UIの特徴をアピールするには、よく調整されて調和のとれた色を設定します。配色を決めることは、決して取るに足りないスキルではありません。考慮すべき沢山の要素があります。会社のブランドの価値が伝わらなければなりませんし、色に関連するイメージを呼び起こす必要があるかもしれません。(上記の色のステレオタイプを参照) 人間工学的なことも考慮するようにしなければなりません。(上記の対比効果を参照)

グラフィックデザイナーの助けを得ずに簡単な配色を決めるには、2、3の異なる方法があります。[10] 例えば、12色のカラーホイールの隣り合った3つの色を選択できます。(類似の色、図4参照)または、カラーホイールでお互いに直接向かい合っている色を選択できます。(補色) ただし、赤と緑の組み合わせは、赤と緑の色覚異常を持つ人々にとって問題であることを覚えていてください。(上記の色覚異常を参照)

図4: 類似色に基づく配色 ([10] より)

著者について

Tobias Komischke博士は、10年以上、ユーザエクスペリエンスの分野で働いています。技術誌や技術会議の評論家で、30以上の記事を発表しました。Infragistics社で、彼は、内部 (開発) と外部 (トレーニングとコンサルタント) のユーザエクスペリエンスの責任者です。
 

リンクと文献

[1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.

[2] Nielsen, J. (1994) Nielsen, J. と Mack, R.L. (Eds.) らの共著 『Usability Inspection Methods』第2章「Heuristic evaluation」 New York City: John Wiley & Sons

[3] Wyszecki, G と Stiles, W.S. の共著 (1982) 『Color science』 第2版、New York City: John Wiley & Sons

[4] Gleitman, H. 著 (1991) 『Psychology』 第3版、New York City: W.W. Norton & Company

[5] Kaiser, P. K. と Boynton, R. M. の共著 (1996) 『Human Color Vision』 Washington, D.C.: Optical Society of America

[6]Fisher R.S.、Harding G.、Erba G.、Barkley G.L.、Wilkins A の共著 (2005) 『Photic- and pattern-induced seizures: a review for the Epilepsy Foundation of America Working Group』Epilepsia、46巻 (No.9)、1426-1441 ページ

[7] http://www.un.org/

[8] Waters, C. 著 (1996) 『Web Concept & Design』Indianapolis: New Riders Publishing

[9] Russo, P.と Boor, S. の共著 (1993) 『How fluent is your interface? Designing for international users』INTERCHI '93、342-347 ページ

[10] Williams, R. 著 (2008) 『The Non-Designer”s Design Book』 第3版、New York City: Peachpit Press

原文はこちらです：http://www.infoq.com/articles/Colors-UI
（このArticleは2008年11月25日に原文が掲載されました）