RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

カラーユニバーサルデザインを意識してアイコンを修正してみた

デザイン戦略部のツダです。

「ユニバーサルデザイン」という言葉は以前に比べて世の中に定着したように思います。
ユニバーサルデザインとは年齢や性別、文化、障害の有無にかかわらず、
できるだけ多くの人が使いやすいように考えられた設計のことを指します。

よく「バリアフリー」と混同されがちですが、少し意味が違います。
バリアフリーは、主に高齢の方や障害のある方など、特定の人のために障壁を取り除く考え方。
一方でユニバーサルデザインは、特定の人に限らず多くの人にとって使いやすい形を目指すという点が大きな違いです。

ユニバーサルデザインのよくある例としてシャンプーボトルが挙げられます。
シャンプー側にはギザギザの突起があり、リンスにはない、というあれです。

目が見えにくい方だけでなく、目にお湯が入った時などに触るだけで判断できるので
特定の人のため、というより「誰でも助かる」デザインになっています。

色にも「ユニバーサルデザイン」がある

ユニバーサルデザインはプロダクトだけでなく、色の使い方にも取り入れられています。
それが「カラーユニバーサルデザイン(CUD)」です。
色の見え方は人によって違います。
日本では先天的な色覚特性(いわゆる赤緑系の色弱)がある人は、

男性は、20人に1人
女性は、500人に1人
日本全体では約320万人いると言われています。

サイトを設計する際に情報をきちんと整理しても、色が見づらいと感じることで受け取る情報が変わってしまうのは勿体ないです。
形や色の組み合わせなどそれぞれの要素に気を配ることで「読めない」「使いづらい」を減らしていきます。
例えばテキストリンクを設定するときには下線を入れることでどこがリンクかわかりやすくなります。

ランキングページを改修してみた

今回、カラーユニバーサルデザインの考え方をもとに、
スーパーデリバリーのランキングページを改修してみました。
https://www.superdelivery.com/p/do/wr/all

ページの情報を整理し直してよりわかりやすくしたのはもちろんですが、特に意識したのがアイコンまわりの配色です。
Webアクセシビリティの国際ガイドライン「WCAG(Web Content Accessibility Guidelines)」では、
通常のテキストは背景色に対してコントラスト比4.5:1以上が推奨されています。

改修前は2前後と、かなり基準を下回っていました。
そこで今回はコントラストをしっかり確保し、また、白抜きの文字をやめることで
色覚特性のある方はもちろん、そうでない方にとっても見やすいデザインに変更しています。

ルール化してもいいかも?

アイコンの中など、文字が小さくなりがちな箇所については、
WCAGの適合レベルAAをクリアすることを必須ルールとして決めるというのもアリかもしれません。

現状スーパーデリバリーでも
「見にくい表現が無く、配色は適切なコントラスト比がついている(4.5:1 以上のコントラスト比が望ましい ※W3C基準)」
というルールが設けられています。

また、Chrome拡張機能「Colorblindly」では、いろいろな色覚の方の見え方を再現出来るので
それで一度サイトを確認するのもいいと思います。

カラーユニバーサルデザインを特別な対応として捉えるのではなく、
日々のUI設計の中で当たり前に意識していくことで、迷わずにわかりやすいUIにつながっていきそうです。

おわりに

今回のランキングページの改修は、私の方で意見を挙げて改修させてもらいました。
ラクーングループでは自分で課題を挙げて解決させてもらえる環境になっています!
興味を持っていただけましたら、ぜひご応募ください。
採用情報はこちら

一緒にラクーンのサービスを作りませんか? 採用情報を詳しく見る

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc