はじめに：ITパスポート「情報デザイン」分野の全体像と学び方
情報デザイン分野は、ユーザーにとって「情報が見やすい・理解しやすい・操作しやすい」状態を作るための考え方と実装の基礎を問う領域です。単なる見た目の装飾ではなく、目的達成に最適化された情報整理やインタフェース設計を扱います。ITパスポート試験では、デザインの原則、LATCHの法則、UXデザイン／人間中心設計、ユーザビリティ／アクセシビリティ、レスポンシブ Web デザイン、CSS、VUI、ツールチップなどが頻出です。
本記事は初心者・初受験者の方でも迷わず学べるよう、まず考え方を整理し、次にWebやアプリで使われる具体的なUI手法を紹介し、最後に試験形式の4択問題で確認できるよう構成しています。要点は「情報を整理する」「操作の意味を明示する」「誰でも使えるように配慮する」の3点です。
この章の用語ミニ解説
- 情報デザイン：情報を理解・活用しやすくするための構造化と表現の設計です。
- デザインの原則：近接・整列・反復・対比など、視覚設計の土台となる原理です。
- LATCHの法則：情報をLocation／Alphabet／Time／Category／Hierarchyの5軸で整理する方法です。
情報を「わかる」へ導く：デザインの原則とLATCHの法則
デザインの原則（近接・整列・反復・対比）
視覚デザインの基本「近接・整列・反復・対比」は、情報の読みやすさと素早い理解を支える強力な道具です。関連要素を近づけ、目線の流れを整列で作り、繰り返しで一貫性を与え、重要箇所は対比（大きさ・色・太さ）で際立たせます。これらはスライドや資料、Webページ、業務画面のいずれにも有効です。
LATCHの法則：迷わない情報整理
LATCHは情報を場所・五十音／アルファベット・時間・分類・階層で整理するフレームです。情報をどの軸で並べるかを決めるだけで、理解の負荷が下がります。例として、FAQをカテゴリ別にまとめる（Category）、年表で時系列に並べる（Time）、店舗一覧を地域で分ける（Location）などが挙げられます。
| 軸 | 整理の考え方 | UI例 | 試験の着眼点 |
|---|---|---|---|
| Location | 地理・位置でまとめる | 地図・地域フィルタ | 拠点・支店情報の提示 |
| Alphabet | 名称順で並べる | 索引・A〜Z/あ〜ん | 辞書・電話帳・商品名一覧 |
| Time | 時系列に追う | タイムライン・年表 | 履歴・ログ・更新順 |
| Category | 種類でグループ化 | カテゴリメニュー | FAQ・製品分類 |
| Hierarchy | 重要度・包含で層に | サイトマップ・パンくず | 上位→下位の階層構造 |
シグニファイアで操作を「見れば分かる」へ
ボタンの立ち上がり、リンクの下線、ドラッグ可能な取っ手のアイコンなど、操作可能性を示す視覚的手がかりをシグニファイアと呼びます。情報デザインでは「行動の導線」を視覚で示すことが重要です。ホバー時の色変化や、フォーカス枠、無効状態（グレーアウト）も立派なシグニファイアです。
この章の用語ミニ解説
- シグニファイア：操作できる部位を示す視覚的サイン。
- ピクトグラム：言語に依らず意味を伝える図記号。ナビ・交通・UIアイコンに活用します。
- インフォグラフィックス：データや関係性を視覚化して短時間で理解させる図解手法です。
確認問題（例題1）
FAQページの並べ方として「製品別」「手続き別」に分けるのはLATCHのどの軸に該当しますか。
- Location
- Alphabet
- Category
- Hierarchy
正解：C。種類（カテゴリ）による整理だからです。
人間中心設計とUX：ユーザーから逆算する設計プロセス
人間中心設計（HCD）の流れ
人間中心設計は、ユーザーの目的・文脈・制約を起点に、設計→評価→改善を反復する考え方です。典型的には「調査→要件化→原型（ワイヤーフレーム・プロトタイプ）→評価→改善」を繰り返します。ITパスポートでは、ユーザー参加・反復・文脈理解・評価の重要性が問われます。
構造化シナリオ法とワークフロー
構造化シナリオ法は、ユーザーのゴール・行動・環境をストーリーとして記述し、必要な情報・機能・分岐を可視化する手法です。これにより、余計な画面や説明を削ぎ落とし、必要なシグニファイアやヘルプ、エラーハンドリングを適切に配置できます。
UXデザインの評価観点
- 有用性（役立つか）：ユーザーのゴール達成に寄与するか。
- 使いやすさ（ユーザビリティ）：学習容易・効率・エラー率・満足度。
- 信頼性・安心感：入力保護、明確なフィードバック、プライバシー案内。
ユーザビリティとアクセシビリティの違い
ユーザビリティは「使いやすさ」、アクセシビリティは「利用可能性の確保」（年齢や障害の有無、環境に関わらず使える）です。両者は密接に関連しますが、試験では定義の違いが問われる傾向があります。
この章の用語ミニ解説
- UXデザイン：体験全体を設計する考え方。感情面・期待・事後評価も含みます。
- 人間中心設計：ユーザーを中心に据えた反復的な設計手法。
- 構造化シナリオ法：行動文脈をシナリオとして構造化し要件へ落とし込む技法。
確認問題（例題2）
「誰もが利用できることを目標に、支援技術（スクリーンリーダー等）への配慮を行う」のは次のどれを最も重視した活動か。
- ユーザビリティ
- アクセシビリティ
- ブランディング
- リダイレクト
正解：B。支援技術や代替テキスト、コントラスト比などへの配慮はアクセシビリティの中核です。
だれでも使えるを実現：ユニバーサルデザインとバリアフリー設計
ユニバーサルデザインの7原則（要点）
- 公平な利用、柔軟な使用、単純で直感的、認知可能な情報、誤りに対する許容、少ない身体的努力、接近と利用のためのサイズと空間。
Web/アプリでは、十分な文字サイズ・行間、色だけに依存しない情報提示、キーボード操作で完結可能、明確なフォーカス表示などが例です。
バリアフリー設計との関係
ユニバーサルデザインは初めから全員を対象に作る思想、バリアフリー設計は既存の障壁を取り除く改修のニュアンスが強い設計です。両者を組み合わせると、計画段階から誰もが使える体験を組み込み、運用段階で障壁を発見・解消できます。
実務でのアクセシビリティ施策例
- 代替テキスト（画像の説明）、見出し構造（h1〜h4）の順序性。
- コントラスト比の確保、フォーカス可視化、フォームラベルの明示。
- エラー時の具体的説明と再入力支援（自動補完、候補提示）。
この章の用語ミニ解説
- ユニバーサルデザイン：年齢・文化・能力差を越えて使いやすさを実現する設計思想。
- バリアフリー設計：既存の障壁を取り除き利用を可能にする改修・配慮。
- アクセシビリティ：誰もがアクセスできる状態を作る取り組みの総称。
確認問題（例題3）
次のうち、ユニバーサルデザインの観点から不適切な例はどれか。
- 色だけでエラーを示す（赤文字のみ）。
- 入力欄にラベルを設ける。
- フォーカス時に枠線を表示する。
- 画像に代替テキストを設定する。
正解：A。色覚多様性に配慮し、アイコンやテキストでもエラーを示す必要があります。
インタフェース設計：ジェスチャー・VUI・ホバーとツールチップ
インタフェース設計の基本原則
- 可視性：今、何が起きているのかが見える（進行状況・ローディング）。
- フィードバック：操作に対する応答が即時・明確（押下アニメ、トースト）。
- 一貫性：同じ操作は同じ結果へ（色・用語・配置）。
- エラー防止と回復：確認ダイアログ、取り消し、やり直し。
ジェスチャー／マルチタッチ／VUI
ジェスチャーインタフェースは、タップ・スワイプ・ピンチなど身体動作で操作します。マルチタッチインタフェースは複数指で拡大縮小や回転が可能。VUI（音声ユーザーインタフェース）は音声で命令・検索・入力を行い、ハンズフリーやアクセシビリティの向上に寄与します。
ホバー（ロールオーバー）とツールチップの設計
デスクトップ環境では、ホバーによりボタンの色や影を変化させ、ツールチップで用語や省略の説明を補えます。ただしタッチ端末ではホバーが効かないため、フォーカス時表示や「i」アイコンの常設ヘルプなど代替を用意します。
| 要素 | 利点 | 注意点（試験ポイント） |
|---|---|---|
| ホバー | 操作可能性を視覚で示す。学習コスト低。 | タッチでは無効。代替手段（フォーカス/常時ラベル）が必要。 |
| ツールチップ | 専門用語や略語の補足に最適。 | キーボード操作・読み上げ対応、表示の遅延/消失に配慮。 |
| VUI | 手が離せない状況で有効。視覚障害支援。 | 雑音・方言・プライバシー配慮、確認応答の設計が肝要。 |
この章の用語ミニ解説
- ジェスチャーインタフェース：身体動作で操作するUI。
- マルチタッチインタフェース：複数指の操作（ピンチ、ローテーション）。
- VUI：音声で操作・入力・確認を行うUI。
確認問題（例題4）
スマートフォンでホバーが前提の説明表示が機能しない。最も適切な対策はどれか。
- ツールチップをやめて説明文を完全に削除する。
- フォーカス時やタップで表示される情報アイコンを設置する。
- PCのみ対応としてモバイルは非対応とする。
- 色を原色にして目立たせる。
正解：B。タッチ環境に合わせた代替手段（フォーカス/タップ表示）を設けるのが適切です。
Webで実装する情報デザイン：モバイルファースト／レスポンシブ／CSS／リダイレクト
モバイルファーストの考え方
モバイルファーストは、スマートフォンの制約（小さな画面・限られた回線速度・タップ操作）を起点に「必須情報だけを核に設計」し、画面が広がるほど徐々にリッチ化する手法です。重要導線を優先順位で絞り、余計な装飾や冗長な表現を排除することで、結果的に全デバイスで明快な体験になります。
レスポンシブ Web デザインの実務ポイント
- CSSグリッド／フレックスでリフローしやすいレイアウトを採用。
- メディアクエリでブレークポイント（例：1200/992/768/576px）を設定。
- 画像は
max-width:100%やsrcsetで可変に、装飾はCSSに分離。 - フォントは相対指定（
rem）で拡大に耐える。
CSSで実現する読みやすさ
- 行長は40〜80字相当、行間は文字サイズの1.5倍前後を目安。
- 見出し階層（h2→h3→h4）の順序を保ち、スクリーンリーダーに配慮。
- 色覚多様性を考慮し、情報は色＋形/テキストで提示。
リダイレクトと情報設計
リダイレクトはURL変更時などに自動転送する仕組みです。ユーザーの混乱を避け、ブックマークや外部リンクからの流入を保全します。用途に応じて301（恒久）と302（暫定）などを使い分けます。
トラックバックの基礎知識
トラックバックは、ブログ間で記事の関連性を通知する機能です。近年はSNSやリンクプレビューが主流ですが、概念として「出典や関連を示して情報を結ぶ仕組み」を理解しておくと、情報デザインの観点（参照性・信頼性）で応用できます。
情報アーキテクチャ（IA）とナビゲーション
- サイトマップ／パンくず：Hierarchy軸を可視化。
- グローバル・ローカルナビ：階層位置と回遊性を示す。
- 検索：語彙支援（サジェスト、タイプアヘッド）、誤入力耐性。
計算で理解するデザイン：Fittsの法則とHickの法則
Fittsの法則（ターゲット選択時間）
目標へポインタを移動する時間は、距離Dと幅Wに依存します。一般式はMT = a + b × log2(D/W + 1)（MT：時間）。
例題（計算）：D=300px、W=50px、a=50ms、b=100ms のとき、log2(300/50 + 1) = log2(7) ≒ 2.807 より、
MT ≒ 50 + 100×2.807 = 330.7ms（約331ms）。
学び：ボタンは遠く小さいほど遅い。重要操作は近く大きく。
Hick（ヒック＝ハイマン）の法則（選択肢と反応時間）
選択肢が多いほど反応時間が増えます：T = a + b × log2(n + 1)。
例：n=7、a=200ms、b=150ms → log2(8) = 3 なので T = 200 + 150×3 = 650ms。
学び：メニューは分類し、選択肢を減らす／段階分けで迷いを減らす。
この章の用語ミニ解説
- CSS：HTMLの見た目を制御するスタイルシート言語。
- モバイルファースト：小さい画面から設計し本質を先に固める手法。
- レスポンシブ Web デザイン：1つのHTML/CSSで多端末に最適化する仕組み。
小テスト（計算系）
Fittsの法則で D=200px, W=25px, a=0ms, b=100ms のとき、MT に最も近いのはどれか。
- 200ms
- 300ms
- 400ms
- 500ms
解法：log2(200/25 + 1) = log2(9) ≒ 3.17 → MT ≒ 317ms。正解：B（約300ms）。
まとめ：試験で差がつく学習のコツとチェックリスト
重要ポイントの総復習
- デザインの原則：近接・整列・反復・対比を資料・画面に適用。
- LATCH：情報整理の5軸を使い分け、迷いを減らす。
- シグニファイア：操作可能性を視覚と言葉で明示。
- HCD/UX：ユーザー起点で反復的に評価・改善。
- ユーザビリティ×アクセシビリティ：使いやすさと利用可能性は両輪。
- モバイルファースト／レスポンシブ／CSS：現場の実装知識も頻出。
- VUI・ホバー・ツールチップ：デバイス特性に応じて代替設計。
- リダイレクト・トラックバック：情報のつながりと保全の基礎概念。
直前チェック（○/×で確認）
- 色だけで状態を伝えていない（形・テキストも併用）。
- 見出し階層は順序正しく、パンくずで位置が分かる。
- 重要ボタンは大きく近く、連打事故は確認やUndoで防止。
- スマホでも説明が読める（ホバー依存なし）。
- 画像には代替テキスト、フォームにはラベルがある。
用語ラストミニ解説（仕上げ）
- インタフェース設計：ユーザーとシステムの接点の設計全般。情報設計と視覚設計を接続します。
- ユーザビリティ：学習容易性・効率・エラー率・満足度などで評価される使いやすさ。
- リダイレクト：URL変更時の自動転送。ユーザー体験と情報の継続性を守ります。
情報デザインは、試験対策だけでなく実務・日常にも役立つ普遍的なスキルです。本記事のフレーム（デザインの原則／LATCH／HCD／UX／アクセシビリティ／レスポンシブ）を軸に、過去問や身近なUIを分析しながら学習を重ねれば、得点源として安定させることができます。暗記だけでなく、なぜその設計が良いのかという理由まで言語化できるよう練習しましょう。
