【ドローイングタイムラプス】iPadで手書きアニメーションを作ろう
（このnoteでは、iPad ProとApple Pencilだけでつくる、手書きを生かしたアニメーションの作り方を解説しています）
こんにちは、またははじめまして。やわらかく情報を可視化する仕事をしています久保田ナオと申します。たくさんのnoteの中からお越しいただきありがとうございます。
2020年2月、ライフスタイルWEBマガジン「Prederi Style」さまのファミマアイスキャンペーン用に、「ドローイングタイムラプス」という手法で手書きイラストのアニメーションを作りました。
Twitterでのインプレッションもいいです。数時間で1000再生くらい伸びました。やはり手書きトレンドは強いですね。
（キャンペーンとしても、サイトがつながりにくくなるほどの大反響・大成功となっています。PRのひとつの成功例に関わることができて嬉しく思っています。）
【お仕事報告】
— 久保田ナオ🖍やわらかくビジュアルで伝える人 (@9botanao) February 4, 2020
プレデリスタイルさんでPR用のドローイングタイムラプスを製作しました🖍 （写真撮影はフォトグラファーの戸井田夏子さん✨）
サイトは↓ですが、アイスを75,000名プレゼントしてるからアクセス集中してて開けないかも🍦💦
あとで作り方解説note書きますね。https://t.co/UFQ7pC3nPs pic.twitter.com/zYWN305VHM
ツイートでの宣言通り、iPadだけで作れるドローイングタイムラプス解説を書きましたので、よろしければお付き合いください。
ドローイングタイムラプスとは？
ドローイング（描く行為）のタイムラプス（早回し映像）
という私が考えた造語です。
※検索するといくつかヒットします。同じ意味で使ってるかたもいれば、違う意味で使ってる方もいるようです。
Step1. ラフ動画（映像コンテ）を作る
まずはクライアントに「こんな動画を作ろうと思うのですが、どうですか？」と提案するためのラフ動画を作りました。
どのくらいの早回しスピードなのか、何秒の動画になりそうかというおおよその見当もここでつけられます。
完成品動画に比べるとクオリティは低いです。最初はこのくらいでも大丈夫。
Step2. 写真撮影をする
ドローイングタイムラプスで一番こだわるべきは写真撮影です。写真がダサいと上からどんなにかっこいいイラストを重ねてもかっこよくなりません。
今回は真俯瞰（真上からの写真・特殊な三脚が必要）も撮りたかったので、フォトグラファーの戸井田夏子さんにお願いし、スタジオ撮影しました。ストロボも２台用意してくださいました。
余談ですがアイスクリームが撮影しているうちに溶けてきてしまい、各商品５個ずつ用意したのに数がギリギリでした。アイスの撮影って難しいんですね。でも手際よくたくさんのカットを撮影してくれた腕利きカメラマン・戸井田夏子さんのInstagramはこちら。
ドローイングタイムラプスに使う写真には２つポイントがあります。
①シンプルな背景
②上下左右に十分な余白がある
その理由を説明します。
①シンプルな背景
例えば可愛くしようと水玉の背景の上で撮影したりすると、上から文字を描いた時に読みにくくなります。単色や、木目などの極力シンプルな背景を用意するのが鉄則です。
②上下左右に十分な余白がある
後から商品のまわりの余白に文字やイラストを書き込みます。そのために「ちょっと（商品が）小さすぎるかな？」と思うくらいにひいて撮影しましょう。
Step3. Procreateで写真にイラストを描こう
素敵な写真が撮れたら、早速書き込んでいきます。使うソフトはProcreateです。
写真を配置し、その上にイラストを書き込みます。Procreateはバックグラウンドでタイムラプス動画を撮影してくれる機能が付いているので同時に動画も作れます。
＜コツ１＞
デジタルイラストのいいところはワンクリックで書き直しができたり、拡大縮小機能であとから構図を修正できるところ。
しかしドローイングタイムラプスとしてカッコいいのは、下書きなしで一度でバチっと書き上がる絵です。なんども試行錯誤している動画だと「なかなか出来上がらないな。。。」と、見てる人にストレスを与える可能性も。
一度本番と同じクオリティのスケッチをし、それを見ながら本番撮影に臨むといいですね。手間はかかりますが最後まで見たくなる動画になります。
＜コツ２＞
今回はレタリング（装飾文字）にこだわりました。参考にした書籍はこちらです。
Step4. 動画を繋げよう
動画編集ソフトを使って、出来上がったタイムラプス動画と静止画（イラストを書き込んだJPEG画像）を順番につなげていきます
Procreateで自動生成された動画は
①完成イラスト→②白いキャンバス→③だんだん書き上がる絵
という流れになっています。
①白いキャンバス→②だんだん書き上がる絵→③完成イラスト
の順番にしながら並べていきます。
私はAdobe Premiere Rushというアプリを使いました。
iPadに最初から入っているiMovieでも同じように編集ができます。
早回しのスピードは500〜900の間でひとつずつ調整しました。早すぎても何を描いているかわからないし、ゆっくりすぎても離脱されてしまいます。
完成品はこちら
お好みで音楽を入れたら完成です。今回は編集の方に入れていただきました。お疲れ様でした！
アニメーション：久保田ナオ 写真撮影：戸井田夏子
＜制作期間＞
写真撮影やクライアントチェックも含めたトータル制作期間は１ヶ月でした。
ラフ、本番下書き、本番、（納得がいかなかった２カットは）本番テイク２と、全部で15枚くらい描きました。優雅に見せるために水面下でジタバタしてます。
さいごに
★追記：キャンペーンは終了しました
今回のキャンペーンでは2020/2/4（火）～ 2/17（月）の期間中に、75,000本アイスをプレゼントしています。本数多すぎやしませんかね笑。私はたべる牧場チョコが当たりました。お店に交換に行ってきます。
よろしければキャンペーン応募してアイスプレゼントもらってください。
ここまでご覧いただいてありがとうございました！（♡つけてもらえると元気がでます笑）