「メディアユニバーサルデザイン」の大切さを改めて解説！

こんにちは。制作課のイケダです。
今回は、印刷物を作る上で大切な「MUD（メディアユニバーサルデザイン）」について解説します！

メディアユニバーサルデザインとは

MUD（メディアユニバーサルデザイン）とは、UD（ユニバーサルデザイン）の考え方に基づいて、文字や色の使い方などに配慮・工夫することで、色弱者や弱視者はもとより、高齢者・子ども・外国人など、より多くの人が「見やすく」「分かりやすい」情報を提供するためのデザイン手法のことをいいます。

※UD（ユニバーサルデザイン）とは、年齢・性別・国籍・障がいなどにかかわらず、誰もが利用できるデザインを指す概念であり、身の回りにある製品や環境にも適用されます。
UDの要素には、操作が簡単なインタフェース、物理的なアクセシビリティ、視覚・聴覚・触覚に対応したデザイン、使いやすい環境設計などが挙げられます。

例えば、建物や製品が車椅子や障がいのある人でも利用しやすいように設計されることが「UD」であり、テキストのフォンサイズや色を調整して視覚障がいがある人でも読みやすくしたり、音声や動画に字幕や手話をつけることが「MUD」になります。

東京オリンピックで話題となったピクトグラムも、言葉を使わず情報を伝えられる単純化された記号であることからMUDと言えます。

▼ピクトグラムについてはこちらの記事をご覧ください。

ピクトグラムはユニバーサルデザインのルーツ。その歴史と活用事例を探ってみた

MUDは紙媒体だけにとどまらず、情報やメディアの分野にも広がっていて、WEBサイトやスマートフォンアプリ、看板やデジタル広告、テレビ番組や映画など、多様なメディアで配慮することが求められています。

MUDを実践するためには、配慮すべき５つのポイント「MUDの5原則」があります。
これを網羅したデザインをすることで、より多くの方々に情報がわかりやすく伝わる安全な社会を目指します。

では、この5原則にのっとったMUDはどういったものなのか。
今回は、「色」と「テキスト」の二つの観点でMUDについて解説します！

メディアユニバーサルデザインだとこう変わる！【色編】

色の見え方って同じじゃないの？

色の見え方は色覚特性や年齢、状況によって異なります。
人は目の網膜にある3つの錐体によって、赤・緑・青の3原色を識別して色を見分けています。

一般的な色覚（C型）では、見分けが可能でも赤色に敏感なL錐体に異常があると赤色を区別することができず、赤が緑に見える場合があります（1型2色覚（P型））。
また、緑色に敏感なM錐体に異常があると、緑色を区別することができず、緑色が赤色に見える場合があります（2型2色覚（D型））。

一般的な色覚とは異なる人を「色弱者」いい、日本人の色弱者の割合は男性では20人に1人、日本人女性では500～600人に1人と言われています。
男女同数の40人クラスで考えると、クラスに1人いることになります。

では色弱者の人にはどのように見えているのでしょうか。

▼色覚タイプによる色の見え方のシミュレーション

上のシュミレーションを見てみると、赤から緑のあたりが、黄色を中心にして同じように見えているのが分かると思います。
このように見え方が異なることで、色の組み合わせによっては文字や絵柄が識別しにくくなってしまいます。

▼見分けにくい色の組み合わせ例①

▼見分けにくい色の組み合わせ例②

「見分けにくい色の組み合わせ例②」では、P型では背景の「赤」とキャラクター本体の「緑」が見分けづらく、D型では背景の「赤」とキャラクターの手足「こげ茶」が見分けづらくなっています。

Adobe IllustratorやPhotoshopでは、見え方の違いについてシミュレーションできるので、ご自身で作った制作物は一度確認をしてみてください。
IllustratorやPhotoshopの「表示」メニュー→「校正設定」で、「P型（1型）色覚」「D型（2型）色覚」を選ぶことでP型、D型色覚の人がどのように見えるのかを確認することができます。

IllustratorやPhotoshopがない場合は、「色のシミュレータ」というアプリがあります。
このアプリではスマホやタブレットのカメラをものにかざすと、タイプ別の色覚が疑似体験できます。

 

改善のコツ（色の場合）

では、どのような改善をすると、多くの人に伝わりやすいデザインになるのか。
それをここからご紹介します！

ちなみに、改善のコツはありますが「絶対」の正解はありません。
目的に合わせて、配色や表現の仕方を工夫してみましょう。

改善のコツその１「色の組み合わせを変える」

色の改善としては、「色の組み合わせを変える」がひとつ挙げられます。
具体的には下記の方法です。

・「片方の色を見分けやすい色に変えてみる」
・「どうしてもその組み合わせを使いたいときは、境界線（セパレーションカラー）を入れてみる」

▼キャラクターの色を変更してみた場合

▼境界線を入れてみた場合

これだけで視認性がだいぶ改善されました。

改善のコツその２「色をずらしてみる」

・「片方の色をずらしてみる」
例えば、赤をオレンジ寄りにずらしたり、緑を青寄りにずらしてみたり、黄みと青みの差をつけてみます。

▼色の差をつけた場合

改善のコツその３「コントラスト（明度差）をつけてみる」

・「片方の色の明るさを変えてみる」
コントラストをつけることで、色の見え方ではなく明るさで識別できるようにします。

▼コントラストをつけた場合

明るさで差を付けることで、モノクロコピーを取ったときにも見分けやすくなります。

改善のコツその４「色だけで伝えない」

地模様（ハッチング）をつけたり、文字を入れたりすることで見分けがつくようにすることもできます。
円グラフで、どうしても「オレンジ」「黄緑」「水色」「ピンク」を使わなければならないとしたら、どうなるか見てみましょう。

▼通常の場合

▼地模様（ハッチング）をつけてみた場合

地模様（ハッチング）をつけたことで、色の差が明確になっていることが分かります。

▼識別の文字を入れてみた場合

色でなく、文字で判別することができます。

このように、MUDの観点で改善をすることで、より多くの人にとって読みやすい・分かりやすいデザインにすることができます。

しかし、「改善のコツは分かったけど、実際どのような色の組み合わせがおすすめなの？」と思われた方！
色の組み合わせの注意点や、使用する上でのノウハウなどをまとめた冊子「カラーユニバーサルデザイン推奨配色セット ガイドブック」なるものが公開されています。
こちらを一読し、参考にしてみてはいかがでしょうか。

（出典）
https://jfly.uni-koeln.de/colorset/
『カラーユニバーサルデザイン推奨配色セット ガイドブック』第２版
発行年：2018年
発行者：カラーユニバーサルデザイン推奨配色セット制作委員会

メディアユニバーサルデザインだとこう変わる！【テキスト編】

フォントやテキストにもユニバーサルデザインってあるの？

フォントにも「読みやすさ」、「見やすさ」、「伝えやすさ」を意識してデザインされたものがあります。
UDフォント（ユニバーサルデザインフォント）と呼ばれ、小さくても読みやすく、読み間違えにくくデザインされています。

では、そのUDフォントはどんなフォントなのか。
印刷会社の制作現場では、ゴシック体を使用するときに「新ゴ」というフォントがよく使われますが、このフォントにはUD版があります。

その名も「UD新ゴ」といい、「文字の形が分かりやすいこと」、「読み間違えないこと」に配慮されています。

ちなみに当社ではモリサワフォントを使用しており、同社が提供する42ファミリー284書体が使用可能です。
また、Windows10環境であれば、OS標準で「UDデジタル教科書体」「BIZ UDゴシック」「BIZ UD明朝」といったUDフォントが使用できます。

 

改善のコツ（テキストの場合）

テキストの改善としては、UDフォントを使うことが一つの改善方法ではありますが、それだけでは足りないこともあります。
とくに文章をレイアウトするには、フォントだけでなく「行間」や「行長」が大切になります。

「行間」
例えば、次の文章は読みやすいでしょうか？

読めなくはありませんが、「行間」が狭く、かなり読みづらいですよね。

では、「行間」を文章で使われている文字サイズの0.5倍のサイズにしてみるとどうでしょうか。

行間なしのものより、かなり読みやすくなりましたよね。
このように、わずかな行間の調整でも文章の読みやすさは大きく変化します。

 

「行長（＝１行の文字数）」

続いて、行間を開けて読みやすくなった文章の「１行の文字数」を減らしてみました。
どうでしょうか。さらに読みやすくなったと思いませんか？

テキストの見せ方については、フォント自体の形だけでなく、文字組版といった古からのノウハウがたくさんあります。
UDフォントを使うだけでなく組版ノウハウをしっかりと適用することで、見やすく読みやすくなり、情報が伝わりやすくなるわけです。

メディアユニバーサルデザインに取り組む者として

いかがでしょうか？
デザインにはMUDの視点がいかに必要か、といったことがお分かりいただけたのではないでしょうか。

当社では、受け手・読み手側の立場を最大限考慮した企画・デザインの作成を第一と考え、積極的にMUDに取り組んでいます。
MUDディレクター・MUDアドバイザーの資格を持つ社員が、プロの視点でお客さまの課題解決につながるご提案をいたします。

「今の会社案内のデザインがパっとしない。分かりづらい」
「MUDを取り入れたものにリデザインしたい」
など、デザインに関するお悩みがございましたら、どうぞお気軽にご相談ください！

 お問い合わせ

〈この記事を読んだ方におススメ！〉

▼パワーポイントのおすすめフォントは？パワポが見やすくなるコツをデザイナーが解説！

パワーポイントのおすすめフォントは？パワポが見やすくなるコツをデザイナーが解説！

▼「余白」をデザインしよう。デザイナーが忘れてはいけないこと。

「余白」をデザインしよう。デザイナーが忘れてはいけないこと。