週間販促担当者

デザインと制作

メディア・ユニバーサル・デザインとは?【色編】 簡単に解説!

メディア・ユニバーサル・デザインとは?【色編】 簡単に解説!

こんにちは!

今年もあと1ヶ月を切り、忘年会シーズンでわくわくしている小西です。

さて、街もすっかりクリスマス気分で、赤や緑で綺麗に彩られていますね。

皆さんは何色が好きですか?(ちなみに私はサーモンピンクです)

前回の記事では「メディア・ユニバーサル・デザイン(MUD)」の文字の見え方・伝わりやすさついて、お話しさせていただきました。

今日は色について簡単に分かりやすくお話ししていこうと思います。

色覚障がい者がわかりづらいと感じる色は?

前回の記事でも少しお話ししたように、特定の色が判別しづらい「色覚障がい」の方は、日本国内でおおよそ300万人以上。

割合でいうと男性の5%(20人に1人)、女性の0.2%(500人に1人)いるといわれています。

眼の錐体の不具合により、特定の色の違いが分かりづらいことが特徴です。

例えば、茶・赤・緑系統はすべて茶色っぽく見えてしまいます。

また、水色やピンク、紫は薄くグレーがかった青色に見えてしまいます。

こうした不便を解決するためにも、線をつけて区分けしたり、どの配色であれば判別しやすいかなど、配慮できる知識と意識を持っておきたいものですね。

高齢者がわかりづらいと感じる色は?

超高齢社会とも言われる日本では、5人に5人の割合で高齢者(65歳以上)の方がいらっしゃいます。

こうした高齢者の方々が識別しづらい色は、どういったものでしょうか?

特に、「紺と黒」「青と青緑」「赤と赤紫」

そして、白と淡い黄色などの明度差のない色などが判別しづらいと感じるようです。

白内障になると全体がぼんやりと黄色がかり、明度差のない色が識別しづらくなるのです。

高齢者の方に向けて資料やデザインを作る際には、淡い色使いはできるだけ避けるようにしたいですね。

また、高齢者の方と色覚障がい者の方とは、判別しづらい色が異なることを頭においておきましょう。

実例!わかりやすく伝えるための4つのポイント

では、「色を識別しづらい」を解決するために、どんなことができるでしょうか?

これは情報発信の担い手として、ぜひ知っておきたいですよね。

一部ですが、私が最近学んだ工夫の4つのポイントをご紹介します!

ポイント1. 文字にフチをつける

例えば、赤背景に緑の文字は、一部の色覚障がい者の方にとってどちらも茶色っぽく見えてしまい、判別しづらい組み合わせになります。

白フチなどを付けることで、読みやすさはグッと高くなりますね。

フチをつける

ポイント2. 分けて配置・色に模様(柄)をつける

例えば、会社での資料でもよく目にする、円グラフ・棒グラフでは複数の色が隣り合うため、配色によっては区別しづらく、どれがどこを示しているのか非常にわかりにくくなります。

こうした場合は、境目を白線などでセパレート化してあげることで、項目ごとの割合がはっきりします。

また、項目も凡例表記ではなく、グラフ中に直接記載することで、何がどの割合なのか色で判別せずとも認識することができます。

さらに判別化・認識度を上げるために、模様をつける(ハッチング)、明度さをつけるなどがありますが、ここで注意したいポイントが、ひと工夫をやりすぎてはいけないということ。

区別しやすくするために模様を多く、色数を多くとすると余計にわかりづらくなってしまいます。

見る人すべてがどうすればわかりやすいか、広い目で考えていきたいですね。
グラフ表現

ポイント3. 配色(色の組み合わせ)を考える

淡いピンクと淡い紫が並ぶ、緑とオレンジが並ぶ、となると、色覚障がいの方にとっては同系色であり、区別しづらくなってしまいます。

では、淡いピンク・緑・淡い紫・オレンジの並びだと、どうでしょうか?

シミュレーションを上手く活用して、どの色の組み合わせだと判別しやすいか覚えておきたいですね。
配色

ポイント4. 強調したい文字を太くする・下線を入れる
資料ではよく、大事な部分が赤字で強調されることが多いです。しかし、色覚障がい者にとっては、赤字は茶色っぽく見え、黒字と判別しづらいため、重要な箇所がどこなのか分かりづらくなります。

こうした場合は、強調文字は色だけで違いを表現するのではなく、文字を太くしたり、下線を入れて強調したりといった工夫が必要です。

また高齢者でいうと例えば、紺色と黒色の文字の区別がしづらいです。

同様の工夫は勿論のこと、紺色のマゼンタ(M)の割合を下げて、黒との明度差をつけるなどといった工夫も重要です。
強調カラー

こうした4つの工夫が、作ったデザインに必要かどうかシミュレーションを見る方法の1つとして、Photoshopがあります。

[校正] > [校正設定] > [P型(1型)色覚] または [D型(2型)色覚]
[P型(1型)色覚] ・・・ 赤錐体の不具合
[D型(2型)色覚] ・・・ 緑錐体の不具合

デザイン制作時には、ぜひ確認ポイントのひとつとして覚えておきたいですね。

2週に渡り、メディア・ユニバーサル・デザインについてお話ししてきましたが、いかがでしたでしょうか?

前回の文字編をまだご覧になっていない方は、ぜひチェックしてみてくださいね!

メディア・ユニバーサル・デザインとは?【文字編】 例と一緒に解説!

イラストレーターの困った!を解決

アートボート外の背景画面が真っ白になった時の対処法

イラストレーターで選択できない時の解決法 パターン別で解説

イラレの特色ってどうやって確認するの?チェック方法を解説

イラレ エンベロープがうまくできない時の対処法とは?

イラレ 複数のオブジェクトの縦横を一括でサイズ変更したい時は?

イラレでPDFを編集すると色やフォントが変わる時の対処法

イラレでmmの数値が指定からずれる時の解決策

複合シェイプとは?「合体」「解除」までわかりやすく解説

この記事を書いた人

いつでも妥協いたしません!想いをカタチに、笑顔をあなたに。
小西 温子 Atsuko Konishi
願い実現デザイナー

大阪芸術大学デザイン学科にてグラフィックデザインを学び、企画デザイン1期生として入社。
チラシ、パンフレット、名刺など販促デザインを中心に手がけ、現在3年目に突入。
好きなものはネコとフライドポテト。手探りながらも、日々奮闘中!
---
神戸市 中小企業柱巻広告デザインコンペ2016 最優秀賞受賞

このスタッフの記事一覧を見る

TAGS

// RECOMMEND POST この記事も読まれています!

デザインと制作店舗見てきましたシリーズ

等身大パネルの脚について

今日もお仕事がんばりましょー!今日のやる気がでる一言はコレ!

YouTubeも見てね!

儲かりアドバイザー上野健二