情報ラボ ＞ 情報デザイン
同じ内容でも、色・文字・配置・表し方しだいで、伝わり方は大きく変わります。だれにでも伝わる工夫を、切りかえて比べながら確かめましょう。
選んだ画像は、このブラウザの中だけで変換します。どこにも送信・保存されません。
色あいが変わって見えても、明るさの差（コントラスト）が十分にあれば文字は読めます。赤と緑のように明るさが近い組み合わせは、色あいの差がなくなると読めなくなります。
押して色がついている原則が「良い例」になります。1つずつ切りかえて、どこが変わるか見てみましょう。
情報デザインとは、伝えたい情報を、受け手が正しく、すばやく、迷わずに受け取れるように、色や形、文字、配置、表し方を工夫することです。ポスターやWebページ、駅の案内表示、家電の操作ボタン、アプリの画面など、身の回りの多くのものが情報デザインの対象になります。目的は、見た目を美しくすることだけではありません。「だれが」「どんな場面で」「何のために」その情報を使うのかを考え、目的に合った伝え方を選ぶことが中心になります。
同じ内容でも、伝え方によって伝わりやすさは大きく変わります。たとえば、色だけで区別した路線図は、色の感じ方がちがう人には読み取りにくくなります。文字と背景の明るさが近いと、だれにとっても読みにくくなります。このページの4つのタブでは、色の見え方、文字の読みやすさ、配置のしかた、表し方の選び方を、実際に切りかえて比べられます。
ユニバーサルデザインとは、年齢や障害の有無、体格、使う言語などにかかわらず、できるだけ多くの人が使いやすいように、はじめから設計する考え方です。すでにある段差や障壁（バリア）を後から取り除く「バリアフリー」に対して、最初から多様な人が使うことを前提に作る点が特徴です。
1997年に、アメリカのノースカロライナ州立大学ユニバーサルデザインセンター（The Center for Universal Design）の建築家、デザイナー、技術者らのグループが、次の7つの原則をまとめました（日本語は、このページで訳したものです）。
| 原則 | 英語の名前 | 意味 |
|---|---|---|
| 1 だれでも公平に使える | Equitable Use | さまざまな能力をもつ人にとって役に立ち、受け入れられる |
| 2 使い方を選べる | Flexibility in Use | 一人ひとりの好みや能力の幅広さに対応できる |
| 3 簡単で直感的に使える | Simple and Intuitive Use | 使う人の経験や知識、言語の力、そのときの集中の度合いにかかわらず、使い方が分かりやすい |
| 4 必要な情報が伝わる | Perceptible Information | 周りの状況や、使う人の感覚の能力にかかわらず、必要な情報が効果的に伝わる |
| 5 まちがえても危険が少ない | Tolerance for Error | うっかりした操作や意図しない操作による危険や悪い結果を、できるだけ小さくする |
| 6 少ない力で使える | Low Physical Effort | 効率よく、楽に、疲れにくく使える |
| 7 使いやすい大きさと広さ | Size and Space for Approach and Use | 体の大きさや姿勢、動きやすさにかかわらず、近づく・手を伸ばす・操作するのに十分な大きさと空間がある |
情報デザインと特に関係が深いのは、原則3と原則4です。たとえば、音だけでなく光や文字でも知らせる案内は、周りがうるさいときや、耳が聞こえにくい人にも情報が伝わります（原則4）。操作を取り消せる画面は、押しまちがえても困りません（原則5）。
アクセシビリティは、障害のある人や高齢の人をふくめて、だれもが情報やサービスを利用できるかどうか、またその度合いを表すことばです。Webページについては、Webの技術の標準を定める国際的な団体 W3C が WCAG（Web Content Accessibility Guidelines）というガイドラインを公開しています。WCAG 2.0 は国際規格 ISO/IEC 40500:2012 にもなり、日本の JIS X 8341-3 も、2016年の改正でこの国際規格と内容を一致させました。総務省は、国や地方公共団体のWebサイト向けに「みんなの公共サイト運用ガイドライン」を公開しています。
ユーザビリティは「使いやすさ」のことです。国際規格 ISO 9241-11 では、ユーザビリティを「特定の利用者が、特定の利用状況で、特定の目標を達成するために、効果的に、効率よく、満足して使える度合い」と定めています。つまり、目的を正しく果たせるか（有効さ）、むだな手間や時間がかからないか（効率）、使っていていやな思いをしないか（満足）の3つの面から考えます。
W3C は、アクセシビリティとユーザビリティには大きな重なりがあると説明しています。たとえば、文字と背景のコントラストを十分にとることは、視力の弱い人のためだけでなく、明るい日差しの下でスマートフォンを見る人の役にも立ちます。アクセシビリティを高める工夫の多くは、だれにとっての使いやすさも高めるのです。
目の奥の網膜には、色を感じとる錐体（すいたい）という細胞があり、反応しやすい光の波長によって、L錐体（長い波長）、M錐体（中くらいの波長）、S錐体（短い波長）の3種類があります。脳は、この3種類の反応の大きさの比から色を感じています。そのため、どれかの錐体がはたらかなかったり、反応のしかたがちがったりすると、色の感じ方が変わります。
日本眼科学会によると、生まれつきの色覚のちがい（先天色覚異常）は、日本人の男性の約5％、女性の約0.2％にみられます。かかわる錐体の種類によって1型色覚・2型色覚・3型色覚に分けられ、程度によっても分類されます。1型色覚と2型色覚をあわせて先天赤緑色覚異常ともいい、3型色覚は非常にまれです。男性の約5％は20人に1人にあたるので、男子が20人いるクラスなら1人いてもふしぎではない割合です。だれかに見分けにくい色があることは、特別なことではありません。
「色の見え方のちがい」タブは、G. M. Machado（マシャード）らが2009年に発表した論文の変換行列を使っています。この論文は、錐体の反応のしかたのモデルにもとづいて、ある色が、それぞれの色覚でどんな色として感じられるかを近似する3行3列の行列を示しています。このページでは、程度を表すパラメータのうち最も強い1.0（2色覚に相当）の行列を使い、画面の色（sRGB）をいったん光の強さに比例する値（線形RGB）にもどしてから行列を掛け、もとの形式にもどして表示しています。同じ目的の方法には、Brettel（ブレッテル）らが1997年に発表したものなどもあり、方法によって結果は少しずつちがいます。
ここで表示されるのは、あくまで近似です。実際の見え方には程度の差や個人差があり、ディスプレイの設定によっても変わります。「この人にはこう見えている」と決めつけるための道具ではなく、見分けにくくなりやすい色の組み合わせを、作る側が前もって確かめるための道具として使ってください。
色の感じ方が人によってちがうことを前提に、だれにでも情報が正しく伝わるように色づかいを工夫することをカラーユニバーサルデザインといいます。基本は「色だけで区別しない」ことです。WCAG にも、色を、情報を伝えたり、操作を示したり、反応を求めたりするための唯一の視覚的な手段にしてはならない、という達成基準（1.4.1 色の使用、レベルA）があります。
シミュレーションで路線図を見ると、赤・緑・オレンジ・茶色の線が、1型や2型の近似では似た色になります。「形・模様・文字でも区別する」に切りかえると、線の模様と記号、名前で区別できるようになることが確かめられます。
文字の読みやすさに大きくかかわるのが、文字と背景の明るさの差（コントラスト）です。WCAG では、まず色ごとに相対輝度（その色を、黒を0、白を1としたときの明るさで表したもの）を求め、そこからコントラスト比を計算します。
②は、画面の色の値が光の強さに比例していない（暗い部分に多くの段階を割り当てている）ので、比例する値にもどす計算です。③で G の係数がいちばん大きいのは、人の目が同じ強さの光でも緑をいちばん明るく感じるからです。コントラスト比は、同じ色どうしの 1:1 から、黒と白の 21:1 までの値になります。たとえば白地に #767676 の灰色は、L ＝ 約0.181 なので、(1 ＋ 0.05) ÷ (0.181 ＋ 0.05) ≒ 4.54 です。
| 基準 | 通常の文字 | 大きな文字 |
|---|---|---|
| 1.4.3 コントラスト（最低限）レベルAA | 4.5:1 以上 | 3:1 以上 |
| 1.4.6 コントラスト（高度）レベルAAA | 7:1 以上 | 4.5:1 以上 |
「大きな文字」は、18ポイント以上、または14ポイント以上の太字です。CSSの単位では、1pt が約1.333px なので、およそ 24px 以上、または約18.7px 以上の太字にあたります。WCAG は日本語などについては「同等の大きさ」を求めており、このページでは欧文の値を目安として使っています。基準値は切り上げずに判定します（4.48 は 4.5 未満）。
4.5:1 という値には根拠があります。W3C の解説によると、通常の視力の人向けに推奨されてきた最低限の値が 3:1 で、視力が 20/40（日本式でおよそ0.5）程度に下がるとコントラストの感じ方がおよそ1.5倍分弱くなることから、3 × 1.5 ＝ 4.5 とされています。高齢になると、この程度の視力の人が増えます。
デザイナーのロビン・ウィリアムズ（Robin Williams）は、著書『The Non-Designer's Design Book』で、デザインを学んだことがない人でも使える4つの原則として、近接・整列・反復・対比を挙げています。
「レイアウトの4原則」タブでは、文字の内容をまったく変えずに、配置と見た目だけを切りかえています。「3秒だけ見て覚える」で、悪い例と良い例のどちらが日時と場所を覚えやすいか、比べてみましょう。
情報を伝わりやすくする方法は、大きく3つに整理できます。
抽象化とは、伝えたいことに関係のない細かい部分を取り除き、本質だけを残すことです。その代表がピクトグラム（絵文字・図記号）です。国土交通省は、案内用図記号を「文字・言語によらず対象物、概念または状態に関する情報を提供する図形」と説明しており、高齢者や障害のある人、外国人観光客などにも分かりやすい案内に役立つとしています。日本では、公共の場所の案内用図記号が JIS Z 8210 として定められています。くわしい絵は近くで見れば情報が多いのですが、遠くから見たり小さく表示したりすると、細かい部分がつぶれて何の絵か分かりにくくなります。
可視化とは、数値のように目に見えにくい情報を、グラフや図にして見えるようにすることです。グラフには得意なことがあります。時間による変化は折れ線グラフ、量の大小の比較は棒グラフ、全体に占める割合は帯グラフや円グラフが向いています。正確な値を読みたいときは、表のほうがよいこともあります。目的に合わないグラフを選ぶと、かえって誤解を生みます。
構造化とは、情報どうしの関係（順番、並列、分類、分かれ道など）をはっきりさせて整理することです。並列の情報は箇条書き、2つの観点で整理できる情報は表、順番や分かれ道のある手順は番号付きの箇条書きやフローチャートのような図解が向いています。時刻表を文章で書くと、目的の時刻を探すのに時間がかかりますが、表にすれば「時」と「分」の2つの観点ですぐに探せます。
情報Ⅰ 授業の進め方ガイドでは、この教材を次の授業で使います。ねらい・導入の問い・50分の流れ・確認問題をまとめています。