体系学習
情報デザイン・UI・UXを使いやすさから理解する
情報デザインの四原則、LATCH、シグニファイア、GUI、アクセシビリティを整理し、FEでは情報アーキテクチャ、UX五段階、画面設計、人間中心設計まで深掘りする。
対象資格:ITパスポート / 基本情報技術者試験
目安時間:35分
このページで理解できること
- 近接・整列・反復・対比を目的から区別できる
- LATCHの五つの整理軸を説明できる
- シグニファイア、ユーザビリティ、アクセシビリティを区別できる
- GUI部品を選択ルールに応じて使い分けられる
- ユニバーサルデザインの目的を説明できる
- FEでは情報アーキテクチャとUX五段階を説明できる
- FEでは入力チェック、人間中心設計、ユーザビリティ評価を区別できる
ITパスポート:情報デザインの原則、LATCH、シグニファイア、ユーザビリティ、アクセシビリティ、GUI部品、VUIやジェスチャーUI、ユニバーサルデザインを理解する。
情報デザインと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)は、音声やジェスチャーなど、人が自然に行う動作や表現を活用したインタフェースの考え方です。
ユニバーサルデザインは、年齢、文化、障害の有無、能力の違いなどにかかわらず、できる限り多くの人が利用しやすいように設計する考え方です。
色だけで状態を伝えず文字や形も併用する、十分なコントラストを確保する、分かりやすいラベルを付けるなど、複数の知覚・操作方法を考慮します。
ITパスポートではここまでを確実に
- 近接・整列・反復・対比の目的を具体例から区別できる
- LATCHのLocation・Alphabet・Time・Category・Hierarchyを説明できる
- シグニファイアが操作方法を伝える手掛かりであると説明できる
- ユーザビリティとアクセシビリティを区別できる
- ラジオボタンとチェックボックスを選択ルールから使い分けられる
- ジェスチャーUI、マルチタッチ、VUIの基本を説明できる
- ユニバーサルデザインの目的を説明できる
最後に「見せる→操作する→評価する」で整理する
- 近接・整列・反復・対比で情報の関係を見せる
- LATCHで情報の並べ方を選ぶ
- シグニファイアと適切なUI部品で操作の意味を伝える
- アクセシビリティとユニバーサルデザインで利用者の多様性へ配慮する
- FEでは情報アーキテクチャとUX五段階で上流から画面へ落とし込む
- 入力チェックとレスポンシブ設計で具体的なUI品質を高める
- 人間中心設計とユーザビリティ評価で利用者の実際の行動から改善する
UI/UXは『見た目がきれいか』だけではありません。利用者が必要な情報を見つけ、意味を理解し、誤りなく目的を達成できるかという一連の体験で評価します。
重要用語
- 情報デザイン
- 近接
- 整列
- 反復
- 対比
- LATCH
- シグニファイア
- ユーザビリティ
- アクセシビリティ
- ユニバーサルデザイン
- GUI
- ラジオボタン
- チェックボックス
- VUI
- NUI
- UXデザイン