体験教室&アンケート回答でギフト券2000円分プレセント!近くの教室を探すもっとプログラミング教育を知りたいんだけど...これさえ読めばすべてOK!「プログラミング教育まるわかりガイド」でモヤモヤ解決です。ガイド記事を読むウチの子にぴったりあったプログラミング教室は?お子さんをイメージして答えるだけで、ぴったりのプログラミング教室が診断できます。〜自由自在に絵を描こう!シェアTweet株式会社しくみデザイン開発のビジュアルプログラミングアプリ「Springin’(スプリンギン)」。難しいプログラミング言語を覚えることなく、直感的な操作で”絵日記のように”取り組めるのが特長です。時間を戻す世界のマーケットから次回の連載をお楽しみに!はじめにSpringin’は、プログラミングアプリの中でダントツに描画ツールが充実しています。それは、「つくること」の中にはプログラムだけじゃなくて絵を描くことも含まれていると考えているから。そんなわけで、今回は知らなきゃ損する描画ツールの使い方講座です。これまでは色を変えて線を描くだけしかしてきませんでしたが、実は、図形を使ったり半透明で塗ったり、いろんな機能があるんですよ。レイヤのしくみ今回は、つくりながら触ってみるスタイルではなくて、それぞれの機能を紹介していきたいと思います。へー、こんな風になってるんだ、と思いながら読んでも良いですし、お手元のSpringin'で絵を描きながら読んでもOKです。Springin'のアイテムを上手につくるのに知っておくと便利なことがあります。それが「レイヤのしくみ」。レイヤとは、日本語では「層」と訳されます。デザイン系のプロツールなんかでは普通に使われる言葉ですが、アニメのセル画がイメージに近いかもしれません。Springin'のアイテム描画にはたくさんのレイヤがあるわけではなく、ざっくりと2枚あると考えてください。下に敷く「台紙」とその上に描く「透明シート」のイメージです。これまでの講座では、台紙をつかわないで透明シートにペンで絵を描いていた状態でした。「台紙」は、Springin'では「背景」として設定します。背景に設定できるのは、写真とべた塗りの色。写真はその場でカメラで撮影することもできますし、端末のアルバムの中に入っている写真からとってくることもできます。台紙を設定するそれでは、青一色のべた塗りの背景をつくってみましょう。背景設定画面から、一番右のカラーパレットアイコンをタッチして、できてきたパレットから青をタッチ。すると、青一色で塗りつぶされました。こんなことしなくても、絵を描くときに普通に塗りつぶしたらいいんじゃないの?と思う人もいるかもしれません。それでも良いんですが、背景として塗りつぶすと便利なことがあるのです。背景色だけ違う絵を増やすとか。(ぜひ考えてみてください!)背景設定で、一番効果を発揮できるのが「写真」です。左のカメラのアイコンをタッチするとカメラが起動します。試しに、鍵盤を撮影してみました。背景はいらないところを消したり、切り抜くことができます。鍵盤だけ残して上下を消してみました。そのまま、下のペンアイコンをタッチして、写真の上に絵を描くこともできます。ペンツールを使いこなす一番最初に触れるツールで、一番多く使うであろうペンツール。今回はさらに機能を深掘りしてみましょう。※今回は娘が絵を描いてくれましたぱっと見違いが分かりにくいのが、丸ペンと筆ペン。丸ペンは常に同じ太さで線を描きます。筆ペンは、素早くペンを動かすと細くなるので、筆で書いたような味が出ます。細めに設定するのが筆っぽくなるコツ。広い領域(閉じた領域)を塗りつぶしたいときには、塗りつぶしツールが便利です。枠を描いて......バケツを傾けたアイコンの、塗りつぶしツールを選択して、描いた枠の内部をタッチ。一瞬で色が塗りつぶされました。残念ながら枠線との間にちょっと白いすきまができてしまうことがあります。これは、線がギザギザにならないようにする処理(アンチエイリアスといいます)がされているためです。気になる方は、ペンで修正してください。はい、ここで問題です。色の数が多くて絵を描くのが楽しいと言われるSpringin'ですが、実はパレットに用意されていない色も使えます。なんと、半透明にだってできちゃうんです。カラーパレットの下側から基本色を選んだ後に、上側の同系色パレットを2回タッチしてみてください。すると、細かい色の選択とさらに透明度も設定できる詳細カラーパレットが出てきます。これを使うと、用意されていないけど使いたい微妙な色合いや、透明度のある色を作ることができます。試しに、透明度ついた青を使ってメガネを塗ってみましょうか。!サングラスをかけた......ん、これは僕......ですね(笑)。六角形とか正円とか、きっちりした図形を描きたいときってありますよね。コンピューターなんだから、そういうの、得意でしょ?ってね。そんな方のために、図形ツールがあります。下のアイコンが並んでいるうちの、左から二番目、丸と四角が重なっているアイコンが、図形入力ツールです。図形を描くコツ、それは、「中心から外側に指をスライドさせること」です。正方形を描くときは、図形モードの四角ツールの正方形を選択して、キャンバスの図形を描きたい位置の真ん中からスタートして狙った大きさになるまで外側に指を動かします。直線だけは始点→終点という描き方になります。なんとなく難しそうと思うかもしれませんが、娘はあっという間に使いこなしていたので、頭で理解しようとするよりも試してみて感覚を掴む方が早いかも。先ほどのように透明度を変えながら図形を重ねて描くとこんな感じになります。時間を戻す最後は、時間の戻し方。間違ったときに、消しゴムツールを使って消す、というのは、説明をしなくてもいつの間にか使っています。「鉛筆で書いて消しゴムで消す」というメタファーはまだまだ有効なんですね。コツとしては、消しゴムペンを太めにすること。その後ペンで描こうとしたときにペンの太さが太いままなので注意してください。いちいち消さなくても、ちょっと前に戻してよ!と、Ctrl+zとかCommand+zとかに慣れている方は思うことでしょう。実はSpringin'でもできるんです。それが、下に並んでいる一番右の時計を巻き戻しているアイコンです。......右のリンゴ、緑色で塗ってみたけどいまいちだなぁ。