知ってる? 色の組み合わせの大切さ #配慮あるデザインを考える

コーポレート
青い壁に2つの白いドアがあり、「どちらのトイレが空いているかわかりますか?」と書かれています。「LINEヤフー ストーリー」とも記載されています。

突然ですが、問題です。
トイレに駆け込んでいる人がいます。右、左どちらのトイレが空いているでしょうか?

「どちらのトイレが空いている?」というクイズで、色覚の違いを示す図です。一般色覚では赤と緑で示され、色覚多様性では異なる色で見えます。正解は「右」です。

赤と緑の色の区別が判断しづらいと言われている色覚多様性の人は、上の図のように色が一般色覚の人と異なって見えます。
このトイレの鍵はよく見かけるデザインですが、色覚多様性の人が見た場合、赤と緑の区別ではトイレが「使用中」なのか「空いている」のかの区別がつかず困りますね。

色覚多様性とは?

色の見え方は人によって実はさまざま。色を識別する、すい体細胞の違いから区別しづらい色が生まれ、その結果色の見え方が人によって異なることを「色覚多様性」といいます。

色覚多様性の割合を示す図です。日本人の場合、男性は20人に1人、女性は500人に1人の割合で色覚多様性があると説明されています。

その特性に応じた色の見え方は以下のようになります。

色覚多様性による見え方の違いを示す図です。一般色覚、赤が見分けづらいP型、緑が見分けづらいD型、青が見分けづらいT型の4つの例がレゴブロックで示されています。

どんなデザインがわかりやすい?

さまざまなサービスを利用する際、色覚多様性に配慮されていない配色のデザインは、情報の理解を妨げる原因になってしまいます。
では、どのような点が配慮されていれば、誰でもわかりやすいデザインと言えるのでしょうか。ここでは、2つのポイントをお伝えします。

色の組み合わせに配慮するため、暖色と寒色を交互に選ぶポイントを示す図です。一般色覚と色覚多様性(P型、T型、D型)での見え方の違いが説明されています。

「色覚多様性」の場合、暖色同士や寒色同士の配色が区別しづらくなる場合があるため、暖色と寒色から選ぶとわかりやすいデザインになります。

色の濃淡で組み合わせるポイントを示す図です。一般色覚とP型色覚の見え方を比較し、濃い色同士は見分けづらいことを説明しています。

また、濃い色同士や薄い色同士の場合も同じく区別しづらいため、それらに気をつけたデザインはわかりやすいデザインといえるでしょう。

文字やマークを使用することで、色覚多様性に配慮した表示方法を示す図です。「使用中」や「あき」の文字が色識別を補助します。

色だけで区別をつけず、文字やマークを用いて区別をつけると、よりわかりやすいデザインになる場合があります。
先程のトイレの鍵のケースを色だけで区別せず、文字も併せて用いて区別したものが上の図です。文字情報があるので一目で鍵が開いているのか、閉じているのかがわかります。

LINEヤフーではどんな対応をしているの?

LINEヤフーでもさまざまなサービスにおいて、色覚多様性の人にも情報をわかりやすくお届けできるよう工夫しています。特にYahoo!天気・災害では、毎日の生活に関わるからこそ、あらゆる人に使いやすいサービスが提供できるように日々デザインの改善を行っています。
Yahoo!天気・災害で使っている天気図と地震画像は、色覚多様性の人にとっても、わかりやすいデザインになるように検証を行ったほか、天気図などのデータ提供元の意見も踏まえ2018年に改善されました。

Yahoo!天気の天気図の改善例を示す図です。改善前後の地図が色覚多様性(P型)での見え方を比較し、気圧配置がわかりやすくなるよう地図の色を調整しています。

天気図では、気圧配置がわかりやすいように地図の色を調整しています。また、気圧の数値や高・低気圧のアイコンが背景に埋もれず、見やすい配色にしています。

Yahoo!天気の地震画像の改善例を示す図です。震度アイコンの色や地図の配色を調整し、P型色覚でも見やすくしています。震度4以上は目立つ配色と大きな文字で表示しています。

地震画像では、各震度が見やすいように震度アイコンの色や地図の配色を調整しているほか、地震後のユーザーの判断や行動に影響が出てくるであろう震度4以上がより目立つような配色や文字の大きさにしています。

これからもLINEヤフーでは、誰もが使いやすいインターネットサービスを提供できるようデザインの配慮に取り組んでいきます。

※参考:「東京都カラーユニバーサルデザインガイドライン」

※Yahoo! JAPAN Corporate Blogに掲載(2023年5月17日)した記事を一部修正し再掲載しています。

「LINEヤフー ストーリー」のロゴ
LINEヤフーストーリーについて
みなさんの日常を、もっと便利でワクワクするものに。
コーポレートブログ「LINEヤフーストーリー」では、WOWや!を生み出すためのたくさんの挑戦と、その背景にある想いを届けていきます。
Page top