UIとメディア

皆さんがスマートフォンの画面をタップしたり、パソコンでマウスをクリックしたりする操作は、すべて ユーザインターフェース（UI） を通じて行われています。UI はユーザーとコンピュータの「接点」であり、どんなに優れた機能を持つシステムでも、UI が使いにくければ価値が半減してしまいます。

このセクションでは、UI の基本分類である GUI と CUI の違いから、使いやすさを示す ユーザビリティ 、誰でも使える アクセシビリティ 、そして体験全体を設計する UX（ユーザエクスペリエンス） までを学びます。さらに、Web デザインにおける具体的な設計原則も取り上げます。

GUI と CUI

コンピュータとの対話方法は大きく2つに分かれます。

分類	正式名称	操作方法	具体例
GUI	Graphical User Interface	アイコンやボタンをマウス・タッチで操作	Windows, macOS, スマートフォン
CUI	Character User Interface	キーボードから文字（コマンド）を入力	コマンドプロンプト, ターミナル

現在のパソコンやスマートフォンはほぼ GUI ですが、サーバ管理やプログラミングの現場では CUI も多用されます。CUI は 操作の自動化（スクリプト化） がしやすい利点があります。

GUI の基本要素（ウィジェット）

GUI を構成する部品を ウィジェット （コントロール）と呼びます。

ウィジェット	用途	例
ボタン	操作の実行	「送信」「キャンセル」
テキストボックス	文字の入力	検索窓、ログインフォーム
チェックボックス	複数選択	設定画面の ON/OFF
ラジオボタン	排他的な単一選択	性別選択、支払い方法
プルダウンメニュー	一覧から選択	都道府県選択
スライダー	数値の連続調整	音量、画面の明るさ
プログレスバー	進捗の表示	ダウンロード進捗

ユーザビリティとアクセシビリティ

ユーザビリティ

ISO 9241-11 では、ユーザビリティを「特定の利用状況において、特定のユーザーが特定の目的を達成する際の 有効さ 、 効率 、 満足度 」と定義しています。簡単に言えば「使いやすさ」のことです。

ヤコブ・ニールセンはユーザビリティを5つの要素で定義しました:

1. 学習しやすさ: 初めてでもすぐに使い始められる
2. 効率性: 慣れたら素早く操作できる
3. 記憶しやすさ: 久しぶりに使ってもやり方を思い出せる
4. エラーの少なさ: 操作ミスが少なく、ミスしてもすぐ回復できる
5. 満足度: 使っていて快適・満足できる

アクセシビリティ

年齢や障害の有無に関係なく、 誰でも 情報やサービスにアクセスできることです。Web アクセシビリティの国際標準として WCAG（Web Content Accessibility Guidelines） があります。

具体的な対応例:

• 画像に 代替テキスト（alt 属性） を設定する（視覚障害者のスクリーンリーダー対応）
• 十分な 色のコントラスト比 を確保する
• キーボードだけで全操作を完結できるようにする
• 動画に 字幕 を付ける（聴覚障害者への配慮）

UX（ユーザエクスペリエンス）

UX はユーザーが製品やサービスを利用する中で得られる 体験全体 を指します。UI がボタンや画面といった「接点」の話であるのに対し、UX は使用前の期待から使用後の感想までを含む、より広い概念です。

たとえばネットショッピングの場合:

• UI の話: ボタンの色、文字の大きさ、レイアウト
• UX の話: 商品を見つけやすいか、購入手続きがスムーズか、届いた商品に満足したか

UI はあくまで UX を構成する一部であり、優れた UX を実現するには UI だけでなく、コンテンツの質、レスポンスの速さ、サポート体制なども含めた総合的な設計が必要です。

インターフェースの設計原則

使いやすいインターフェースを設計するために、いくつかの設計原則が知られています。

原則	説明	具体例
直感的な操作	説明書なしで操作方法がわかる	ゴミ箱アイコンにファイルをドラッグして削除
一貫性	同じ操作には同じ結果を返す	どの画面でも「戻る」ボタンが同じ位置にある
フィードバック	操作結果を即座にユーザーに伝える	ボタンを押すと色が変わる、処理中はローディング表示
エラー防止	そもそもエラーが起きにくい設計	入力フォームで不正な値を入力できないようにする
元に戻せる	操作を取り消す手段を提供する	「元に戻す（Ctrl+Z）」機能

ヒューマンインターフェースの設計手法

手法	説明
ペーパープロトタイプ	紙に画面を描いて操作をシミュレーションする低コストな手法
ワイヤーフレーム	画面のレイアウトを線と枠で表現した設計図
モックアップ	実際に近い見た目のデザイン画
プロトタイプ	一部の機能を実装した試作品で実際に操作できる
ユーザビリティテスト	実際のユーザーに操作してもらい問題点を発見する

Web デザインの原則

レスポンシブデザイン

画面サイズ（PC・タブレット・スマートフォン）に応じてレイアウトが自動的に変化するデザイン手法です。1つの HTML を用意し、CSS の メディアクエリ で表示を切り替えます。

ナビゲーション設計

ユーザーが迷わず目的のページにたどり着けるように、サイト内の移動手段を設計することです。

ナビゲーション	説明
グローバルナビゲーション	全ページ共通のメニュー（ヘッダー部分）
ローカルナビゲーション	特定のカテゴリ内のメニュー（サイドバー等）
パンくずリスト	現在地を階層的に表示（トップ > カテゴリ > 商品名）
サイトマップ	サイト全体の構成を一覧表示

ユニバーサルデザインとの関連

Web デザインでは、色覚の多様性に配慮した カラーユニバーサルデザイン 、高齢者や障害者に配慮した アクセシブルなデザイン が求められます。これは次のセクション以降でも詳しく扱います。

写真、音楽、動画、アニメーションなど、文字以外の多様な情報を扱う技術を マルチメディア と呼びます。スマートフォンで写真を撮ったり、動画を配信したりする行為は、すべてマルチメディア技術に支えられています。

このセクションでは、 静止画 ・ 動画 ・ 音声 のデータ形式と圧縮技術を学びます。FE 試験では データ量の計算問題 が頻出するため、画像と音声のデータ量を求める公式もしっかり押さえましょう。

静止画のデータ形式

デジタル画像には大きく分けて ラスタ形式 と ベクタ形式 の2種類があります。

ラスタ形式（ビットマップ形式）

画像を ピクセル（画素） の集まりで表現します。写真のように色の変化が複雑な画像に適しています。拡大するとピクセルが見えて画質が劣化します。

形式	特徴	用途
JPEG	非可逆圧縮。フルカラー（約1677万色）対応。圧縮率が高い	写真
PNG	可逆圧縮。透過（透明）に対応。フルカラー対応	Webグラフィックス、ロゴ
GIF	可逆圧縮。256色まで。アニメーション対応	簡単なアニメーション、アイコン
BMP	無圧縮。ファイルサイズが大きい	Windows標準
TIFF	可逆圧縮/無圧縮。高品質	印刷、医療画像
WebP	可逆/非可逆圧縮。JPEGより高圧縮で高品質	Web（Google開発）

ベクタ形式

画像を 数式（座標・線・曲線） で表現します。拡大しても画質が劣化しないのが最大の利点です。

形式	特徴	用途
SVG	XMLベース。Webブラウザで表示可能	Webアイコン、ロゴ、図
PDF	文書の体裁を保持。印刷向き	電子文書

色の表現とデータ量

色深度（ビット深度）

1ピクセルの色を表すために使うビット数を 色深度 と呼びます。

色深度	表現可能な色数	計算
1ビット	2色（白黒）	2の1乗 = 2
8ビット	256色	2の8乗 = 256
16ビット	65,536色（ハイカラー）	2の16乗 = 65,536
24ビット	約1677万色（フルカラー）	2の24乗 = 16,777,216
32ビット	約1677万色 + 透明度	24ビット色 + 8ビットアルファ

フルカラー（24ビット）は RGB 各8ビット（256段階）で構成されます。

画像のデータ量計算

画像データ量（ビット） = 横のピクセル数 × 縦のピクセル数 × 色深度

バイトに変換するには8で割ります。

計算例1: 解像度 1920 × 1080、フルカラー（24ビット）の画像

• データ量 = 1920 × 1080 × 24 ビット = 49,766,400 ビット
• バイト換算 = 49,766,400 / 8 = 6,220,800 バイト ≒ 約 5.93 MB

計算例2: 解像度 640 × 480、256色（8ビット）の画像

• データ量 = 640 × 480 × 8 ビット = 2,457,600 ビット
• バイト換算 = 2,457,600 / 8 = 307,200 バイト = 300 KB

音声のデジタル化

アナログの音声をデジタルデータに変換するには、 標本化（サンプリング） → 量子化 → 符号化 の3ステップを行います。

ステップ	説明	パラメータ
標本化（サンプリング）	アナログ波形を一定時間ごとに計測する	サンプリング周波数 （Hz）: 1秒間に何回計測するか
量子化	計測値を離散的な整数値に丸める	量子化ビット数 : 何段階で表現するか
符号化	量子化した値を2進数で表現する	ビット列への変換

サンプリング定理（ナイキストの定理）: 原音を正しく再現するには、原音の最高周波数の 2倍以上 のサンプリング周波数が必要です。

例: CD の音質

• 人間の可聴域の上限は約 20,000 Hz
• CD のサンプリング周波数は 44,100 Hz（20,000 の2倍以上）
• 量子化ビット数は 16 ビット（65,536 段階）
• チャネル数は 2（ステレオ）

音声のデータ量計算

音声データ量（ビット） = サンプリング周波数 × 量子化ビット数 × チャネル数 × 秒数

バイトに変換するには8で割ります。

計算例1: CD 音質で60秒間の音声データ量

• サンプリング周波数: 44,100 Hz
• 量子化ビット数: 16 ビット
• チャネル数: 2（ステレオ）
• データ量 = 44,100 × 16 × 2 × 60 = 84,672,000 ビット
• バイト換算 = 84,672,000 / 8 = 10,584,000 バイト ≒ 約 10.1 MB

計算例2: 電話音質（8,000 Hz, 8ビット, モノラル）で30秒間

• データ量 = 8,000 × 8 × 1 × 30 = 1,920,000 ビット
• バイト換算 = 1,920,000 / 8 = 240,000 バイト = 約 234 KB

音声のデータ形式

形式	特徴	圧縮
WAV	無圧縮が一般的。高音質だがファイルサイズ大	非圧縮
MP3	非可逆圧縮。人間の耳に聞こえにくい音を削除	非可逆
AAC	MP3の後継。同じビットレートでMP3より高音質	非可逆
FLAC	可逆圧縮。元の音質を完全に復元可能	可逆
MIDI	音の高さ・長さ・楽器の種類を記録（演奏情報）	-

動画のデータ形式

動画は 静止画（フレーム）を高速に連続表示 することで動きを表現します。1秒あたりのフレーム数を フレームレート（fps: frames per second） と呼びます。

フレームレート	用途
24 fps	映画
30 fps	テレビ放送、一般的な動画
60 fps	ゲーム、スポーツ中継

動画のデータ形式

形式	特徴
MPEG-1	VCD（ビデオCD）で使用。画質は低い
MPEG-2	DVD、デジタルテレビ放送で使用
MPEG-4（H.264/AVC）	Web動画やBlu-rayで広く使用。高圧縮・高画質
H.265/HEVC	H.264の後継。同画質で約半分のデータ量
AVI	Microsoft開発のコンテナ形式
MP4	MPEG-4ベースのコンテナ形式。最も汎用的

コンテナとコーデック

動画ファイルは コンテナ（入れ物） と コーデック（圧縮方式） の2つの概念で構成されます。

• コンテナ: 映像・音声・字幕などをまとめるファイル形式（MP4, AVI, MKV など）
• コーデック: 映像や音声を圧縮・伸張する方式（H.264, H.265, VP9 など）

同じ MP4 ファイルでも、使われるコーデックが異なれば画質やファイルサイズが変わります。

データ圧縮の基礎

マルチメディアデータはファイルサイズが大きいため、 圧縮 技術が不可欠です。

可逆圧縮と非可逆圧縮

種類	特徴	用途
可逆圧縮（ロスレス）	元のデータを完全に復元できる	テキスト、プログラム、PNG、FLAC
非可逆圧縮（ロッシー）	一部のデータを捨てて高圧縮。元に戻せない	JPEG、MP3、H.264

代表的な圧縮アルゴリズム

アルゴリズム	種類	説明
ランレングス符号化	可逆	同じ値の連続を「値 × 回数」で表現（例: AAAA → A4）
ハフマン符号化	可逆	出現頻度が高いデータに短い符号を割り当てる

ランレングス符号化は FAX（ファクシミリ）で使われています。白黒の画像は同じ色のピクセルが連続しやすいため、高い圧縮効果が得られます。

情報があふれる現代社会では、必要な情報を わかりやすく 、 正確に 、 誰にでも 伝えることが重要です。たとえば、駅の案内板は日本語が読めない外国人にも伝わるようにピクトグラム（絵文字）を使っていますし、グラフや図解は数字の羅列よりもはるかに直感的に情報を伝えます。

このセクションでは、情報を効果的に伝える 情報デザイン の考え方と、 ユニバーサルデザイン 、 カラーユニバーサルデザイン など、誰にでも使いやすいデザインの原則を学びます。

インフォグラフィックス

複雑なデータや情報を、図・グラフ・イラストなどを使って 視覚的にわかりやすく 表現する手法を インフォグラフィックス と呼びます。新聞や Web メディアでよく使われています。

代表的な可視化手法

手法	特徴	適した用途
棒グラフ	量の比較がしやすい	売上の月別比較、人口比較
折れ線グラフ	時間的な変化・傾向がわかる	気温の推移、株価の変動
円グラフ	全体に占める割合がわかる	シェア、構成比
散布図	2つの要素の関係（相関）がわかる	身長と体重の関係
ヒートマップ	数値の大小を色の濃淡で表現	Webサイトのクリック分析
レーダーチャート	複数の評価項目をバランスで比較	能力評価、製品比較

グラフの選び方を誤ると、データの意味が正しく伝わりません。たとえば、時間変化を表すのに円グラフを使うのは不適切です。「何を伝えたいか」によって適切な可視化手法を選ぶことが重要です。

ユニバーサルデザイン

ユニバーサルデザイン（UD） とは、年齢、性別、国籍、障害の有無にかかわらず、 できるだけ多くの人が利用できる ように製品やサービスを設計する考え方です。アメリカの建築家ロナルド・メイスが提唱しました。

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

原則	説明	身近な例
1. 公平な利用	誰でも同じように使える	自動ドア（手が塞がっていても開く）
2. 利用の柔軟性	多様な使い方に対応	左右どちらの手でも使えるハサミ
3. 単純で直感的	使い方がすぐわかる	押すと出る石鹸ディスペンサー
4. わかりやすい情報	必要な情報が効果的に伝わる	多言語表示の案内板
5. エラーへの寛容	間違えても危険にならない	電子レンジのドアを開けると停止
6. 少ない身体的負担	無理なく楽に使える	レバー式の水道蛇口（握力不要）
7. 十分な大きさと空間	体格に関係なく使える	幅の広い改札口（車椅子対応）

アクセシビリティとの違い

アクセシビリティが「障害者や高齢者への配慮（バリアフリー）」に重点を置くのに対し、ユニバーサルデザインは 最初からすべての人を対象に設計する という考え方です。階段の横にスロープを後付けするのはバリアフリー、最初から段差のない設計にするのがユニバーサルデザインです。

カラーユニバーサルデザイン（CUD）

人間の色の見え方は個人差があり、日本人男性の約5%（20人に1人）、女性の約0.2%は色の見え方が一般と異なる 色覚多様性 を持っています。 カラーユニバーサルデザイン（CUD） は、色覚の違いに配慮して、できるだけ多くの人に情報が正しく伝わるように配色を工夫するデザインです。

CUD の3つの基本ルール

1. 色だけに頼らない: 色に加えて形、模様、文字ラベルなど複数の手段で情報を区別する
2. 見分けやすい配色を選ぶ: 赤と緑の組み合わせを避け、青とオレンジなど区別しやすい色を使う
3. コントラストを十分に確保する: 背景色と文字色の明度差を大きくする

具体的な対応例

場面	色だけの表現（問題あり）	CUD 対応
グラフ	色の違いだけで系列を区別	模様や形（丸・三角・四角）を併用
エラー表示	赤文字だけでエラーを示す	赤文字 + アイコン + 「エラー」テキスト
信号機	赤・黄・緑の色だけ	色 + 位置（上・中・下）で判別可能
リンク	色の変化だけで区別	色 + 下線で区別

ピクトグラム

ピクトグラム とは、情報や注意事項を 単純化された絵記号 で表現したものです。言語に依存しないため、国際的なコミュニケーション手段として広く使われています。

利用場面	具体例
交通	非常口マーク、道路標識
公共施設	トイレ、エレベーター、車椅子マーク
国際イベント	オリンピック競技種目のアイコン
製品	洗濯表示、リサイクルマーク
災害	避難場所、津波注意

日本では 1964年の東京オリンピック で外国人向けに多数のピクトグラムが開発され、世界的に普及するきっかけとなりました。現在は ISO（国際標準化機構） や JIS（日本産業規格） でピクトグラムの標準化が進んでいます。

ピクトグラムの設計で重要なのは:

• シンプルさ: 一目で意味がわかる
• 普遍性: 文化や言語に依存しない
• 統一性: 同じ種類の情報には同じスタイルを使う

情報アーキテクチャ（IA）

Webサイトやアプリの情報を整理・構造化し、ユーザーが目的の情報にたどり着きやすくする設計手法を 情報アーキテクチャ（IA: Information Architecture） と呼びます。

情報の構造化パターン

パターン	説明	例
階層型	大分類→中分類→小分類とツリー構造で整理	ECサイトのカテゴリ
直線型	情報を順序通りに並べる	会員登録のステップ画面
マトリックス型	2つ以上の軸で情報を分類	商品の価格×機能比較表
ハブ＆スポーク型	中心ページから各機能に放射状にアクセス	スマートフォンのホーム画面

情報アーキテクチャの目的は、ユーザーが「今どこにいるのか」「どこに行けるのか」「何ができるのか」を常に理解できるようにすることです。前のセクションで学んだパンくずリストやナビゲーション設計も、IA の一部です。