実際のサイトからカラーユニバーサルデザインの技を学ぶ
はじめに
カラーユニバーサルデザイン(以下CUD)という概念をご存知でしょうか？
簡単に言うと「目の疾患などにより多様な色覚を持つ人たちにも配慮したデザイン」です。
各地域でCUDガイドラインが設けられていたり(リンク先は東京都のガイドライン)、路線図など様々なところでCUDを意識して作られたものが存在します。
実際CUDを行うにあたって、「具体的にどういうことを意識すればいいのか？」「どんな技があるの？」ということが理解しきれておらず、なかなか制作が進まない...ということがありました。
そこで、今回は実際のサイトを様々な色覚で見て、どんなことを気をつけているのか学んでいきたいと思います！
使用ツール
今回はChrome拡張機能「Spectrum」を使用したいと思います。
色覚別の検証ツールは色々ありますが、個人的にこれは操作感が直感的且ついろいろな色覚で見れるのでおすすめです。
※今回見る色覚：P型色覚(Protanope)、D型色覚(Deuteranope)、T型色覚(Tritanope)
--------------------------
1.ヤフーLINE経営統合記念サイト
Z HOLDINGSが行ったヤフーとLINEの経営統合に関連する企画のサイト。実際に色覚検証を行うことを前提に制作されたものになります。
■ KV
・文字に枠線や影をつけることで、背景と文字が馴染まない
・紙吹雪のアニメーションも、どの色覚でも動きがわかるよう色が調整されている
・背景はLINEの緑とYAHOOの赤を使って部屋のような形になっていて、どの色覚でも奥行きを感じる。どの見え方でも共通で「空間」を感じられるのは大きいな..と思います
■ メインコンテンツ
・白抜き文字は背景の色を濃くすることでコントラストをつけている
・背景のあしらいも枠線つき。デザイン性も高めつつ見え方も考えられている。
・各画像も文字に白フチをつけて読みやすくしていたり、背景色と馴染まないようにしていたりと、一枚一枚調整されている
D型は特に緑を赤の違いが分かりづらいですね...
--------------------------
2.note
※サイトのキャプチャはnote公式で配られている自由に掲載できるスクリーンショットを使用させていただいています🙇♀️
■ メインコンテンツ
・右側のコンテストバナーは色味の異なりもテキストも見えるように調整されている
・色数自体が多くないため(グレー・ブルー・ピンクの3色メイン)見え方の差が少ない
これを見て思いましたが、投稿者が決めるサムネも意識して作るだけで見え方がだいぶ変わりそうです
--------------------------
まとめ
・背景色と文字のコントラストは各色覚でも見えるか調整
・コンテンツごとの色分け等は違いがわかるように調整、色をつけずにアイコンやあしらいで差別化するのも手
・あしらいにも枠線をつけて見え方の差を抑える
まとめてみると簡単なことに見えますが、これをデザイン性担保しながら反映するのはなかなか高度だな〜と思います。
全て似たようなサイトにするのもNGですし、ターゲット層によってどれだけ意識すべきかも考えて行かなければなりませんね...勉強でリデザインとかしてみようかな