こんにちは、ロボテックです。

今回のデジタルコラムも、前回から続いて「画像」についての話です。
まずは下の画像を見てみましょう。

中央にcatが表示されている、Scratchの初期画面です。
これを拡大してみると……

大きくなりました。
「当たり前じゃん！」と思うかもしれませんが、それでは別の画像で試してみましょう。

いらすとやさんから、猫のイラストをダウンロードしてScratchにアップロード。
これをさっきと同じように拡大すると……

……あれ？
何かおかしいですよね。

Scratchのcatは拡大しても線が綺麗です。
でも、いらすとやさんの猫は拡大したら線がガビガビになっています。

これは、いらすとやさんのミスではありません。むしろ完璧な素材を作ってくれています。
原因は画像の「作り方」の違いです。

🖼️ まずは前回のおさらい。「画像の種類」について

前回のコラム で、「画像には色々な種類がある」という話をしました。
まずはこの内容をおさらいしていきましょう。

（イラスト作成：ChatGPT）

スマホやゲーム機、パソコンで見る画像の多くは「ラスター画像」と呼ばれるものです。
これは点の集まりで作られた、言ってしまえば「普通の画像」です。

イメージとして一番わかりやすいのは「マイクラの建築」でしょうか。
遠くから見るとリアルな建物に見えても、近づいて見ると「ブロックのあつまり」という事がよく分かるって事、ありますよね。

では「作り方が違う画像」とは、どんなものでしょうか？
それこそ上の図のように「動物」と「植物」ぐらい全然違うものなのです。

💻️ 「設計図」のような仕組みのベクター画像

もうひとつの、全く違う仕組みで作られた画像の名前を「ベクター画像」といいます。
Scratchのcatはこのベクター画像として作られています、それを確認してみましょう。

Scratchでcatを選び、コスチューム画面を選択。
更に、猫の顔をクリック。
そして「形を変える」をクリックすると……

このように、点と線が表示されましたね。
これが「設計図」です。
点と点の間に線を引く……という設計が見えるようになりました。

それではちょっと実験です。
この点を動かしたらどうなるでしょうか。

結果はこの通り。
点を移動させても「点と点の間に線を引く」「線で囲んだ中を色で塗る」という設定は残っていますので、このように移動に合わせてイラストが変化します。

⚠️ 「変換」にはご用心

コスチューム画面の下を見ると「ビットマップに変換」というボタンがあります、

ビットマップとは「点の地図」、つまりラスター画像の事だと思ってOKです。
このボタンを押すと、ベクター画像のcatがラスター画像に変換されます。

ガビガビになっちゃいましたね……
この変換を使いたいケースは限定的ですが、こういった変換ボタンもあります。

それでは逆に。
ガビガビになっちゃうラスター画像を、ベクター画像に変換したらどうなるでしょうか。

綺麗な線になるのでしょうか？
実際に試した結果が、次の画像です。

……あれ？　ガビガビのまま？
実はベクター画像の設計図を作るのは難しいため、「ガビガビな絵の１枚の板」として変換されてしまいます。
元々ベクター画像だったとしても、一度ラスター画像に変換した時点で設計図データは消えてしまうのです。

🖼️ まとめ

それでは最後に、今日の内容をふりかえってみよう。

（イラスト作成：ChatGPT）

この内容も前回同様に、ScratchはもちろんUnityやUnrealEngineで本格的なアプリ制作をする時はもちろん。
イラストレーターや動画制作者を目指す人にとっても、覚えていて損がない知識と言えるでしょう。

🖥️ ロボテックについて

＼ お近くの教室で無料体験受付中！ ／
ロボテックは、宇都宮市（下栗・ゆいの杜）を中心に、栃木市、壬生町、館林市（群馬）で子ども向けのロボット・プログラミングスクールを運営しています。
LEGOや教育版マインクラフト、Scratch、Robloxなどなど多彩な教材で楽しくプログラミングを学んで頂けます。

無料体験も定期開催しておりますので、ぜひお気軽にご相談ください！

【詳しくはこちら】

2026年ロボテック無料体験のお知らせ