2-1 情報デザイン
情報デザイン
情報デザインは、利用者が必要な情報を見つけ、意味を理解し、迷わず行動できるように設計する考え方です。見た目の美しさだけでなく、情報構造、操作手順、エラー防止、アクセシビリティ、利用後の体験まで含みます。
この節の目標は、利用者と目的を明確にし、UI・UX・ユーザビリティ・アクセシビリティを区別し、画面、フォーム、図表、案内を改善できるようになることです。
1. UI・UX・ユーザビリティを区別する
| 用語 | 主な意味 | 確認する問い |
|---|---|---|
| UI | 利用者とシステムの接点 | ボタン、入力欄、メニューは分かりやすいか |
| UX | 利用前から利用後までの体験全体 | 目的を気持ちよく達成できたか |
| ユーザビリティ | 特定の利用状況での有効さ、効率、満足度 | 正確に、短時間で、負担少なく使えるか |
| アクセシビリティ | 障害、年齢、環境などにかかわらず利用できる度合い | キーボードや読み上げでも利用できるか |
| ユニバーサルデザイン | 最初からできるだけ多くの人が使えるように設計する考え方 | 特別対応を後付けせず利用範囲を広げられるか |
見やすい画面でも、申請完了まで何度も同じ情報を入力させるならUXは良いとは限りません。
2. 利用者中心で設計する手順
- 利用者を把握する：年齢、知識、端末、利用環境、支援技術を確認します。
- 目的とタスクを定義する：利用者が何を達成したいかを明確にします。
- 現状の困りごとを観察する：迷う場所、誤操作、問い合わせを記録します。
- 情報構造と操作の流れを設計する：重要情報と次の行動を整理します。
- 試作品を作る：紙や簡易画面で早期に確認します。
- 利用者テストを行う：説明せずに目的を達成できるか観察します。
- 結果を基に改善する：成功率、時間、誤操作、発言を分析します。
設計者自身が使えることは、利用者全員が使えることを意味しません。
3. 完全ケース：住所変更フォームを改善する
社員向け住所変更フォームで、入力エラーが多く、問い合わせも増えています。現状は必須項目が分からず、エラー時に「入力が正しくありません」とだけ表示されます。
改善例は次のとおりです。
- 必須項目を文字と記号で明示する。
- 郵便番号の入力例を表示する。
- 住所自動入力後も利用者が確認・修正できるようにする。
- エラーを該当項目の近くへ表示し、原因と修正方法を示す。
- 入力済みの正常な項目を消さない。
- 送信前に変更内容を確認できる画面を用意する。
- 完了後に受付番号と次の手続を表示する。
色を赤にするだけでは、色を識別しにくい利用者へ伝わらない場合があります。アイコンや文章も併用します。
4. 情報を分かりやすく構造化する
| 原則 | 内容 | 例 |
|---|---|---|
| 近接 | 関係する情報を近くに置く | 項目名、入力欄、説明、エラーをまとめる |
| 整列 | 要素の位置をそろえる | ラベルや数値の桁をそろえる |
| 反復 | 同じ役割へ一貫した表現を使う | 主要ボタンの形と文言を統一する |
| 対比 | 重要度や違いを明確にする | 見出し、余白、文字サイズで階層を示す |
| 一貫性 | 同じ操作は同じ結果にする | 戻る、保存、削除の位置や動作を統一する |
情報を目立たせるために全てを太字・大文字にすると、かえって優先順位が分からなくなります。
5. ナビゲーションと操作を設計する
- 現在地をパンくずリストや見出しで示す。
- メニュー名は組織内部の用語ではなく、利用者の目的に合わせる。
- 重要な操作は見つけやすくし、危険な操作は確認を求める。
- 戻る操作で入力内容を失わないようにする。
- 処理中、成功、失敗をフィードバックする。
- 取り消せる操作は、可能な範囲で元に戻せるようにする。
「保存」なのか「申請」なのか「公開」なのか、結果が異なる操作は具体的な動詞で示します。
6. アクセシビリティの基本
| 観点 | 対応例 |
|---|---|
| 知覚可能 | 文字と背景のコントラスト、画像の代替テキスト、字幕 |
| 操作可能 | キーボード操作、十分な操作時間、明確なフォーカス表示 |
| 理解可能 | 平易な文、予測可能な操作、具体的なエラー説明 |
| 堅牢 | 支援技術が解釈できる適切な構造とラベル |
色だけ、音だけ、位置だけで意味を伝えないことが重要です。画像の代替テキストは見た目の説明ではなく、その画像が伝える目的に合わせます。
7. 図表を目的で選ぶ
| 図表 | 向いている目的 | 不向きな使い方 |
|---|---|---|
| 棒グラフ | 項目間の数量比較 | 細かな時系列変化 |
| 折れ線グラフ | 時間に沿った変化 | 順序のないカテゴリ比較 |
| 円グラフ | 少数項目の構成比 | 項目が多い、差が小さい比較 |
| 散布図 | 二つの数値の関係 | 時系列の推移 |
| ヒストグラム | 連続値の分布 | 個別項目の名称比較 |
| 表 | 正確な値の参照 | 大量データの傾向把握 |
グラフの軸、単位、期間、母数を明示します。縦軸を途中から始めると差を過大に見せる場合があります。
8. 情報発信の品質を確認する
- 誰に何を伝えるか決める。
- 出典、更新日、対象期間を確認する。
- 事実、推測、意見を区別する。
- 見出しと要約で全体像を示す。
- 数値の単位、母数、比較条件をそろえる。
- 公開前に誤解、権利、個人情報を確認する。
- 公開後に問い合わせや利用状況を基に改善する。
9. よくある誤りと理由
- 情報デザインを装飾と考える：利用者の理解と行動を支援する設計です。
- UIが良ければUXも必ず良い：待ち時間、手続全体、サポートも体験へ影響します。
- 色だけでエラーを示す：色を識別できない利用者へ伝わりません。
- エラー文を「不正です」だけにする：対象項目と修正方法が必要です。
- 項目を増やすほど親切と考える：必要情報を選び、段階的に提示します。
- グラフなら表より常に分かりやすい：正確な値の参照には表が適する場合があります。
- 設計者の説明を聞けば使えるので問題ない：説明なしで目的を達成できるか確認します。
10. セルフチェック
- 利用者、利用環境、達成したいタスクを定義したか。
- UI、UX、ユーザビリティ、アクセシビリティを区別したか。
- 情報の優先順位と次の行動が明確か。
- エラーの原因と修正方法を示したか。
- 色、音、画像だけに意味を依存していないか。
- 図表の種類が伝えたい内容に合っているか。
理解を確認したら、第2章の練習問題と第2章の知識カードで設計判断を確認してください。画像・音声・動画の形式は情報メディア、データ分析の読み方は基礎理論で学びます。
公式範囲との対応
本節は、IPA「ITパスポート試験シラバス Ver.6.5」の情報デザイン、インタフェース設計に対応し、UI、UX、ユーザビリティ、アクセシビリティ、ユニバーサルデザイン、図表、情報構造を扱います。