「ユニバーサルデザイン（Universal Design / UD）」とは
文化・言語・国籍や年齢・性別などの違い、障害の有無や能力差などを問わずに利用できることを目指した建築・設備・製品・情報などの設計（デザイン）のことを言います。
身近なもので言うとピクトグラム、例えばトイレの男女のマークなどが挙げられます。
Webデザインとユニバーサルデザイン
今や老若男女たくさんの方が閲覧しているWebサイト。 日本では、小学校でもデジタルデバイスの授業が導入されたり、高齢化社会においてシニア世代の方のインターネット利用も増えていることから、老眼や近視の方が見ている場合も増えていると考えられます。また、色覚異常などの障がいをお持ちの方の場合もあります。
日本の人口の推移 厚生労働省
https://www.mhlw.go.jp/seisakunitsuite/bunya/hokabunya/shakaihoshou/dl/07.pdf
さらにその閲覧している端末が、パソコンかスマートフォンか、の違いはもちろんのこと、例えば、パソコンの画面のサイズ、ブラウザ環境など、端末の設定でも見え方は異なってきます。
見る人が変われば見え方が異なるのが当たり前となった現代で、あらゆるユーザーが不便を感じることなくサイトを見える使えるデザイン設計が必要不可欠といえます。それを叶える一つが、ユニバーサルデザイン設計なのです。
ユニバーサルデザイン「7つの原則」
ユニバーサルデザインには、その考え方を実現するための「7つの原則」が定められています。
原則１：誰にでも公平に利用できること
原則２：使う上で自由度が高いこと
原則３：使い方が簡単ですぐわかること
原則４：必要な情報がすぐに理解できること
原則５：うっかりミスや危険につながらないデザインであること
原則６：無理な姿勢をとることなく、少ない力でも楽に使用できること
原則７：アクセスしやすいスペースと大きさを確保すること
注：すべてのガイドラインが、どのようなデザインにも当てはまるとは限らない
Copyright 1997 N.C. State University, The Center for Universal Design
Webデザインにおけるユニバーサルデザイン
7つの原則に基づいて考えていくと、Webサイトを制作する上であらゆることに配慮が必要になりますが、Webデザインにおいて留意できる点としては大きく以下の2点が挙げられます。
- フォント - 形やサイズは、読みやすくわかりやすく
- 色 - 組み合わせや見え方を、見やすくわかりやすく
それぞれを詳しくみていきましょう。
フォントについて
フォントの種類やそのサイズも、Webサイトの見やすさ・情報の伝わりやすさに大きく影響を与えます。読みやすさに加えて、わかりやすく読み間違いがないように、可読性や視認性、判読性が高くなるようにデザインされのが「UDフォント」です。
UDフォントにはこういった特徴があります。
- 字面を大きく・線画をシンプルに
- 文字の形がわかりやすく、読み間違えにくい
シンプルさや、アキの確保、似ている形をいかに差別化させるかがポイントとなっています。
フォントだけではなく、デザインにも通じるところがありそうですね。
UDフォントの取り扱いはさまざまなメーカーから出ていますが、
無料でWebフォントとして使用できるのは、モリサワからでている「BIZ UDフォント」になります。
https://www.morisawa.co.jp/about/news/6706
https://fonts.google.com/specimen/BIZ+UDGothic
（Google Fontsからダウンロードできます）
UDフォントを使わない場合明朝体よりゴシック体
UDフォントを使用しない場合でも、明朝体よりゴシック体を選びましょう。
視力が悪い人にとっては明朝体は線が細すぎて見えにくいですし、視覚過敏の人にとっては明朝体の細い部分を認識しづらかったり、縦横の線の太さの違いやはらい、ハネなどが刺激となるようです。
一行あたりの文字数
フォントやその大きさだけではなく、文章を認識するエリアにも課題があります。日本語本文の場合は、1行あたり10字以上、35〜40字くらいまでの文字数が視線の移動が大きくならずに読みやすくなります。
WCAG では文字サイズの1.5倍以上の行送りを確保するように言われています。
※WCAG：W3C（World Wide Web Consortium）においてアクセシビリティ関連の活動を行うWAI（Web Accessibility Initiative）によって策定されます。
色について
前述したように多様な色覚を持つ人がいることに配慮し、情報が正しく伝わるように色の設計をする「カラーユニバーサルデザイン」という言葉があります。 どのようにして、配慮していけば良いか詳しくみていきましょう。
色弱障がいの色の見え方
日本人男性の約20人に1人、女性の約500〜600人に1人が色弱者といわれています。
色弱には、赤・緑・青のどの錐体に問題があるかによって3つのタイプがあります。
赤の錐体に問題がある場合を1型（P型）色覚、緑の錐体に問題がある場合を2型（D型）色覚、青に問題がある場合を3型（T型）色覚といいます。
このように色覚に障がいのある場合に、色の差を見分けられなかったり、配色の意図を正しく認識できない場合があります。
1型（P型）の人は濃い赤と黒の見分けがつきづらく、2型（D型）の人は赤と緑の見分けがつきづらいのが特徴です。
このような色覚障がいの場合の見え方をシュミレーションできるツールがあります。Webデザインでも頻繁に使われているデザインツールのAdobe IllustratorやPhotoshopでも、以下のようにシュミレーションすることができますので、見え方を確認しながらカラー設計をするようにしましょう。
高齢者の色の見え方
高齢者にとっては次のような配色が見分けづらくなります。
- 水晶体が黄色っぽく濁るため、白と黄色の組み合わせが見分けにい
- 青系の光の透過率が下がるため、紺色と黒の見分けがつきにくい
- 目に入る光の量が減少するため、コントラストの低い配色が見分けにい
高齢者の見分けづらい配色は、一般色覚者やロービジョン（何らかの原因により視覚に障害を受け「見えにくい」「まぶしい」「見える範囲が 狭くて歩きにくい」など日常生活での不自由さをきたしている状態**）の人にも見分けづらい**配色です。ですので、ここを改善することで、利用者全体への伝わりやすさも向上させることができます。
コントラストを確保する事で配色の改善ができる
カラーユニバーサルデザインにおけるコントラスト比とは、情報を伝えている要素とその背景との相対的な明るさの比率を指します。
背景と要素が同じ色のときは1：1、白と黒の組み合わせがコントラスト最大で21：1になります。
Webサイトを見る人の環境や視力は様々で、例えば外でスマホを見るとき画面が暗いと感じる時があります。見る人や環境はさまざまなので然るべきコントラスト比がなければ、情報を正確に伝えることのできない事もあるでしょう。
そこで、WCAG（Web Content Accessibility Guidelines）では、少なくとも 4.5：1 以上のコントラスト比を確保するようにという基準値が定められています。
例えばこの4色、一見良さそうに見えますが、コントラスト比を測ってみると意外と 4.5：1 の基準値を満たせていないことが分かります。コントラスト比は重要な要素になりますが、目視だけでは判断しきれないものですので、こちらもツールを用いて確認しながら、制作すると良いでしょう。
▼Adobe Color
https://color.adobe.com/ja/create/color-contrast-analyzer
Webサイトをデザインしていく上で、カラー設計を行う場合は、あらかじめコントラストを確保できる組み合わせをパレットにしておくと、効率よくデザインへ展開することができます。
パレットの考え方
①まずブランドカラーなどのメインの色のコントラストを確保
②次に文字の白黒を反転させてコントラストが確保できる背景色を決定
こうしておけば、あとは明るい色・暗い色のバリエーションを増やしても、いずれもコントラストが確保されたパレットを作ることができます。
より効率良くWeb制作にユニバーサルデザインを取り入れるために
今回ご紹介したようなフォントや色はユニバーサルデザインほんの一部に過ぎず、他にも配慮できる点はたくさんあります。
スピードを求められる場面が多いWebデザイン制作において、カラーチェックやコントラストチェックはある程度設計が完了するまで繰り返し行われる工程ですので、膨大な時間がかかってしまう事でしょう。
近年では、デザインを行うツール上で簡単にユニバーサルデザインへの配慮をサポートする機能やプラグインが展開されています。弊社でも案件に合わせ導入している、その一部をご紹介いたします。
Stark
Starkは、Webデザインの現場で一般的なデザインツールのFigma、Sketch、Adobe XD や、Google Chrome、Microsoft Edge、Opera、Braveなどの一般的なブラウザーに直接プラグインすることで、デザインにユニバーサルデザインやアクセシビリティを簡単に組み込むことができるようになっています。
Starkのチームの大半が身体に障害を持っており、彼らはより良いサービスを構築しています。
Starkを活用することで以下の確認を簡単に素早く行うことが可能となり、デザインプロセスの一部としてユニバーサルデザインを取り入れることができます。
- 色のコントラスト・チェッカー
- ビジョン・シミュレーター
- ビジョン・ジェネレーター
- ランドマークとフォーカス順序
- 代替テキスト注釈
- タイポグラフィ分析
- タッチ・ターゲット
ユニバーサルデザインまとめ
ユニバーサルデザインを意識する事により、様々なバックグラウンドを持つ人々が同様に利用できるだけでなく、一般ユーザーへのユーザビリティの向上も狙うことができます。
デザイン現場ではよく耳にする「ユニバーサルデザイン」。どう取り入れていけば良いか、またツールは何が適切なのかなどを考えると壁は高く感じ、腰が重くなりがちです。 ですが、どんな人にも優しいデザインを目指していくことは世の中を少しずつ良くすることができることだと考え、日々のデザイン業務に取り入れていきたいものです。 今回ご紹介したツールなどを活かしてぜひ「ユニバーサルデザイン」、取り入れていただけたら嬉しいです。