ヒューマンインタフェース

この章で覚えておきたいこと

UI は利用者とシステムの接点です。画面、ボタン、入力欄、メニュー、タッチ操作、音声操作などを含みます。
ユーザビリティ は、利用者が目的を有効に、効率的に、満足して達成できる度合いです。
UX は利用前、利用中、利用後まで含めた体験全体です。UIやユーザビリティより広い概念です。
アクセシビリティ は、年齢、障害、端末、通信環境などの違いがあっても利用しやすくする考え方です。
Webデザインでは、見た目だけでなく、情報構造、ナビゲーション、入力しやすさ、状態表示、戻りやすさが重要です。
マルチメディアでは、画像、音声、動画の形式、圧縮方式、データ量の考え方が頻出です。
試験では、UI、ユーザビリティ、UX、アクセシビリティの定義を入れ替えた選択肢が繰り返し出ます。

基本知識

UIとユーザビリティの違い

UIは、利用者がシステムを操作するための接点そのものです。画面レイアウト、ボタンの配置、フォームの入力欄、アイコン、メニュー構造、タッチパネルの操作方法などが該当します。

一方、ユーザビリティは、そのUIを通じて目的を達成しやすいかを表す評価概念です。つまり、UIは「どこを触るか」、ユーザビリティは「それでうまく使えるか」という違いで整理します。

ユーザビリティは次の3つで押さえると解きやすいです。

有効性: 目的を正しく達成できるか
効率性: 少ない手間や時間で達成できるか
満足度: 不快感なく使えるか

2020年度や2024年度の過去問では、単にエラーメッセージを丁寧に出せばよいのではなく、そもそもミスしにくい入力方法や、戻る、やり直す仕組みを設けることが重要だと問われました。

UXとアクセシビリティ

UXはUser Experienceの略で、製品やサービスを使う前の期待、利用中の感情、使い終わった後の印象まで含めた体験全体です。画面が見やすいことはUX向上に役立ちますが、処理速度、導入のしやすさ、サポート対応、安心感などもUXに含まれます。

アクセシビリティは、誰でも利用できるようにする観点です。高齢者や障害のある人だけのための特別対応と考えるのは誤りです。端末の違い、色覚の違い、キーボード操作の必要性、通信環境の制約なども含めて考えます。

代表的な対応は次のとおりです。

画像に代替テキストを付ける
前景色と背景色の明度差を十分に取る
色だけで情報を伝えない
見出し構造を正しく付ける
キーボードだけでも操作できるようにする
動画に字幕を付ける
フォームの入力欄に分かりやすいラベルを付ける

2024年度第4問では、RGBの色表現や視認性と合わせて、色覚に配慮した画面設計が問われました。反対色でも明度差が小さいと見づらくなるため、色相差だけでなく明度差も確認することが重要です。

Webデザインで問われる判断軸

試験でいうWebデザインは、装飾の話だけではありません。利用者が迷わず目的地にたどり着けるか、入力ミスを起こしにくいか、処理中の状態が分かるかまで含めて問われます。

特に押さえたい判断軸は次のとおりです。

現在どの画面にいて、何が起きているかが分かるか
リンクやボタンの意味が見て分かるか
入力ミスを防ぐ工夫があるか
誤操作しても戻る、取り消す、やり直すことができるか
重要情報を色だけに依存せず伝えているか
見出しやリンク構造が整理されているか

HTML、CSS、JavaScriptの役割分担も基礎として押さえます。

HTML: 文書構造を記述する
CSS: 見た目を整える
JavaScript: 動きや対話的な処理を実装する

2009年度第4問では、HTMLの基本機能としてハイパーリンクや表現構造が問われました。したがって、Webデザインは単なる配色や装飾ではなく、構造と導線の設計として理解する必要があります。

マルチメディアの基本整理

マルチメディアは、文字、画像、音声、動画など複数の表現を組み合わせて扱うことです。試験では、拡張子、圧縮方式、色数、データ量計算が頻出です。

まず、ファイル形式は「何を保存するか」で分けます。

静止画像: BMP、JPEG、GIF、PNG
音声: WAVE、MP3、MIDI
動画・コンテナ: AVI、MP4
Web文書やデータ交換: HTM、HTML、CSV

ここで重要なのは、形式名だけでなく性質も結び付けることです。

JPEG: 非可逆圧縮、フルカラー写真向き
PNG: 可逆圧縮、フルカラーや透過に対応しやすい
GIF: 可逆圧縮、最大256色、簡易アニメーションにも使う
BMP: 一般に無圧縮または単純な形式として扱う
MP3: 非可逆圧縮の音声形式
MP4: 音声や動画などをまとめて格納できるコンテナ形式
MIDI: 音そのものではなく演奏情報を記録する形式

2023年度第1回第7問、2019年度第10問、2009年度第9問では、可逆圧縮と非可逆圧縮、画像形式と音声形式、コンテナ形式と圧縮方式の違いが繰り返し問われました。まず画像か音声か動画かを分け、その次に可逆か非可逆かで判定すると迷いにくいです。

色表現と画像の見やすさ

ディスプレイの色はRGBで表現します。RGBは光の3原色であり、混ぜるほど明るくなる加法混色です。24ビットカラーでは、R、G、Bを各8ビットで表すので、各色256階調、全体では約1,677万色を表現できます。

一方、印刷物ではCMYやCMYKのような色材の考え方を使うため、表示装置と同じ感覚で判断しないことが大切です。

画面設計では、色の美しさより先に見やすさを考えます。見やすさを左右する主な要素は次のとおりです。

前景色と背景色の明度差
反対色の組み合わせかどうか
細い文字や細線に頼りすぎていないか
色だけで意味を伝えていないか

2024年度第4問は、RGBと視認性を組み合わせて問う典型問題でした。反対色でも明度差が小さいと視認性は下がるという点を押さえておくと対応しやすいです。

音声と動画のデータ量

音声データでは、PCM方式の計算が代表論点です。非圧縮の音声データ量は、次の積で求めます。

サンプリング周波数
量子化ビット数
チャンネル数
時間

最後にビットをバイトへ直すため、8で割ることを忘れないようにします。

2023年度第1回第14問では、16ビット、44,100Hz、ステレオ、5分間のデータ量を求める式が出題されました。音声問題では、圧縮形式の知識だけでなく、単位換算まで含めて処理する力が必要です。

例として、44,100Hz、16ビット、ステレオ、5分間の非圧縮PCM音声なら、次の順で計算します。

1. 秒数に直す: 5分 = 300秒 2. ビット量を出す: 44,100 × 16 × 2 × 300 = 423,360,000ビット 3. バイトへ直す: 423,360,000 ÷ 8 = 52,920,000バイト 4. MBへ概算する: 約52.9MB、または 1MiB = 1,048,576バイト で約50.5MiB

試験で特に多い誤りは、ステレオの2チャンネルを掛け忘れること、最後に8で割らずビットのまま答えること、分を秒に直し忘れることです。

この章のまとめ

UIは接点、ユーザビリティは使いやすさの度合い、UXは体験全体、アクセシビリティは誰でも使えるようにする考え方です。
ユーザビリティでは、状態表示、誤入力防止、戻るや取り消しなどの回復手段を重視します。
アクセシビリティでは、色だけで伝えない、明度差を確保する、キーボード操作可能にする、といった具体策で判断します。
Webデザインは見た目だけでなく、構造、導線、入力支援、状態の分かりやすさまで含めて考えます。
HTMLは構造、CSSは見た目、JavaScriptは動きという役割分担を整理します。
マルチメディアでは、まず画像、音声、動画、テキストのどれかを分け、その後に可逆圧縮か非可逆圧縮か、コンテナか圧縮方式かを確認します。
JPEGとMP3は非可逆圧縮、PNGとGIFは可逆圧縮、MP4はコンテナ形式という対応は頻出です。
PCMのデータ量は、サンプリング周波数×量子化ビット数×チャンネル数×時間で求め、最後に8で割ってバイトへ直します。

一次試験過去問での出方

2009年度第4問では、HTMLの基本機能としてリンクや文書構造の理解が問われました。Webデザインは装飾より先に構造を押さえると解きやすいです。

2009年度第9問、2019年度第10問、2023年度第1回第7問では、画像、音声、動画の形式と圧縮方式の違いが繰り返し問われました。形式名と用途を対で覚えることが重要です。

2020年度第19問では、状態表示、誤操作からの回復、早い段階での評価など、ユーザビリティ向上策の考え方が問われました。

2023年度第1回第14問では、PCM方式の音声データ量計算が出題されました。単位換算まで含めて再現できるかが得点差になります。

2024年度第4問と第5問では、RGBの色表現、視認性、UI、UX、ユーザビリティ、Webアクセシビリティの定義が問われました。定義の入れ替えを見抜けるかがポイントです。