「すべての人のためのデザイン」であるユニバーサルデザイン(以下、UD)を、グラフィックデザインの視点から解説する連載企画。第5回から2回にわたって「配慮のポイント」を解説します。今回はその基本編です。
[編集協力:株式会社モリサワ]
★記事作成にあたって
色の見え方には個人差があります。色覚シミュレーションによって再現される色は、実際に見えている世界を再現したものではありません。判断の目安、参考として捉えましょう。
配慮すべき3つのポイント
ユニバーサルデザインの観点からメディアを制作する際は、以下の3点に配慮する必要があります。
- (1)配色への配慮
- (2)模様や凡例などの工夫
- (3)読みやすい文字使い
これらに注意するだけで、特別なことをしなくても配慮されたデザインに仕上がります。
(1)配色への配慮
一般の人の場合
下の図のA・Bを比較すると、多くの人はAのほうが見やすいと感じられるでしょう。文字と背景色のコントラストの差がはっきりしているため、文字が読みやすくなります。
色覚特性者の場合
配色に配慮するにはさまざまな方法がありますが、まずは「自分の目で見て、見やすいかどうか」を考えてください。自分が見にくいと感じたら、ほかの人も見にくいケースは多いです。
先ほどのクリスマスツリーの画像を、色覚特性者の見え方でシミュレーションしてみます。
D型の人はなんとか読めるものの、P型ではかなり見えにくく、文字がほとんど読めません。そのため、まずは自分で見やすいかどうかを判断してください。
その上で、自分が見やすいと感じる配色でも他の方にとっては見にくい場合もありますので、高齢者や色覚特性者などへの配色を考慮してください。
配色に配慮する際の基本
配色する際の具体的な配慮の仕方を、以下の4点に整理しました。
- ①彩度、コントラストの差を出す…同じ紫色でも、彩度や明度の差を出すことで色を区別しやすくなります。
- ②寒色と暖色を組み合わせる…この組み合わせも区別しやすくなります。
- ③赤を使う時はオレンジ…赤は黒く見えてしまう傾向があるため、黒と区別させる場合は、オレンジか赤オレンジを使うと効果的です。
- ④黄色・黄緑・明るい緑は同時に使わない…これらも判別しにくくなります。どうしても使いたい場合は、隣りあわないように、色と色の間にほかの色を入れるなど工夫が必要です。
区別がつきにくい色の組み合わせ(色覚特性者・D型)
一般の人には区別できる組み合わせでも、D型の色覚特性者は右側のように色が置き換わって見えるため、区別がつきにくくなります。色覚特性者にとって区別しにくい色同士は、並べないように注意しましょう。
区別がつきにくい色の組み合わせ(高齢者)
高齢者は、コントラストの差が少ない配色を識別しにくい傾向があります。
また、黄変化(おうへんか)が進行している場合は全体的に黄色っぽく見えるため、白地に黄色の組み合わせなども見えにくくなります。
茶色や黒や紫など濃い色はすべて黒っぽく見えてしまうので、ここにある色の組み合わせは避ける必要があります。
(2)模様や凡例などの工夫
色への配慮に加えて、凡例や模様を入れるのも効果的です。以下の4つの方法があります。
- ①背景に模様を入れる…区別しづらい配色でも見やすくなります。
- ②境界をつける…円グラフなどは、隣り合う色の間に境界線を入れると区別しやすくなります。
- ③線種や形状を変える…線グラフなどの場合に有効です。
- ④色名を入れる…色が区別しにくい場合は、色名を書いてしまうのも効果的です。
(3)読みやすい文字使い
文字の見せ方にも配慮が必要です。タイトル・見出しと本文とでは、配慮すべきポイントが異なります。
見せる文字(タイトル・見出し)の主な配慮ポイント
- ・目立つ文字サイズか
- ・文字の太さは十分か
- ・文字と文字の間は適切か
- ・フォントの選択は合っているか
読ませる文字(本文)の主な配慮ポイント
- ・文字数は適切か
- ・行間は適切か
- ・余白のスペースは十分か
- ・文字サイズは適切か
- ・読みやすいフォントか
1行あたりの適切な文字数
紙・デジタルどちらの場合も、大きなスペースに合わせて文字を左右いっぱいに流し込んでしまうと、読むのが大変になります。
逆に1行あたりの文字数が少なく改行が多すぎる場合も読みにくくなります。日本語の本文の場合は1行あたり10字以上、35〜40字くらいまでの文字数にできるよう、レイアウトを工夫してみてください。
適切な字間・行間
文字と文字の間を調整すると読みやすくなり、全体の雰囲気も変わります。
下の例は、Aがフォントのツメ情報で詰めを行う「プロポーショナルメトリクス」を実施したものです。Bは逆に、トラッキングで間隔を空けています。
文章として読ませる部分では、基本的には字間は詰めないようにします。逆にタイトルなど見せる要素では、字間を詰めるなどの調整を行うと、読みやすくなる場合があります。
また、行間については文字サイズの50〜100%開けると読みやすくなると言われています。
単純に文字を並べるのではなく、可読性を考慮して字間を設定することが大切です。
太文字の活用/文字色・背景色/下線、縁取り、罫巻き
太文字は目につきやすいので、見出しに有効です。一方、本文を太文字にすると読みにくくなります。
また「(1)配色への配慮」で説明した通り、読みやすい文字色・背景色を選ぶ必要があります。
さらに強調したい内容は色を変えるのではなく、下線や罫巻きにしたり、文字に装飾したりすると、色覚特性者への配慮になります。背景色と区別がつきにくい場合は、文字に白い縁取りを付けるとわかりやすくなります。
適切なフォント
見出しには目立つフォントを、そして本文は読みやすいフォントを選択してください。本文に特徴的なデザインのフォントを使用すると可読性が損なわれる可能性があります。
また下の図のように、制作物の目的やターゲットに合わせて適切なフォントを選ぶことも大切です。情報格差が起こらないように、広報誌や公共の配布物、看板などにはUDフォントを活用しましょう。
《シリーズ企画》
広告・販促・広報ですぐに役立つ「ユニバーサルデザイン入門」
- (1)「見え方」の多様性
- (2)ユニバーサルデザインを用いる理由
- (3)UDフォントとは
- (4)Webサイトでのフォント活用
- (5)配慮のポイント・基本編
- (6)配慮のポイント・実践編
私たちがお役に立てること 想いをカタチに 企画編集/クリエイティブ プロモーション活動の全体を俯瞰しながら、お客さまの求めるイメージを各種ツールへとカタチにします。 詳細はこちら