画面と表現
INPUT · スライド
01 / 12
HTML / CSS のコースで、ボタンやフォームを組んだよね。動くものは作れた。でもそれが使いやすいかどうかは、また別の話なんだ。
人と機械のあいだの接点を ヒューマンインタフェース と呼ぶ。画面、ボタン、キーボード、タッチ操作 — 利用者が機械にさわる場所すべてがこれだよ。
大事なのは、使いやすさが偶然できるものではないということ。「分かりやすく作る」は気持ちの問題ではなく、守るべき原則がある設計作業なんだ。試験でもここは「留意点として適切なものはどれか」という形で毎回問われるよ。
02 / 12
覚えることは3つでいい。一貫性・フィードバック・エラーの防ぎ方だよ。
まぎらわしいのは、この3つがどれも「使いやすさのため」なので、一貫性を聞かれているのにフィードバックの説明を選んでしまうこと。区別のしかたはあとで練習するよ。
03 / 12
もう1つの原則が 利用者を選ばないこと。同じ画面を、初めての人と毎日使う人が両方使うんだ。
初めての人は、覚えなくても分かる操作がうれしい。一覧から選ぶ、書いてあるボタンを押す、といった見えている操作だよ。
毎日使う人は、速さがうれしい。ショートカットキーで打ちきるほうが、いちいち選ぶより速い。
どちらを取るか、と考えると失敗する。答えは両方を用意するだよ。同じ操作にマウスの道とキーボードの道を両方つけておけば、どちらの人も自分のやり方で使える。片方に寄せた案は、必ずもう片方の人を切り捨てているよ。
04 / 12
フォームを組むとき、<input type="radio"> と <select> のどちらにするか迷ったことがあるはず。選び方には決まりがあるよ。
見分けの軸は2つだよ。1つだけか複数か（ラジオ／チェックボックス）、そして全部見せるか、たたむか（ラジオ／プルダウン）。
プルダウンにできる条件はもう1つある。選択肢を先に全部書き出せることだよ。「商品区分」が5種類なら並べておけるけれど、自由に書ける「商品名」や商品ごとに新しく付ける「商品番号」は一覧にならない。「10,000 円〜100,000 円」のような幅の広い数値も、並べたら9万件を超えてしまう。
プルダウン向き 区分・都道府県・年月向かない 自由な名前 一意な番号 幅の広い数値05 / 12
似ているけれど別のことばだよ。混ぜると試験で必ず落とされる。
順番で考えると分かりやすい。アクセシビリティは「使える」、ユーザビリティは「気持ちよく使える」。まず使えることを満たしてから、快適さを詰めるよ。
06 / 12
HTML で <img src="cat.jpg" alt="窓辺で眠る猫"> と書いた alt を、面倒な決まりだと思っていたかもしれない。あれは画像が見えない人のためのことばだよ。
画面読み上げソフトは、画像そのものを読めない。読み上げるのは alt に書かれた文字だけ。だから alt が空だったり alt="画像" だったりすると、その人にはそこに何があるのか一生分からない。これが ウェブアクセシビリティ の中心にある話だよ。
もう1つ、色だけに頼らないという原則もある。「必須の項目は赤で表示」だけでは、色の見え方が違う人に伝わらない。* を付ける、「必須」と書き添える、といった色以外の手がかりを必ず足すんだ。
エラーメッセージを赤い枠だけで示していた自分のフォームを、いま思い出してみよう。
× 必須項目は赤で表示○ 必須項目は赤 + 「必須」 と文字でも書く07 / 12
商品や社員に振る番号のことを コード と呼ぶ。適当に付けてよさそうに見えて、これも設計の対象だよ。
TV-32 のように、見ただけで内容が読める最後のがおもしろい。もとの各桁から決まった計算で1桁を作り、末尾にくっつけておく。読み取ったコードで同じ計算をして合わなければ、打ち間違いだと気づけるんだ。
各桁に重みを掛けて足す ↓10 で割った余りを出す ↓それを末尾の1桁にする08 / 12
ここから素材の話。画像がどう持たれているかを知ると、形式選びの理由が全部つながるよ。
画像は小さな点を並べたものだ。この1点を 画素（ピクセル）と呼ぶ。解像度 は点の細かさで、1000×800 のように縦横の点の数で表したり、dpi（1インチあたりの点の数）で表したりする。
1つの画素が何段階の濃さを持てるかが 階調 だよ。階調はビット数で決まる。8ビットなら 2 の8乗 = 256 段階。
色数も同じ考え方だ。赤・緑・青にそれぞれ8ビット割り当てれば 24 ビット、表せる色は 2 の24乗 = 約 1678 万色。これが #ff0000 の6桁が意味しているもので、いわゆるフルカラーだよ。
この RGB は光の足し算（加法混色）。強くするほど明るくなり、3つ全開で白。#000000 が黒なのは、何も光らせない状態が黒だからだね。画面の色はこちら。
印刷は逆で、CMYK のインクの引き算（減法混色）を使う。シアン・マゼンタ・イエローを重ねるほど暗くなり、黒に近づく（きれいな黒が出ないので黒インク K を別に持っている）。だから画面で見た色は、そのまま印刷しても同じにはならないんだ。
階調 8 ビット → 256 段階RGB 各 8 ビット = 24 ビット = 約 1678 万色RGB … 光を足す → 白CMYK … インクを重ねる → 黒に近づく09 / 12
画像の容量は、画素数 × 1画素のビット数。それだけだよ。
1,000×800 ドットで 65,536 色の画像なら、65,536 = 2 の16乗なので1画素は 16ビット = 2バイト。画素は 1000 × 800 = 80万個。掛けて 160万バイト、つまり約 1.6M バイト だね。
動画はそこに1秒あたりのコマ数を掛けるだけ。800×600 の24ビットフルカラーを毎秒30コマ流すなら、800 × 600 × 24 × 30 で約 350M ビット／秒になる。
引っかかるのはビットとバイトの取り違えだよ。「何M バイトか」と聞かれたら8で割る、「何M ビット／秒か」ならそのまま。単位を先に見る癖をつけよう。
1000 × 800 = 800000 画素色数 65536 = 2^16 → 1 画素 2 バイト800000 × 2 = 1600000 → 約 1.6M バイト10 / 12
いよいよ本題。圧縮には2種類あって、そこが分かれ目だよ。
HTML / CSS で組んだページを思い出そう。ヒーローの背景に敷いた写真は .jpg、ヘッダーに置いたロゴやアイコンは .png や .svg にしていたはずだ。その使い分けの理由がここにある。
JPEG は写真のための形式で、静止画の圧縮符号化の国際標準。人の目に分かりにくい情報を捨てるので、写真をとても小さくできる。ただし文字やベタ塗りの境界はにじむ。ロゴを JPEG にすると輪郭が汚れるのはこのせいだよ。
PNG は可逆なので、輪郭がそのまま残る。透明も扱えるので、背景の上に重ねるアイコンにも向く。
width を変えて使うロゴやアイコンに強い「写真は JPEG、アイコンは PNG」の理由は、にじんでよいか／輪郭を守るかの一言だよ。
11 / 12
音は本来なめらかな波で、そのままでは 0 と 1 にできない。3段階に分けてデジタルに落とすんだ。
1. 標本化（サンプリング） … 一定の間隔で波の高さを切り出す
2. 量子化 … 切り出した値を決まった段数に丸める
3. 符号化 … 丸めた値を 0 と 1 の並びにする
順番は必ず標本化 → 量子化 → 符号化。1秒あたり何回切り出すかが標本化周波数（44.1kHz なら毎秒 44,100 回）、1回を何ビットで表すかが量子化ビット数だよ。
容量はまたかけ算。標本化周波数 × 量子化ビット数 × 秒数、ステレオならさらに2倍。
動画は MPEG 系が標準で、なかでも H.264/MPEG-4 AVC はワンセグやネット配信で使われる動画の圧縮方式。音声だけを圧縮するのが MP3 だよ。
アナログ ↓ 標本化(時間で切る) ↓ 量子化(値を丸める) ↓ 符号化(0と1にする)デジタル12 / 12
最後に、図形を描く技術の用語をまとめておくよ。名前だけ出て「説明はどれか」と問われる形が多い。
描く道具にも2種類ある。ペイントソフトは画素の集まり（ビットマップ）として絵を持ち、ドローソフトは線や図形を始点・方向・長さといった指示として持つ。だからドローソフトの絵は拡大しても荒れない — SVG とまったく同じ考え方だよ。
もう1つ、文字・静止画・動画・音声といった複数の素材をシナリオに沿って組み立てる道具を オーサリングソフト と呼ぶ。選択肢に並んだときの受け皿として名前だけ覚えておこう。