››
テクノロジ系 45 問のうち、この章は **4〜5 問ほどの出題があります。「Web サイトや案内板で、どう並べたら伝わりやすい？」「スマホのアプリは目が不自由な人でも使える？」「写真と図で保存形式が違うのはなぜ？」「VR と AR って何が違うの？」といった、人が情報をどう受け取るかの設計と、画像・音声・動画のデジタル表現**を扱う章です。
出題は**用語 → 用途のマッチング**型が中心。「ポケモン GO は AR か VR か」「ロゴは JPEG か PNG か」のように、似た概念の使い分けが判別できるかを問われます。技術の深い話ではなく、「どれをどう使うか」を押さえるのがコツ。
この章を読み終えた時点で、以下ができるようになっていることを目指します。
試験では: 「〜を作りたい場合、どの形式/技術を選ぶか」の形で問われる。たとえば「ロゴを拡大縮小しても劣化させたくない → SVG」「印刷入稿 → CMYK」のように、**ゴール → 道具**の逆引きができると得点しやすい。
「情報デザイン」とは、情報を受け手に正しく・速く・気持ちよく伝えるための設計。Web ページ、アプリ、駅の案内板、図書館の本の並び——すべて情報デザインの対象です。たとえば駅のホームで「行き先 → 種別 → 時刻」の順で書くか「時刻 → 行き先」の順で書くかは、乗客がどう情報を探すかに合わせて設計されています。この節では、その基本原則を見ていきます。
情報デザインは、情報を受け手が理解しやすいように整理・構造化・視覚化する設計手法です。単なる「見た目を綺麗にする」ことではなく、何をどの順で見せるか、どう分類するか、誰に最適化するかまでを含みます。
具体例: ECサイトで商品を「人気順」「価格順」「新着順」で並べ替えられるのは情報デザインの一環。同じ商品データでも、**並びの軸を変えるだけで利用者の行動は大きく変わります。また、地震速報アプリが「最も重要な震度情報」を大きく、「詳細地域」を小さく表示するのも、情報の重要度に応じた視覚的階層**という情報デザインの原則。
ポイント: 情報デザインは「伝えたいこと」より「受け手がどう使うか」を軸に考える。開発者視点でなく**利用者視点**で情報を組み立てるのが本質。
情報をどう並べるかを考えるとき、**5 つの軸**があります。頭文字を取って LATCH（ラッチ）と呼ばれ、情報アーキテクトの Richard Saul Wurman が提唱したものです。「何で並べると最も使いやすいか」を考える出発点になります。
| 略 | 英語 | 意味 | 例 |
|---|---|---|---|
| L | Location | 場所 | 地図、フロアマップ、店舗検索 |
| A | Alphabet | アルファベット順 / 五十音順 | 辞書、人名リスト、書架 |
| T | Time | 時間 | 年表、予定表、投稿日時順 SNS |
| C | Category | カテゴリ | ショッピングサイトの分類、図書十進分類 |
| H | Hierarchy | 階層・ランク | ランキング、組織図、売上順 |
実例の使い分け: 本屋では「カテゴリ（ジャンル）→ 著者名（アルファベット）」の 2 段階、アマゾンでは「カテゴリ → 人気順（ランク）」、スマホの連絡先は「五十音順」、災害情報サイトは「時間（発生順）」。扱う情報の性質によって最適な軸が違うのがポイントです。
覚え方: 「LATCH（ラッチ）で情報の扉を開ける」 と覚える。Location / Alphabet / Time / Category / Hierarchy の 5 つ。
製品・サービスを利用するときに**利用者が感じること全体が UX（User Experience）。「使いやすい」だけでなく、「気持ちいい**」「信頼できる」「また使いたい」まで含む概念です。よく混同される UI（User Interface）は、UX を実現するための**接点（画面・ボタン・音声等）のこと。UI は道具、UX は体験**と覚えると整理しやすい。
| 用語 | 意味 |
|---|---|
| UX（User Experience） | 利用者が得る総合的な体験（使いやすさ + 感情 + 信頼） |
| UI（User Interface） | 利用者とシステムの接点（画面・ボタン・音声等） |
| CX（Customer Experience） | 顧客体験全般（購買〜サポートまで） |
| ユーザビリティ | 使いやすさの度合い（ISO 9241-11 で「有効さ・効率・満足度」と定義） |
| HCD（Human-Centered Design） | 人間中心設計。利用者を起点に設計するプロセス（ISO 9241-210） |
具体例: 飛行機のチケット予約サイトで「ボタンが押しやすい（UI が良い）」だけでは UX は完結しません。検索結果が分かりやすい / 決済が安心 / メール案内が丁寧 まで含めて初めて UX が良いと評価されます。UI は UX の一部要素。
引っかけ: 「UI を良くすれば UX も良くなる」は**半分正解・半分間違い**。UI は UX の一部にすぎず、遅いサーバ・不親切なサポート・分かりにくい料金体系があれば UX は悪いまま。UX ≧ UI の包含関係を意識する。
アクセシビリティ（Accessibility）は、高齢者や障害者を含めた「誰もが」情報やサービスにアクセスできる度合い。特に Web の場合、視覚障害者・聴覚障害者・色覚特性のある人・高齢者・操作が不自由な人——すべてが対象。公的機関サイトでは**法令で義務化**されている国も多く、日本でも JIS X 8341-3 で基準が定められています。
| 用語 | 意味 |
|---|---|
| Web アクセシビリティ | Web コンテンツが誰もが利用可能であるか。JIS X 8341-3 で規格化 |
| ユニバーサルデザイン | 最初から誰もが使える設計を目指す考え方（7 原則） |
| バリアフリー | 既存の障壁を取り除くアプローチ（後から対応） |
| WAI-ARIA | HTML に補助情報を付加してスクリーンリーダー対応を強化する仕様 |
| altテキスト | 画像の代替テキスト。<img alt="..."> で指定 |
具体例: Web サイトで**画像に alt テキストを付けるのはアクセシビリティの基本。視覚障害者のスクリーンリーダーが画像内容を読み上げるために必要。また、リンクを色だけで区別しない（下線も付ける）のは色覚特性への配慮。動画に字幕**を付けるのは聴覚障害者対応。
引っかけ: アクセシビリティ vs ユーザビリティ の違い。ユーザビリティは「健常な利用者が使いやすいか」、アクセシビリティは「誰でも使えるか」。アクセシビリティの範囲がより広く、特に**障害者対応**を明示的に含む。
頻出: ユニバーサルデザイン（事前対応） vs バリアフリー（事後対応）。「最初から使える設計」= UD、「障壁を取り除く」= バリアフリー。駅のエレベータ設置はバリアフリー、自動ドアの幅を車椅子対応で設計するのはユニバーサルデザイン。
コンピュータと人間のやりとりは、**入力手段で大きく分類されます。昔はコマンドを打つしかなかった（CUI）ところから、マウスで操作する GUI、声で指示する VUI、指で触る NUI へと進化してきました。試験ではこの系統と、GUI を構成する部品名**が頻出します。
| 種類 | 正式名 | 入力手段 | 例 |
|---|---|---|---|
| CUI | Character User Interface | キーボード（文字） | Linux ターミナル、Windows コマンドプロンプト |
| GUI | Graphical User Interface | マウス・キーボード | Windows、macOS、Web ブラウザ |
| VUI | Voice User Interface | 声 | Amazon Alexa、Google Assistant、Siri |
| NUI | Natural User Interface | タッチ・ジェスチャ・視線 | スマホ、タブレット、Kinect |
使い分けの実例: プログラマが**大量ファイルを一括操作したいときは CUI（コマンドで書ける）、一般利用者が PC を使うときは GUI（直感的）、手が塞がっている料理中は VUI（Alexa に「タイマー 3 分」）、スマホは NUI（指でスワイプ）。状況で使い分ける**のがポイント。
覚え方: Command（文字） / Graphical（絵） / Voice（声） / Natural（自然動作） の頭文字。系譜は CUI → GUI → NUI/VUI の順で、**より直感的・より自然**へ進化してきた。
GUI は**部品（ウィジェット）の組み合わせ**で画面を構成します。試験では「ラジオボタン vs チェックボックス」の混同問題が定番で、毎年のように出題されます。
| 要素 | 役割 | 例 |
|---|---|---|
| ウィンドウ | アプリごとの表示領域 | ブラウザの各タブ |
| メニュー（メニューバー / プルダウン） | 機能の一覧から選択 | Word の「ファイル」「編集」… |
| ダイアログボックス | 確認・入力用の小窓 | 「保存しますか？」のポップアップ |
| アイコン | 機能を絵で表現 | デスクトップのアプリ・ごみ箱 |
| ラジオボタン | 複数の選択肢から 1 つ選ぶ | 性別（男/女）、支払方法 |
| チェックボックス | 複数の選択肢から 複数選べる | 好きな食べ物（複数選択可） |
| プルダウン（ドロップダウン） | リストから選択 | 国名・都道府県の選択 |
| テキストボックス | 文字入力欄 | 検索ボックス、フォーム |
| スライダー | 連続値の指定 | 音量・明るさの調整 |
頻出引っかけ: ラジオボタン = 1 つだけ（車のラジオで同時に 2 局聞けないのと同じ発想）、チェックボックス = 複数可。逆に問われることが多い**定番の引っかけ**。
Web ページは 3 つの言語（HTML・CSS・JavaScript）で構成されます。HTML は骨格・CSS は見た目・JavaScript は動き、と役割分担されていて、この 3 つが分業することで**保守しやすい**作りになります。近年はスマホとパソコンの両方で見ることが増えたため、画面幅に応じて自動でレイアウトを変えるレスポンシブデザインが主流です。
| 要素 | 役割 |
|---|---|
| HTML | 文書の**構造**を記述（見出し・段落・リンク等） |
| CSS（Cascading Style Sheets） | 見た目（色・配置・フォント・サイズ）を定義 |
| JavaScript | ブラウザ上で動的処理（アニメ・検索候補・フォーム検証） |
| レスポンシブデザイン | PC/スマホ/タブレットで自動的にレイアウト調整 |
| CMS（Content Management System） | WordPress 等、コンテンツ更新を支援するシステム |
具体例: 同じ Web サイトでも、PC で見ると**横並び 3 カラム**、スマホで見ると**縦 1 列**に自動で切り替わるのはレスポンシブデザイン。CSS の メディアクエリで画面幅を判定して切り替えています。
引っかけ: HTML だけ変えれば見た目も変わるは誤り。**HTML は構造、CSS は見た目**と役割が分かれている。色を変えたい時に HTML をいじる（
<font>タグ等）のは古いやり方で、現代では CSS で一括管理するのが標準。
音声・画像・動画をコンピュータが扱える形にするには、アナログな情報を数値の列（0 と 1）に変換する必要があります。この変換を符号化（エンコーディング）と呼びます。同じ音声でも「そのまま数値化」するか「聞こえない部分を捨てて小さく」するかで、ファイルサイズも用途も変わってきます。試験では**形式名と用途の対応**が中心に問われます。
アナログ音声（連続波）をデジタル化する流れは、標本化（サンプリング）→ 量子化 → 符号化 の 3 段階。標本化は 1 秒を何等分するか（時間方向）、量子化は音の大きさを何段階で表現するか（振幅方向）、符号化はそれを 0/1 のビット列に落とす工程です。CD の音質は標本化 44.1kHz・量子化 16bit、これが音声デジタル化の「基準値」として覚えておくと便利です。
| 用語 | 意味 |
|---|---|
| PCM | Pulse Code Modulation。標準的な音声デジタル化方式 |
| **[[サンプリング周波数 | サンプリングしゅうはすう]]** |
| 量子化ビット数 | 1 標本を表現するビット数。CD は 16bit |
| ビットレート | 1 秒あたりのデータ量（kbps）。音質とサイズのトレードオフ |
形式別の特徴:
| 形式 | 特徴 | 圧縮 | 用途 |
|---|---|---|---|
| WAV | 非圧縮 PCM | なし | 音楽制作の原盤、サイズ大 |
| MP3 | [[非可逆圧縮 | ひかぎゃくあっしゅく]]の代表 | 非可逆（人間が聴き取れない音を削除） |
| AAC | MP3 改良版、同ビットレートで高音質 | 非可逆 | iTunes、YouTube |
| FLAC | 可逆圧縮の音声形式 | 可逆（音質劣化なし） | ハイレゾ音楽 |
| MIDI | 演奏情報を数値化（楽譜の符号化） | データ小 | 電子楽器・着メロ |
MIDI の独自性: MIDI は「音そのもの」ではなく「演奏情報（この音を / この長さで / この強さで）」を記録する形式。楽譜をデジタル化したもの、と考えるとわかりやすい。だからファイルサイズが極端に小さい（数 KB）のに、長い曲を表現できる。
引っかけ: 可逆圧縮（FLAC・WAV）は音質劣化なし、非可逆圧縮（MP3・AAC）は音質劣化あり。MP3 は人間の耳に聞こえにくい部分を捨ててサイズを小さくする（心理音響モデル）。一度捨てられた情報は戻らないので、MP3 を WAV に再変換しても元の音質には戻らない。
画像の表現方法は大きく 2 つ：ラスタ（ピクセルの集合）とベクタ（数式で表現）。この違いが「拡大しても劣化するか」を決めます。試験では**用途に応じた形式選び**がそのまま問われます。
| 方式 | 特徴 | 拡大時 | 例 |
|---|---|---|---|
| ラスタ（ビットマップ） | 画素（ピクセル）の集合 | ぼやける・ジャギー（ギザギザ）発生 | JPEG、PNG、GIF、BMP |
| ベクタ | 数式で線や図形を表現 | 劣化なし（何倍でも綺麗） | SVG、図面 CAD、フォント |
具体例: ロゴを**ラスタ（PNG）で保存**すると、印刷時に拡大したときにぼやけます。ベクタ（SVG）で保存すれば、名刺サイズでも看板サイズでも同じ線のシャープさで印刷できます。このため会社のロゴ・アイコン類はベクタで作るのが鉄則。写真はそもそも連続的な色の変化なので、ラスタでしか表現できません。
| 形式 | 圧縮 | 透過 | 色数 | 特徴・用途 |
|---|---|---|---|---|
| JPEG | 非可逆 | ❌ | フルカラー | 写真向き、小さく保存できる |
| PNG | 可逆 | ✅ | フルカラー + α | イラスト・ロゴ向き、透過対応 |
| GIF | 可逆 | ✅ | 256 色まで | アニメ GIF、単純なイラスト |
| SVG | — | ✅ | — | ベクタ、ロゴ・図面。拡大劣化なし |
| BMP | 非圧縮 | ❌ | フルカラー | Windows 標準、サイズ大 |
| TIFF | 可逆/非可逆切替 | ✅ | フルカラー | 印刷・高品質用途 |
| WebP | 可逆/非可逆 | ✅ | フルカラー | Google 提案、Web で高圧縮 |
使い分けの実例:
頻出: 「写真 → JPEG」「ロゴ・透過 → PNG」「アニメ → GIF」「拡大自在 → SVG」 の 4 点セットを暗記。特に 「写真を PNG で保存するとファイルサイズが巨大化する」（非可逆圧縮の恩恵がないため）という引っかけに注意。
画面のピクセルは**光の 3 原色 RGB**（赤・緑・青）を重ねて表現し、印刷物はインクの 4 原色 CMYK（シアン・マゼンタ・イエロー・ブラック）を重ねて表現します。両者は**混色の仕組みが正反対**で、画面で見た色と印刷した色が微妙に違うのはこのためです。
| 方式 | 用途 | 混色の仕組み | 構成 |
|---|---|---|---|
| RGB | 画面表示（ディスプレイ・LED） | 加法混色（光を足すほど明るく→白） | R(赤) + G(緑) + B(青) |
| CMYK | 印刷（プリンタ・雑誌） | 減法混色（インクを足すほど暗く→黒） | C(シアン) + M(マゼンタ) + Y(黄) + K(黒) |
| HSB / HSV | 色選択 UI | 色相・彩度・明度で指定 | H(色相) + S(彩度) + V/B(明度) |
RGB（加法混色）
画面：光を足すほど明るく
| R | G | B | 結果 |
|---|---|---|---|
| ● | ● | ○ | 黄 |
| ● | ○ | ● | マゼンタ |
| ○ | ● | ● | シアン |
| ● | ● | ● | 白 |
RGB すべて足すと白。用途: ディスプレイ・LED
CMYK（減法混色）
印刷：インクを足すほど暗く
| C | M | Y | 結果 |
|---|---|---|---|
| ○ | ○ | ○ | 白 |
| ● | ● | ○ | 青 |
| ● | ○ | ● | 緑 |
| ● | ● | ● | 黒（に近づく） |
3 色重ねると黒。用途: プリンタ・印刷
頻出引っかけ: RGB は「光」、CMYK は「インク」。光は足すほど明るく（最大は白）なるので「加法」、インクは重ねるほど暗く（最大は黒）なるので「減法」。画面 = RGB、印刷 = CMYK で覚える。
引っかけ: dpi と ppi は似ているが別。dpi は印刷（プリンタのインク粒密度）、ppi は画面（ディスプレイの画素密度）。両方とも「1 インチあたり」だが**測る対象が違う**。
動画は**静止画（フレーム）の連続**で、1 秒に 30 枚程度のペースで表示して動きに見せます。1 秒 30 枚の 2 時間映画は 30 × 60 × 120 = 21.6 万フレーム。これをすべて非圧縮で保存するとファイルサイズが膨大になるため、**フレーム間の差分だけ記録**するなどの圧縮技術（MPEG・H.264 等）が使われます。
重要な区別: コーデック（圧縮方式）とコンテナ（入れ物）は別物。MP4 は**コンテナ形式で、中身のコーデックは H.264 だったり H.265 だったりします。MP4 ファイルが再生できないときはコーデック側の問題**のことが多い。
| 形式 | 種類 | 特徴・用途 |
|---|---|---|
| MPEG（MPEG-2, MPEG-4） | コーデック | 動画圧縮規格群 |
| H.264 | コーデック | MPEG-4 AVC、Blu-ray・YouTube の主流 |
| H.265（HEVC） | コーデック | 4K/8K 対応、H.264 より高圧縮 |
| MP4 | コンテナ | 映像 + 音声 + 字幕を 1 ファイルに |
| AVI | コンテナ | Windows 標準コンテナ |
| MOV | コンテナ | Mac（QuickTime）標準 |
| WebM | コンテナ | Google 提案、Web 動画向け |
頻出: MPEG（規格群）/ MP4（コンテナ）は別物。MPEG という言葉が出てきたら「圧縮方式の話」、MP4 が出てきたら「ファイル入れ物の話」。この 2 つの混同が典型的な引っかけ。
圧縮は大きく 可逆圧縮（戻せる）と 非可逆圧縮（戻せない）の 2 つ。用途によって使い分けます。プログラムコードや文書は**可逆でないと使えず（1 ビット違えば動かない）、写真や音楽は非可逆**でも人間には気づかないレベルで圧縮できます。
| 方式 | 特徴 | 復元 | 例 |
|---|---|---|---|
| **[[可逆圧縮 | かぎゃくあっしゅく]]**（Lossless） | 元データに完全に戻せる | 100% 復元 |
| **[[非可逆圧縮 | ひかぎゃくあっしゅく]]**（Lossy） | データの一部を捨てて小さくする | 元には戻らない |
使い分けの鉄則:
引っかけ: PNG は可逆、JPEG は非可逆。写真を PNG で保存すると、ファイルサイズが JPEG の **5〜10 倍**になる（非可逆圧縮の恩恵を受けられないため）。写真は JPEG、イラスト・ロゴは PNG、が鉄則。
コンピュータグラフィックス（CG）は、**実写ではなくコンピュータで描いた画像・映像**の総称。2D CG（イラスト・漫画）と 3DCG（立体・映画・ゲーム）があります。そして近年、CG を **現実と融合させる技術が発展し、VR・AR・MR といった新しいメディアが生まれました。試験ではそれぞれの違いと具体例**が必ず問われます。
| 用語 | 正式名 | 意味 |
|---|---|---|
| CG | Computer Graphics | コンピュータで描画した画像・映像 |
| 3DCG | 3D Computer Graphics | 立体的な CG（ゲーム・映画・建築プレゼン） |
| VR | Virtual Reality | 仮想現実（ヘッドセットで没入・現実が見えない） |
| AR | Augmented Reality | 拡張現実（現実に情報を重ねる。ポケモン GO、スマホ翻訳） |
| MR | Mixed Reality | 複合現実（現実物体と仮想物体が相互作用。HoloLens） |
| XR | Extended Reality | VR/AR/MR の総称 |
| モーションキャプチャ | — | 人の動きをセンサで取得して CG キャラに反映 |
| レンダリング | — | 3D モデルから 2D 画像を生成する工程 |
VR/AR/MR の使い分け:
具体例: 産業での活用も広がっている。建築会社はVR で完成前の建物を顧客に見せ、自動車整備士はAR で部品の位置情報をメガネに表示し、医師はMR で患者の体に CT 画像を重ねて手術を訓練している。
| 現実度 | 名称 | 特徴 | 例 |
|---|---|---|---|
| 100% | 現実 | そのままの世界（仮想 0%） | — |
| 高 | AR（拡張現実） | 現実 + 情報重ね | ポケモン GO（スマホ越し） |
| 中 | MR（複合現実） | 現実物体と仮想物体が相互作用 | HoloLens |
| 低 | VR（仮想現実） | 完全仮想（仮想 100%） | VR ヘッドセット（Meta Quest 等） |
XR（Extended Reality）= VR / AR / MR の総称。
頻出引っかけ: VR は完全に別世界（現実が見えない）、AR は現実 + 情報重ね（ポケモン GO のように現実カメラ越しに仮想物体）、MR は AR の発展形で現実物体と仮想物体が相互作用（テーブルに置いた仮想ボールが本物の手で動かせる）。
動画・テレビの映像規格は**画素数**で区別されます。数字が大きいほど高精細で、同時にデータ量も増えるため、通信環境や表示装置に合わせて選ぶ必要があります。
| 規格 | 画素数 | 用途 |
|---|---|---|
| SD | 720×480 | アナログ放送世代 |
| HD | 1280×720 | 旧地上デジタル、低画質配信 |
| フル HD | 1920×1080 | Blu-ray、主流配信画質 |
| 4K（UHD） | 3840×2160 | 高級テレビ、高画質配信 |
| 8K | 7680×4320 | プロ映像、最上位テレビ |
覚え方: 4K = フル HD の 4 倍（縦横 2 倍ずつで面積 4 倍）、8K = 4K のさらに 4 倍。「4K」の K は約 4000（3840）を指す。
デジタルコンテンツは**コピーが簡単なため、著作者の権利を守るための著作権保護技術が用意されています。音楽・動画・電子書籍などで使われており、試験では略語と用途**の対応が問われます。
| 技術 | 正式名 | 用途 |
|---|---|---|
| DRM | Digital Rights Management | デジタルコンテンツの著作権保護全般（音楽・動画・電子書籍） |
| CPRM | Content Protection for Recordable Media | DVD・SD カード等録画媒体のコピー制限 |
| 電子透かし（Watermark） | — | 画像・音声に**目に見えない識別情報**を埋め込み、不正コピー追跡 |
| Portable Document Format | レイアウトを維持して配布。パスワード・印刷制限も設定可 |
具体例: Netflix や Amazon Prime Video で動画をダウンロードしても**他のアプリで再生できないのは DRM による保護。地デジの録画番組が特定機器でしか再生できないのは CPRM の仕組み。有料写真素材サイトの見本画像にうっすら文字が重なっている**のは電子透かしの一種。
頻出: DRM は「コンテンツ全般」の保護の総称、CPRM は「録画媒体」専用のコピー制限。
出典シラバス: ITパスポート試験シラバス Ver.6.5（2026年1月・IPA公開）