ユニバーサルデザインの7原則をデザイン制作で使う方法

作ったバナーやWebページを、目のいい20代だけが見るとは限りません。老眼が始まった人、色の見え方が違う人、電車で片手スマホの人。全員が同じ画面を見ます。

そこで基準になるのがユニバーサルデザインです。このレッスンは、言葉の意味を覚える回ではなく、デザインを作る側が制作の判断に使う回として書きます。7原則をそのまま暗記しても現場では動けないので、文字サイズ・配色・タップ領域といった具体的な数字まで落としますね。
身の回りの実例も後半に出しますが、目的は「作るときに真似できる形で持ち帰ること」です。

ユニバーサルデザインが目指していること

ユニバーサルデザインは、年齢や能力、状況の違いにかかわらず、できるだけ多くの人がそのまま使えるように設計する考え方です。アメリカの建築家ロナルド・メイスが1980年代に提唱し、1997年にノースカロライナ州立大学のチームが7つの原則としてまとめました。

よく混同されるバリアフリーとの違いは、後から取り除くか、最初から作らないかです。段差ができてしまった後にスロープを付けるのがバリアフリー、そもそも段差のない入口にしておくのがユニバーサルデザイン。
デザインの仕事だと、公開後に「文字が小さくて読めない」と言われて修正するのがバリアフリー的な対応、最初から16pxで組んでおくのがユニバーサルデザイン的な設計です。

特別な人のための配慮という理解は、実務では損をします。条件が悪い状況は誰にでも起きるからです。屋外の明るい画面、片手がふさがっている、急いでいる、音が出せない。ここを設計に入れると、結果として全員にとって使いやすくなります。

7原則を制作の判断に翻訳する

7原則は建築や道具のために作られた言葉なので、そのままでは画面に当てはめにくいです。制作の言葉に置き換えます。

7つ全部を毎回チェックしていると、制作が進みません。Web制作で効きやすいのは1・4・7の3つなので、まずここだけ確実にやってください。

数字で決められる3つのチェック

文字と背景の明度差

読みやすさは感覚ではなく数値で判定できます。Webの国際的な指針では、本文サイズの文字は背景との比が4.5:1以上、大きめの文字（およそ24px以上、太字なら19px以上）は3:1以上が目安です。

危ないのは、薄いグレーの文字と白背景、それから写真の上に置いた白文字です。無料のコントラスト判定ツールにHEXを2つ入れれば数秒で分かります。
自分の目で確認したいときは、画面をグレースケール表示にするのが早いです。色を消して読めなければ、明度差が足りていません💡

色だけに意味を持たせない

日本人男性のおよそ20人に1人は、色の見え方が多数派と違います。赤と緑、オレンジと黄緑の区別がつきにくい型が代表的です。

だから「必須項目は赤文字」「グラフの緑が良い、赤が悪い」という作りは伝わりません。
直し方は簡単で、色に加えてもう1つ手がかりを足すだけです。必須なら「必須」の文字を添える。グラフなら線の形を実線と点線で変える、または数値を直接書く。リンクなら色に下線を足す。色を減らす必要はありません。重ねるだけです。

文字サイズとタップ領域

スマホの本文は16px以上を基準にします。14pxは、若い人が明るい室内で見る条件でしか通用しません。行間は文字サイズの1.5〜1.8倍、1行の文字数は全角35字くらいまで。

指で押す場所は44px四方以上を確保します。ボタンの見た目が小さくても、押せる範囲を広げれば大丈夫です。隣り合うボタンの間隔は8px以上あけてください。
紙の場合も同じ考え方で、本文は最低でも9pt前後、高齢者が読む案内物なら12pt以上が目安です。

身の回りの実例から学ぶ

完成品を見ると、原則がどう形になるか分かります。よく挙がるのは次のようなものです。

• シャンプー容器の側面のギザギザ：目を閉じていてもリンスと区別できる。色に頼らない設計の代表例
• 牛乳パック上部の切り欠き：他の紙パック飲料と手触りで見分けられる
• ピクトグラム：文字が読めなくても、言語が違っても伝わる
• センサー式の蛇口や自動ドア：ひねる力や引く力が要らない
• 多機能トイレ：車いす、ベビーカー、けが人まで同じ入口で使える

どれも「特定の誰かのために作ったら、結局みんなが便利になった」という形をしています。荷物で手がふさがっているときの自動ドアや、暗い浴室でのギザギザは、条件が悪いときの自分にも効いています。画面のデザインも同じで、誰か1人のための工夫が、結果として全員の使いやすさにつながります。

ミニ実践：実例を3つ探して構造を書き出す

15分ほど。道具はスマホのカメラだけです。集めて終わりにせず、作る側の言葉に変換するところまでやります。

1. 家か通勤路で、ユニバーサルデザインだと思うものを3つ探して写真を撮る。上の例と同じものは選ばない
2. 1つずつ、「誰のどんな困りごとを消しているか」を1行で書く
3. 7原則のどれに当たるかを1つだけ選ぶ。複数当てはまっても、いちばん強いものに絞る
4. その仕組みを画面のデザインに置き換えると何になるかを1行で書く（例：ギザギザ＝色以外の手がかり＝必須マークに文字を添える）
5. 最後に、自分が前に作ったバナーかページを1つ開いて、書き出した3つの観点で見直す

4番目の変換がこの練習の中心です。ここを飛ばすと、実例の知識は増えても自分の作品は変わりません◎

よくある質問

ユニバーサルデザインとバリアフリーは何が違いますか？

バリアフリーは、すでにある障壁を後から取り除く考え方です。ユニバーサルデザインは、最初から障壁のない形で設計します。段差にスロープを付けるのが前者、段差のない入口にしておくのが後者。Web制作なら、公開後に文字を大きく直すのが前者、最初から16pxで組むのが後者です。

7原則は誰が決めたものですか？

アメリカの建築家ロナルド・メイスが提唱した考え方をもとに、1997年、ノースカロライナ州立大学の研究チームが7つにまとめました。公平性、自由度、単純性、分かりやすさ、安全性、省体力、十分な大きさと空間の7つです。もともと建築や道具のための指針なので、画面のデザインに使うときは制作の言葉に置き換えて考えます。

Webアクセシビリティとは別のものですか？

目指す方向は同じで、範囲が違います。ユニバーサルデザインは分野を問わない設計思想、Webアクセシビリティはそれを画面向けに具体化した基準です。コントラスト比4.5:1、代替テキスト、キーボード操作といった数値や項目が決まっているぶん、制作では後者のほうが判断に使いやすいです。

まず何から始めればいいですか？

3つだけ先にやってください。文字と背景のコントラスト比を判定ツールで確認する、色だけで意味を伝えている場所に文字か形を足す、スマホの本文を16px以上にする。この3つで、読めない・押せないという問題の大半は消えます。残りの原則は、作るものが増えてから足していけば間に合います。

次に学ぶこと

ユニバーサルデザインは、最初から多くの人が使える形で設計する考え方です。制作で効くのは、コントラスト比4.5:1、色以外の手がかり、本文16pxとタップ領域44px。この3つを毎回確認するだけで、届く人がはっきり増えます。

読みやすさをもう一段深めるなら視認性・可読性・判読性へ。今回の数字が、3つの指標のどこに効いているか整理できます。

次の章は画像形式の選び方から始まります。作ったデザインを実際のデータとして書き出す話です。全体の並びはデザイン基礎コースの目次から確認してくださいね。