超絶簡単な手書きアニメーションの作り方を、現役漫画家が教えよう

手書きアニメーションは初心者でも簡単に作れるよー!

自分で描いたキャラクター、アニメーションとして動かせるもんなら動かしてみたい!と前から思ってました。

で、やってみたら意外と簡単にアニメ作品ができた

調子乗って背景もつけてみた

アニメーションを手作りするっていうと、スキャナとかペンタブとか、Adobe Photoshopとかクリスタとか高価な専門ソフトが必要そうな気がしていたのですが…

意外と紙と鉛筆、あとスマホのアプリで出来た!

※追記!2018年末現在、もっと簡単に手書きアニメーションを作る方法があります。具体的にはLINEの新機能を使います。詳しくは後述します。

手描きアニメーションに必要なツールとアプリ

  • 薄いコピー用紙(何枚か重ねて下の絵をトレースしたりするので厚い紙は使いづらい)
  • 鉛筆と消しゴム
  • スマホ(私はiPhoneSEを利用してます)

スマホの画像編集アプリ

私が使ってるのはこの2つです↓どっちも無料で使えます。

その他

  • ネット環境に繋がってるパソコン(描いた絵をアニメに加工する時使います)

手書きアニメーションの作り方を具体的に説明するよ!

①どういうアニメを作るか考えます

私は最初反復横とびをするふっくらボリサットを描こうと思いましたが、意外と難易度が高いことに気づいて諦めました。

media-20170128
(☝︎ボツにした反復横跳びのラフ)
初心者はなるべく単純な動きにしたほうがいいです。
というわけでスクワットするふっくらボリサットに変更。
これなら
A. 脚を深く曲げてる状態
B. 脚を伸ばしてる状態
C. その中間の状態
たった3枚を描けばアニメとして成立するぞ!と思ったので。
しかも、スクワットという運動ならループ再生できる!
これ重要。twitterとか動画を自動的にループ再生してくれるSNSにアップすると、3枚絵を描いただけで、数十秒は見れるアニメが作れるよ!

②絵を描きます

どんな動きにするか、適当な紙に描いて、まずイメージを固めます。
方向性が決まったら、本番の絵を描きます。
いわゆるパラパラマンガの要領です。
授業中、教科書の隅っこに描いてたあれだよあれ!

私は8分割したA4のコピー用紙3枚を使用。(紙は小さくていい)
1枚目に絵を描いたら、2枚目の紙を1枚目の上に重ねて、微妙に透けて見える1枚目の絵を参考にしながら、
次のモーションを描いていきました。3枚目も同じ要領。
media-20170128
ちっさい

多少の線のズレとかはむしろ味になる!手書きアニメは細かいこと気にせず描くのがコツ。
そして3枚しかないのですぐ描けたぞ!

③描いた絵をスマホに取り込みます

Office Lens(オフィスレンズ)という無料のスキャンアプリで撮影しました。(iPhoneとAndroid両方あります)
これは名刺や書類を、スキャナを使ったみたいにきちんと画像を取り込めるアプリです。
遠近感とか、多少の影を消したりとか、調整してくれるので、
紙に描いた線画をスマホに取り込むのに超超便利です。
仕事でも大活躍してるアプリやね!

④絵の大きさと位置を調整します

次にibisPaintX(無料)を使います。(iPhoneとAndroid両方あります)
私はスマホでお絵描きする時に、このアプリを使ってます。これも超便利。
(スマホで描けるお絵描きについては今度また別の記事を描きたいです)
各画像をibisに取り込んで、大きさを合わせて、レイヤーごとに保存します。

こんな感じ
これで素材は揃いました。次はいよいよ動きます!

⑤絵を動かす(描いたコマを連続して再生してアニメにする)

※この方法以外にLINEを使って超簡単にアニメ化する方法を追記しました。これが一番簡単なので、読みたい方は⑤を飛ばして⑥を読んでみてください!

いよいよ、描いた絵をGIFアニメ作成サイトにアップして、手書きのイラストをアニメーションにします。
(動かすだけならスマホでもできます。詳しくは後述)
まずは、スマホで描いたデータをメール添付とかファイル転送サービスとかでパソコンに送りましょう。

さきほど書いた絵を、下記の「バナー工房」というGIFアニメ作成サイトにアップロードします
http://www.bannerkoubou.com/anime/
というGIFアニメ制作サイトが使いやすいよ!

GIFアニメ作成サイト「バナー工房」の使い方

「ファイルを選択」というボタンを押して、描いた絵を順繰りにアップロードしていきます。
私の場合、描いたのは3枚なんだけど、

A. 脚を深く曲げてる状態

C. 中間の状態

B. 脚を伸ばしてる状態

C. 中間の状態(以降は一枚目に戻る)

というループにしたかったので「中間の状態」の絵を2回アップして、計4枚アップしました。

あとはこういう設定にしました
点滅間隔→0.1秒
ループ設定→ループする

「GIFアニメを作成する」ボタンをクリックすると、

ウ、ウオーーーーー動いてる!感動!!

最後に、出来上がった手書きアニメーション作品を保存してSNSにアップしましょう。
もしよかったら、ふっくらのtwitterに「こんなん出来たよー!」ってリプください♥RTするわ〜!

手書きアニメーション、スマホからアップできないの?

さっき紹介した「バナー工房」にスマホからアクセスしたら、アニメを制作するまでならできました。
けど、「WEBで公開する場合はこちら」ボタンをタップしても
「現在公開機能は停止中です。」と表示されてしまうのです。
つまりSNSとかでシェアしたかったらパソコンが必要ってことです。
面倒だ〜。アプデ希望!

⑥LINEで簡単にアニメーションをつくる

これが現在、もっとも簡単に手書きアニメーションをつくる方法だと思うので追記します。

絵を描くまでの手順は①〜④の通りです。

次にLINEを開いて、普段相手に画像を送る時と同じく、画面下のメニューにある「画像」をタップ

GIF動画にしたい画像を複数選択すると…

右下に「GIF」っていうメニューが出てきます

「GIF」をタップすれば即GIf動画ができます。

なにこれ簡単すぎかー!

左下のメーターみたいな1xのメニューをタップすると再生速度が、真ん中のメニューをタップすると正方形トリミングにできます。

そのまま相手に送るもよし、左下の「保存」をタップすれば相手に送らずにスマホに保存できます。

手書きアニメの作り方まとめ

やってみたら簡単だった!
まあ、今回紹介した作例は3コマだから、ガチのアニメっぽい作品が作りたい方はコマが多いから絵を描く手間が半端ないと思うけど、ジブリの宮崎駿さんも「自分との戦い」てな感じのことを言ってたので、アニメ制作ってそういうものなのかも、、

次回はタイのデパートでキャラクターが歩いてる手書きアニメとか作ってみたいです。アニメはやっぱり楽しいし、珍しいからSNS受けもいい感じ。なにより自分が作った絵が動くというのはすごい高揚感があります。
やってみてね!

ところで私、アニメ作家ではなく漫画家なのだ

みっちり手描きアニメーションの作り方を説明したんだけど、わたくし”ふっくらボリサット”は漫画家でして!
連載が三作品あるので、ぜひ読んでみて!

夫がタイで起業したのをきっかけにタイへ移住する話

ある日突然、腸がおかしくなって手術して”人工肛門”になってしまった芸人さんのお話

おっぱい大きいと起こりがちなことを描いた4コマ漫画シリーズ

…こう並べてみると私、面白いネタしか描いてないなw

ちなみに漫画を描く時におすすめなソフトはこれ

わたくしふっくらボリサットは専業漫画家なので、漫画ソフトのクリスタ(CLIP STUDIO PAINT)を毎日使ってます!
漫画描きたい!って人はぜひチェックしてみてね!

現役漫画家の私がたどり着いたソフト、クリスタ

2018.09.05
ふっくらボリサットのブログ記事をシェアする
ふっくらボリサットのブログのSNSシェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です