📒 ミライのITパス日誌

第39話「ボタンが押しにくい」

テクノロジ系 / UI・マルチメディア ── テーマ:UI・解像度・色・画像形式・圧縮・AR/VR

▶ マンガで読む(無料・登録なし)

この話で覚える用語(7語)

GUIじーゆーあい
グラフィカルユーザインタフェース。アイコンやボタンなどの絵を、マウスや指で操作する画面のこと。文字で命令を打ちこむ方式はCUIという。
ユニバーサルデザインゆにばーさるでざいん
年齢・国籍・障がいの有無などにかかわらず、最初からできるだけ多くの人が使いやすいように設計する考え方。
アクセシビリティあくせしびりてぃ
高齢者や障がいのある人を含め、誰もが情報やサービスを利用できる度合い。文字の拡大、読み上げへの対応、色だけに頼らない表示など。
解像度かいぞうど
画像や画面を構成する点(画素・ピクセル)の細かさ。画素の数が多いほど、きめ細かく表示できる。
光の三原色ひかりのさんげんしょく
赤(R)・緑(G)・青(B)。ディスプレイの色の表現に使う。3つを重ねると白になる。印刷に使う色の三原色(CMY)とは別。
非可逆圧縮ひかぎゃくあっしゅく
一部の情報を捨てて、データを大きく小さくする圧縮。完全には元に戻せない。JPEG・MPEG・MP3など。完全に戻せるものは可逆圧縮(PNG・GIF・ZIPなど)。
ARえーあーる
拡張現実。カメラに映した現実の景色に、コンピュータで作った情報や映像を重ねて表示する技術。VRは仮想の世界に入りこむ技術。

試験に出るポイント

覚え方:「非」がつくと戻れない
ここ試験に出る!

確認クイズ(ITパスポート試験の形式)

問1 写真などの静止画を、一部の情報を捨てることで高い圧縮率で保存するのに適したファイル形式はどれか。
  1. JPEG
  2. PNG
  3. GIF
  4. MPEG
答えと解説を見る

正解:ア JPEG
写真の非可逆圧縮はJPEG。PNGとGIFは可逆圧縮(GIFは256色まで)、MPEGは動画の形式です。

問2 ARの説明として、適切なものはどれか。
  1. 現実の映像に、コンピュータで作った情報を重ねて表示する
  2. 専用のゴーグルで、コンピュータが作った仮想の世界に入りこんだ体験をする
  3. 動画などのデータを受信しながら、同時に再生する
  4. 高齢者や障がいのある人も含め、誰もが情報を利用しやすくする
答えと解説を見る

正解:ア 現実の映像に、コンピュータで作った情報を重ねて表示する
ARは現実に「重ねる」技術。仮想の世界に入りこむのはVR、受信しながら再生はストリーミング、誰もが使える度合いはアクセシビリティです。

問3 ディスプレイで色を表現するときに使われる、光の三原色の組み合わせはどれか。
  1. 赤・緑・青
  2. シアン・マゼンタ・イエロー
  3. 赤・黄・青
  4. シアン・マゼンタ・イエロー・黒
答えと解説を見る

正解:ア 赤・緑・青
光の三原色はRGB(赤・緑・青)。シアン・マゼンタ・イエローは印刷に使う色の三原色で、黒を足したものがCMYKです。

▶ アプリでクイズに挑戦(間違えた問題は復習に残ります)

マンガのセリフ(文字版)

お客さまからの声――

ヤマダさん「家計簿アプリのボタンが小さくて、押しにくいんです。字も読みにくくて…」

ミライ「す、すみません!」

ツカサ先輩「ボタンやアイコンを触って操作する画面をGUIという」

ミライ「文字で命令を打つ黒い画面じゃないほうですね」

ツカサ先輩「最初から誰でも使えるように作る考え方がユニバーサルデザイン」

ツカサ先輩「高齢者や障がいのある人も含め、どれだけ使えるかの度合いがアクセシビリティだ」

🧴ユニバーサルデザイン最初から誰でも使える設計例:触ってわかるシャンプーのギザギザ🔍アクセシビリティ誰もが利用できる度合い例:文字の拡大・読み上げ対応😊UX(ユーザ体験)使って「便利・楽しい」と感じる体験の全体
使いやすさの言葉 UIは「画面」、UXは「体験」まで含む

ミライ「アイコンも、大きくしたらぼやけちゃいました…」

ツカサ先輩「画像は小さな点=画素の集まり。点の細かさが解像度だ」

ツカサ先輩「画面の色は赤・緑・青の光の三原色を混ぜて作る。全部重ねると白」

ツカサ先輩「印刷は色の三原色(CMY)。混ぜると黒に近づく」

光の三原色色の三原色色赤・緑・青(RGB)シアン・マゼンタ・イエロー(CMY)使う所ディスプレイ印刷全部混ぜると白黒(に近い色)
光の三原色と色の三原色 印刷では黒(K)を足してCMYKで刷ることが多い

ミライ「じゃあ絵の具の赤・緑・青を全部混ぜたら、真っ白に!」

ツカサ先輩「ならん!絵の具は色の三原色の仲間。混ぜるほど黒っぽくなる!」

ツカサ先輩「白くなるのは画面の光を重ねたときだけだ」

ミライ「写真をPNGで保存したら、すごく重いんです」

ツカサ先輩「写真はJPEGが向いてる。非可逆圧縮で、目立たない情報を捨てて小さくする」

形式圧縮向いているものJPEG非可逆写真PNG可逆イラスト・図背景の透過もできるGIF可逆(256色まで)簡単なイラストアニメーションMPEG非可逆動画MP3非可逆音楽
よく出るファイル形式 画像・動画・音楽で分けて覚える
📝 メモ:覚え方:「非」がつくと戻れない
  • 可逆圧縮=完全に元に戻せる(PNG・GIF・ZIP)
  • 非可逆圧縮=完全には戻らないが、ぐっと小さい(JPEG・MPEG・MP3)
  • ダジャレ:「ひ(非)がつくと、ひき返せない」
  • 写真・動画・音楽は、少し捨てても人は気づきにくい → 非可逆
  • GIFは小さなギフト箱:256色までしか入らない。写真には不向き

ミライ「スマホのゲームで、部屋の中にキャラが出てきたんです!」

ツカサ先輩「それはAR(拡張現実)。現実の景色に情報を重ねる技術だ」

📱AR(拡張現実)現実の景色にデジタル情報を重ねる例:家具の試し置きアプリ🥽VR(仮想現実)ゴーグルで仮想の世界に入りこむ例:360度のバーチャル旅行🤝MR(複合現実)現実と仮想を混ぜ、仮想の物をその場で操作できる
AR・VR・MRのちがい 現実がベースか、仮想の世界に入るか

部長「VRゴーグルでハワイに来たぞ!会議?ワシは今、南の島だ!」

ミライ「部長、体は会議室です!VRは仮想の世界ですから!」

ミライ「動画って、全部ダウンロードしてから見てるんですか?」

ツカサ先輩「受け取りながら再生するのがストリーミング。待たずに見られる」

ミライ「ボタンを大きく、色だけに頼らない表示に直しました!」

ヤマダさん「とても使いやすくなりました!」

📌 ここ試験に出る!:ここ試験に出る!
  • 光の三原色=RGB(重ねると白)/色の三原色=CMY(印刷)
  • 写真=JPEG(非可逆)/ 透過OK=PNG(可逆)/ 256色=GIF
  • 完全に元に戻せる → 可逆圧縮 / 戻せない → 非可逆圧縮
  • 現実に重ねる → AR / 仮想世界に入る → VR
  • 最初から誰でも使える設計 → ユニバーサルデザイン

部長「ワシの写真もJPEGで圧縮してくれ。顔を小さくな!」

ミライ「小さくなるのはファイルの大きさだけです!!」

← 第38話 擬似言語を1行ずつ追え第40話 AIで新事業だ! →