「すべての人のためのデザイン」であるユニバーサルデザイン（以下、UD）を、グラフィックデザインの視点から解説する連載企画。最終回となる今回は、「配慮のポイント」の実践編をお届けします。
[編集協力：株式会社モリサワ]
★記事作成にあたって
色の見え方には個人差があります。色覚シミュレーションによって再現される色は、実際に見えている世界を再現したものではありません。判断の目安、参考として捉えましょう。
Webサイトのポップ
最初はレベル-1として、価格や割引率などを目立たせるために使われる「ポップ」の例です。
左のデザインの場合、黄色背景に白文字という組み合わせは、明るい色同士の区別がつきにくい高齢者には見えづらい配色です。
この点を改善したのが中央のデザインです。中の文字を暗い青にすることでコントラストの差を出し、より見やすくしています。
印象を変更してみたのが右端です。文字部分をポップな印象のWebフォントに変更しました。親しみやすさが一気に高まります。また、画像ではなく文字にWebフォントを使うことで、パソコンの読み上げ機能に対応しやすくなります。SEO対策にも有効です。
グラフ
次はレベル-2、ビジネス資料や統計資料などで使われることの多い「グラフ」の改善テクニックです。
あるショップの「ポイントアプリ」のポイント表示画面を参考に作成してみました。
暗い赤と明るい赤の組み合わせは、P型の色覚特性者には中央のように見えてしまい、判別しにくくなります。この問題を改善したのが右のグラフです。グラフの一部を分けてしまうことで、色覚特性者にもわかりやすくなります。
Webサイトのフォーム
レベル-3は、Webサイトの「申し込みフォーム」です。注意点や必須項目に赤色が使われていますが、P型の色覚特性者には中央のように見えてしまい、注意点がわかりにくくなります。
これらの問題を改善したのが右の画像です。「注意」の見出しを目立つデザインにし、赤文字と黒文字の区別がしやすくなるよう、下線を入れました。
また入力欄は、どれが必須項目か一目でわかるよう、右端に「必須」と入れるなどの工夫をしています。さらに、フォントはUDフォントに変更しています。
地図
最後のレベル-4は文字、イラストなどさまざまな要素が複雑に配置され、色数も多い「地図」です。こちらもP型の色覚特性者には見えにくくなってしまいます（中央）。そこで、さまざまな工夫を盛り込んでわかりやすくしたのが右の地図です。以下の点を変更しました。
- ・公園内の建物をオレンジから紫色に
- ・駐車場をピンクから茶色に
- ・神社内の建物をくすんだピンクから濃い茶色に
- ・飲食店を示す丸印の赤をオレンジに
- ・コンビニを示す丸印を星印に変え、色も緑から青に
- ・文字を明朝体からUDフォント（UD新丸ゴ）に
- ・文字のサイズと太さを見直し（大きく、太く）
- ・背景色と区別がつきにくい文字の位置や色を変更。必要に応じて縁取り処理も行う
- ・川や池に模様を追加して建物と差別化
- ・バス停や郵便局などをマーク化
- ・凡例を追加
こうした配慮をすることで、色覚特性者だけでなく、一般の人にもわかりやすいデザインになります。ぜひ実践してみてください。
【参考資料】色のシミュレーションツールで配色チェックを！
配色に配慮したデザインにしたものの、色覚特性者には実際にどう見えるか、判断しにくい場合があります。そこでぜひ活用していただきたいのが、色のシミュレーションツールです。いくつかご紹介しましょう。
iPhone/Android アプリ「色のシミュレータ」（無料）
スマートフォンのカメラあるいは画像ファイルから得た画像が、色覚特性者にはどのように見えるのかを擬似的に再現できます。
Google Chrome拡張機能「Colorblindly」（無料）
Google Chromeで閲覧しているサイトが、色覚特性者にはどのように見えるのかをシミュレートします。Webサイトを構築する際に便利です。
Adobe Photoshop/Adobe Illustrator「CUDソフトプルーフ（擬似変換）」
校正設定機能を使って、色覚特性者（P型・D型）の見え方をシミュレートできます。シミュレートしていない状態と比較したり、PDFに保存することも可能です。
《シリーズ企画》
広告・販促・広報ですぐに役立つ「ユニバーサルデザイン入門」
- （1）「見え方」の多様性
- （2）ユニバーサルデザインを用いる理由
- （3）UDフォントとは
- （4）Webサイトでのフォント活用
- （5）配慮のポイント・基本編
- （6）配慮のポイント・実践編
私たちがお役に立てること
想いをカタチに 企画編集/クリエイティブ
プロモーション活動の全体を俯瞰しながら、お客さまの求めるイメージを各種ツールへとカタチにします。
詳細はこちら
