本文へ移動

ITパスポート試験 · 学習ガイド

情報デザインとアクセシビリティ

情報デザインとアクセシビリティとは

情報デザインとアクセシビリティとは、多様な人が同じ情報にたどり着き、操作できるように伝え方を設計することです。

エルくんが色だけの札へ丸・三角の形と空き・満席の文字を取り付ける図。
色が見分けにくい場合にも状態が伝わるよう、形や文字を添えます。図はアクセシビリティに関わる表示方法の一例です。

赤い点だけで『エラー』を示す画面は、色を見分けにくい人や音声で読む人には伝わらないことがあります。情報の伝え方もシステムの品質です。

基本の仕組み

基本の仕組みの図解。中央に日付の入力欄を置き、そのすぐ下に「日付を入力してください」と表示する。エラー文から入力欄へ短い矢印を向け、どの欄を直すか分かる配置にする。
覚えること:エラーは色だけでなく文字で入力欄と対応

入力エラーを色だけでなく『日付を入力してください』という文字でも示し、入力欄と対応させれば、何を直すか分かります。キーボードだけでも操作できることは、マウスを使いにくい人にも役立ちます。

アクセシビリティはさまざまな特性や利用環境の人がアクセスして使えること、ユーザビリティは特定の利用状況で目的を達成しやすいことです。ユニバーサルデザインは幅広い人が利用しやすい設計を目指します。

ピクトグラムやアイコンも誰にでも同じ意味に見えるとは限りません。重要な操作には文字を添え、表記や位置を一貫させます。装飾を増やすより、目的の情報を探せて操作結果が分かることを優先します。

利用できる設計の条件

利用できる設計の条件の図解。左下のキーボードから中央の画面へ矢印を伸ばし、画面内の明確な焦点から「操作完結」へつなぐ。画面は仕切らず、一つの操作の流れとして描く。
覚えること:操作はキーボードでも完結

アクセシビリティは障害や利用環境にかかわらず情報・機能へアクセスできること、ユーザビリティは特定の利用者が目的を達成しやすいことです。ユニバーサルデザインは多様な人に使いやすいよう初めから設計する考え方です。

画像には意味に応じた代替テキストを付け、操作はキーボードでも完結できるようにします。色だけで状態を伝えず、エラー箇所と直し方を文章で示します。ピクトグラムは直感的な案内に役立ちますが、意味が曖昧なら文字も併用します。

利用できる設計の条件
観点配慮の例
視覚代替テキスト・十分なコントラスト
操作キーボード対応・明確な焦点
理解分かりやすい文言・エラーの説明

試験に出る

  • 色だけに頼らず、文字や形を組み合わせる理由。
  • キーボードだけでも操作できることの重要性。
  • アクセシビリティとユーザビリティの違い。
  • ユニバーサルデザインが幅広い人を対象にする考え方。
  • ピクトグラムやアイコンの意味が一意とは限らないこと。

重要な言葉

アクセシビリティ
特性や利用環境にかかわらず情報や機能を利用できること。
ユーザビリティ
特定の利用状況で目的を達成しやすい度合い。
ユニバーサルデザイン
幅広い人が使いやすいように設計する考え方。
ピクトグラム
絵や記号で情報を伝える図象。

確認問題

確かめようエラーを赤色だけで区別すれば十分?

いいえ。文字や形など色以外の手掛かりも組み合わせます。

入力エラーは色だけで示せば、すべての人に伝わる。

アクセシビリティは、利用環境や特性の違いを問わず使えることを目指す。

特定の利用状況で目的を達成しやすい度合いは?

色だけに頼らない伝え方として適切なものは?

赤い点だけで『』を示す画面は、色を見分けにくい人や音声で読む人には伝わらないことがあります。情報の伝え方もシステムの品質です。

を色だけでなく『日付を入力してください』という文字でも示し、入力欄と対応させれば、何を直すか分かります。だけでも操作できることは、マウスを使いにくい人にも役立ちます。

はさまざまな特性や利用環境の人がアクセスして使えること、は特定の利用状況で目的を達成しやすいことです。ユニバーサルデザインは幅広い人が利用しやすい設計を目指します。

やアイコンも誰にでも同じ意味に見えるとは限りません。重要な操作にはを添え、表記や位置を一貫させます。装飾を増やすより、目的の情報を探せて操作結果が分かることを優先します。

出典・参考資料

試験の公式案内と、この記事の参考にした学習資料です。

編集:Pinternet Works · 更新日:

教材の編集方針・訂正について