デザインするなら知っておきたい「色覚特性」
初めまして、株式会社HAB&Co.でデザイナーをしているゆきです。
普段はWebデザインを中心にアプリのUI、DTPなどのデザインなどを行っています。
今回はデザインするなら知っておきたい「色覚特性」についてまとめてみました。ノンデザイナーの方もプレゼン資料を作成したり、何かしらデザインをする機会があるかと思いますのでよかったら参考にしてみてください。
1.色覚特性とは？
まずは「色覚特性」とは何かを見ていきます。目薬で有名な参天製薬様のサイトより引用しております。
以下、引用です。(下記文章では「色覚特性」を「色覚異常」として解説しています。)
色覚異常とは、正常とされる他の大勢の人とは色が異なって見えてしまう・感じてしまう状態のことをいいます。そのため色の区別がつきにくい場合があり、日常生活に支障をきたしてしまう可能性があります。
先天色覚異常は日本人男性の20人に１人(5%)、日本人女性の500人に1人(0.2%)といわれており、また後天色覚異常も、色覚異常の症状を呈する他の眼の病気の有病率から考えると、決してまれではありません。
引用：https://www.santen.co.jp/ja/healthcare/eye/library/color_deficiency/ (色覚異常 - 目の病気百科｜参天製薬)
上にもある通り、「色覚特性」とは色の区別がつきにくい特性のことを指します。
「色覚異常」、古くは「色盲」「色弱」などと呼ばれていましたが、差別的な響きを含んでいるため近年は「色覚特性」「色覚多様性」などの呼称を一般としようとする意見があります。よって、本記事では「色覚特性」と呼んでいきます。
日本人の男性の20人に1人ということは、クラスに1人いるかもしれない数字であり、個人的にはけっこう多いと感じます。
2.実際にどう見えるのか？
● 色覚特性と一口に言っても人によって見え方が違う
色がわからないということは視界はモノクロなのか？と思う方もいるかもしれませんが、色覚特性にはいくつかパターンがあり、その中でも人によって度合いが異なります。
例えば「赤がちょっと見えにくい人」「緑が全然見えない人」…など様々です。
● 見え方のイメージ
以下、見え方のイメージ画像を滋賀医科大学様より引用させていただきました。
左から元画像、1型２色覚、２型２色覚のシミュレーションです。色誤認の場面としてはもっといろいろあると思いますが、とりあえず手持ちの画像を使いました。
引用：http://www.shiga-med.ac.jp/~hqophth/farbe/miekata.html (色覚異常者の色の見え方｜色覚外来｜滋賀医科大学 眼科学講座)
焼肉の焼け具合チェックや、UNOはかなり苦労がありそうです。
▼ ちなみに、この後何回か出てくる用語。色覚特性の種類を示しています。
※1型色覚 … 赤に敏感な視細胞(L錐体※)の機能に異常がある
※2型色覚 … 緑に敏感な視細胞(M錐体※)の機能に異常がある
また、実際に色覚特性を持っている方がまとめられた画像もわかりやすいです。
「色が判らない」っていうのを人に説明する時にいつも苦労するので図を作った pic.twitter.com/mbiTmn0x0x
— takumi_Rimitz (@takumi_rimitz) March 5, 2019
やはり、日常生活において苦労する場面が多いようです。
3. パズルゲーム業界に見られる色覚特性への対応例
さて、「色」がテーマのゲームは世の中にたくさんありますが、これらのゲームは色覚特性を持つユーザーにとってはプレイが困難な場面も多いことが予想されます。
そこで色覚特性を持つユーザー向けに対応されたゲームのケースを２つほど紹介します。デザイナー的にはかなり大きなヒントになると思います。
● 例１：「パズドラ」
「パズル&ドラゴンズ(パズドラ)」は、ガンホー・オンライン・エンターテイメントから配信されているパズルゲームアプリで、同じ色のピースを繋げて消していくゲームです。
「パズドラ」は2014年に「色覚サポート」モードが実装されました。
主に、ピースの彩度が濃くなり、色の見分けが付きやすくなったようです。マイノリティのユーザーもゲームを楽しめるよう、デザイナーさんが何度も確認しながら調整していったのかな…と想像するとなんだかじーんときます…。
▼ 詳しくはこちらの記事のまとめに画像がたくさん載っていてわかりやすいのでぜひ見てみてください。
● 例２：「Two Dots」
「Two Dots」は、アメリカのPlaydots, Inc.から配信されているパズルゲームアプリです。こちらも「パズドラ」と同様に同じ色のピースを繋げて消していくタイプのゲームです。
「Two Dots」は2016年に「色覚サポート」モードが実装されました。
このモードをONにすると、これまで無地だったピースに記号が付与され、色以外の情報でもパズルを楽しむことができるようになります。個人的にこれはかなりデザイナーにとってはヒントになる気がします。
４.色覚特性とデザイン
さて本題です。
上の例などを踏まえつつ、本テーマについて「デザイナーとしてどのような工夫ができるか？」ということを考えていきたいと思います。まずは、チェック環境から。
● チェック方法１：Chrome拡張機能を使う！「Colorblindly」
１つ目の方法として、Google Chromeの拡張機能である「Colorblindly」を紹介します。この拡張機能は、色覚特性のある方に見えているイメージをブラウザ上でプレビューすることができます。
この拡張機能を使ってGoogleのトップページを見てみると、こんな感じなります。これでWeb上にあるものなら、色味を確認することができます。
● チェック方法２：Photoshopの「校正」
こちらはデザイナー向けですが、Photoshopを持っていれば「表示」＞「校正設定」からプレビュー表示ができます。Adobeすごいですね。
● チェック方法３：スマホアプリ
「色のシミュレータ」はスマホのカメラ越しに色覚特性の見え方をシミュレーションできる無料アプリです。こちらも一度使ってみると理解が深まるかもしれません。
● デザイナーができること
検索すると結構いろいろな方が「色覚特性×デザイン」関連の記事を書いてくださっているのでここでは一部のみ紹介します。気になった方はぜひ検索してみてください。
◇ 枠・縁をつける
まずは下の画像を見てください。
左の画像は目がチカチカするようなポップな配色ですが、２型色覚でプレビューすると右の画像のようになり、一番重要な「50%Off」の部分がほとんど見えません。(あくまでも例なので、元のデザインがそもそもヤバイのは一旦無視してください…😂)
↓ これを解決するアイデアの１つとして…
縁を付けました。
これだけでかなり見やすくなリました。
このように縁などをつけることによって、境目がはっきりし、見えやすくなります。色覚特性のない方も見えやすくなったのではないでしょうか。
色覚特性に配慮したデザインを行うことで、全員が見やすいデザインになります。
◇ ボタンはボーダーや塗りなどを工夫してスタイルを変える
webでよく見られるボタンのデザインとして、「YES」「NO」の「NO」だけグレーアウトしているデザインなどがありますが、これらも場合によっては見分けが厳しいケースがあります。
これがもし、「送信」「リセット」ボタンで、間違えて「リセット」を押してしまったら…と思うとゾッとしますね
↓ これを解決するアイデアの１つとして…
ボタンのスタイルを大きく変えてしまえば見分けがつきやすくなります。
ついでに「CLOSE」に「閉じる」をイメージした「×」も足してみました。
◇ 色以外の情報も加える
「Two Dots」の例でもありましたが、模様や記号など、色以外の情報を与えて差を出すのも良いです。
５.まとめ
" 一番大事なのは「知ること」 "
今回紹介した事例について、全てのデザインにこの工夫が必須かと問われると必ずしもそうではないかもしれません。案件によってはターゲット層が異なり、例えば女性がメインターゲットのコンテンツではここまで厳密なチェックは不要かもしれませんし、予算の都合上ここまでこだわることは難しい案件もあるかもしれません。
これらのテクニックを常に心がけることはないかもしれませんが、「知っている」という状態であることが重要だと感じます。そもそも知らなければ、本当にそれが必要な時にも気が付けません。
そして、これは何も色覚特性に限った話ではありません。
個人の見解ですが、色を見分けるのがちょっと苦手なことによってサービスが受けられないユーザーが出てくるような、そんな寂しい社会にしないために、デザインが存在しているのだと思います。
多様なユーザーに対する想像力・知識を深めつつ、より多くの人に寄り添ったデザインをしていきたいですね。
この記事が気に入ったらサポートをしてみませんか？