Scratch

スクラッチプログラミング - アイコンメーカーのつくりかた

Scratch で人気(にんき)のアイコンメーカー。アイデア次第(しだい)でいろいろなキャラクターをつくれるプロジェクトです。この記事(きじ)では、スライダーをうごかしてキャラクターのみためをかえる方法(ほうほう)をくわしく解説(かいせつ)します。

Pyxofy

12 Oct 2025 • 7 min read

スライダーやボタンでみためをかえよう

Scratch (スクラッチ)でアイコンメーカーをつくってみましょう。

アイコンメーカーは、ボタンなどをクリックしてみためをかえて、自分(じぶん)だけのキャラクターをつくれるプロジェクトです。アイコンメーカーの基本的(きほんてき)なしくみはとてもシンプルで、「ボタンをクリックしたら、メッセージをおくって、コスチュームをかえる」です。

今回(こんかい)は、ボタンだけでなく、自作(じさく)のスライダーでみためをかえる方法(ほうほう)を紹介(しょうかい)します。自分(じぶん)でつくるスライダーは、スクリプトがすこし複雑(ふくざつ)なので、そちらをメインに解説(かいせつ)していきます。

サンプルプロジェクト｜カービィメーカー

下(した)にあるのは、アイコンメーカーのサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、ボタンやスライダーでカービィのみためがかわる様子(ようす)をみておいてください。

Scratch｜カービィのアイコンメーカーのサンプルGIF

これから、上(うえ)のサンプルにあるような３種類(しゅるい)のスライダーについて説明(せつめい)していきます。これら３つは、それぞれに初期値(しょきち)がことなります。

色(いろ)のスライダー：
- ボタンの位置(いち)は、左端(ひだりはし)
- 変更(へんこう)できる範囲(はんい)の、一番(いちばん)ちいさい値(あたい)
あかるさのスライダー：
- ボタンの位置(いち)は、中央(ちゅうおう)
- 変更(へんこう)できる範囲(はんい)の、まんなかの値(あたい)
おおきさのスライダー：
- ボタンの位置(いち)は、右端(みぎはし)
- 変更(へんこう)できる範囲(はんい)の、一番(いちばん)おおきい値(あたい)

では最初(さいしょ)に、色(いろ)のスライダーからつくっていきましょう。

スプライトを用意(ようい)しよう

１つのスライダーをつくるためには、２つのスプライトが必要(ひつよう)です。

スライダーの値(あたい)を変更(へんこう)するボタンのスプライト
スライダーの土台(どだい)となるスプライト

スライダーをこうせいする２つのスプライト

２つのスプライトは、土台(どだい)の上(うえ)にボタンがかさなるように配置(はいち)しておいてください。

変数(へんすう)をつくろう

スクリプトはボタンにつくっていきます。ボタンのスプライトを選択(せんたく)してから、ブロックをくみあわせていきましょう。

スライダーをつくるためには、複数(ふくすう)の変数(へんすう)をつかいます。まず用意(ようい)してほしいのは、下(した)の７つの変数(へんすう)です。これらは、「このスプライトのみ」にチェックをいれてつくってください。

「このスプライトのみ」でつくるへんすう７つ

「このスプライトのみ」で変数(へんすう)をつくる理由(りゆう)は、次(つぎ)のとおりです。

ほかのスプライトでは、この変数(へんすう)の値(あたい)を利用(りよう)しないから。
この後(あと)、ほかのスライダーをつくるときにも、おなじ名前(なまえ)で変数(へんすう)をつくれるようになるので、別々(べつべつ)の変数名(へんすうめい)をかんがえる必要(ひつよう)がなくなるから。

つづいて、もう１つ、色(いろ)をかえるため変数(へんすう)を用意(ようい)します。この変数(へんすう)の値(あたい)は、キャラクターのほうでも利用(りよう)するので、「すべてのスプライト」で変数(へんすう)をつくってください。

「すべてのスプライト」でつくるへんすう１つ

以上(いじょう)で、色(いろ)のスライダーにつかう変数(へんすう)を用意(ようい)できました。次(つぎ)のセクションから、これらの変数(へんすう)の値(あたい)を設定(せってい)していきます。

スライダーの座標(ざひょう)をしらべよう

スライダーのボタンは、左右(さゆう)にうごかします。うごかせるのは、スライダーのながさの範囲内(はんいない)です。

うごかせる範囲(はんい)をきめるために、スライダーの端(はし)の座標(ざひょう)をしらべましょう。しらべかたは、次(つぎ)のとおりです。

Scratch で最初(さいしょ)から用意(ようい)されている へんすう にチェックをいれてステージに表示(ひょうじ)し、値(あたい)を確認(かくにん)できるようにします。
ずっと、へんすうをマウスのxざひょうにする をくみあわせて、クリックします。
スライダーの土台(どだい)の端(はし)にマウスポインターをあわせると、座標(ざひょう)がわかります。

スライダーのはしのざひょうをしらべる

しらべた座標(ざひょう)を、スライダーの左端(ひだりはし) と スライダーの右端(みぎはし) にいれましょう。

スライダーのはしのざひょうをへんすうにいれる

おなじ値(あたい)をつかって、スライダー全体(ぜんたい)のながさを計算(けいさん)し、スライダーのながさ にいれましょう。

スライダーのながさをしていする

値(あたい)の範囲(はんい)をきめよう

スライダーで変更(へんこう)できる値(あたい)の範囲(はんい)をきめましょう。今回(こんかい)は、色(いろ)の効果(こうか)を 0 〜 200 の間(あいだ)でかえられるようにします。

最小値(さいしょうち)、最大値(さいだいち) を指定(してい)します。
変更(へんこう)できる範囲(はんい)を計算(けいさん)し、数値(すうち)の範囲(はんい) にいれます。

スライダーでかえられるあたいのはんいをしていする

初期値(しょきち)を設定(せってい)しよう

ここまで用意(ようい)してきた変数(へんすう)をつかって、スライダーの最初(さいしょ)の状態(じょうたい)を設定(せってい)しましょう。

ボタンの最初(さいしょ)の位置(いち)は、スライダーの左端(ひだりはし) です。これは値(あたい) 0 の位置(いち)となります。
最初(さいしょ)は色(いろ)の効果(こうか)はナシなので、最小値(さいしょうち) の 0 です。
ボタンの x 座標(ざひょう)を、最初(さいしょ)の位置(いち) にします。

スライダーのさいしょのせってい

ここまでで、スライダーをうごかすための準備(じゅんび)ができました。

スライダーをうごかそう

ここからは、スライダーのボタンを左右(さゆう)にうごかせるようにしていきます。縦(たて)へはうごかさないので、y 座標(ざひょう)はスライダーの土台(どだい)とおなじ位置(いち)にしておきましょう。

ボタンのyざひょうをこていする

ボタンをうごかせるのは、次(つぎ)の条件(じょうけん)をみたしているときだけです。

ボタンにマウスポインターがふれている
マウスがおされている

ボタンがマウスまたはゆびでおされているなら

ボタンをうごかす条件(じょうけん)を、マウスのポインターにふれた だけにしてもうごかすことは可能(かのう)です。ただこの場合(ばあい)、マウスのうごきがはやいと、ボタンがマウスのうごきについてこられないことがあります。マウスがおされた も条件(じょうけん)にくわえることで、確実(かくじつ)にボタンをうごかせるようになります。

さらに、ボタンをうごかせるのは、マウスがおされている間(あいだ)だけです。ボタンをうごかす条件(じょうけん)として、下(した)のようにブロックを追加(ついか)してください。