Instiq
第3章 · 技術要素·v1.0.0·更新 2026/7/9·読了目安 約11分

変更要約: 初版

3.1情報デザインとUX(ユニバーサルデザイン・UX/UI・アクセシビリティ・ヒューマンインタフェース)

この節の要点

誰もが使える製品を目指すユニバーサルデザイン、利用者の体験全体を設計するUX(ユーザーエクスペリエンス)と操作画面を設計するUI(ユーザーインタフェース)の違い、障害の有無によらず情報へアクセスできるアクセシビリティ、人と機械のやり取りを扱うヒューマンインタフェース(GUI・音声UI・ジェスチャ操作)、情報を利用者が理解しやすい形に整理する情報の構造化(メニュー階層・カード分類法)を学びます。

ITシステムは技術的に正しく動くだけでは不十分で、実際に使う人が迷わず目的を達成できるかが同じくらい重要です。基本情報技術者試験では、見た目の美しさではなく「誰が」「どんな状況で」使うかという設計思想の違いを問う出題が中心になります。ユニバーサルデザインUX/UIアクセシビリティはそれぞれ異なる観点から「使える」を支える概念であり、混同すると設問の意図を取り違えます。

3.1.1ユニバーサルデザインとアクセシビリティ

  • ユニバーサルデザイン=年齢・障害の有無・言語などによらず、できるだけ多くの人がそのまま使えるように最初から設計する考え方(例:段差のない入口、直感的なピクトグラム)。特定の人のために後から改修するバリアフリーとは出発点が異なる。
  • アクセシビリティ=視覚・聴覚・運動機能などに制約がある利用者でも情報やサービスに到達・利用できること。Webでは代替テキスト(alt属性)・十分な色のコントラスト・キーボードのみでの操作・スクリーンリーダー対応などが具体策になる。ユニバーサルデザインが設計思想全体を指すのに対し、アクセシビリティは到達可能性という個別の性質に焦点を当てる。

3.1.2UX/UIとヒューマンインタフェース

  • UI(ユーザーインタフェース)=利用者とシステムが接する具体的な操作画面や操作方法(ボタン配置・画面遷移・入力フォーム)。UX(ユーザーエクスペリエンス)=製品を知ってから使い終えるまでの体験全体(使いやすさだけでなく満足感・信頼感・導入前の期待も含む)。UIはUXを構成する要素の1つであり、UIが良くてもUXが悪い(例:画面は綺麗だが目的の機能にたどり着けない)ことはあり得る。
  • ヒューマンインタフェース=人と機械の情報のやり取りを担う仕組み全般。GUI(グラフィカルユーザインタフェース)はアイコン・ウィンドウ・メニューを介した操作、CUI(キャラクタユーザインタフェース)はコマンド入力が中心、近年は音声UI(スマートスピーカー等)やジェスチャ操作(タッチ・視線・身振り)も普及している。用途や利用者の身体的制約に応じて適切な様式を選ぶことが重要。
試験ポイント

「ユニバーサルデザインは最初から誰もが使えるよう設計・バリアフリーは後から障壁を除去」「UIは操作画面そのもの・UXは体験全体でUIより広い概念」「アクセシビリティは到達可能性に焦点」が最頻出です。「見た目が良い=UXが良い」という誤解を突く設問や、GUI/CUIの特徴を状況に当てはめて選ばせる設問も定番です。

社内の経費精算システムを刷新する場面を想定しましょう。開発チームがボタンの色を洗練させ、アイコンを最新のデザインに揃えても、視覚障害のある社員がスクリーンリーダーで読み上げた際にボタンの用途が伝わらなければ、それはアクセシビリティの欠如です。さらに、精算申請の手順が5画面にまたがり、どの段階まで進んだか分からず何度も差し戻される設計であれば、個々の画面(UI)は整っていてもUX全体としては失敗しています。この場合の改善の順序は、まず情報を利用者の思考の流れに沿って整理する情報の構造化(例:申請ステップを「入力→確認→提出→承認状況」の4段階に明示し、現在地を常に表示する)から着手し、次に各画面のUI(入力フォームの配置・エラーメッセージの分かりやすさ)を整える、という流れが自然です。加えて、色だけで必須項目を示す設計(赤枠のみ)は色覚特性によっては伝わらないため、アイコンやテキストラベルを併用するのがユニバーサルデザインの実践例です。ヒューマンインタフェースの選択でも、外出先の申請者向けにスマートフォンでの音声入力(音声UI)を選択肢として用意すれば、キーボード入力が難しい状況でも操作できるようになり、UX全体の底上げにつながります。

概念焦点具体例
ユニバーサルデザイン最初から誰もが使える設計段差のない入口、直感的アイコン
アクセシビリティ情報・サービスへの到達可能性alt属性、十分なコントラスト
UI具体的な操作画面ボタン配置、入力フォーム
UX利用開始から終了までの体験全体満足感、導入前の期待
注意

ひっかけ: 「UIを改善すればUXも自動的に改善する」は誤りです。UIはUXを構成する一部にすぎず、手順の分かりにくさや情報構造の混乱はUIの見た目を整えても解消しません。また「アクセシビリティ対応は障害のある利用者だけのための特別対応」も誤りで、字幕や高コントラスト表示は健常者にとっても有用(騒がしい環境・屋外の強い日差し等)であり、誰にとっても価値がある改善です。「ユニバーサルデザイン=バリアフリー」と同一視するのも誤りです。

UD・UX/UI・アクセシビリティの図。
使いやすさの設計

3.1.3この節のまとめ

  • ユニバーサルデザイン=最初から誰もが使える設計・バリアフリー=後から障壁除去。両者を混同しない
  • UI=具体的な操作画面・UX=体験全体(UIより広い)。「見た目が良い=UXが良い」とは限らない
  • アクセシビリティ=到達可能性(alt・コントラスト・キーボード操作等)。GUI/CUI/音声UI/ジェスチャは状況に応じ選ぶ

進捗の記録にはログインが必要です。

理解度チェック

(軽い確認用)

Q1. あるWebサイトで、必須入力項目を赤い枠線だけで示していたところ、一部の利用者から「どの項目が必須か分からない」という指摘を受けた。最も適切な改善はどれか。

Q2. あるアプリは画面デザインを一新して高い評価を得たが、申請の完了までに必要な手順が利用者に伝わらず、途中離脱が増えた。この状況を最も的確に説明しているものはどれか。

理解度を確認第3章「技術要素」の問題を解く