情報デザインとは？ピクトグラム・ユニバーサルデザインを図解【情報Ⅰ】

地図も教室名も正しい。矢印だって描いた。

それなのに、初めて来た人が反対の教室へ歩いていった——「ちゃんと読んでよ」で終わらせてよいのでしょうか。

先に結論：正しい情報を、相手が使える形にしよう

• 目的から整理する：案内なら「読んでもらう」だけでなく、「目的地へ行ける」ことを目指す。
• 一つの手掛かりに頼らない：色に加え、教室名・番号・形などでも区別できるようにする。
• 使う人に試してもらう：作った本人には分かっても、初めて見る人が迷わないかは別に確かめる。

情報デザインは、目的や受け手に合わせて情報を整理し、伝わる形にすることです。 今回はユウキの体験会案内を例に、伝え方の工夫と、多様な人が利用できるようにする考え方を学びます。

「どこも間違っていない」のに、案内が伝わらない

部活の体験会。ユウキが作った案内は、地図も文字も合っているのに、来場者の半分が反対へ進んでしまいました。先輩からは、赤と緑の矢印が見分けにくいという声も。

Sandy「ちょお待ちぃ！」
ユウキ「……その薄い文字、なんて書いてあるの？」
Sandy「俺のテロップまで伝わってへんやん」

これは架空の物語で、来場者の半分という数字も場面の設定です。伝えたつもりでも、相手が必要な情報を見付けられなければ、案内の目的は達成できません。

情報デザインは、正しさと伝わりやすさを両方考える

案内なら「見やすい・分かりやすい・使いやすい」が重要です。見栄えも関心や信頼に関わりますが、見た目を整えただけで伝わるとは限りません。

正しい内容を載せたかと、利用場面で伝わるかを両方確かめます。

「デザインの敗北」という俗称で、見た目と使いやすさの食い違いが話題になることもあります。ただし、これは厳密な学術用語や試験で使う定義ではありません。学習では、何が見付けにくいのか、何を誤解したのかを具体的に説明しましょう。

Sandy「読まんかった人を責める前に、読める場所にあったか、分かる形やったかを調べるんや」

シグニファイアは、使い方を知らせる手掛かり

扉の「押す」という文字、進む方向を示す矢印、押せそうに見えるボタン。使い方などを知らせる、こうした知覚できる手掛かりを、シグニファイアといいます。

似た言葉のアフォーダンスは、環境や物と利用者との関係によって可能になる行為を指します。

「実際にできること」と「何をすればよいか分かること」は別です。

形だけでなく、ラベルや説明文も手掛かりです。文字があるから悪いデザイン、というわけではありません。初めて使う人の経験や、利用する場面に合っているかが大切です。

抽象化・可視化・構造化：情報を整理する三つの手法

情報を伝わる形にする際には、抽象化・可視化・構造化が役立ちます。

三つの手法は、一つの案内でも組み合わせて使います。

三つは、互いに完全に独立した分類ではありません。路線図は、地理的な細部を省く抽象化、つながりを図にする可視化、路線や乗換駅を整理する構造化を組み合わせています。

また、抽象化は「削るほどよい」ではありません。案内図から肝心の階段や分かれ道まで消したら、かえって迷います。何を残すかは、目的から決めましょう。

非常口のピクトグラムは、なぜ国際的に使われる？

絵で対象や行動などの意味を示す図記号を、ピクトグラムといいます。非常口の人が走る図もその例です。

文字だけの「非常口」では、日本語が読めない人に伝わりません。図記号は特定の言語だけへの依存を減らせます。さらに、同じ意味に共通の図を使うよう標準化すれば、場所が変わるたびに覚え直す負担も減ります。

非常口などの安全標識は国際規格ISO 7010にも定められています。E001は左向き、E002は右向きの非常口図記号です。

ただし、「世界のどこでも、必ず同じ表示が使われる」「絵なら誰でも説明なしで理解できる」という意味ではありません。 採用状況や法令、経験、文化なども関わります。実際の安全標識は規格や設置条件に従う必要があり、学校のイベント案内と同じ感覚で自由に描き替えるものではありません。

色だけで区別しない：形・文字・位置を組み合わせる

赤と緑で二つの行き先を分けると、作った人には簡単でも、見分けにくい人や環境があります。色の見え方の違いだけでなく、照明、印刷、画面などの影響も受けます。

色に意味を持たせるなら、形や文字など、色以外の手掛かりも添えましょう。

色以外の手掛かりも添えます。右側は色を取り除いても区別できる概念例で、色覚シミュレーションではありません。

代表的な識別の手掛かりには、色相、明度、形、大きさ、位置があります。この五つだけがすべてではなく、向きや模様なども使えます。

文字と背景のコントラストや文字サイズも重要です。色を鮮やかにするだけで、必要な明暗差や意味の区別が得られるとは限りません。

ただし、手掛かりは増やせば増やすほどよいわけでもありません。丸や四角を足すなら、何を表すかを一貫させ、教室名との対応が分かるようにします。

グレースケール確認は、点検の一つ

色を取り除いた表示でも情報が分かるかを確かめると、色への依存に気付けます。ただし、グレースケールは特定の色覚の見え方を正確に再現するものではありません。それだけで「すべての人に使える」と判定せず、実際の利用者や条件でも確認しましょう。

ユニバーサルデザインとバリアフリーの違い

ユニバーサルデザインは、年齢や能力などの違いを考慮し、できるだけ多くの人が利用できるように設計する考え方です。 後から追加する対応だけに頼らず、設計段階から多様な利用を考えます。

バリアフリーは、移動・情報・制度・意識などの障壁を取り除く考え方です。「バリアフリーは必ず完成後、ユニバーサルデザインは必ず新設時」と、工事の時期だけで分けるのは不十分です。新しい施設でも障壁を作らない配慮は必要ですし、既存のものをユニバーサルデザインの考え方で改善することもできます。

両者は、より多くの人が参加できる環境を目指す点で重なっています。実際の改善が、両方の考え方に当てはまることもあります。

ユニバーサルデザインの7原則

ノースカロライナ州立大学でまとめられた7原則は、設計や見直しの観点として使えます。以下は日本語での要約です。

公平さは、必ず全員に同じ使い方を強制することではありません。同じ方法が難しければ、同等の方法を考えることも含みます。

Sandy「チェックを七つ付けたら完成、やないで。誰がどこで困るかを考える物差しや」

アクセシビリティとユーザビリティは、両方を考える

アクセシビリティは、多様な特性や利用条件の人が、情報や機能を知覚・理解・操作できるかに関わります。特にWebでは、障害のある人が同等に利用できることが重要な焦点です。

ユーザビリティは、ある利用者が、ある状況で目的を達成するときの有効さ、効率、満足などに関わります。

アクセシビリティとユーザビリティは関連するため、設計段階から両方を考えます。

操作できることも、迷わず目的を達成できることも大切です。実際の問題は両方の観点に関係することがあります。

両者には重なりがあり、別々の順番で片付けるより、設計段階から一緒に考える方が効果的です。「使える人の人数」だけでアクセシビリティを測るわけでもありません。

デザインプロセス：自分の点検と、使う人のテストを組み合わせる

案内を改善するなら、調査→分析→設計→試作→評価→改善という流れを、繰り返す一つの型として使えます。

自己点検と利用者の行動観察を組み合わせ、必要な段階へ戻って改善します。

ユウキの案内なら、次のように進めます。

1. 調べる：初めて来た人が、どこで迷い、何を見て判断したかを確かめる。
2. 直す：教室名を矢印の近くに書き、行き先を色以外でも区別できるようにする。掲示場所も見直す。
3. 試す：紙で試作し、初めて見る人に目的地を探してもらう。
4. 見直す：迷った場所や読めなかった部分を記録し、次の案へ反映する。

たとえば「赤い矢印へ進んでください」より、矢印のそばに「体験会・201教室」と書く方が、色の意味を知らない人にも行き先を伝えられます。

そのとき「この矢印なら右だよね？」と答えを教えないことが大切です。「体験会の教室に行ってください」と頼み、どこを見て、どこで止まったかを観察しましょう。

作った本人の評価が禁止されるわけではありません。誤字、日時、コントラストなどの自己点検は有効です。ただし作り手は答えを知っているため、自己点検だけでは見落とす問題があります。利用者テストや、基準に基づく点検を組み合わせます。

まず数人に試してもらうのは、問題を探す出発点になります。しかし「3人が迷わなかったから全員大丈夫」とは言えません。利用者の特性、見る距離、照明、混雑などの条件も変えて確認しましょう。

練習：伝わる案内へ直してみよう

以下はこの記事のオリジナル学習例です。実際の共通テスト問題ではありません。

問1：路線図が色だけで区別されています。どんな改善が考えられる？

色に加えて、路線番号、路線名、線種などを使います。凡例を大きくすることも役立ちますが、路線上の区別自体もできるようにする必要があります。

問2：「丸いマークは体験会」と説明していますが、初めて来た人が意味を知りません。何を足す？

丸印の近くに「体験会・201教室」などの文字を添え、案内全体で同じ対応を使います。形を変えるだけでは、その形の意味までは伝わらないためです。

問3：案内を3人に見せたら、全員が正しい方向を指しました。評価は終了？

その条件で三人に伝わったことは確認できますが、すべての利用者や条件への保証にはなりません。見え方、移動方法、掲示場所などを考慮し、必要な点検と改善を続けます。

まとめ：「読んでよ」から「どう伝わった？」へ

ユウキは教室名を見付けやすくし、矢印に形と文字の手掛かりを足しました。掲示前には、初めて見る人に行き先を探してもらいます。

ユウキ「正しい内容かは見直してたけど、どう読まれるかは試してなかった」
Sandy「そこに気付いたら、直せる場所が増えるやん」

• 情報デザインは、内容の正しさと、見付ける・理解する・使う場面を両方考える。
• 抽象化・可視化・構造化を、目的に応じて組み合わせる。
• 色だけに意味を背負わせず、形や文字なども使う。
• 多様な利用を設計段階から考え、自己点検と利用者テストを繰り返す。

学校の案内やスライド、Webサイトにも使える考え方です。実際の利用者を意識してWeb・アプリを制作してみたい人は、プログラミングスクールSandboxもご覧ください。

参考資料

• W3C：色の使用
• W3C：アクセシビリティ・ユーザビリティ・包摂
• W3C：利用者を交えたアクセシビリティ評価
• NC State University：ユニバーサルデザインと7原則
• 国土交通省 関東運輸局：バリアフリーに関する用語
• Don Norman：Signifiers, not affordances
• ISO 7010:2019：安全標識