Webのユニバーサルデザイン
SDGｓの推進が始まり、改めてユニバーサルデザインへの関心が高まっています。ユニバーサルデザインといえば、建築物や道具のような実態のある物が真っ先に思い浮かびます。
しかし、Webにおけるユニバーサルデザインとはいったい何なのでしょうか。今回は、アクセシビリティとの違いにも触れつつわかりやすく解説します。
ユニバーサルデザインとは
ユニバーサルデザインとは、文化・言語・国籍や年齢・性別・能力などの違いにかかわらず、できるだけ多くの人々が利用できることを目指した設計・デザイン、またその考え方のことを指します。
—
ユニバーサルデザインの例
・自動ドア
・スロープ
・ピクトグラム
等
—
ユニバーサルデザインは1985年にアメリカの建築家であるロナルド・メイスによって提唱されました。提唱者であるロナルド自身もハンディキャップがあり、幼少より車いすでの生活を送っていました。その経験から生まれたのがユニバーサルデザインです。
ユニバーサルデザインは日本でも1990年代に知られるようになり、スロープや自動ドア、多機能トイレ、ピクトグラム等が普及しました。特にピクトグラムは1964年の東京オリンピックをきっかけに生まれた日本発のユニバーサルデザインとされています。
2015年、「誰一人取り残さない」を理念とした開発目標が国連でSDGｓが採択されたことや2018年「ユニバーサル社会実現推進法」が日本の国会で成立したことから、バリアフリー・ユニバーサルデザインが近年改めて注目されています。
ユニバーサルデザインは類義語であるバリアフリーと混同されがちですが、「バリアフリー」は”元からあるものの障壁を取り払う”のに対し、「ユニバーサルデザイン」は”最初から様々な人にやさしいデザインを考える”という点で異なります。
また、IT業界ではアクセシビリティという言葉がよく使われます。スマートフォンやPCの設定項目で見かけることもあるのではないでしょうか。「アクセシビリティ」とは”使いやすさの度合い”をいいます。つまり、”ユニバーサルデザインに留意して制作されたものはアクセシビリティが高くなる”といえます。
スマートフォンのアクセシビリティ設定の場合は読み上げ機能、画面拡大機能、音声文字変換等を設定できます。これらの機能はユニバーサルデザインといえるでしょう。
ユニバーサルデザイン7つの原則
ユニバーサルデザインの推進のため、提唱者であるロナルド・メイスをはじめとする建築家や工業デザイナー、技術者、環境デザイン研究者等によって7つの原則がまとめられています。
- 公平性：誰でも公平に利用できること
例：自動ドア、スロープ
段差や手間が少なく、誰もが快適に利用できます。 - 自由度：人によって使いやすい方を選べること
例：多機能トイレ
性別・利き手など条件によって使い分けられます。 - 単純性：使い方が簡単であること
例：電気のスイッチ、レバー式の蛇口
知識や経験の有無に関係なく利用できます。 - 明確性：必要な情報が簡単に理解できること
例：ピクトグラム
能力や言語に関わらず直感的に理解できます。 - 安全性：ミスや危険につながらないこと
例：チャイルドロック、倒れたら消える電気ストーブ
意図しない行動による被害を防止します。 - 体への負担の少なさ：無理な姿勢や強い力が必要ないこと
例：高さの低い洗面台
力の弱い高齢者や子供でも容易に利用できます。 - スペースの確保：使いやすい十分な大きさ・広さであること
例：優先駐車スペース
能力に関わらず誰でも簡単に、自由にアクセスできます。
この7つの原則に則ることで、多くの人にとって使いやすいサービスを提供できます。
Webにおけるユニバーサルデザイン
上記のようにユニバーサルデザインといえば、建築や製品デザインのような形のあるものが多く見受けられます。では、Webにおけるユニバーサルデザインとはいったいどのようなものがあるでしょうか。デザイン(色・フォント)だけでなく設計・機能の面からも考えていきます。
色のユニバーサルデザイン
色へのユニバーサルデザインのアプローチ方法は、次のとおりです。
- 多くの人にとって見分けがつきやすい配色
高齢者の場合は、次のような配色が見分けづらくなります。- 白と黄色の組み合わせが見分けづらい
- 紺色と黒が見分けづらい
- コントラストの低い配色が見分けづらい
高齢者の見分けづらい配色は、一般色覚者や色弱の人にも見分けづらい配色です。ここを改善することで、利用者全体への伝わりやすさも向上させることができます。また、Photoshopを使用して、色覚障がい者の見え方をシミュレーションするのも良いでしょう。
- 色だけではなく模様にも変化をつける
色だけでなく形・大きさ・太さ・模様などに変化をつけることで、色覚障がい者や高齢者など、色の見分けがつきづらい人にも伝わりやすくなります。 - 色の情報を示す
色をつけている箇所に「赤」「青」「黄」のように、「この色が何色か」のテキスト情報を付与します。また、色だけでなく枠や下線をつけることで目立たせるのも良いでしょう。 - 画像の代替テキスト(alt属性)を記述する
代替テキスト（alt属性）とは、Webサイトに含まれる画像の代わりになるテキストのことです。画像が表示されない場合や、音声読み上げ機能を使用する際に利用されます。最近では、Twitterに実装され話題になりました。また、代替テキストの設定はSEOにも効果的です。
テキストのユニバーサルデザイン
テキストの読みやすさは3つの要素で構成されています。
- 視認性：文字の形の分かりやすさ
- 判読性：他の文字との誤読のしにくさ、見分けやすさ
- 可読性：文章の読みやすさ
これらに留意してフォントを選ぶことで、誰にとっても読みやすい文章になります。
- 読みやすいフォントの利用
上記の3要素の向上のためにユニバーサルデザインに対応したUDフォント(Universal Design Font)が各フォントメーカーより開発されています。線の太さを均一に、トメハネの装飾を少なく、文字の隙間を広く、似た文字の形を見分けやすくするといった工夫がされており、低視力者やディスレクシア(読字障がい)の方でも読みやすいです。
Windows 10ではモリサワのフォント「UDデジタル教科書体」「BIZ UD」が標準搭載されています。BIZ UDは、その名の通り教育やビジネス文書のために制作されたUDフォントですので、Webサイト以外でも利用してみてはいかがでしょうか。
- 文字の大きさ・行間の調整
テキストの大きさは、本文の場合14~16pxが適正とされています。実際に、本ブログも16pxで記述しています。そして、行間は日本語の場合は文字サイズの半分が適正とされています。適切な文字の大きさ、行間でテキストを記述しましょう。
まとめ
ユニバーサルデザインとは、障がい者や高齢者だけでなく全ての人の使いやすさを考えることです。
分け隔てなくたくさんの人々役に立つデザインは、ユーザー視点の使いやすさが上がりSEOにも効果的です。Webサイトだけでなく、資料作成の時にもこれに則って作成すると見やすくなるでしょう。
関連記事こちらの記事も合わせてどうぞ。
