ユーザーインタフェースと情報メディア

ユーザーインタフェースの基礎と GUI 部品

ユーザーインタフェース（UI）は、人間とシステムの接触面です。同じ機能でも接触面の作り方で使いやすさが変わるため、試験では「この部品・この仕組みを何と呼ぶか」を定義文から当てさせる問題が中心になります。直近 3 年はこの用語当てが続いており、シラバス Ver.7.2 の用語例に載っている部品名がそのまま出題されています。

情報アーキテクチャ ― 情報を組織化してから並べる

情報アーキテクチャ（IA、インフォメーションアーキテクチャ）は、大量の情報を利用者が見つけられる形に組織化・構造化する設計です。組織化の軸は五十音順・カテゴリ・時系列などで、構造化の型は次の 4 つを押さえます。

要素の呼び名も用語例に並びます。ラベルは情報に付ける見出し語、チャンクは人が一度に把握できる情報のかたまり、ナビゲーションは現在地と行き先を示す仕掛けです。メタデータ（データについてのデータ）で意味を機械可読にし、リンクの意味まで機械が扱えるようにする構想がセマンティック Web です。

UI の種類 ― CUI から NUI・VUI まで

文字で命令を打つ CUI（Character User Interface）に対し、アイコンやウィンドウをポインティングデバイスで直接操作するのが GUI（Graphical User Interface）です。さらに、機器の存在を意識させない自然な振る舞いで操作する方式をまとめて NUI（Natural User Interface）と呼び、そのうち音声で操作するものが VUI（Voice User Interface）です。

GUI 部品カタログ

定義文から名称を選ばせる形式なので、「1 つだけ選ぶのか、複数選べるのか」「常に見えているのか、操作して初めて現れるのか」の 2 軸で区別すると迷いません。

繰り返し現れる設計上の問題と、その定番の解き方に名前を付けて再利用できるようにしたものが UI デザインパターンです。上の表に並ぶカルーセル・アコーディオン・ハンバーガーメニューはいずれもその実例で、名前が共有されているからこそ「定義文 → 名称」という出題が成立します。

ナビゲーション部品 ― パンくずリストが最頻出

サイト内での「現在地」と「戻り道」を示すのがナビゲーション部品です。パンくずリストは、トップページから現在のページまでの経路（階層）を横一列に並べて示します。似た部品との違いは「何を示すか」で切り分けます。

アイコンの特性（JIS X 9303-1）

アイコンの良し悪しを測る特性が規格で定義されています。語感と定義がずれている習得性が狙われました。

UX デザインと画面・帳票・コード・Web 設計

UI が「接触面」なのに対し、UX（User Experience）は利用前の期待から利用後の満足までを含む体験全体です。この小分類はここ 10 年の中分類 7 では 1 問も出ていないため、用語の定義を 1 行ずつ確認する程度で十分です。ただし Web デザインだけは別で、4 問出ています。

UX デザインと情報デザイン

画面設計と入力チェック

入力段階で誤りを止めるのが入力チェック（バリデーション）です。1 件のデータは、形式 → 値の範囲 → 他データとの整合、という順で段階的にふるいにかけます（図 8-2）。

入力方式は、あらかじめ枠を用意して埋めさせる穴埋め方式と、選択肢から選ばせるメニューインプット方式に大別されます。誤入力を減らしたいなら後者です。画面設計では、画面構成・情報の検索性・情報の関係性・利用者の用語（社内略語でなく利用者の言葉）・情報提示ストーリーを検討し、ストーリーボードで画面遷移を可視化します。入力量が多い画面では、全体を送らずに一部だけ送る部分送信で応答性を上げます。

帳票設計とコード設計

帳票設計では、プリンターの種類・複写方法といった装置制約事項に加え、誰がいつ何部見るか・どれだけ保存するかという出力特性と、どの欄に手書きで書き込ませるかという入力特性を先に確認します。罫線や固定文字をあらかじめ用意しておき、可変データだけを重ねて印刷する仕組みがフォームオーバーレイです（専用の事前印刷用紙を減らせます）。コード設計は次の 5 種類を対比で覚えます。

Web デザインとレスポンシブ Web デザイン

この小分類からは 10 年で 4 問出ており、中分類 7 の中では厚い部類です。レスポンシブ Web デザインは、端末ごとに別ページを用意するのではなく、単一の HTML を画面幅に応じて組み替える手法です。その切替えを担う CSS の機能がメディアクエリで、画面幅などの条件（ブレークポイント）ごとに適用するスタイルを書き分けます。

/* 画面幅 768px 以上のときだけ 2 段組にする */
@media (min-width: 768px) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

ユーザビリティ評価と人間中心設計

中分類 7 で最も出る論点がここです。10 年 19 回で 4 問あり、うち 3 問（令和元年秋 問 24、令和 4 年春 問 24、令和 7 年春 問 22）は同じ論点の再出題でした。「誰が実施する手法か」で分類できれば、そのまま得点になります。

ユーザビリティの定義 ― 有効さ・効率・満足度

JIS Z 8521（ISO 9241-11）は、ユーザビリティ（使用性）を「特定の利用状況において、特定の利用者が、特定の目標を達成する際の有効さ・効率・満足度の度合い」と定義します。3 要素はそれぞれ測るものが違い、測定法との対応がそのまま 1 問になります。

評価手法 ― 利用者が参加するか、専門家だけか

評価手法は誰が評価するかで 2 つに割れます。利用者に実際に触ってもらう手法と、専門家が経験則に照らして机上で点検する手法です。この対応を入れ替えた組合せが定番の誤答肢です。

専門家が照らす「経験則」の代表が、ヤコブ・ニールセンが整理した 10 のユーザビリティヒューリスティックスです。システム状態の可視化、現実世界との一致、利用者の制御と自由、一貫性と標準への準拠、エラーの予防、記憶より認識、柔軟性と効率性、最小限で美的なデザイン、エラーからの回復支援、ヘルプと文書の 10 項目からなり、ヒューリスティック評価法はこの種のリストを 1 項目ずつ画面に当てて問題を洗い出します。NEM のように利用者に操作させる手法と違い、実利用者を集めずに実施できるのが専門家型の特徴です。

人間中心設計（JIS Z 8530 / ISO 9241-210）

評価は 1 回で終わりません。人間中心設計（HCD）は、利用状況を理解するところから始めて設計と評価を繰り返し、要求を満たすまで回すプロセスです。4 つの活動の名称と順序が問われます。

プロセスを回す材料として、代表的な利用者像を 1 人の人物としてまとめたペルソナ、利用前後の行動と感情を時系列に並べたカスタマージャーニーマップ、早い段階で試作を作るプロトタイピングが使われます。

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

ユーザビリティが「特定の利用者にとっての使いやすさ」なのに対し、アクセシビリティは「高齢者・障害者を含む多様な人がそもそも利用できるか」です。10 年で 3 問（平成 28 年秋 問 24、平成 29 年秋 問 24、平成 30 年春 問 24）出ており、うち 2 問は要旨・正解とも同じ再出題でした。

色だけに頼らない ― 単一チャネル依存を疑う

出題の核は一貫して「1 つの知覚チャネルだけに情報を載せない」です。色覚特性は人によって異なるため、赤い枠だけで「必須」を表すと、その色差を判別しにくい人には情報が届きません。色に加えて文字でも示せば、色が見えなくても伝わります（図 8-5）。

規格 ― JIS 番号と守備範囲の対応

この分野の規格は番号を取り違えさせる問題が作りやすく、実際に 4 つの JIS が別々の回で問われています。番号と守備範囲を 1 対 1 で結び付けておきます。

この 4 つは番号だけを差し替えた誤答肢が作りやすいので、X 8341 ＝アクセシビリティ、Z 8521 ＝ユーザビリティ、Z 8530 ＝人間中心設計、X 9303 ＝アイコンの 4 点セットで覚えます。あわせて、アイコンの習得性が「覚えやすさ」ではなく「理解した後の思い出しやすさ」である点も、語感に引きずられないようにします。

Web に特化した取組みが W3C の WAI（Web Accessibility Initiative）で、そこが策定するガイドラインが WCAG（Web Content Accessibility Guidelines）です。WCAG は「知覚できる・操作できる・理解できる・堅牢である」の 4 原則を軸に、達成基準を A / AA / AAA の 3 段階で示します。JIS X 8341-3 は WCAG と整合しており、日本の公的サイトでは AA 相当が目安とされます。

ユニバーサルデザインの 7 原則

ユニバーサルデザインは「最初から誰にでも使える形で作る」考え方です。7 原則は暗記より趣旨の理解で足ります。

関連語も 1 行で押さえます。インクルーシブデザインは、排除されがちな人を設計の初期から参加させる手法です（完成品を後から配慮するのではありません）。エルゴノミクス（人間工学）は人の身体・認知特性に機器を合わせる学問、ピクトグラムは言語に依存しない絵記号、UD フォントは「0 と O」「1 と l」のような紛らわしい字形を見分けやすくした書体です。イラストによる説明、音声読み上げ、Undo 機能なども、この考え方を情報技術に応用した例に当たります。

文字と音声のデジタル表現とデータ量計算

ここから中分類 8（情報メディア）です。19 回で 23 問、1 回平均 1.2 問が出ており、0 問の回はありません。うち計算問題は 5 問で、そのすべてが音声・動画のデータ量と標本化に関するものです。計算の型を持っていれば確実に取れるのがこの分野の性格です。

文字のデジタル表現

文字は文字コードで数値に対応付けます。日本語を扱うために複数の方式が併存してきた経緯を押さえます。

音声のデジタル化 ― 標本化・量子化・符号化

アナログの音波をデジタルにする手順が PCM（Pulse Code Modulation、パルス符号変調）です。① 一定間隔で値を採る標本化（サンプリング）、② 採った値を決まった段階値に丸める量子化、③ 段階値を 2 進符号にする符号化、の 3 段階です（図 8-6）。

元の波形と量子化後の値との差が量子化誤差で、量子化ビット数を増やすほど小さくなります。1 秒あたりの標本数が標本化周波数（サンプリング周波数、単位 Hz）、1 標本あたりのビット数が量子化ビット数です。音楽 CD は 44.1 kHz・16 ビット・2 チャネル（ステレオ）が標準です。

計算の型 ① 音声のデータ量

ADPCM（適応的差分パルス符号変調）は、直前の標本との差分を、変化の大きさに応じた幅で符号化することでビット数を減らす方式です。PCM をそのまま記録するより小さくなります。

計算の型 ② 標本化定理

音声のファイル形式

静止画・色・圧縮

静止画の小分類は 10 年で 5 問と、中分類 8 の中では 2 番目に厚い区分です。内訳は SVG が 3 問（平成 29 年秋 問 25、令和 3 年春 問 27、令和 7 年春 問 23）、アウトラインフォントが 2 問（令和 3 年秋 問 24、令和 6 年春 問 24）で、どちらもベクター表現の問題です。ラスターとベクターの対比を軸に組み立てます。

ラスターとベクター ― 拡大したときに何が起きるか

ラスターデータ（ビットマップデータ）は画像を画素（ピクセル）の集まりとして持ちます。拡大すると 1 画素が引き伸ばされ、輪郭がギザギザになります。ベクターデータは図形を座標と数式（直線・曲線・塗り）で持つので、拡大しても描き直されるだけで劣化しません（図 8-8）。

静止画のファイル形式

計算の型 ③ 静止画のデータ量

色深度 24 ビットは、光の 3 原色（R・G・B）に 8 ビットずつ割り当てたフルカラーです。2²⁴ ＝ 16,777,216 色を表せます。画像の細かさを表す単位は、印刷では dpi（dot per inch）、画面では ppi（pixels per inch）です。

色の表現

ラスター画像の表示技法

「ギザギザ」か「色数」かで、次の 2 つを判別します。両方とも「CG の要素技術に関する記述のうち適切なもの」という一般形で出題されました。

圧縮技術 ― 可逆と非可逆

元のデータに完全に戻せるのが可逆圧縮、戻せないのが非可逆圧縮です。文書やプログラムは 1 ビットの違いも許されないので可逆、写真や音楽は人が気付かない差なら捨ててよいので非可逆を使います。圧縮率は「どれだけ小さくなったか」の指標で、効率のよいデータ保存とネットワーク負荷の軽減が目的です。

動画とストリーミング

動画の小分類は 10 年で 4 問。H.264/MPEG-4 AVC の定義が 2 問（令和元年秋 問 25、令和 4 年秋 問 25）、帯域幅の計算が 2 問（令和 2 年 10 月 問 25、令和 6 年秋 問 26）で、後者は 2 回とも同じ数値でした。取り逃しの許されない 2 テーマです。

動画の仕組みと計算の型 ④ 帯域幅

動画は静止画（フレーム）を高速に切り替えたものです。1 秒あたりのフレーム数がフレームレート（fps）です。配信に必要な回線速度は「1 秒間に送るビット数」なので、バイトに直さずビットのまま答えます（図 8-9）。

動画の符号化方式とコンテナ

試験では「符号化方式（コーデック）」と「入れ物（コンテナフォーマット）」を混ぜた選択肢が作られます。H.264/MPEG-4 AVC は動画データの圧縮符号化方式であって、ファイル形式でも音声形式でもありません。

走査方式と編集・配信

CG と XR ― マルチメディア応用

この章で最も出る節です。マルチメディア応用の小分類は 10 年で 8 問と、中分類 8 の 23 問の 3 分の 1 強を占めます。そのうち 7 問が 3 次元 CG に関するもので、レンダリング 3 問（平成 30 年秋 問 25、平成 31 年春 問 25、令和 5 年秋 問 25）、ラジオシティ法 2 問（令和 3 年秋 問 25、令和 5 年春 問 25）、レイトレーシング法 1 問（令和 4 年春 問 25）、サーフェスモデル 1 問（平成 30 年春 問 25）です。

3 次元 CG のパイプライン

3 次元 CG は「形を作る → 見え方を計算する → 表示する」の順で進みます。この工程の名前が問われます。

シェーディングの代表手法として、ポリゴンの頂点の輝度を線形補間するグローシェーディングと、法線ベクトルを補間してから画素ごとに輝度を求めるフォンシェーディングがあります。後者のほうが計算量は多いものの、ハイライトがなめらかに出ます。

モデルの表現方法

描画技法 ― 判別キーで覚える

「3 次元 CG に関する記述のうち適切なもの」という一般形で出るため、技法名と説明文の組合せを入れ替えた誤答肢が並びます。説明文の中のキーワード 1 語で判別します（図 8-10）。

隠面消去の解法は Z バッファ法だけではありません。走査線ごとに視点との走査面を作り、物体との交差線分の奥行きを判定するスキャンライン法、遠くの物体から先に描いて手前の物体で上書きするペインタのアルゴリズムも同じ目的の手法で、令和 4 年春 問 25 では技法名を伏せた誤答肢として並びました。

XR と応用分野

立体視の方式も 1 度出題されています（令和 2 年 10 月 問 11）。アクティブシャッタ方式は、左目用と右目用の映像をディスプレイに交互に表示し、それに同期して眼鏡の左右のレンズを交互に透過・遮断させます。対して偏光方式は偏光の向きで左右を分離し、眼鏡は電気的に動きません。実際の誤答肢には、赤と青のフィルタを付けた眼鏡で見るアナグリフと、網目状のフィルタで裸眼立体視を実現するパララックスバリア方式も並びました。

ひっかけポイント

理解度チェック（科目 A 形式）

まとめ

この章は科目 A で例年 2 問前後。10 年 19 回の 36 問のうち 22 問が同じ論点の再出題なので、過去に出た形をそのまま覚えるのが最短経路です。次の表が、そのまま出ても解ける必要最小限です。

計算は 4 つの型（音声のデータ量・標本化定理・静止画のデータ量・動画の帯域幅）で足ります。共通する分かれ目は単位です。「何バイトか」なら ÷ 8、「帯域幅・伝送速度はいくらか」なら ÷ 8 は不要。この 1 点を最後に確認するだけで、用意された誤答値を踏みません。

次の第 9 章では、この章で扱った「データをどう表現するか」から一段進んで、大量のデータをどう構造化し、正しく取り出し、矛盾なく更新するか ― データベースの設計・SQL・トランザクションに進みます。