情報システムのUX(ユーザーエクスペリエンス)デザインにおいて、ユーザーにとってわかりやすい画面をつくる重要な要素の1つが色の使い方です。

 まず「色が持つ意味」について注意が必要です。人がある色を見たときに、想起するイメージや心理効果があります。赤色はエネルギッシュで元気なイメージがあるため、スポーツに関連したシステムに利用するとよいでしょう。また赤色には、食欲を増進させる効果もあるとされており、食品関係のシステムやサイトでもよく利用されています。

 一方で青色は落ち着いたイメージで、リラックスする、集中力を高めるなどの効果があるため、業務システムに向いています。

 ただし、ユーザー層や利用環境を考慮から外してはいけません。色に対して抱くイメージは、文化的背景によるものが多く、国や時代、性別によって変化します。デザインする情報システムを提供するユーザー層を思い出し、そのユーザー層が持つであろうイメージの調査を忘れずに実施しましょう。

 続いて配色に関しての原則を紹介します。デザインをする際には、主に利用するメインカラーと、ポイントとなる部分に利用するアクセントカラーを選びます。どの色を使うか迷ったときは、配色のセオリーを活用するとよいでしょう。

 メインカラーに対してアクセントカラーを1色選ぶ際は色の配列を円状にした色相環で反対に位置する「補色」を、2色選ぶ際は色相環で等しい距離にある3つの色を組み合わせる「トライアド」や、補色の両隣の色を選ぶ「スプリットコンプリメンタリー」といったルールに基づいて色を探すと、調和の取れた色をうまく見つけることができます。調和の取れたいくつかの色を見つけたいときは類似色を選ぶのも良いでしょう。

配色のセオリーの例
[画像のクリックで拡大表示]

 配色についてはこれ以外にもたくさんのセオリーがあります。うまく活用すると配色を決めるヒントが得られるので、興味のある場合は色彩検定やカラーコディネーター試験などで勉強してみるのもお勧めです。

 色はユーザビリティーやアクセシビリティーの観点から、色そのものの選び方以外にコントラストが重要になります。Webシステムのアクセシビリティーに関するガイドラインであるJIS X 8341-3:2016「高齢者・障害者等配慮設計指針―情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」によると、テキストや画像化された文字は、「文字を認識できる」というアクセシビリティーを確保するためには前景色(文字色)と背景色のコントラスト比が少なくとも「4.5:1」は必要であるとしています。JIS規格を満たすほどでなくとも、コントラスト比が著しく低い場合は、可読性が低くなりユーザビリティー上問題となります。

 このコントラスト比は、W3Cが勧告する「WCAG(Web Content Accessibility Guidelines)2.0」をそのまま採用した国際規格(ISO/IEC 40500:2012)を踏まえています。そこでWCAG 2.0が定める計算式を利用すればコントラスト比を算出できますが、算出のための便利なツールもあります。

 その1つがアクセシビリティーのコンサルティング会社である米The Paciello Groupが無償で提供する「Colour Contrast Analyser」です。前景色と背景色のコントラストをチェックできます。結果はコントラスト比に加え、WCAG 2.0の達成基準に適合しているかどうかも表示されます。

Colour Contrast Analyser
(出所:https://developer.paciellogroup.com/resources/contrastanalyser/)
[画像のクリックで拡大表示]

この先は有料会員の登録が必要です。今なら有料会員(月額プラン)が2020年1月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら