第43話「使いやすい画面って？」
テクノロジ系 ／ UI・マルチメディア ── テーマ：UX・シグニファイア・GUI部品・ベクター・ランレングス
▶ マンガで読む（無料・登録なし）この話で覚える用語（7語）
- UXデザインゆーえっくすでざいん
- 製品やサービスを使う前・使っている間・使った後まで、利用者が得る体験の全体を、より良いものにするように設計すること。画面の見た目（UI）だけでなく、体験までを考える。
- ユーザビリティゆーざびりてぃ
- 使いやすさ。決まった利用者が決まった目的を果たすときに、どれだけ有効に・効率よく・満足して使えるかの度合い。誰もが利用できるかを表すアクセシビリティとは視点が違う。
- シグニファイアしぐにふぁいあ
- どこをどう操作すればよいかを、利用者に伝える手がかり。押せそうに見えるボタンの影、ドアの「押す」「引く」の表示や、取っ手の形など。
- レスポンシブWebデザインれすぽんしぶうぇぶでざいん
- パソコン・タブレット・スマートフォンなど、表示する画面の幅に合わせて、1つのWebページのレイアウトが自動で切り替わるように作る手法。
- ラジオボタンらじおぼたん
- 画面の部品で、いくつかの選択肢の中から1つだけを選ぶためのもの。1つを選ぶと、ほかの選択は自動で外れる。いくつでも選べる部品はチェックボックス。
- ベクター形式べくたーけいしき
- 画像を、点や線の座標・曲線の式・色などの数値で表す形式。拡大・縮小しても輪郭がなめらかなまま。ロゴや図面向き。画素の集まりで表すラスターとは異なる。
- ランレングス法らんれんぐすほう
- 同じ値（色や文字）が続く部分を「値と、続く個数」の組に置きかえて、データ量を減らす可逆圧縮の方法。例：白白白白黒黒→白4黒2。同じ値が続かないデータでは効果がない。
試験に出るポイント
- ラジオボタン＝昔のラジオの選局ボタン。1つ押すと前のがポンと戻る
- チェックボックス＝買い物リストの☑。いくつでもチェックOK
- ベクターは「べつに拡大してもくっきり」／ラスターは点々の集まり
- 画面の色は光を足す加法混色（RGB→白）、印刷はインクの減法混色（CMY→黒っぽく）
- 「か（加）はがめん（画面）、げん（減）はげんこう（原稿）の印刷」
- シグニファイア＝「サイン（sign）を出す」。押せそうな影・取っ手の形
- 利用者の体験全体を設計 → UXデザイン／使いやすさの度合い → ユーザビリティ
- 操作のしかたを伝える手がかり → シグニファイア
- 画面の幅に合わせてレイアウトが変わる → レスポンシブWebデザイン
- 1つだけ選ぶ → ラジオボタン／いくつでも選べる → チェックボックス
- 拡大してもなめらか → ベクター形式／点の集まり → ラスター形式
- 同じ値の連続を「値と個数」で表す → ランレングス法（可逆圧縮）
確認クイズ（ITパスポート試験の形式）
- シグニファイア
- ユーザビリティ
- アクセシビリティ
- レスポンシブWebデザイン
答えと解説を見る
正解：ア シグニファイア
操作の手がかりはシグニファイア。使いやすさの度合いはユーザビリティ、誰もが利用できる度合いはアクセシビリティ、画面の幅に合わせてレイアウトが変わるのはレスポンシブWebデザインです。
- 図形を座標や線などの数値で表すので、拡大しても輪郭がなめらか
- 画像を画素の集まりで表すので、拡大すると輪郭がギザギザになる
- 一部の情報を捨てることで、写真を高い圧縮率で保存できる
- 同じ色が続く部分を「色と個数」で表して、データ量を減らす
答えと解説を見る
正解：ア 図形を座標や線などの数値で表すので、拡大しても輪郭がなめらか
数値で形を表すので拡大してもなめらかなのがベクター形式。画素の集まりはラスター形式、情報を捨てて縮めるのは非可逆圧縮、色と個数で表すのはランレングス法です。
- W4B2W3
- W3B2W4
- W4B3W2
- W7B2
答えと解説を見る
正解：ア W4B2W3
左から同じ色が続く数を数えます。Wが4個、Bが2個、Wが3個なのでW4B2W3。離れたWをまとめてW7とすると、元の並び順に戻せません。
マンガのセリフ（文字版）
ミライ「家計簿アプリの新しい画面、できました！ボタンは全部同じ色・同じ形で統一感バッチリ！」
ツカサ先輩「「保存」と「削除」が見分けられないぞ！押しまちがえたら家計簿が消える！」
ミライ「統一感が…裏目に…」
ツカサ先輩「見た目だけじゃない。使う人の体験まるごとを良くする設計がUXデザインだ」
ツカサ先輩「中でも大事なのがユーザビリティ。迷わず・ムダなく・満足して使えるかだ」
ミライ「保存と削除は、色と位置で対比させればいいんだ！」
ツカサ先輩「それと「ここを押せる」と伝える手がかりも要る。シグニファイアという」
部長「このドア、何度押しても開かん！壊れとるぞ！」
ツカサ先輩「部長、「引く」と書いてあります…」
ツカサ先輩「でも押したくなる取っ手も悪い。形で伝えるのもシグニファイアです」
ミライ「スマホで見たら、画面の右がはみ出してます…」
ツカサ先輩「画面の幅に合わせて並びが変わるレスポンシブWebデザインにしよう」
ツカサ先輩「設計は小さいスマホから先に考える。モバイルファーストだ」
ミライ「支払い方法はチェックボックスに！現金もカードも全部選べてお得です！」
ツカサ先輩「お得じゃない！1つだけ選ばせるならラジオボタンだ」
ツカサ先輩「チェックボックスはいくつでも選べる部品だ」
ミライ「スマホは指でなぞったり、はじいたり。声で頼めるアプリもありますね」
ツカサ先輩「指の動きで操作するのがジェスチャー操作。声で操作するしくみはVUIだ」
ミライ「ロゴを大きくしたら、ふちがギザギザに…」
ツカサ先輩「点（画素）の集まりのラスター形式だからだ」
ツカサ先輩「形を数値で表すベクター形式なら、拡大してもなめらかだぞ」
ツカサ先輩「データを決まった方式に変換するのがエンコード、元に戻すのがデコードだ」
ツカサ先輩「同じ色が続く所を「白が5個」とまとめるのがランレングス法。小さくできる」
ミライ「「白白白白白」より「白5」のほうが短い！」
- ラジオボタン＝昔のラジオの選局ボタン。1つ押すと前のがポンと戻る
- チェックボックス＝買い物リストの☑。いくつでもチェックOK
- ベクターは「べつに拡大してもくっきり」／ラスターは点々の集まり
- 画面の色は光を足す加法混色（RGB→白）、印刷はインクの減法混色（CMY→黒っぽく）
- 「か（加）はがめん（画面）、げん（減）はげんこう（原稿）の印刷」
- シグニファイア＝「サイン（sign）を出す」。押せそうな影・取っ手の形
- 利用者の体験全体を設計 → UXデザイン／使いやすさの度合い → ユーザビリティ
- 操作のしかたを伝える手がかり → シグニファイア
- 画面の幅に合わせてレイアウトが変わる → レスポンシブWebデザイン
- 1つだけ選ぶ → ラジオボタン／いくつでも選べる → チェックボックス
- 拡大してもなめらか → ベクター形式／点の集まり → ラスター形式
- 同じ値の連続を「値と個数」で表す → ランレングス法（可逆圧縮）
社内アンケートの準備中
部長「「部長は好きですか」の質問は、「はい」だけのラジオボタンにしといたぞ」
ツカサ先輩「選択肢が1つでは、選ぶ意味がありません！」