こんにちは！ デザイナーのアローです。
様々な人が日常的に目にする機会が増えているWEBサイト。ですが、同じWEBサイトを見ていても、人によって見え方が全く同じではないことをご存知でしょうか。
たとえば、スマートフォンがシニア層にも普及したことにより、必然的に老眼の方の利用が増えてきていますよね。また、年齢に関係なく、色覚障害などのハンディキャップをお持ちの方がWEBサイトをご利用になられる可能性も十分にあります。
そこで、WEBデザインの世界でも求められるのが「ユニバーサルデザイン」（略称 “UD”）です。ユニバーサルデザインとは、多くの人にとって使いやすく、優しいデザインのことを指します。
では、実際にユニバーサルデザインとはどのようなモノなのか、基本的な考え方や仕様についてご紹介します！
Contents
ユニバーサルデザイン例：文字組み
ユニバーサルデザインの基本中の基本として、内容やターゲットに合わせて文字組みを工夫する必要があります。例えば、シニア世代がターゲットの場合は、次の点に配慮する必要があります。
①適切な行間と文字間にする
文字が詰まってしまうと、途中でどこを読んでいるのか分からなくなってしまうと思いませんか。
文字と文字の間が詰まっていると、「可読性」（文章の読みやすさ）が悪くなってしまうのです。当然ながらユーザーにストレスが掛かってしまいます。
そこで、ユニバーサルデザインを意識し、適切な行間を保つようにしましょう。可読性がよくなり、ユーザーがストレスなくスムーズに情報を正しく読み取ることができます。
②ユニバーサルデザイン例：文字の太さ
近視や遠視の方の場合は、文字が太すぎると潰れて見えてしまう可能性があります。また、白内障や弱視の方の場合は、文字が細すぎるとかすれてしまい、こちらも認識することが難しいでしょう。
そのため、できる限り多数の方が認識しやすい、適切な文字の太さを考慮してデザインする必要がありますね。
③ユニバーサルデザイン例：フォント
「UDフォント」という言葉をご存知でしょうか。
「UDフォント」とは、名前の通りユニバーサルデザイン（UD）に対応したフォントのこと。厳密な定義がある訳ではありませんが、
・読みやすい
・読み間違えにくい
・形が分かりやすい
といった点を考慮して文字間の空間や濁点のサイズなどが考えられたうえで、デザイン性とともにバランスよく構成されたフォントを一般的に指します。
UCフォントの多くは「TBUB丸ゴシックStb」や「UD新丸ゴ」など有料のものが多いですが、「BIZZ UD ゴシック」「BIZZ UDP明朝」「BIZZ UD明朝」など無料で使用できるものもあります。
ちなみに「手軽に考慮したフォントを使いたい！」という方は、パソコンにデフォルトで入っている「メイリオ」や「Segoe UI」も癖がなく可読性が高いためオススメです。
ユニバーサルデザイン例：アクション時のデザイン
色弱者の場合、色同士の判別が難しい場合があります。
以下のようなナビゲーションの場合、色のコントラストが弱く、フォバー（Hover）時の判別が難いかもしれません。
この場合の対策として、例えば下線を引くなどのプラスαのアクションを足すことで、より分かりやすいデザインにすることができます。
【便利なシミュレーションツール】
実際に色弱者を考慮して色を選ぶ時に、役立つツールがあります。
①Photoshop
デザイナーであれば誰しもが使用する、photoshopで色のシミュレーションをすることができます。
■校正設定 > 「P型（1型）色覚」または「D型（2型）色覚」
②Spectrum（Chrome拡張）
Chrome拡張機能を使用すれば、ワンクリックでブラウザのサイトで再現することが可能です。
WEBデザイナーの方は導入してみてはいかがでしょうか。
ユニバーサルデザイン例：ピクトグラム
外国人や難しい文字の読めない子どもにとって、非常に役立つのがピクトグラムです。
ピクトグラムとは、一般的に絵文字やアイコンと呼ばれる、なんらかの情報やサインを示すための視覚記号のひとつ。
文字や言語を使用しないため、様々な人に情報を伝えることができます。
ユニバーサルデザインで誰もが快適に！
ここであげたユニバーサルデザインは、ほんの一例に過ぎません！ WEBデザインの範囲内でも、多くの方に優しくユーザビリティを高くする工夫はできるはずです。
誰もが平等に適切な情報を得られるように、ユニバーサルデザインを意識してデザインしてみてはいかがでしょうか。