体系学習
情報デザイン・UI・UXを使いやすさから理解する
情報デザインの四原則、LATCH、シグニファイア、GUI、アクセシビリティを整理し、FEでは情報アーキテクチャ、UX五段階、画面設計、人間中心設計まで深掘りする。
対象資格:ITパスポート / 基本情報技術者試験
目安時間:35分
このページで理解できること
- 近接・整列・反復・対比を目的から区別できる
- LATCHの五つの整理軸を説明できる
- シグニファイア、ユーザビリティ、アクセシビリティを区別できる
- GUI部品を選択ルールに応じて使い分けられる
- ユニバーサルデザインの目的を説明できる
- FEでは情報アーキテクチャとUX五段階を説明できる
- FEでは入力チェック、人間中心設計、ユーザビリティ評価を区別できる
基本情報技術者試験:ITパスポート範囲に加え、情報アーキテクチャ、UXデザイン五段階、入力チェック、Webデザイン、人間中心設計、ユーザビリティ評価を理解する。
情報デザインとUI/UXは、画面を装飾するためだけの分野ではありません。利用者が情報の関係を理解し、次に何をすればよいか分かり、目的を効率よく達成できるように設計する分野です。ITパスポートでは基本原則と代表UIを、FEでは情報構造・画面設計・利用者評価まで一つの流れで学びます。
まずは「情報を理解する」から「操作する」までの流れ
情報デザインとUIは、見た目を飾ることではなく、利用者が理解し、迷わず操作できるようにする設計です。
伝える目的と利用者を決める
誰に何を伝え、どんな行動を支援するかを明確にします。
情報を整理する
近接・整列やLATCHなどを使い、情報の関係と構造を分かりやすくします。
操作の意味を伝える
ラベル、シグニファイア、ナビゲーションなどで利用者が次の行動を理解できるようにします。
適切なUI部品を選ぶ
一つ選ぶのか複数選ぶのかなど、目的に合うGUI部品を使います。
多様な利用者へ配慮する
アクセシビリティやユニバーサルデザインを考慮します。
利用者による評価で改善する
FEではユーザビリティテストや人間中心設計の反復へつなげます。
1. 近接・整列・反復・対比で関係を見せる
デザインの原則は、装飾ではなく情報同士の関係を伝えるために使います。
近接は関係する要素を近くに配置し、グループとして認識しやすくする考え方です。関係の薄い情報まで近づけると、誤ったまとまりに見えることがあります。
整列は要素の端や基準線をそろえ、視線の流れと構造を明確にします。反復は色、形、配置、見出しなどのルールを繰り返して一貫性を作ります。
対比は大きさ、太さ、色、余白などの差を明確にして、重要度や役割の違いを見せます。違いが小さすぎると、意図した優先順位が伝わりにくくなります。
四原則は別々に使うだけでなく、見出しを同じ形式で反復し、本文と整列させ、関連情報を近接させるように組み合わせます。
| 原則 | 主な目的 |
|---|---|
| 近接 | 関係する情報をグループとして見せる |
| 整列 | 基準をそろえて構造を見せる |
| 反復 | 同じ役割へ一貫した表現を与える |
| 対比 | 重要度や役割の違いを明確にする |
2. LATCHは情報をどう並べるかの代表的な軸
内容に合った並べ方を選ぶと、利用者が目的の情報を探しやすくなります。
LATCHはLocation(場所)、Alphabet(五十音・アルファベット順)、Time(時間)、Category(カテゴリ)、Hierarchy(階層・程度)の五つの整理軸です。
店舗情報なら地域別、辞書なら五十音順、履歴なら時系列、商品ならカテゴリ別、ランキングなら重要度順というように、情報の性質と利用目的に合わせて選びます。
一つの情報集合を必ず一種類だけで整理する必要はありません。ECサイトでカテゴリ検索と価格順ソートを併用するように、利用者の探索方法に応じて複数の軸を提供できます。
| LATCH | 整理例 |
|---|---|
| Location | 地域・地図上の場所 |
| Alphabet | 五十音・アルファベット |
| Time | 日時・履歴 |
| Category | 種類・用途 |
| Hierarchy | 大きさ・重要度・順位 |
3. シグニファイアは「どう操作できるか」を伝える手掛かり
操作できることを、利用者が推測しなくても分かるようにします。
シグニファイアは、利用者に操作方法や意味を伝える知覚可能な手掛かりです。押せるように見えるボタン、リンクの表現、入力欄のラベルなどが例です。
ユーザビリティは、特定の利用状況で利用者が目標を有効に、効率よく、満足して達成できるかという使いやすさに関する考え方です。
アクセシビリティは、障害の有無や利用環境などにかかわらず、より多くの人が情報や機能へアクセスし利用できるようにする考え方です。
見た目が美しいことだけで、ユーザビリティやアクセシビリティが高いとは限りません。利用目的と実際の操作を基準に評価します。
4. GUI部品は選択の意味に合わせて使い分ける
一つだけ選ぶのか、複数を独立に選べるのかで部品を変えます。
ラジオボタンは、複数候補の中から原則として一つだけを選ぶ排他的な選択に向きます。
チェックボックスは、それぞれの項目を独立にON/OFFでき、複数選択を許す場合に向きます。
リストボックスやプルダウンメニューは、多数の候補を限られた画面領域で提示するときに利用できます。ただし、候補が隠れるため一覧性とのバランスが必要です。
テキストボックスは自由入力に使います。形式が決まっている値では、入力例やラベル、適切な入力チェックを組み合わせると誤入力を減らせます。
| 部品 | 代表的な用途 |
|---|---|
| ラジオボタン | 候補から一つを選ぶ |
| チェックボックス | 独立した項目を複数選択できる |
| リスト/プルダウン | 多くの候補から選ぶ |
| テキストボックス | 文字や数値を直接入力する |
5. GUI以外の操作方法とユニバーサルデザインも考える
利用者・状況・端末によって、適したインタフェースは変わります。
ジェスチャーインタフェースやマルチタッチでは、タップ、スワイプ、フリック、ピンチなど身体動作で操作します。VUIでは音声によってシステムとやり取りします。
NUI(Natural User Interface)は、音声やジェスチャーなど、人が自然に行う動作や表現を活用したインタフェースの考え方です。
ユニバーサルデザインは、年齢、文化、障害の有無、能力の違いなどにかかわらず、できる限り多くの人が利用しやすいように設計する考え方です。
色だけで状態を伝えず文字や形も併用する、十分なコントラストを確保する、分かりやすいラベルを付けるなど、複数の知覚・操作方法を考慮します。
FE深掘り
6. FEでは情報アーキテクチャで組織化・構造化・ナビゲーションを設計する
情報を置くだけでなく、利用者が見つけられる構造を作ります。
情報アーキテクチャは、利用者が必要な情報を理解し、見つけ、移動できるように、情報を組織化・構造化し、ラベルやナビゲーションを設計する考え方です。
ラベルは項目やリンクの意味を端的に示します。チャンクは情報を理解しやすいまとまりに分割する考え方で、長い情報を認知しやすくします。
階層型構造では上位から下位へカテゴリをたどり、タグ付けでは複数の観点から情報を関連付けられます。どちらが適切かは情報の性質や探索方法で変わります。
ナビゲーションは現在位置、移動先、戻り方などを利用者が理解できるように設計します。
FE深掘り
7. FEではUXデザインの五段階を上流からつなげる
表層の見た目だけを先に作るのではなく、目的から具体化します。
UXデザインの五段階モデルは、戦略、要件、構造、骨格、表層という順で抽象的な目的から具体的な画面へ落とし込む考え方です。
戦略では利用者ニーズやサービス目的、要件では必要な機能・情報、構造では情報と操作の全体構造を考えます。
骨格ではナビゲーションや画面上の配置を具体化し、表層では色、文字、画像など利用者が直接知覚する見た目を設計します。
上流の目的や要件が曖昧なまま表層だけを改善しても、利用者の課題そのものを解決できない場合があります。
| 段階 | 主な問い |
|---|---|
| 戦略 | 誰のどんな目的を満たすか |
| 要件 | どんな機能・情報が必要か |
| 構造 | 機能・情報をどう構成するか |
| 骨格 | 画面上でどう配置・移動させるか |
| 表層 | どのような視覚表現にするか |
FE深掘り
8. FEでは画面設計・入力チェック・Webデザインまで具体化する
分かりやすい画面と、誤入力を検出する仕組みを両方設計します。
画面設計では、情報の関係性、操作順序、入力・出力の分かりやすさを考えます。入力チェックは誤った値を早い段階で検出し、後続処理へ不正データを流しにくくするために使います。
ニューメリックチェックは数値形式か、フォーマットチェックは所定形式か、リミットチェックは上限・下限内か、組合せチェックは項目間の組合せが妥当かなどを確認します。
レスポンシブWebデザインでは画面幅などに応じてレイアウトを調整し、複数種類の端末で利用しやすくします。
UXライティングではボタン、エラー、説明文などの言葉を、利用者が迷わず次の行動を選べるよう設計します。
FE深掘り
9. FEでは人間中心設計とユーザビリティ評価で反復改善する
設計者の想像だけで使いやすさを決めず、利用者と利用状況を確認します。
人間中心設計では、利用者、利用目的、利用環境を理解し、要求を明確にし、設計案を作り、利用者の観点で評価して改善する流れを反復します。
ユーザビリティテストでは、代表的な利用者に実際のタスクを行ってもらい、成功率、所要時間、迷い、発言などを観察して問題を見つけます。
ヒューリスティック評価では、ユーザビリティの原則や経験則に基づき、専門家などがインタフェースを点検します。利用者テストと目的・方法が異なります。
アクセシビリティでは、WebコンテンツならWCAGなどのガイドラインも参照し、知覚・操作・理解・技術的な利用可能性を考慮します。
基本情報ではここまでつなげる
- 情報アーキテクチャのラベル・チャンク・ナビゲーションを説明できる
- UX五段階モデルの戦略→要件→構造→骨格→表層を順に説明できる
- ニューメリック・フォーマット・リミット・組合せチェックを区別できる
- レスポンシブWebデザインとUXライティングの目的を説明できる
- 人間中心設計が利用者理解と評価を反復する考え方だと説明できる
- ユーザビリティテストとヒューリスティック評価を区別できる
- アクセシビリティとユニバーサルデザインを関連付けて説明できる
最後に「見せる→操作する→評価する」で整理する
- 近接・整列・反復・対比で情報の関係を見せる
- LATCHで情報の並べ方を選ぶ
- シグニファイアと適切なUI部品で操作の意味を伝える
- アクセシビリティとユニバーサルデザインで利用者の多様性へ配慮する
- FEでは情報アーキテクチャとUX五段階で上流から画面へ落とし込む
- 入力チェックとレスポンシブ設計で具体的なUI品質を高める
- 人間中心設計とユーザビリティ評価で利用者の実際の行動から改善する
UI/UXは『見た目がきれいか』だけではありません。利用者が必要な情報を見つけ、意味を理解し、誤りなく目的を達成できるかという一連の体験で評価します。
重要用語
- 情報デザイン
- 近接
- 整列
- 反復
- 対比
- LATCH
- シグニファイア
- ユーザビリティ
- アクセシビリティ
- ユニバーサルデザイン
- GUI
- ラジオボタン
- チェックボックス
- VUI
- NUI
- 情報アーキテクチャ
- ナビゲーション
- UXデザイン
- レスポンシブWebデザイン
- 人間中心設計
- ユーザビリティテスト
- ヒューリスティック評価
- WCAG