Kodomobot Article
Scratchのコスチュームを切り替える方法｜クリックで変えるコードと戻し方
Scratchのキャラクターをクリックして、見た目を変えたい。そんなときは、「このスプライトが押されたとき」に「コスチュームを costume2 にする」をつなぎます。 さらに、緑の旗で costume1 に戻すコードを別に置くと、何度でも同じ出発点から試せます。
この記事では、最初のネコを使って「クリックで別のポーズになる → 緑の旗で元に戻る」までを作ります。使うのは4ブロック、2つの短いコードです。絵を一から描いたり、アニメーションを何コマも作ったりする必要はありません。
今日できあがるものと、用意するもの
パソコンとブラウザーで Scratchの公式エディター を開きます。説明は日本語の画面と、最初にいるネコの Sprite1 を使った例です。画面の言語が違う場合は、上部の「設定」で日本語を選んでください。
完成すると、次のように動きます。
| 押すもの | 起きること |
|---|---|
| ステージの上の緑の旗 | 最初のポーズ costume1 になる |
| ステージにいるネコ | 別のポーズ costume2 になる |
| ネコをもう一度クリック | costume2 のまま。これは今回のコードの仕様 |
| 緑の旗をもう一度押す | costume1 に戻る |
10分程度を一区切りに試してみましょう。文字を読むことやドラッグが難しい場合は、保護者が操作し、子どもが「いつ変えたい？」を選ぶ分担でもかまいません。必ず10分で終わらせる必要はありません。
親子10分：クリックでコスチュームを変える
1. 同じネコの中に、2つのコスチュームがあるか見る（2分）
画面右下のスプライト一覧で Sprite1 のネコ を選び、左上の「コスチューム」タブを開きます。今回使ったネコには costume1 と costume2 があり、足の形が違います。「別のネコを2匹追加する」のではなく、同じ1匹が持つ2つの絵を切り替えます。
別のキャラクターで試す場合は、コスチューム一覧に2枚以上あるものを選びましょう。名前が costume1・costume2 と違っていても、後のメニューで実際の名前を選べば使えます。
紙のカードを使うなら、「最初のポーズ」と「クリックした後のポーズ」を1枚ずつ描き、横に置く程度で十分です。今日は「ネコを押したときに変える」と一つだけ決めます。
2. 緑の旗で、最初の見た目に戻すコードを作る（3分）
「コード」タブに戻ります。選ばれているスプライトが引き続き Sprite1 であることを確認し、次の順に置きます。
- 黄色の 「イベント」 から、緑の旗の絵が付いた「が押されたとき」を中央のコード領域にドラッグします。
- 紫色の 「見た目」 から「コスチュームを ○○ にする」をその下につなぎます。
- 紫のブロックのメニューで
costume1を選びます。
文字で表すと、次の2ブロックです。角括弧の中は、画面で選ぶ絵やメニューの値です。
[緑の旗] が押されたとき
コスチュームを [costume1] にする
ブロックを近くに置くだけではなく、上下の凹凸がつながる位置で離します。これが「元に戻す」コードになります。
3. ネコをクリックしたときのコードを、別に作る（3分）
同じ Sprite1 のコード領域に、もう一つ、離れた場所に短いコードを作ります。
- 「イベント」 の「このスプライトが押されたとき」を置きます。
- 「見た目」 の「コスチュームを ○○ にする」を下につなぎます。
- メニューを
costume2にします。
このスプライトが押されたとき
コスチュームを [costume2] にする
二つの黄色いイベントは、違う合図で始まるので、別々のかたまりにします。緑の旗のコードの下に、クリックのイベントを続けて置くわけではありません。
4. 緑の旗 → ネコ → 緑の旗の順で確かめる（2分）
まずステージ上部の緑の旗を押し、最初のポーズにします。次に、右側の白いステージにいるネコそのものをクリックします。右下の小さいスプライトのサムネイルではありません。
ポーズが変わったら、もう一度緑の旗を押します。元のポーズに戻れば、二つのコードを確かめられました。
「押す前はどの絵？ 押した後はどの絵？ 戻すにはどこを押す？」
見た目の良し悪しを採点するより、子どもが押した場所と起きた変化を一緒に見ます。「次は手を上げる絵にしたい」などの案が出ても、今日はこの1回で区切ってかまいません。
切り替わらないときは、ここを順に見る
一度にコードを増やさず、次の順で確認します。
- コスチュームは2枚ある？ 1枚だけでは見た目の違いを確かめられません。2枚あっても同じ絵なら、変化が分かりにくくなります。
- メニューが同じ名前になっていない？ 旗の下は
costume1、クリックの下はcostume2。両方がcostume1だと、押しても同じポーズになります。 - 同じスプライトに付いている？ 右下でネコを選び直し、そのネコのコード画面に二つのかたまりがあるかを見ます。
- 紫のブロックは、黄色のすぐ下につながっている？ 隙間がある場合は、紫のブロックをつなぎ直します。
- ステージのネコを押した？ スプライト一覧の小さいネコを選ぶ操作と、作品の中のネコをクリックする操作は別です。
- 別のコードがすぐ戻していない？ 既存作品で「ずっと」などの中に
costume1にする処理があると、クリック後も戻されることがあります。元の作品を消すのではなく、新しいプロジェクトで今回の4ブロックだけを試すと切り分けられます。
「コスチュームを指定」と「次のコスチューム」は違う
今回使った「コスチュームを costume2 にする」は、押すたびに 同じ指定先にします。ネコを2回クリックしても、そのままで正しい動きです。
一方、見た目カテゴリーの 「次のコスチュームにする」 は、一覧の次のコスチュームへ進めます。Scratch Foundationの公式説明でも、このブロックはポーズや表情を順に変えるアニメーションに使われています。毎回切り替えたい場合は次の活動として試せますが、まずは「どの絵にするかを指定できた」ことを確認しましょう。
家庭で試すだけでも大丈夫
今回は、画面で動きを確かめるところまでで十分です。作品を公開する必要はありません。年長児や低学年の子がブロック名を読みにくい場合も、「変えるきっかけを選ぶ」「押して結果を見る」ところから参加できます。
自分の写真や他の人の絵を使うときは、公開前に個人情報や使ってよい素材かを確認してください。本名、学校名、住所、連絡先などは作品に入れないよう、保護者と相談します。
次に読むなら
- 見た目だけでなくセリフも付けたいなら、クリックすると話す「ひとことボタン」の作り方へ。今回と同じクリックの合図に、言葉を足す入口です。
- 自分のキャラクターで試したいなら、Scratchで自分の絵をスプライトにする方法へ。まず形と目印を決めるところから始められます。
- 教材や進め方を迷うときは、家庭でできるプログラミング教育の始め方：5ステップで、家庭で無理のない区切りを考えられます。
よくある質問
コスチュームは何枚あれば始められますか？
今回の例は2枚です。同じスプライトの中に、違いが分かる2枚を用意します。別のスプライトを2匹並べる方法とは違います。
クリックしても元のポーズに戻らないのは、間違いですか？
今回のコードでは間違いではありません。クリックするたびに costume2 を指定するので、そのままです。元に戻す合図は緑の旗です。「押すたびに次へ進む」動きとは区別して確かめてください。
親が絵を描けなくてもできますか？
できます。まずはネコなど、最初から複数のコスチュームがあるスプライトで試します。自分の絵に変えるのは、切り替えが動いてからでもかまいません。
動作確認と参考にした公式情報
2026年10月1日、パソコンのChromeでScratch公式オンラインエディターを開き、新しいプロジェクトの Sprite1 に本文の4ブロックを置いて確認しました。緑の旗で costume1、ステージのネコをクリックして costume2、再クリックで costume2 のまま、緑の旗で costume1 に戻ることを確認しています。これは操作の検証であり、子どもの学習効果を測った結果ではありません。画面やコスチューム名は利用環境や選ぶスプライトによって異なる場合があります。
- Scratch公式オンラインエディター（ブロック名、配置、切り替えとリセットを実操作で確認）
- Scratch Foundation：Next Costume（「次のコスチュームにする」の場所と役割）
- Scratch Foundation：Costumes（コスチュームとスプライトの見た目についての公式教材）
この記事が役に立ったら、ミントに教えてください。
