インタフェース設計
このノートの問いがそのまま復習カードになり、忘れかけたころに出題されます。
シラバス Ver.6.5 の小分類 51「インタフェース設計」（大分類 9：技術要素／中分類 19：情報デザイン）。
2026-08-05 にシラバス本文と突合済み。
0. 何を押さえるか
画面の部品と、操作の方法、画面の作り方の 3 つです。
部品でよく問われるのは、ラジオボタンとチェックボックスの違いです。
| 選べる数 | |
|---|---|
| ラジオボタン | 1 つだけ（排他） |
| チェックボックス | 複数（それぞれ独立） |
丸いのが 1 つだけ、四角いのが複数と覚えると迷いません。
もう 1 つはモバイルファーストとレスポンシブ Web デザインです。
前者は設計の順序、後者は実現の技術で、対立する概念ではありません。
1. 使いやすさ
根拠: シラバス 9-19-51
ユーザビリティとは？ アクセシビリティとの違いは？
| 何を問うか | |
|---|---|
| ユーザビリティ | 対象の利用者にとってどれだけ使いやすいか |
| アクセシビリティ | そもそも利用できるか（利用できる人の幅） |
使えるようにするのがアクセシビリティ、使いやすくするのがユーザビリティ。
アクセシビリティが前提にあり、その上にユーザビリティが乗る。
2. 操作の方法
根拠: シラバス 9-19-51
マルチタッチインタフェースの代表的な操作は？
| 操作 | 動き |
|---|---|
| タップ | 軽く 1 回触れる |
| スワイプ | 触れたまま滑らせる |
| フリック | 素早くはらう |
| ピンチ | 2 本指を広げる／狭める（拡大・縮小） |
| ロングプレス | 長押しする |
複数の指の接触を同時に認識できることが「マルチタッチ」の意味。
ジェスチャーインタフェースと VUI の違いは？
| 何で操作するか | |
|---|---|
| ジェスチャーインタフェース | 体の動き（手を振る、指を動かす） |
| VUI（Voice User Interface） | 音声 |
どちらも画面や機器に触れずに操作できるのが利点。
手がふさがっている場面や、衛生上触れたくない場面で使われる。
3. 画面の部品
根拠: シラバス 9-19-51
ラジオボタンとチェックボックスの違いは？
| 選べる数 | 形 | |
|---|---|---|
| ラジオボタン | 1 つだけ（他を選ぶと前の選択が外れる） | 丸 |
| チェックボックス | いくつでも（それぞれ独立） | 四角 |
選択肢が排他かどうかで使い分ける。
性別や配送方法はラジオボタン、興味のある分野はチェックボックス。
リストボックス・プルダウンメニュー・ポップアップメニューの違いは？
| 何か | |
|---|---|
| リストボックス | 選択肢を一覧表示しておき、そこから選ぶ |
| プルダウンメニュー | ふだんは畳まれていて、押すと下に開く |
| ポップアップメニュー | 操作した位置にその場で現れる（右クリックなど） |
選択肢が多いときはプルダウン、
常に全部見せたいときはリストボックス。
ウィンドウ・アイコン・メニューバーの役割は？
| 何か | |
|---|---|
| ウィンドウ | 作業領域を区切る枠。複数を並べて使える |
| アイコン | 機能やファイルを絵で表した記号 |
| メニューバー | 画面上部に並ぶ、機能の入口 |
これらを組み合わせ、マウスで直感的に操作する方式を GUI という。
サムネイル・ホバー・ツールチップとは？
| 何か | |
|---|---|
| サムネイル | 内容を縮小表示した見本画像 |
| ホバー（ロールオーバー） | 要素の上にカーソルを乗せた状態。見た目が変わる |
| ツールチップ | ホバーしたときに現れる小さな説明 |
ホバーは状態、ツールチップは出てくるもの。
ホバーで見た目が変わることは、操作できると伝えるシグニファイアになる。
ヘルプ機能はどう設計すべきか？
必要になった場面で、その文脈に応じた説明が出るのが望ましい。
- 入力欄のそばに例を示す
- 分からない語にツールチップを付ける
- 検索できる形で提供する
別途マニュアルを読ませる形は、実際には読まれない。
4. 画面の作り方
根拠: シラバス 9-19-51
CSS とは？
CSS（Cascading Style Sheets）
＝ Web ページの見た目（色・配置・文字の大きさ）を指定する仕組み
HTML が構造、CSS が見た目と役割が分かれている。
分けておくことで、同じ HTML のまま見た目だけを切り替えられる——
これがレスポンシブ Web デザインの土台になる。
モバイルファーストとレスポンシブ Web デザインの違いは？
| 何か | |
|---|---|
| モバイルファースト | 設計の順序。スマートフォン向けを先に設計し、大きい画面へ広げる |
| レスポンシブWebデザイン | 実現の技術。画面の幅に応じてレイアウトを自動で切り替える |
考え方（順序）か、作り方（技術）か。 対立する概念ではなく、併用される。
リダイレクトとは？
アクセスされた URL から、別の URL へ自動的に転送すること
- サイトを移転したとき、古い URL から新しい URL へ
- HTTP でのアクセスを HTTPS へ
利用者が古い情報のまま辿り着いても、
正しい場所へ届くようにするための仕組み。