【基本情報技術者試験】第8章 ユーザーインタフェースとマルチメディア完全解説|GUI・ユーザビリティ・PCM・クリッピングをゼロから学ぼう!

🎯 この記事を読み終わるころには、この問題が解けるようになります!

【例題】平成31年度 基本情報技術者試験 科目A

GUIの部品の一つであるラジオボタンの用途として、適切なものはどれか。
ア. 幾つかの項目について、それぞれの項目を選択するかどうかを指定する。
イ. 幾つかの選択項目から一つを選ぶときに、選択項目にないものはテキストボックスに入力する。
ウ. 互いに排他的な幾つかの選択項目から一つを選ぶ。
エ. 特定の項目を選択することによって表示される一覧形式の項目から一つを選ぶ。

※ヒント:ラジオボタンのキーワードは「排他的」「1つだけ選択」

前回はハードウェア(半導体メモリ)を学びました。今回は、人間とコンピュータの接点となる「ユーザーインタフェース」と、文字・音声・画像・動画を扱う「マルチメディア技術」を徹底解説します。GUI部品・ユーザビリティ・PCM計算・画像処理技術まで、試験に出る内容を全て網羅します!

目次

  • ユーザーインタフェースとは
  • CUIとGUI|インタフェースの2大種類
  • GUIの4つの部品|ラジオボタン・チェックボックス・プルダウン・コンボボックス
  • ユーザビリティとJIS定義
  • ユーザビリティの評価方法4種類
  • 入力チェック手法4種類
  • ユーザビリティを向上させる機能
  • ユニバーサルデザイン・バリアフリー・Webアクセシビリティ
  • マルチメディアとは|文字(ビットマップ・アウトラインフォント)
  • 音声|PCMによるデジタル変換と計算公式
  • 静止画|クリッピング・アンチエイリアシング・テクスチャマッピング
  • 動画|H.264/MPEG-4 AVC
  • 過去問チャレンジ!
  • この章のまとめ

1. ユーザーインタフェースとは

  • ユーザーインタフェース=利用者と機械が触れ合う面(接触面)のことです。
  • どれほど優れたシステムでも、UI(ユーザーインタフェース)設計が悪ければ使いづらいシステムになってしまいます。
  • スマートフォンなどのタッチパネル(ハードウェア)や、アプリのアイコン(ソフトウェア)もすべてUIの一種です。
  • ソフトウェアのUIは、大きく分けて「CUI」と「GUI」の2種類に分類されます。

2. CUIとGUI|インタフェースの2大種類

  • CUI(Character User Interface): 文字でコンピュータを操作するインタフェースです。Windowsのコマンドプロンプトなどがこれにあたります。
  • GUI(Graphical User Interface): ウィンドウやアイコンなど、視覚的な要素でコンピュータを操作するインタフェースです。WindowsやMacのデスクトップ画面などが代表例です。
  • 現在はGUIが主流となっており、基本情報技術者試験でも「GUIの部品」に関する問題が頻出しています。

3. GUIの4つの部品|ラジオボタン・チェックボックス・プルダウン・コンボボックス

GUIの4つの部品

▲ GUIの4つの部品(ラジオボタン・チェックボックス・プルダウンメニュー・コンボボックス)

  • ラジオボタン: 選択肢から1つだけ選べる部品です。丸い形のボタンで表され、特徴は「互いに排他的な選択項目から1つを選ぶ」ことです。
  • チェックボックス: 選択肢から複数選べる部品です。四角い形のボタンで表されます。
  • プルダウンメニュー: ボタンを押すと選択肢一覧が表示され、その中から1つだけ選べる部品です。最初は選択肢が非表示になっています。
  • コンボボックス: プルダウンメニューにテキストボックス(手入力できる枠)が合体した部品です。選択肢から選ぶことも、手入力することも可能です。

【GUI部品の比較表】

部品名 選択できる項目数 最初から選択肢表示 手入力
ラジオボタン 1つ ×
チェックボックス 複数 ×
プルダウンメニュー 1つ × ×
コンボボックス 1つ ×

4. ユーザビリティとJIS定義

  • ユーザビリティ=「使いやすさ」のことです。
  • JIS(日本産業規格)での定義:「特定のユーザーが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い」
  • ユーザビリティの3要素:
    • 効果: 目標を達成する際の正確性および完全性。
    • 効率: 達成された結果に関連して費やした資源。
    • 満足: ユーザーのニーズと期待が満たされている程度(不快感のない状態)。
  • 試験では、「利用者がどれだけストレスを感じずに、目標とする要求が達成できるか」という表現で出題されることもあります。

5. ユーザビリティの評価方法4種類

ユーザビリティの評価方法

▲ ユーザビリティの4つの評価方法

  • インタビュー法: 実際に利用者に会って話を聞き、製品の満足度などの情報を収集します。「満足」を評価するときに用いる方法であり、試験最頻出です。
  • ヒューリスティック評価: ユーザビリティの専門家が、自身の知識と経験を使って評価を行う「発見的」な手法です。
  • ユーザビリティテスト: 利用者に実際に製品を使ってもらい、その様子を観察することで評価する手法です(ユーザーテストとも呼ばれます)。
  • ログデータ分析法: アクセスログやアプリの起動ログなどのデータを用いて、使いやすさを評価する手法です。

📌 重要:試験の定番問題!

「利用者の満足度を評価するのに適した方法はどれか」と聞かれたら、答えは「インタビュー法」です。満足度はユーザーから直接聞き取るしかありません!

6. 入力チェック手法4種類

ユーザーが入力したデータが適切かどうかを調べる機能もUIの重要な役割です。

  • 論理チェック: 入力されたデータが論理的に正しいかどうかを検査します(例:商品の注文日が未来の日付になっていないか)。試験最頻出の手法です。
  • 重複チェック: 入力されたデータが重複していないかを検査します(例:一意であるべき伝票番号が重複していないか)。
  • フォーマットチェック: 入力されたデータが正しい形式になっているかを検査します(例:メールアドレスの中に「@」が含まれているか)。
  • シーケンスチェック: 入力されたデータが正しい順番で並んでいるかを検査します(例:昇順に並ぶべき伝票番号が降順になっていないか)。

📝 ポイント

「論理的に正しいかどうかを検査する」という説明文が出たら、すぐに「論理チェック」を選べるようにしておきましょう。

7. ユーザビリティを向上させる機能

  • Undo機能: 直前の操作を取り消して、元の状態に戻せる機能です。
  • マクロ機能: 定型的な作業を行う利用者の操作数を少なくする機能です。一連の操作をコンピュータに記憶させることで、一度の命令で自動的に作業を行ってくれます。
  • ショートカットキー: キーボード上の複数のキーを同時に押すことで、特定の命令を実行できる機能です。頻繁に行う操作を効率よく行えるようになります。

試験では「頻繁に行う操作を効率よく → ショートカットキー」「操作数を少なくする → マクロ機能」という結びつきがよく出題されます。

8. ユニバーサルデザイン・バリアフリー・Webアクセシビリティ

  • ユニバーサルデザイン: 年齢、文化、言語、能力の違い、障害の有無などにかかわらず、できるだけ多くの人が利用できることを目指した設計です。「すべての人のためのデザイン」という意味を持ちます。
  • バリアフリーデザイン: 高齢者や障害者が生活するうえでの障壁(バリア)を取り除くための設計です。ユニバーサルデザインよりも対象がやや狭い概念です。
  • Webアクセシビリティ: 年齢や身体的条件にかかわらず、すべての人がWebサイトにアクセスし、コンテンツを利用できる度合いのことです。

9. マルチメディアとは|文字(ビットマップ・アウトラインフォント)

フォント種類比較

▲ ビットマップフォントとアウトラインフォントの違い

  • マルチメディア: 文字、音声、静止画、動画などをまとめて利用できる技術のことです。(multi=複数、media=媒体)
  • ビットマップフォント: 文字の形を正方形のドットの集合で表したフォントです。拡大するとギザギザが目立ちますが、ラスタライズ処理が不要なため表示が高速です。
  • アウトラインフォント: 文字の形を曲線のデータとして保持しているフォントです。どんなに拡大・縮小してもなめらかな曲線で表示されます。ただし、表示するにはラスタライズ処理が必要なため、表示速度はやや遅くなります。
  • ラスタライズ: アウトラインフォントを実際に画面に出力する際に、ビットマップ(ドットの集まり)に変換する処理のことです。
  • 適用場面: 文字を任意の倍率に拡大して表示する場合は、アウトラインフォントの利用が適しています。

10. 音声|PCMによるデジタル変換と計算公式

PCMによる音声のデジタル変換フロー

▲ PCMによる音声のデジタル変換フロー(標本化→量子化→符号化)

  • 人間の耳は「音波」というアナログ信号しか聞き取れませんが、コンピュータはデジタルデータしか扱えません。そのため変換処理が必要になります。
  • PCM (Pulse Code Modulation): アナログ信号をデジタル信号に変換する方式の1つです。以下の3つのステップで行われます。
    1. 標本化(サンプリング): アナログ信号を一定の間隔で区切ります。
    2. 量子化: 区切られたアナログ信号の大きさに値(数値)をつけます。
    3. 符号化: 量子化によって付与された値をビット列(0と1のデジタルデータ)に変換します。
  • PCM変換後のデータ量計算公式:
    PCM変換後のデータ量 = 標本化周波数 × 量子化ビット数 × 秒数
  • 【計算例】音楽用CDのデータ量:
    60分の音声を標本化周波数44.1kHz、量子化16ビットで変換した場合
    44,100Hz × 16ビット × 3,600秒 = 2,540,160,000ビット ≒ 約318Mバイト

11. 静止画|クリッピング・アンチエイリアシング・テクスチャマッピング

静止画処理の3大技術

▲ 静止画処理の3大技術(クリッピング・アンチエイリアシング・テクスチャマッピング)

  • クリッピング: 画像の一部分を切り抜くことです。試験では「画像表示領域にウィンドウを定義し、ウィンドウの外側を除去し、内側の見える部分だけを取り出す処理」と表現されます。
  • アンチエイリアシング: 画像処理の際に生じる線や輪郭のギザギザを目立たなくする手法です。試験では「液晶ディスプレイなどの表示装置において、傾いた直線を滑らかに表示する手法」と出題されます。
  • テクスチャマッピング: 物体の表面に模様などの画像を貼り付けて質感を出す手法です。(テクスチャ=生地、マッピング=模様を描く)

12. 動画|H.264/MPEG-4 AVC

  • 動画とは、たくさんの静止画をすばやく切り替えることで画像が動いているように見せる技術です(一般的には1秒間に60枚など)。
  • 高解像度の静止画を大量に使うとファイルサイズが巨大になるため、圧縮技術が不可欠です。
  • H.264/MPEG-4 AVC: 動画を圧縮するための規格技術です。動画の中で「変化があった部分(差分)」だけを保存することで、ファイルサイズを小さくします。
  • 圧縮率が非常に高く、従来のMPEG-2のおよそ2倍の圧縮率を誇ります。
  • ワンセグ放送(携帯端末向け地上デジタル放送)、Blu-ray Disc、YouTubeなどで広く使用されています。
  • 試験では「ワンセグ放送で使用されている動画圧縮技術はどれか → H.264/MPEG-4 AVC」という形で頻出します。

13. 過去問チャレンジ!

🎯 記事冒頭の例題に、もう一度チャレンジ!

【例題・再掲】平成31年度 基本情報技術者試験 科目A

GUIの部品の一つであるラジオボタンの用途として、適切なものはどれか。
ア. 幾つかの項目について、それぞれの項目を選択するかどうかを指定する。
イ. 幾つかの選択項目から一つを選ぶときに、選択項目にないものはテキストボックスに入力する。
ウ. 互いに排他的な幾つかの選択項目から一つを選ぶ。
エ. 特定の項目を選択することによって表示される一覧形式の項目から一つを選ぶ。

✅ 解答・完全解説

正解:ウ

解説:

ラジオボタンは「互いに排他的な幾つかの選択項目から1つを選ぶ」用途に使用されます。

  • ア:それぞれの項目を選択するかどうかを指定(複数選択可)するのは「チェックボックス」です。
  • イ:選択項目にないものをテキストボックスに入力するのは「コンボボックス」です。
  • エ:特定の項目を選択することで表示される一覧形式から一つを選ぶのは「プルダウンメニュー」です。

【過去問 その2】ユーザビリティ問題(平成21年度)

Webコンテンツのユーザビリティの説明として、適切なものはどれか。

ア. 障がい・年齢・性別・国籍などにかかわらず、だれもが使える設計をいう。
イ. 障がい者や高齢者がサービスを支障なく操作または利用できる機能をいう。
ウ. 障がい者や高齢者に負担を与えない設計をいう。
エ. どれだけ利用者がストレスを感じずに、目標とする要求が達成できるかをいう。

💡 解答・解説

正解:エ

ユーザビリティとは「使いやすさ」のことです。「利用者がストレスを感じずに、目標とする要求が達成できるか」を意味するエが正解です。
なお、アは「ユニバーサルデザイン」、イは「アクセシビリティ」、ウは「バリアフリー」の説明です。

【過去問 その3】フォント問題(平成27年度)

ビットマップフォントよりもアウトラインフォントの利用が適しているケースはどれか。

ア. 英数字だけでなく、漢字も表示する。
イ. 各文字の幅を一定にして表示する。
ウ. 画面上にできるだけ高速に表示する。
エ. 文字を任意の倍率に拡大して表示する。

💡 解答・解説

正解:エ

アウトラインフォントは文字の形状をデータとして保持しており、どんなに拡大・縮小してもなめらかな曲線で表示されるため、エが正解です。
ウの「高速に表示する」場合は、ラスタライズが不要なビットマップフォントの方が適しています。

14. この章のまとめ

📌 ユーザーインタフェース・マルチメディアのまとめ

  • ユーザーインタフェース = 利用者と機械の接触面
  • CUI = 文字で操作、GUI = 視覚的(ウィンドウ・アイコン)で操作
  • ラジオボタン = 排他的選択(1つだけ)、チェックボックス = 複数選択
  • プルダウンメニュー = 選択肢から1つ選ぶ(手入力不可)、コンボボックス = プルダウン+手入力
  • ユーザビリティ = 使いやすさ(効果・効率・満足の3要素)
  • 「満足」を評価する手法 = インタビュー法、専門家による評価 = ヒューリスティック評価
  • 論理チェック = 入力データが論理的に正しいかどうかを検査(試験最頻出)
  • マクロ機能 = 定型作業の操作数を少なくする、ショートカットキー = 頻繁な操作を効率よく行う
  • ユニバーサルデザイン = 全員対象、バリアフリー = 高齢者・障害者対象
  • マルチメディア = 文字・音声・静止画・動画をまとめて利用できる技術
  • ビットマップフォント = ドットの集合(拡大でギザギザ・高速)、アウトラインフォント = 曲線データ(拡大でもなめらか・やや遅い)
  • PCM変換 = 標本化 → 量子化 → 符号化 の3ステップ。(データ量=標本化周波数×量子化ビット数×秒数)
  • クリッピング = ウィンドウの外側を除去して内側だけ取り出す処理
  • アンチエイリアシング = 輪郭のギザギザを目立たなくする手法
  • テクスチャマッピング = 物体の表面に画像を貼り付けて質感を出す手法
  • H.264/MPEG-4 AVC = ワンセグ放送等で使われる動画圧縮技術(MPEG-2の約2倍の圧縮率)

学習難易度:★★☆☆☆

専門用語が多いですが、「PCM変換の3ステップ」や「GUI部品の用途」など、キーワードの組み合わせで正答できる問題が多い分野です!

この記事について

基本情報技術者試験の合格を目指す方のために、参考書の内容を初心者向けにわかりやすく噛み砕いて解説しています。ITの基礎をしっかり固めて、一緒に合格を目指しましょう!

【基本情報技術者試験講義No.8】ユーザーインタフェースとマルチメディア|GUI・ユーザビリティ・PCM・クリッピングをゼロから学ぼう!

どくりん


よろしくお願いします


投稿ナビゲーション


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です