この章の学習目標
読み終えたら、できること。
- 「色が消えても意味を残す」の意味と理由を、具体例で説明できる
- 「読める大きさと明暗差を確保する」の意味と理由を、具体例で説明できる
- 「画像の役割を言葉にする」の意味と理由を、具体例で説明できる
章内を一度に読まず、見出しごとに例を説明してから先へ進んでも大丈夫です。
この章の目次
WHY / なぜ学ぶ？
身近な「なぜ？」から。
正解を緑、不正解を赤だけで示す画面は、全員が同じように読めるでしょうか。色の見え方、明るい屋外、白黒印刷、音声読み上げなど、利用条件はさまざまです。アクセシビリティは「親切な飾り」ではなく、必要な情報へたどり着ける設計の問題です。
BIG PICTURE
この章の全体像をつかもう。
情報を色だけに載せず、文字や形でも伝える。文字は拡大・明暗差・行間まで含めて読みやすくする。画像が見えない場合は、その役割を代替テキストや本文の説明で伝える。この3つは組み合わせて使います。条件が変わっても同じ意味を受け取れるかを確かめましょう。
アプリ教材の単元原図
まず、図で全体像をつかもう。
図の見出しと、下の本文の見出しを対応させて読みましょう。原図には発展事項も含まれます。この章の確認範囲は本文と代表3問です。
アプリ教材の制作原図を加工せず掲載しています。図の文字コードの固定バイト数などは例で、方式により異なります。本文の条件と併せて確認しましょう。本文は2026年10月に整理したWeb用解説です。
THREE KEYS
まず押さえるのは、3つ。
章の細かい用語は、この3つの考え方に結び付けて読み進めましょう。
色が消えても意味を残す
赤と緑の差だけに正誤を載せると、区別しにくい条件で情報が失われます。文字・記号・線種を併用します。
たとえば：緑の丸だけでなく「○ 正解」、赤の丸だけでなく「× 要確認」と表示します。
読める大きさと明暗差を確保する
淡い文字や小さな注記は、画面を拡大しても追いにくい場合があります。重要条件を本文で伝え、拡大時にも操作できるか確認します。
たとえば：必須項目の注意を小さな薄い字だけにせず、項目名の近くへはっきり示します。
画像の役割を言葉にする
代替テキストは見た目の描写を増やす競争ではありません。そこで何を理解・操作すべきかに合わせます。
たとえば：問い合わせへ進む画像ボタンなら「青い四角」より「お問い合わせフォームへ」が役に立ちます。
THINK WITH A DIAGRAM
図を読みながら、考え方を追う。
| 伝えるもの | 不足する例 | 改善例 |
|---|---|---|
| 正誤 | 緑／赤の丸だけ | ○ 正解／× 要確認も表示 |
| 画像リンク | 青いボタンの写真 | 行き先を伝える代替文 |
| グラフの傾向 | 画像だけ | 傾向の説明＋必要な表 |
表が収まらない場合は横にスクロールできます。
2-6-1
色覚への配慮
赤と緑だけで正誤を区別すると、違いを見分けにくい人がいます。色に加えて「正解」「確認」などの文字、記号、線種を使います。関連する情報は近くに置き、枠やラベルでもまとまりを示しましょう。色覚の違いに加え、白黒印刷や屋外の画面でも情報が伝わるかを確認します。
2-6-2
文字サイズ・コントラスト
文字は背景との明暗差、サイズ、行間、拡大時の読みやすさを確認します。見出しと本文の大きさに差を付けると、重要度や構造を伝えられます。ただし、小さな注記に重要条件を押し込まないことが大切です。装飾的な書体や薄い文字を多用せず、スマートフォンでも本文を自然に読めるようにします。
2-6-3
代替テキスト
代替テキストは、画像が見えない場合にその役割や内容を伝えます。ボタン画像なら見た目の色より、何が起きるかを表します。複雑なグラフは短い代替文だけで済ませず、近くに傾向の説明やデータ表を置く方法もあります。装飾だけの画像と、学習に必要な図を区別しましょう。
重要語句を整理しよう。
| 語句 | 意味 | 混同しやすい点 |
|---|---|---|
| アクセシビリティ | さまざまな条件の人が情報や機能を利用できる度合い。 | 特定の人だけに分かる設計を避ける。 |
| 色覚への配慮 | 色の見え方に違いがあっても情報を区別できる工夫。 | 色だけに意味を載せない。 |
| コントラスト | 文字や図と背景の明暗の差。 | 色の名前が違えば必ず読めるわけではない。 |
| 代替テキスト | 画像を見られない場合に役割や内容を伝える文。 | 検索キーワードの詰め込み欄ではない。 |
| スクリーンリーダー | 画面の情報を音声などで伝える支援ソフト。 | 画像の見た目をそのまま理解するとは限らない。 |
| 近接 | 関係する情報を近くにまとめて示す原則。 | 色分け以外でも構造を伝えられる。 |
| 装飾画像 | 意味の伝達に不要な飾りの画像。 | Webでは空のaltで読み上げから除く場合がある。 |
表が収まらない場合は横にスクロールできます。
WORKED EXAMPLE
一緒に解く：手順と理由を確かめよう。
「詳細を見る」という画像リンクがあります。altにファイル名だけを書いた場合、何が不足していますか。
- 利用者が知りたいのはファイル名ではなく、押すとどうなるかです。
- 行き先が申込方法の説明なら、その目的を言葉にします。
- 近くに同じ意味の文字リンクがあるかも確認し、不要な重複を避けます。
- 音声で読んでも、行き先を理解できるか確かめます。
| 候補 | 利用者が分かること | 評価 |
|---|---|---|
| button01.png | ファイル名だけ | 目的が伝わらない |
| 青い四角い画像 | 見た目だけ | 行き先が伝わらない |
| 申込方法の詳細へ | リンク先の目的 | 文脈に合うなら適切 |
表が収まらない場合は横にスクロールできます。
画像の役割やリンク先の目的が不足しています。「申込方法の詳細へ」など、その文脈に合った説明を付けます。
ここで間違えやすい。
TRY IT YOURSELF
次は、自分の言葉で。
装飾だけの画像にも、長いaltを必ず付ける？
考え方と答えを確かめる
必ずではありません。意味のない装飾は空のaltで読み上げから除く場合があります。画像の役割で決めます。
理由まで言えたら、下の代表3問へ進みましょう。
CHECK YOUR UNDERSTANDING
代表3問で、確かめよう。
アプリ収録の問題から3問を選定。章内のすべての項目を出題するものではありません。解答・解説はこのページで確認できます。
解答・解説だけ読む
問1：D
情報の構造化とは、整理された情報同士を結びつけることです。デザイン原則の「近接」を用いることで、色に頼らずとも情報のまとまりを伝えることができます。色覚多様性への配慮においては、配置（構造）や形状の工夫を優先し、色は補助的に活用することで、情報の結びつき（並列、階層など）を正確に伝達できるようになります。
問2：A
情報を構造化する際、数量的な変化や重要度の階層（Hierarchy）を基準にする場合があります。このとき、文字サイズや太さを段階的に変化させることで、情報の「結び付き」や「重み」を視覚的に表現できます。例えば、重要な項目を大きく表示し、補足情報を小さく表示することは、情報の論理構造を受け手に直感的に伝えるための情報デザインの基礎技術です。
問3：D
ボタンやリンクにおける代替テキストは、利用者に「操作」を想起させる「シグニファイア」としての役割を果たします。画像の外見を説明するのではなく、そのボタンが持つ「機能（目的）」を文字化することで、受け手は次に何が起こるかを正しく「解釈」し、意思決定を行うことができます。
理解できたら、別の問題でも。
この章の考え方を、条件の違う問題でも確かめましょう。情報1アプリでは分野別の演習と間違えた問題の復習ができます。
無料でアプリを入手 iPhone・iPadはApp Store、AndroidはGoogle Playへ。PCではストアを選べます。運営者が開発するアプリです。各OSの機能と利用条件はストア掲載をご確認ください。説明できたら、この章は完了。
- 「色が消えても意味を残す」の意味と理由を、具体例で説明できる
- 「読める大きさと明暗差を確保する」の意味と理由を、具体例で説明できる
- 「画像の役割を言葉にする」の意味と理由を、具体例で説明できる
迷った項目は本文・図解・例題へ戻り、答えを見ずに説明し直してみましょう。
要点へ戻る ↑出典・教材について
本サイトの26章は、アプリの分類を用いた補助教材です。検定教科書や公式の章立てではありません。問題と図解は運営者のアプリ教材から選定し、問題ID・選択肢・正答を保持しています。共通テスト過去問の転載ではありません。