1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

非デザイナーにも知ってほしい色覚多様性に対応するデザイン

Last updated at Posted at 2025-12-26

はじめに

みなさんはアプリケーションや資料を作る際、必要な情報がきちんと伝わるかを意識しているでしょうか?
デザイナーやそれに類する人にお願いすることができればその方が意識して作ってくれるでしょうが、そうで無い場合は自分で作らなければなりません。
そういった場合に意識したいこと(今回は色)について書いていこうと思います。

色で情報を伝えようとしてもうまく伝わらないことがある

アプリケーションやスライド資料など、色を使って情報を伝えようとする場面は多いと思います。
でも世の中には色の見え方が一般的な人とは異なる人がいます。

  • 充電器の充電中(赤)、充電完了(緑)が判別できない
  • 夜間点滅式信号機で赤と黄どちらが点滅しているかわからない
  • ぷよぷよの青ぷよと紫ぷよが区別できない

こんな事を言っている人に出会ったことはないでしょうか?
そういった人たちには色の情報がうまく伝わっていない場合があります。

色覚多様性

色の見え方の違いを最近は「色覚多様性」と言っているそうです。
日本人の場合、男性が約5%(およそ20人に1人)、女性が約0.2%(およそ500人に1人)、全体では300万人以上の人が色覚多様性を持っていると言われています。(ChatGPT調べ)
見え方のパターンもいくつかありますが、ここでは割愛します。

どのように対応するか

色覚多様性に対応するためには、コントラスト比を大きくしたり混同しやすい色の組み合わせを避けるなど使用する色を考慮する対応もありますが、ここでは色以外の方法の対応方法について、いくつか例を挙げてみます。

テキストの装飾

重要な部分を強調したい場合などは赤や青などの着色だけでなく以下のような装飾を追加する。

  • 太字にする
  • 下線を付ける
  • サイズを大きくする

ボタンの活性、非活性

色の濃さや違いだけではなく、アイコンなども追加する。

非活性 活性
色のみ 色のみ非活性.png 色のみ活性.png
色+アイコン 色アイコン非活性.png 色アイコン活性.png

グラフやチャート

円グラフなどは斜線やドット、線グラフであれば点線や破線などのパターンを併用する。

また、凡例を別にするのではなく、グラフの要素から引っ張る。
スクリーンショット 2025-12-04 15.26.01.png
↓↓↓
スクリーンショット 2025-12-04 15.26.39.png

Webアプリケーションなどではオンカーソル時に対応する凡例が強調されるようにするなど。

最後に

いかがでしたか?
すでに何気なく対応している事例もあったかもしれませんが、今回紹介したような意味合いが隠れていたりします。
本記事では色覚多様性に対応する例を一部挙げましたがこの内容に限らず、また色覚以外にも様々な多様性があり、その対応方法があります。
そうした多様性にどう対応すれば良いか、Webの世界ではWeb Content Accessibility Guidelines (WCAG)というものが定められていたり(原文へのリンク / 日本語訳へのリンク)、デジタル庁からウェブアクセシビリティ導入ガイドブックというものも発表されています(リンク)。これらはWebのガイドラインではありますが、スライド資料作りなどにも参考にできるかと思います。
多様性が叫ばれるようになってしばらく経ちましたが、より多くの人に必要な情報が伝わるものが作られるよう、本記事がそのきっかけとなってくれれば幸いです。
最後まで読んでいただき、ありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?