ユニバーサルデザインって具体的に何するの？

身近にもあるユニバーサルデザイン

ユニバーサルデザインという言葉を聞いたことありますか？
最近は小学生が総合的学習の時間で「ユニバーサルデザイン」を取り上げることも増えているそうです。

「SDGs」の時流にマッチしているということなんでしょうか。
ユニバーサルデザイン（=Universal Design)とは、障がいを持つ方だけが対象ではなく、はじめから誰もが（ユニバーサル）使いやすく利用できる施設・製品・情報を設計（デザイン）することだそうです。
バリアを取り除くだけではなく、バリアフリーを一歩進めた考え方ですね。

身近なユニバーサルデザインとして有名なのは、シャンプーの側面にある凹凸です。
指で触ることでシャンプーかコンディショナーかわかるので、髪を洗っている時、目を閉じていても使えます。
何気ないことですが、視覚に障害のある人にとっても使いやすい工夫が施されていますね。

Webサイトの設計も「すべての人」がWebで提供される情報を利用できるようにすることが大事だと考えています。
専門的に言うと「Webアクセシビリティ」ですね。

どんな人にも伝わりやすいデザインにするために

洗練されたレイアウトや美しい写真やイラストも使っておしゃれなデザインにしたい。。
でも、一人でも多くの人が快適に情報にアクセスできるように、ユニバーサルデザインだって意識したい！
そんなわけで、ここでは、Webアクセシビリティを意識しつつ、普段作業する上で、どんな人にも伝わりやすいデザインにするために、気を付けている要素をまとめてみました。

①情報量の適正化

例えばカフェのメニューを作る時など、情報をギュウギュウに詰め込みたくなってしまいます。。
おすすめのメニューやこだわりのコーヒー、自慢のデザートなど、あれもこれも伝えたいと思ってしまうんですよね。

結果として、文字を小さくしたり、こちらが伝えたい情報を無理に入れて過剰な文字数を掲載することになってしまうことに。。
しかし、これでは多様性への配慮をしているとは言えませんよね。

例えば視覚過敏のある人にとっては、目に見えるものは全てが刺激になります。
あれもこれも伝えたい、ごちゃごちゃした画面では本当に必要な情報を読み取りにくくなってしまいます。

まず、大事なことは「情報を削る」こと。
入れたい情報はたくさんあるけど、取捨選択して、必要なメッセージに必要な情報のみを残します。

そのためには、情報の構造や情報同士の関係を理解することが大事ですね。
デザインの前に情報の「優先度」を明確にしていきます。

②余白で見やすくする

余白をあえて作らないデザインもありますね。
画面いっぱいに情報（アイキャッチなどの写真も）を配置することで、ダイナミックな躍動感を出すことができます。

しかし、読みやすさ、見やすさを考えると余白は十分に取りたいです。
画面全体の余白だけでなく、例えば文字を枠で囲む時は、上下左右に1文字以上の余白を確保したり、表を作る時もセル内の上下左右に余白をつくり、
情報と情報の間にゆとりのある配置を心掛けています。

③字間、行長と行間で読みやすくする

字間（文字と文字の間）も詰めすぎると窮屈で読みにくくなってしまいます。
逆に空けすぎてもパラパラしてしまいます。
同じサイズでも書体やフォントによって見え方が違ってくるし、字間の調整が難しいですが、文字サイズの５～１０％くらいにするのがバランスがいいみたいです。

字間の調整・・カーニングは奥が深い！
また、行間（行と行の間）は文字のサイズの５０％～１００％が読みやすいそうですが、実際は行長（一行の長さ）によっても変わってくるので、これは一応の目安数値にしています。

④UDフォントをできるだけ使用する

より多くの人によって読みやすいようにデザインされているフォントのことをユニバーサルフォント（UDフォント）といいます。
UDフォントは判読性を高めるために、さまざまな工夫がちりばめられています。

特に小学校や中学、高校など、さまざまな個性が集まる教育現場では「UDデジタル教科書体」がよく使われているようです。（弱視や視覚過敏、読み書き障害に配慮したフォント）

教科書で使われているフォントも身近なユニバーサルデザインなんですね。
視覚多様性への細やかな配慮、これは子どもだけではなく、すべての人にとって、読みにくさを感じさせないために、大事なことだと思います。

⑤背景とテキストにコントラストをつける

テキストの背景に色がついてる場合には、背景色とテキストの色にコントラストをつけることが大切ですね。

背景色とテキストに「明度」のコントラストがないと、だれにとっても文字が読みにくくなります。
濃い色の背景を使う場合は、テキストの色を白くしたり、背景が白などの明るい場合は、できるだけ濃い色、暗い色を使います。

ただ、白い背景に真っ黒のテキストだとコントラストが強すぎるために、かえって読みにくくなってしまうようです。
そこで灰色（といっても黒い文字の明度を少し上げる程度ですが）を使うと可読性がアップして画面の文字を読みやすくすることができます。

⑥色だけで表現しない（特に赤と緑は注意する）

色の受け取り方が違う人がいます。
色覚多型と言われていますが、主にP型とD型に分かれ、男性では20人に一人、女性では500人に一人の割合で存在するようです。けっこうな人数ですよね。
注意することとしては、

〇色の組み合わせに注意する
明度の似た暖色同士あるいは寒色同士は識別しにくいので、できるだけ使わない。（似た色相の色の組み合わせでも、明度に差をつけると良いみたいです）

〇赤と緑は避ける
色覚特性として、赤や緑はとりわけ見分けにくい色だそうです。
なので、強調やアクセントの色に「赤」や「緑」は使わないようにしています。
代わりに「オレンジ」や「青」は区別しやすいのでバリアフリーな組み合わせだそうです。こういう組み合わせを積極的に活用したいですね。

〇色のみには頼らないで表現する
情報を強調したい時に赤字はつい目立つので使いがちですが、色覚特性として黒との区別が難しい場合があります。

なので、赤文字だけでなく、協調したい箇所を太字にしたり、アンダーラインにしたり、色以外の方法での強調も同時に行います。

他にも棒グラフなども色で項目を分けることがよくありますが、色だけだと情報を読み取れないことがあります。
パターンを使用したり、凡例などに色名を表記しておくことで、色覚多型への配慮につながると思います。

カラーユニバーサルについての詳細はこちらから推奨配色セットへどうぞ。

まとめ

デザインは奥が深くて、自分なりに考えて作るもなかなかうまくいかないことが多いです。

でも、いつかは一目で伝わるデザインを作れるようになりたい！
そして、どんな人にも伝わるやさしいデザインを目指していきたいです。

そのためにも、不十分ではあるけど、少しでも多様な方のために「伝わりやすいデザイン」マインドを持ち続けて作業していきます。

最後までお読みいただき、ありがとうございました。