描画ツールを極める 〜自由自在に絵を描こう！

はじめに

Springin’は、プログラミングアプリの中でダントツに描画ツールが充実しています。
それは、「つくること」の中にはプログラムだけじゃなくて絵を描くことも含まれていると考えているから。

そんなわけで、今回は知らなきゃ損する描画ツールの使い方講座です。
これまでは色を変えて線を描くだけしかしてきませんでしたが、実は、図形を使ったり半透明で塗ったり、いろんな機能があるんですよ。

レイヤのしくみ

今回は、つくりながら触ってみるスタイルではなくて、それぞれの機能を紹介していきたいと思います。へー、こんな風になってるんだ、と思いながら読んでも良いですし、お手元のSpringin'で絵を描きながら読んでもOKです。

Springin'のアイテムを上手につくるのに知っておくと便利なことがあります。
それが「レイヤのしくみ」。

レイヤとは、日本語では「層」と訳されます。
デザイン系のプロツールなんかでは普通に使われる言葉ですが、アニメのセル画がイメージに近いかもしれません。

ただ、Springin'のアイテム描画にはたくさんのレイヤがあるわけではなく、ざっくりと２枚あると考えてください。下に敷く「台紙」とその上に描く「透明シート」のイメージです。これまでの講座では、台紙をつかわないで透明シートにペンで絵を描いていた状態でした。

「台紙」は、Springin'では「背景」として設定します。
背景に設定できるのは、写真とべた塗りの色。写真はその場でカメラで撮影することもできますし、端末のアルバムの中に入っている写真からとってくることもできます。

台紙を設定する

それでは、青一色のべた塗りの背景をつくってみましょう。
背景設定画面から、一番右のカラーパレットアイコンをタッチして、できてきたパレットから青をタッチ。

すると、青一色で塗りつぶされました。
これで完成です。

こんなことしなくても、絵を描くときに普通に塗りつぶしたらいいんじゃないの？と思う人もいるかもしれません。それでも良いんですが、背景として塗りつぶすと便利なことがあるのです。例えば、背景色だけ違う絵を増やすとか。（ぜひ考えてみてください！）

背景設定で、一番効果を発揮できるのが「写真」です。
一番左のカメラのアイコンをタッチするとカメラが起動します。

試しに、鍵盤を撮影してみました。

背景はいらないところを消したり、切り抜くことができます。
鍵盤だけ残して上下を消してみました。

そしてそのまま、下のペンアイコンをタッチして、写真の上に絵を描くこともできます。

ペンツールを使いこなす

一番最初に触れるツールで、一番多く使うであろうペンツール。
今回はさらに機能を深掘りしてみましょう。
※今回は娘が絵を描いてくれました

ぱっと見違いが分かりにくいのが、丸ペンと筆ペン。
丸ペンは常に同じ太さで線を描きます。

筆ペンは、素早くペンを動かすと細くなるので、筆で書いたような味が出ます。
細めに設定するのが筆っぽくなるコツ。

広い領域（閉じた領域）を塗りつぶしたいときには、塗りつぶしツールが便利です。

枠を描いて……

バケツを傾けたアイコンの、塗りつぶしツールを選択して、描いた枠の内部をタッチ。

パッと一瞬で色が塗りつぶされました。
ただ、残念ながら枠線との間にちょっと白いすきまができてしまうことがあります。
これは、線がギザギザにならないようにする処理（アンチエイリアスといいます）がされているためです。気になる方は、ペンで修正してください。

はい、ここで問題です。
これは、何の絵でしょうか？？？
・
・
・
・
・
正解は、バイオリンでした。

さてさて、色の数が多くて絵を描くのが楽しいと言われるSpringin'ですが、実はパレットに用意されていない色も使えます。そしてなんと、半透明にだってできちゃうんです。

カラーパレットの下側から基本色を選んだ後に、上側の同系色パレットを２回タッチしてみてください。すると、細かい色の選択とさらに透明度も設定できる詳細カラーパレットが出てきます。これを使うと、用意されていないけど使いたい微妙な色合いや、透明度のある色を作ることができます。

試しに、透明度ついた青を使ってメガネを塗ってみましょうか。

じゃーん！

サングラスをかけた……ん、これは僕……ですね（笑）。

図形の描き方

六角形とか正円とか、きっちりした図形を描きたいときってありますよね。コンピューターなんだから、そういうの、得意でしょ？ってね。

そんな方のために、図形ツールがあります。
一番下のアイコンが並んでいるうちの、左から二番目、丸と四角が重なっているアイコンが、図形入力ツールです。

図形を描くコツ、それは、「中心から外側に指をスライドさせること」です。
例えば正方形を描くときは、図形モードの四角ツールの正方形を選択して、キャンバスの図形を描きたい位置の真ん中からスタートして狙った大きさになるまで外側に指を動かします。

用意されているのは、四角、円、楕円、三角～八角、です。

ただし、直線だけは始点→終点という描き方になります。
なんとなく難しそうと思うかもしれませんが、娘はあっという間に使いこなしていたので、頭で理解しようとするよりも試してみて感覚を掴む方が早いかも。

少し応用編を。
先ほどのように透明度を変えながら図形を重ねて描くとこんな感じになります。

時間を戻す

最後は、時間の戻し方。
間違ったときに、消しゴムツールを使って消す、というのは、説明をしなくてもいつの間にか使っています。「鉛筆で書いて消しゴムで消す」というメタファーはまだまだ有効なんですね。

コツとしては、消しゴムペンを太めにすること。ただし、その後ペンで描こうとしたときにペンの太さが太いままなので注意してください。

いちいち消さなくても、ちょっと前に戻してよ！と、Ctrl+zとかCommand+zとかに慣れている方は思うことでしょう。実はSpringin'でもできるんです。

それが、下に並んでいる一番右の時計を巻き戻しているアイコンです。
まさに、時間を戻す機能です。

……右のリンゴ、緑色で塗ってみたけどいまいちだなぁ。

そうだ、時間を戻そう。

てな感じです。
知ってると超便利ですよね！

以上、「描画ツールを極める」でした。
絵を描くのがより一層楽しくなりそうでしょ？！

世界のマーケットから

世界中のクリエイターが出品している作品を、僕やしくみデザインのスタッフがピックアップして紹介するコーナーです。

今回は、絵がすごいクリエイター特集！

「なに食べよう、今日のごはん」

こんなに描画ツールを使いこなしているクリエイターは初めて見た！というほど、スタッフ騒然としたクオリティ。ここの出てくる食べ物、全部Springin'の描画ツールで描いてるんですよ。すごすぎ。

「カースドハロウィンExtra」

味のある絵。おどろおどろしいけれど、どことなく愛嬌もあったり。
絵のクオリティだけじゃなくてゲームもよくできています。クリエイターのslimeknightさんのワークは、どれも独自の世界観があって面白いので是非チェックしてみてください。

「⚙ロボジューからにげろ⚙」

かわいいキャラクターが登場するゲームです。
この主人公のキャラもカワイイですが、クリエイターのjustfishさんはキャンペーン入賞常連で、いつも絵がかわいくてステキなんですよ。

「タブレット変面」

この方も、いつもすごい作品をつくって出品してくれる凄腕クリエイター。
絵も素晴らしいですが、プログラミング的にも素晴らしい作品が多いtyamazakiさんです。年末年始のキャンペーン「干支ワーク」では、なんと２作品も優秀賞に選ばれました。

「干支ワーク優秀作品であそんでみた」

論理的思考や凝ったギミックだけがプログラミングじゃありません。
表現力や絵も大事なプログラミングの要素です。
マーケットを眺めて気になる絵があったらワークを買ってみてはいかがでしょうか？

次回の連載をお楽しみに！

中村さんの「Springin'」講座はこれから続々掲載予定！完全無料・絵日記感覚で始められるビジュアルプログラミングアプリ「Springin'」での作品作りに、ぜひチャレンジしてみてくださいね。