情報デザインとユニバーサルデザイン｜抽象化・可視化・構造化と使いやすい画面設計
情報デザインは、伝えたい情報を、受け手に分かりやすく、使いやすい形に整えることです。ポスターや案内図だけでなく、アプリの画面やWebサイトの設計も含まれます。共通テストでは、画面の操作のしやすさを具体的な条件から考える問題が、2年続けて第1問で出題されています。
情報デザインの3つの手法
| 手法 | 内容 | 例 |
|---|---|---|
| 抽象化 | 情報の本質的な部分だけを取り出し、余分なものを省く | ピクトグラム（非常口のマーク）、路線図 |
| 可視化 | 数値や関係を、図やグラフにして見えるようにする | 棒グラフ、天気図、混雑状況のヒートマップ |
| 構造化 | 情報を整理し、順序や階層、関係を分かりやすくする | 目次、表、フローチャート、Webサイトのメニュー |
路線図は抽象化のよい例です。実際の線路の曲がり方や駅の間の距離は省き、「どの駅がどの順番につながっているか」という本質だけを表しています。
ユニバーサルデザインとアクセシビリティ
| 用語 | 意味 |
|---|---|
| ユニバーサルデザイン | 年齢・国籍・障害の有無などにかかわらず、はじめからできるだけ多くの人が使いやすいように設計すること |
| バリアフリー | すでにある障壁（バリア）を、あとから取り除くこと |
| アクセシビリティ | 誰もが情報やサービスにアクセスできるか（利用できるか）の度合い |
| ユーザビリティ | 特定の利用者が、目的を効率よく、満足して達成できるか（使いやすさ） |
ユニバーサルデザインの例には、段差のない入口、絵で示す案内表示（ピクトグラム）、左右どちらの手でも使えるはさみ、シャンプーの容器のきざみ（目を閉じてもリンスと区別できる）などがあります。
Webのアクセシビリティ
- 画像に代替テキストを付ける（画面読み上げソフトが内容を読み上げられる）
- 文字の大きさを変えられるようにする
- 色だけに頼らず、文字や形でも区別できるようにする
- 動画には字幕を付ける
カラーユニバーサルデザイン
色の見え方は人によって違います。例えば、赤と緑の区別がつきにくい人がいます。
- 「赤は危険、緑は安全」のように色だけで情報を伝えない。文字やマーク、模様を併用する
- 背景と文字の明るさの差（コントラスト）を大きくする
- グラフでは、線の種類（実線・点線）や、凡例を近くに置く工夫をする
使いやすいインタフェース
利用者が機器やソフトウェアとやり取りする部分をユーザインタフェース（UI）、使ったときに得られる体験全体を**ユーザエクスペリエンス（UX）**といいます。
シグニファイア
「ここを押せばよい」「ここを引けばよい」と、使い方を示す手がかりをシグニファイアといいます。
- 押しボタンのように見える立体的な表示
- 下線の付いた青い文字（リンクだと分かる）
- ドアの取っ手が、平らな板なら「押す」、棒状なら「引く」と分かる
フィッツの法則
**フィッツの法則**は、マウスや指で対象物を指す時間についての法則です。
- 対象物が大きいほど、指す時間は短い
- 対象物までの距離が短いほど、指す時間は短い
- マウスカーソルは画面の端で止まるので、画面の端や角の対象物は大きさが無限大とみなせる
よく使うボタンは大きく近くに、誤って押すと困るボタンは小さく遠くに置く、という設計の根拠になります。
入力の手間を減らす
入力欄の初期値（はじめから入っている値）を工夫すると、利用者の操作が減ります。2026年の本試験 第1問 問3 では、スマートフォンで生年をスクロールして入力するとき、スクロール距離の平均を最も小さくする初期値は中央値であることが問われました。また、一周すると元に戻る月のリストでは、どの月を初期値にしても平均が変わらないことも問われました。
レイアウトの4原則
ポスターやスライドを見やすくするための基本です。
| 原則 | 内容 |
|---|---|
| 近接 | 関係のある情報を近くにまとめる |
| 整列 | 文字や図の端をそろえる |
| 反復 | 見出しの色や形など、同じスタイルを繰り返して統一感を出す |
| 対比 | 重要な部分を大きさや色で目立たせ、差をはっきりさせる |
共通テストでの出題
- 2025年の本試験 第1問 問4：フィッツの法則から、最も短い時間で指せる対象物（画面右上の角）や、右クリックメニューで一番遠くに置かれた項目の意味（利用頻度が低い）を考える問題。
- 2026年の本試験 第1問 問3：生年・誕生月をスクロールで入力するときの、スクロール距離と初期値の関係。
- ユニバーサルデザインの判断：示された工夫がユニバーサルデザインにあたるかを選ぶ問題。
どちらの本試験の問題も、法則や条件は問題文に書かれていました。教科書に詳しく載っていない内容でも、条件を読み取って当てはめる力があれば解けます。
よくある間違い
- 「ユニバーサルデザイン＝バリアフリー」：バリアフリーは後から障壁を取り除くこと、ユニバーサルデザインは最初から多くの人に使いやすく設計することです。
- 「色を変えれば分かりやすくなる」：色だけで区別すると、色の見え方が違う人には伝わりません。
- 「大きいボタンはいつでも押しやすい」：画面の中の大きなボタンより、画面の角にある小さなボタンの方が速く指せることがあります。
まとめ
- 情報デザインの手法は抽象化・可視化・構造化
- ユニバーサルデザインは、はじめから多くの人が使いやすいように設計すること
- 色だけに頼らない、代替テキストを付けるなど、アクセシビリティに配慮する
- フィッツの法則：大きく、近い対象ほど速く指せる。画面の端と角は大きさ無限大