UI・アクセシビリティ・メディア計算

応用情報技術者試験の科目Aに必要なUIの原則とアクセシビリティ、GUI部品の選び方、人間中心設計とユーザビリティ評価、画像・PCM音声・動画の生データ量と圧縮率の計算を、例題とオリジナル演習問題5問で学びます。

応用情報技術者試験科目Aユーザーインタフェースアクセシビリティマルチメディア

AP科目A・第12回 · 2026年度・シラバスVer.7.2に基づく独立した学習資料です。IPAとの提携はなく、合格を保証しません。 シリーズ一覧を見る

免責・ご案内

  • 本稿は IPA 応用情報技術者試験(AP)2026年度試験向けの非公式学習資料であり,IPA とは関係ありません。
  • 範囲は IPA シラバス Ver.7.2(出典参照)に限定しています。
  • 練習問題5問はすべてオリジナル問題であり,過去問題は使用していません。
  • アクセシビリティの説明は実務上の原則です。どれか一つの対策だけで規格(JIS X 8341,WCAG など)への適合が保証されることはなく,版によって変わり得る数値基準は扱いません。
  • メディアのデータ量計算はすべて明示した前提での非圧縮(生)データ量です。実際のファイルサイズはヘッダ,メタデータ,コーデック設定,内容によって変わります。

学習目次

  1. シラバス対応
  2. 用語対照表(KO/JA/EN)
  3. UI・ユーザビリティ・アクセシビリティの原則
  4. 単位・公式の整理
  5. 例題 A〜E
  6. AP11 との関連
  7. まとめシート
  8. よくある誤り
  9. 練習問題
  10. 解答・解説
  11. セルフチェック
  12. 1・3・7日後の復習
  13. 出典

1. シラバス対応(Ver.7.2)

大分類/中分類 項目 本回で扱う内容
2 コンピュータシステム/3 コンピュータ構成要素 3. 入出力デバイス(2)出力装置 画像のデータ容量の計算
3 技術要素/7 ユーザーインタフェース 1.(1)情報アーキテクチャ ラベル,チャンク,ナビゲーション,階層型,メタデータ
3 技術要素/7 ユーザーインタフェース 1.(2)ユーザーインタフェース(UI) ユーザビリティ,アクセシビリティ,インタラクションの原則,身体的適合性,シグニファイア,マルチモーダルインタフェース
3 技術要素/7 ユーザーインタフェース 1.(3)GUI アイコン,ラジオボタン,トグルボタン,チェックボックス,リストボックス,プルダウンメニュー,ツールチップ,テキストボックス
3 技術要素/7 ユーザーインタフェース 2.(5)Webデザイン ユーザビリティ,ナビゲーション,レスポンシブWebデザイン(拡大・リフロー)
3 技術要素/7 ユーザーインタフェース 2.(6)人間中心設計 利用状況の理解,ユーザ要求の明示,設計解の作成,要求に対する評価
3 技術要素/7 ユーザーインタフェース 2.(7)ユニバーサルデザイン 音声読み上げ,Undo,JIS X 8341,インクルーシブデザイン,ピクトグラム,WAI,WCAG
3 技術要素/7 ユーザーインタフェース 2.(8)ユーザビリティ評価 ヒューリスティック評価,認知的ウォークスルー,思考発話法,ユーザビリティテスト,A/Bテスト
3 技術要素/8 情報メディア 1.(2)音声処理 PCM,WAV,MP3(データ量計算のみ。標本化の原理は AP11)
3 技術要素/8 情報メディア 1.(3)静止画処理 ラスターデータ,JPEG,PNG,GIF,BMP,TIFF,HEIF
3 技術要素/8 情報メディア 1.(4)動画処理 フレーム,フレームレート,MPEG,H.264,HEVC/H.265
3 技術要素/8 情報メディア 1.(5)情報の圧縮・伸長 圧縮率(基準を明示),可逆圧縮,非可逆圧縮,ZIP
3 技術要素/8 情報メディア 2.(1)グラフィックス処理 RGB,画素(ピクセル),解像度

2. 用語対照表(KO/JA/EN)

한국어 日本語 English
정보 아키텍처 情報アーキテクチャ information architecture
라벨 / 청크 / 내비게이션 ラベル/チャンク/ナビゲーション label / chunk / navigation
사용성 ユーザビリティ usability
접근성 アクセシビリティ accessibility
인터랙션 원칙 インタラクションの原則 interaction principles
시그니파이어 / 어포던스 シグニファイア/アフォーダンス signifier / affordance
멀티모달 인터페이스 マルチモーダルインタフェース multimodal interface
라디오 버튼 / 체크박스 / 토글 버튼 ラジオボタン/チェックボックス/トグルボタン radio button / checkbox / toggle button
리스트 박스 / 풀다운 메뉴 / 툴팁 / 텍스트 박스 リストボックス/プルダウンメニュー/ツールチップ/テキストボックス list box / pull-down menu / tooltip / text box
유니버설 디자인 / 인클루시브 디자인 ユニバーサルデザイン/インクルーシブデザイン universal design / inclusive design
인간 중심 설계 人間中心設計 human-centred design
휴리스틱 평가 / 인지적 워크스루 / 사고 발화법 ヒューリスティック評価/認知的ウォークスルー/思考発話法 heuristic evaluation / cognitive walkthrough / think-aloud protocol
사용성 테스트 / A/B 테스트 ユーザビリティテスト/A/Bテスト usability testing / A/B testing
화소(픽셀) / 해상도 画素(ピクセル)/解像度 pixel / resolution
프레임 / 프레임 레이트 フレーム/フレームレート frame / frame rate
가역 압축 / 비가역 압축 可逆圧縮/非可逆圧縮 lossless / lossy compression
압축률 (기준을 반드시 명시) 圧縮率(基準を必ず明示) “compression rate/ratio” (always state the basis)
잔존 크기 비율 R = 압축 후 / 원본 圧縮後サイズの割合 R=圧縮後/元 retained-size fraction R = compressed / original
감소율 1 − R 削減率 1-R reduction fraction 1 − R

3. UI・ユーザビリティ・アクセシビリティの原則

3.1 情報アーキテクチャ(IA)

  • 情報を組織化・構造化し,利用者が探しやすく理解しやすくする設計です。
  • ラベル:利用者の言葉による短く具体的な名前(「設定2」ではなく「通知設定」)。
  • チャンク:関連する情報を意味のまとまりにして記憶負荷を減らします。
  • 階層型構造とナビゲーション:現在位置(パンくずリストなど)と移動経路を見えるようにします。
  • メタデータ:分類・検索・絞込みの基盤です。

3.2 実務的なインタラクションの原則

原則 意味 例
一貫性 同じ機能は同じ位置・ラベル・動作 すべての画面で「保存」ボタンの位置を統一
可視性・状態のフィードバック システムの状態を即座に伝える 保存中表示,完了/エラーメッセージ
シグニファイア・アフォーダンス アフォーダンスは可能な行為,シグニファイアはその行為を知らせる手掛かり ボタンらしい形状+明確なラベル
対応付け(マッピング) 操作と結果の対応が自然 スライダーを右へ → 値が増える
制約 誤った入力そのものをしにくくする 日付選択部品,入力形式の制限
エラーの防止・回復・Undo 誤りを防ぎ,起きても元に戻せる 確認ステップ,取消し,具体的なエラー案内
平易なラベル 専門用語ではなく理解できる言葉 「認証トークン無効」ではなく「もう一度ログインしてください」

3.3 アクセシビリティ:知覚可能・操作可能・理解可能・堅牢

観点 実務上の対策
知覚可能 色だけで情報を伝えない(テキスト・アイコン・模様を併用),画像の代替テキスト,動画の字幕・書き起こし(トランスクリプト),読みやすいコントラスト
操作可能 キーボードだけですべて操作可能,見えるフォーカス表示,十分な操作対象の大きさ(身体的適合性)
理解可能 平易なラベル,一貫したナビゲーション,修正方法を示す具体的なエラーメッセージ
堅牢 意味に合ったマークアップと部品名(セマンティックなラベル)により,スクリーンリーダーなどの支援技術が解釈できる
  • 拡大・リフロー:拡大しても内容が切れたり横スクロールを強いられたりしないよう,レスポンシブに再配置します。
  • 一つの対策(例:コントラスト調整だけ)で適合は保証できません。チェックリストによる点検+支援技術での試験+多様な利用者による評価を組み合わせます。

3.4 ユニバーサルデザイン・インクルーシブデザイン・マルチモーダル

  • ユニバーサルデザイン:最初からできるだけ多くの人が使えるように設計する(ピクトグラム,音声読み上げ,Undo など)。
  • インクルーシブデザイン:排除されがちな利用者を設計過程に参加させ,多様性を反映する。
  • マルチモーダルインタフェース:音声・タッチ・視覚など複数の手段で入出力する。

3.5 人間中心設計と評価

  • 人間中心設計のサイクル:利用状況の理解 → ユーザ要求の明示 → 設計解の作成 → 要求に対する評価を繰り返す。
  • 評価手法:
    • ヒューリスティック評価:専門家が経験則に照らして点検する(利用者は不要)。
    • 認知的ウォークスルー:専門家が利用者のタスク手順をたどり,つまずきを予測する。
    • 思考発話法:利用者が操作しながら考えを声に出す。
    • ユーザビリティテスト:代表的な利用者が実際のタスクを行う様子を観察する。
    • A/Bテスト:二つの案を実利用者に振り分けて提示し,指標を比較する。

4. 単位・公式の整理

4.1 単位の約束

単位 値
1バイト(B) 8ビット
1 kB(10進) 1,000 B
1 MB(10進) 1,000,000 B
1 KiB(2進) 1,024 B
1 MiB(2進) 1,048,576 B
1 Mビット/秒(10進) 1,000,000 ビット/秒

4.2 非圧縮データ量の公式

対象 非圧縮データ量(ビット) 除外するもの(明示がない限り)
ラスター画像 横(画素)× 縦(画素)× ビット/画素 アルファチャネル,ヘッダ,メタデータ,行パディング,圧縮
PCM音声 標本数/秒 × ビット/標本/チャネル × チャネル数 × 秒 ヘッダ,圧縮
動画(映像のみ) 横 × 縦 × ビット/画素 × フレーム/秒 × 秒 音声,ヘッダ,メタデータ,クロマサブサンプリング,パディング,圧縮
  • RGB 各8ビット × 3チャネル = 24ビット/画素。
  • ステレオ = 2チャネル。
  • バイト = ビット ÷ 8。その後,10進(MB)か2進(MiB)かを明示する。

4.3 圧縮の基準

指標 定義
圧縮後サイズの割合 R 圧縮後のサイズ ÷ 元のサイズ
削減率 1 − R
サイズ比 元:圧縮後 (1/R):1
  • 「圧縮率」は文脈によって R を指すことも削減率を指すこともあります。必ず分子と分母を明示して使います。
  • 可逆か非可逆かは形式・設定によって異なり,実際の圧縮後サイズは内容・設定に依存します。コーデック名だけから正確なサイズは推定できません。

5. 例題 A〜E

例題 A:画像の非圧縮データ量

前提:1920 × 1080 画素,RGB 各8ビット × 3チャネル = 24ビット/画素,アルファ・ヘッダ・メタデータ・行パディング・圧縮なし。

  1. 画素数:1,920 × 1,080 = 2,073,600 画素
  2. ビット:2,073,600 × 24 = 49,766,400 ビット
  3. バイト:49,766,400 ÷ 8 = 6,220,800 B
  4. 10進:6,220,800 ÷ 1,000,000 = 6.2208 MB
  5. 2進:6,220,800 ÷ 1,048,576 = 5.9326171875 MiB

圧縮:R = 25%(圧縮後 ÷ 元)の場合

  • 圧縮後 = 6,220,800 × 0.25 = 1,555,200 B = 1.5552 MB = 1.483154296875 MiB
  • 削減率 = 1 − 0.25 = 75%
  • 元:圧縮後 = 1/0.25:1 = 4:1

例題 B:PCM音声の非圧縮データ量

前提:48,000 標本/秒,16ビット/標本/チャネル,ステレオ(2チャネル),10秒,ヘッダ・圧縮なし。

  1. ビット:48,000 × 16 × 2 × 10 = 15,360,000 ビット
  2. バイト:15,360,000 ÷ 8 = 1,920,000 B
  3. 10進:1.92 MB
  4. 2進:1,920,000 ÷ 1,048,576 = 1.8310546875 MiB

標本数/秒とビット/標本の意味は AP11 との関連 を参照してください。

例題 C:動画の非圧縮データ量

前提:1280 × 720 画素,RGB 24ビット/画素,30 フレーム/秒,10秒,音声なし,ヘッダ・メタデータ・クロマサブサンプリング・パディング・圧縮なし。

  1. 1フレームの画素数:1,280 × 720 = 921,600 画素
  2. 1フレームのデータ量:921,600 × 24 = 22,118,400 ビット = 2,764,800 B
  3. ビットレート:22,118,400 × 30 = 663,552,000 ビット/秒 = 663.552 Mビット/秒(10進)
  4. 総ビット:663,552,000 × 10 = 6,635,520,000 ビット
  5. バイト:÷ 8 = 829,440,000 B = 829.44 MB = 791.015625 MiB

圧縮:R = 8%(圧縮後 ÷ 元)の場合

  • 圧縮後 = 829,440,000 × 0.08 = 66,355,200 B = 66.3552 MB = 63.28125 MiB
  • 削減率 = 1 − 0.08 = 92%
  • 元:圧縮後 = 1/0.08:1 = 12.5:1

例題 D:破壊的操作(アカウント削除)の流れの改善

状況:赤いアイコンだけの「削除」ボタンを押すと即座にアカウントが削除され,キーボードではボタンに到達できない。

改善:

  1. 具体的なテキストラベル:「アカウントを完全に削除」のように対象と結果が分かるラベル。
  2. 色だけに頼らない視覚的な区別:警告アイコン・テキスト・枠線など色以外の手掛かりを併用。
  3. キーボードで到達可能+見えるフォーカス:Tab キーで移動でき,フォーカス位置が目に見える。
  4. 結果の説明+確認:削除されるデータと取り消せるかどうかを説明し,確認ステップを設ける。
  5. 即時の状態・エラーのフィードバック:処理中・完了・失敗をテキストで即座に知らせ,支援技術にも伝わるようにする。
  6. 回復・Undo(可能な場合):猶予期間中は取り消せるなど。

これらの対策はユーザビリティとアクセシビリティを向上させますが,それだけで規格への適合を証明するものではありません。代表的な利用者と支援技術(スクリーンリーダー,キーボードのみの操作など)で検証する必要があります。

例題 E:部品の選択

状況 適切な部品 理由
見えている選択肢からちょうど一つを選ぶ(例:配送方法) ラジオボタン 排他性が構造で保証され,複数選択の誤りを防ぐ
互いに独立した複数項目を選ぶ(例:興味のある分野) チェックボックス 各項目を個別にオン/オフする
即座に反映される二つの状態(例:通知のオン/オフ) トグルボタン 現在の状態と操作結果が明確な場合に限って使う
  • エラーの防止:部品自体が許される選択数を制約します(一つだけ → ラジオボタン)。
  • 一貫性:同じ種類の選択にはアプリ全体で同じ部品を使い,学習負担を減らします。
  • トグルの状態があいまい(どちらがオンか不明確)な場合は,テキストで状態も表示します。

6. AP11 との関連

PCM の「標本数/秒」(標本化周波数)と「ビット/標本」(量子化ビット数)の意味は第11回(AP11,標本化・量子化)で扱いました。本回では,それらの値を掛け合わせてデータ量を求める計算だけを扱います。

7. まとめシート

  • 画像のビット = 横 × 縦 × ビット/画素(RGB 8ビット × 3 = 24)
  • 音声のビット = 標本数/秒 × ビット/標本/チャネル × チャネル数 × 秒(ステレオ = 2)
  • 動画のビット = 横 × 縦 × ビット/画素 × フレーム/秒 × 秒
  • B = ビット ÷ 8 / MB = 1,000,000 B / MiB = 1,048,576 B
  • R = 圧縮後 ÷ 元,削減率 = 1 − R,元:圧縮後 = 1/R:1
  • アクセシビリティ:色だけに頼らない,キーボード+見えるフォーカス,セマンティックなラベル,代替テキスト,字幕・書き起こし,コントラスト,拡大・リフロー
  • ラジオボタン = 一つ,チェックボックス = 独立した複数,トグルボタン = 即時反映の二状態
  • 一つの対策 ≠ 適合の保証 → 利用者と支援技術で検証

8. よくある誤り

誤り 正しい考え方
RGB の3チャネルを掛け忘れる 8ビット × 3 = 24ビット/画素
ステレオの2チャネルを掛け忘れる チャネル数を掛ける
動画でフレーム/秒や秒数を掛け忘れる 1フレームの量 × フレーム/秒 × 秒
ビットとバイトの混同 ÷ 8
MB と MiB の混同 1,000,000 と 1,048,576
「圧縮率8%」を削減率と誤解 R か 1 − R か,分子・分母を確認
比を逆にする 元:圧縮後 = 1/R:1
コーデック名から正確なサイズを推定 実際のサイズは内容・設定に依存
色だけで危険・エラーを示す テキスト・アイコンを併用
一つの対策でアクセシビリティ適合を主張 総合的な検証が必要

9. 練習問題(オリジナル5問)

すべて本資料のために作成したオリジナル問題です(過去問題は不使用)。

問1

Webサービスのアカウント削除画面を改善したい。ユーザビリティとアクセシビリティの観点から最も適切なものはどれか。

  • ア 危険な操作であることを示すためにボタンを赤色だけで表示し,ラベルは短く「OK」とする。
  • イ ボタン周辺の色のコントラストを一度測定して基準を満たせば,それでアクセシビリティ規格への適合が保証されるので,追加の検証は省略する。
  • ウ 「アカウントを完全に削除」というテキストラベルと警告アイコンを用い,キーボードで到達可能でフォーカスが見えるようにする。削除の結果を説明する確認ステップと処理状態のメッセージを提供し,代表的な利用者と支援技術で試験する。
  • エ 画面を簡潔にするため,ボタンはマウスを重ねたときだけ表示し,説明はツールチップだけに記載する。

問2

1920 × 1080 画素,RGB 各8ビット(3チャネル)の画像の非圧縮データ量はどれか。ここで,アルファ・ヘッダ・メタデータ・行パディング・圧縮はないものとする。

  • ア 2,073,600 B
  • イ 6,220,800 B
  • ウ 49,766,400 B
  • エ 5.9326171875 MB

問3

標本化 48,000 標本/秒,16ビット/標本/チャネル,ステレオ,10秒の PCM 音声の非圧縮データ量はどれか。ここで,ヘッダ・圧縮はないものとする。

  • ア 960,000 B
  • イ 192,000 B
  • ウ 15,360,000 B
  • エ 1,920,000 B

問4

1280 × 720 画素,RGB 24ビット/画素,30 フレーム/秒,10秒,音声なしの動画の非圧縮データ量とその計算として正しいものはどれか。ここで,ヘッダ・メタデータ・クロマサブサンプリング・パディング・圧縮はないものとする。

  • ア 829,440,000 B(1フレーム 2,764,800 B × 30 フレーム/秒 × 10秒)
  • イ 82,944,000 B(1フレーム 2,764,800 B × 30 フレーム/秒)
  • ウ 27,648,000 B(1フレーム 2,764,800 B × 10秒)
  • エ 6,635,520,000 B(1フレーム 22,118,400 × 30 フレーム/秒 × 10秒)

問5

元のサイズが 829,440,000 B の動画が,圧縮後 66,355,200 B になった。基準を正しく明示した記述はどれか。

  • ア 「圧縮率8%」なので,元のサイズの8%が削減された。
  • イ R = 元 ÷ 圧縮後 = 8% であり,圧縮後:元 = 12.5:1 である。
  • ウ R = 圧縮後 ÷ 元 = 8%,削減率 = 1 − R = 92%,元:圧縮後 = 12.5:1 である。
  • エ 削減率 = (元 − 圧縮後) ÷ 圧縮後 = 92% である。

10. 解答・解説

問 1 2 3 4 5
正解 ウ イ エ ア ウ

問1 — 正解 ウ

  • ア:誤り。色だけに頼っており,「OK」では何が起こるか分からないラベルです。確認や回復もありません。
  • イ:誤り。一度の測定で適合は保証されません。キーボード・ラベル・フィードバックなど他の観点と,利用者・支援技術による検証が必要です。
  • ウ:正解。テキスト+色以外の手掛かり,キーボード+見えるフォーカス,結果の説明と確認,状態のフィードバック,そして試験まで含み,適合を断定していません。
  • エ:誤り。マウスオーバーに依存すると,キーボード・タッチ・支援技術の利用者がボタンや説明に到達しにくくなります。

問2 — 正解 イ

1,920 × 1,080 × 24 = 49,766,400 ビット,÷ 8 = 6,220,800 B。

  • ア:誤り。1画素1バイト(8ビット)で計算しており,3チャネルを掛け忘れています。
  • イ:正解。6,220,800 B(= 6.2208 MB = 5.9326171875 MiB)。
  • ウ:誤り。ビット数をバイトとして表記したビットとバイトの混同です。
  • エ:誤り。5.9326171875 は MiB の値です。MB と表記するのは 10進と2進の混同です(10進では 6.2208 MB)。

問3 — 正解 エ

48,000 × 16 × 2 × 10 = 15,360,000 ビット,÷ 8 = 1,920,000 B。

  • ア:誤り。ステレオの 2チャネルを掛け忘れています(1チャネル分)。
  • イ:誤り。10秒を掛け忘れています(1秒分)。
  • ウ:誤り。ビット数をバイトとして表記したビットとバイトの混同です。
  • エ:正解。1,920,000 B(= 1.92 MB = 1.8310546875 MiB)。

問4 — 正解 ア

1,280 × 720 × 24 = 22,118,400 ビット = 1フレーム 2,764,800 B。× 30 フレーム/秒 × 10秒 = 829,440,000 B。

  • ア:正解。フレーム/秒(× 30)と秒(× 10)の二つの乗数をともに含んでいます。
  • イ:誤り。10秒を掛け忘れ,1秒分だけを計算しています。
  • ウ:誤り。フレーム/秒(× 30)を掛け忘れています。
  • エ:誤り。6,635,520,000 はビット数であり,バイトに換算していません。

問5 — 正解 ウ

R = 66,355,200 ÷ 829,440,000 = 0.08。

  • ア:誤り。8% は残ったサイズの割合 R であり,削減率は 92% です。分子を取り違えています。
  • イ:誤り。元 ÷ 圧縮後は 12.5 であり 8% ではありません。また圧縮後:元は 1:12.5 であり,基準が逆です。
  • ウ:正解。R・削減率・サイズ比の分子と分母をすべて正しく明示しています。
  • エ:誤り。削減率の分母は元のサイズです。(元 − 圧縮後) ÷ 圧縮後 = 11.5(1,150%)であり,92% ではありません。

11. セルフチェック

  • ラジオボタン・チェックボックス・トグルボタンの使い分けを説明できる。
  • アクセシビリティの4観点(知覚可能・操作可能・理解可能・堅牢)ごとに実務上の対策を二つずつ挙げられる。
  • 「一つの対策で適合が保証される」がなぜ誤りか説明できる。
  • 画像・音声・動画の非圧縮データ量を,前提を先に書いてから計算できる。
  • ビット/バイト,MB/MiB を正確に換算できる。
  • R,削減率,元:圧縮後の比を分子・分母とともに言える。

12. 1・3・7日後の復習

時期 内容
1日後 まとめシートを見ずに公式3つと単位5つを書く。例題 A を再計算。
3日後 例題 B・C を数値を変えて(例:44,100 標本/秒,60 フレーム/秒)計算し,よくある誤りで点検。
7日後 練習問題を解き直し,すべての誤答選択肢の理由を口頭で説明。例題 D・E を別の画面に適用。

13. 出典

ブログへ