Webサイト・スマホアプリのカラーで意識すべきポイントとは

WebサイトやスマホアプリのUI/UXを設計するデザイナーにとって、デザイン性や機能の持つ意味合いを伝える「色（カラー）」は重視すべきポイントの一つ。本コラムでは、多くのユーザーにとって快適なUIを実現するにあたり、webサイトやスマホアプリにおける「カラーユニバーサルデザイン」の重要性と有効なシミュレーション方法についてご紹介します。

見出し

・Webサイト・スマホアプリのカラーで意識すべきポイント

・Webサイト・スマホアプリにおけるカラーユニバーサルデザインの重要性

・サイト・スマホアプリのチェックにおすすめのツール「Remote TestKit」

Webサイト・スマホアプリのカラーで意識すべきポイント

WebサイトやスマホアプリのUI/UXを設計するデザイナーにとって、重視すべきポイントが「色（カラー）」の扱いです。ユーザーインタフェースを提供する場合には、色使いはデザイン性を伝えるとともに、機能の持つ意味合いを伝える役割も果たしています。

ユーザーがパッと見ただけで使いたくなる感覚的な訴求力としても、カラーは重要であり、色分けによるユーザビリティ、アクセシビリティなどが見込めることも大きなポイントでしょう。特に、メインカラーとなる背景色と文字色のコントラストは、直接的にユーザーの利用に影響を与えます。

強い印象を与え、サイトやアプリに興味を持ってもらうことはもちろん大切です。それととともに、ユーザーがサイトやアプリのコンテンツを読みやすくしておくことはデザイン上の大前提となります。見づらいサイト・アプリは、ユーザーの立場からすれば、敬遠したくなるでしょう。多くのユーザーに利用してほしいと考えてWebサイトやスマホアプリをデザインする場合には、見やすさは特に意識すべきポイントなのです。

WebデザイナーやアプリのUI設計に携わるエンジニアは、これらの色使いに気を配り、何度も確認を行いながら、Webサイトやスマホアプリの見た目を作り上げていることでしょう。

Remote TestKitについて見てみる

Webサイト・スマホアプリにおけるカラーユニバーサルデザインの重要性

多くのユーザーに使ってもらえるWebサイト、アプリにするために踏まえるべき考え方として、「カラーユニバーサルデザイン」があります。

カラーユニバーサルデザインは、色覚の多様性に配慮し、多くの人に利用しやすい製品・環境・サービス・情報を提供することです。

カラーユニバーサルデザイン機構では、下記の3点をポイントとして挙げています。

a .できるだけ多くの人に見分けやすい配色を選ぶ。

b.色を見分けにくい人（場合）でも情報が伝わるようにする。

c.色の名前を用いたコミュニケーションを可能にする。

【出典】NPO法人カラーユニバーサルデザイン機構『「カラーユニバーサルデザイン3つのポイント」とは？』

より一般的な裏付けとして、Webの標準化団体World Wide Web Consortium（W3C）の定めるガイドラインWeb Content Accessibility Guidelines（WCAG）においても言及があります。「色の使用」において、「色覚の多様性へ配慮し、色だけで情報を伝えないこと」を達成すべき基準としています。【出典】WCAG21『色の使用を理解する』

色覚の多様性については色に関する個々の感覚が異なるのは珍しくないことを示すデータがあります。

先天赤緑色覚異常の発生頻度は、日本人では男性の5%、女性の0.2%です。つまり、男性では20人に1人、女性では500人に1人の割合です。

【出典】公益社団法人日本眼科医会『冊子「色覚異常を正しく理解するために」』

日本の人口を1.2億人とすると、このデータから先天的色覚異常を持つ人はおよそ420 万人と算出されます。目の病気などによる後天的なケースも考慮すれば、より多くの人が該当するでしょう。

多くのユーザーが利用するWebサイト・アプリには、カラーユニバーサルデザインを用いて配色と色覚の多様性に配慮した制作、シミュレーションの必要性があります。

しかし、Webサイトやアプリの設計者にとって、色に関する個々の感覚が異なる方々にどのように見えているかを意識することは簡単ではありません。自分の認識とは違うことまでは理解できても、どのように見られているか、どう作れば利用しやすいかは、色に関する感覚が異なる方々に直接確認しなければ分からないためです。

利用者の声

ユーザーインタフェース設計とデザインを業務とするB氏にとっても、カラーユニバーサルデザインへの対応は業務上の課題となっていました。B氏の従事するプロジェクトでは、Webサイトとスマホアプリの複数のインターフェースを持つサービスを開発・運営しており、多くのユーザーに使ってもらえるサービスを目指しています。

「多様性に配慮しようとしても、自分で確認できないと対応は難しいものです。どのように見えているかがわからなければ、デザインの直しようがないためです。

そこで出会ったのが、RemoteTestKitを用いて、色に関する感覚が異なる方々の見え方を再現する確認方法です。Remote TestKit（Web版）であれば、スマホの端末をブラウザ上からリモートで利用できます。

PC上のGoogleChromeにaddin『Colorblindly』を追加し、そのChrome上でRemortTestKit（Web版）によりスマホの表示を確認することで、色に関する感覚が異なる方々に対して、Webサイト、アプリがどのように見えているのかを再現できるのです。Colorblindlyではさまざまなイメージを見ることができ、初めてカラーユニバーサルデザインを考慮することが可能となりました。」（B氏）

まずは資料を見てみる