タブレットで描いた絵をScratchのスプライトにする方法

Scratchで作品を作っていると、多くの子が同じ壁にぶつかります。

「頭の中にいるキャラクターが、マウスだとどうしても描けない」という壁です。

実は、絵はScratchの中で必ずしも描く必要がありません。スマホやタブレットのお絵かきアプリで描いた絵を、そのままスプライトとして読み込めます。

この記事では、アイビスペイントで描いた絵をGoogleドライブ経由でScratchに持ち込む手順と、教室でよく見かけるつまずきどころをまとめました。

マウスで描くとキャラクターが別人になる…

教室でよく見られるのが、ノートには生き生きとしたキャラクターを描く子が、Scratchのペイントエディターに向かった途端に手が止まる光景です。

線がガタガタになり、目の位置が思った場所に置けず、何度も消しては描き直す。そのうち「まあ、これでいいや」と妥協して、猫のスプライトのまま作り始めてしまう。

これは絵の才能の問題ではありません。マウスやトラックパッドは、そもそも線を引くための道具として鉛筆より扱いが難しいというだけです。

手首を固定したまま画面上のカーソルを動かす操作は、大人がやってもきれいな曲線になりません。つまり、道具を替えれば解決します！

お絵かきの場所は、3通りから選べる

子どもの絵をスプライトにする方法は、大きく分けて次の3つです。それぞれ向き不向きがあります。

描き方	手軽さ	仕上がり	向いている場面
Scratchのペイントエディター	◎ その場で完結	△ 直線・図形は得意、曲線は苦手	四角い床、ボール、簡単なアイコン
アイビスペイント（タブレット・スマホ）	○ 転送の手間がある	◎ 線も塗りも自由	主人公キャラ、敵キャラ、背景の絵
紙に描いて写真を撮る	◎ 道具がいらない	△ 背景の紙が四角く残る	低学年のはじめの一歩

紙に描いて撮影する方法は、写真の背景が透明にならないため、キャラクターの周りに四角がついてしまいます。

作品として仕上げたいなら、お絵かきアプリを使うほうがおすすめです。

準備するものは2つだけ

必要なのは、アイビスペイントが動くスマホかタブレット、そしてGoogleアカウントの2つです。

あとはScratchを動かすパソコンがあれば足ります。

アイビスペイントは無料版でOKです。

Googleドライブを挟むのは、「タブレットで描いた絵をパソコンに移す」ためです。ケーブルでつないだり、メールで自分宛てに送ったりする必要はありません。

アップロードとダウンロードの2回の操作で、絵がパソコン側に届きます。

絵がスプライトになるまでの5ステップ

実際の流れは次の通りです。手順そのものは5分ほどで終わります。

１、アイビスペイントで新しいキャンバスを作る

マイギャラリーから新規作成を選び、サイズは1対1（正方形）にしておくと、Scratchのステージに置いたときに扱いやすくなります。

２、キャラクターを描く

線を描いて、バケツツールで色を塗るところまで。細かく描き込みすぎなくても大丈夫です。

３、透過にチェックを入れてPNGで保存する

ここが一番大事なポイントです。保存メニューでファイル形式をPNG、そして「透過」をオンにします。これを忘れると背景が白いまま書き出されます。

４、Googleドライブにアップロードする

写真アプリの共有ボタンからGoogleドライブを選ぶか、Googleドライブのアプリを開いてアップロードします。どちらでも結果は同じです。

５、パソコンでダウンロードして、Scratchに読み込む

Googleドライブから画像をダウンロードしたら、Scratchの画面右下「スプライトを選ぶ」にマウスを合わせます。

にょきっとメニューが出てくるので、一番上の「スプライトをアップロード」をクリック。

保存した画像を選べば、自分のキャラクターがステージに現れます。

読み込んだあとも、Scratchのペイントエディターで描き足せます。目を大きくしたり、口の形を変えたコスチュームを追加したりして、話すアニメーションを作る子も多いです。

つまずくのは、たいてい同じ3か所

この手順で子どもが引っかかる場所は、経験上ほぼ決まっています。

透過のチェック忘れ

Scratchに読み込んでから「なんか四角い」と気づくパターンで、これは保存し直すしかありません。逆に言えば、保存画面で一度立ち止まる習慣がつけば二度と起きません。

アカウントの食い違い

タブレットで使っているGoogleアカウントと、パソコンでログインしているGoogleアカウントが別だと、アップロードした画像が見つかりません。同じアカウントかどうかを先に確認しておくと、探し回らずに済みます。

絵の大きさ

1対1で描いても、スプライトとして置いたときにステージいっぱいになることがあります。

その場合はScratchのスプライト情報にある「大きさ」を50や30に変えるだけで収まります。この数字をいじる作業自体が、実は座標や比率に触れる入り口になっています。

「絵ばかり描いている」は、むしろ強みになる

保護者の方からよくいただくご相談に、「うちの子は絵ばかり描いていて、プログラミングのような理屈っぽいものには向いていないのでは」というものがあります。これはほぼ逆だと感じています。

教室で多くの子を見てきて共通しているのは、自分で描いたキャラクターが画面の中で動き出した瞬間、作品への向き合い方が変わるということです。

デフォルトの猫のままだと「動いた→おしまい」で終わる子が、自分のキャラクターだと「もっと速く走らせたい」「ジャンプさせたい」と要求が出てくる。

その要求がそのまま、次に覚えるブロックの動機になります。

小学生のプログラミングを習い事として続けられるかどうかは、この「自分ごと感」が握っています。Scratchを子どもが始めるとき、最初に触れるのがブロックではなく絵であっても構いません。

手を動かすきっかけは、得意なところから作ったほうが早いからです。

動画でもっと詳しく見る

本記事の内容を動画でもご覧いただけます。

実際の画面の動きを見たほうが、保存メニューやScratch側のボタンの位置はつかみやすいはずです。

中央区のプログラミング教室「プログラメイク」では、小学生から中学生を対象に、Scratchでのゲーム制作やパソコンの基本操作を教えています。

今回のような「作品のクオリティが一段上がる小技」も、レッスンの中で少しずつお渡ししています。

教室の雰囲気は無料体験レッスンで確かめられます。ぜひ体験会にもお越しください。

無料体験レッスンに申し込む