一気に秋(冬)めいてきましたね。
冷エニモ肩ノ痛ミニモマケズ。
丈夫な身体で今日も頑張りたいものです。

最近、Webデザインのお仕事の中で
「自分の描いたイラストを動かす」という機会がありました。
初めてのアニメーション制作だったので、
今回はそのときのふりかえりをレポートとしてまとめてみました。

巧みなモーションがイラストにかけられているWebサイトって、
ついつい見入ってしまうほど魅力的ですよね。
そんな“動きのある表現”を自分でも上手く作れるようになりたい！という心持ちです。

下書きは棒人間から。自然な動きをつかむ。

ラフに使ったツールは Procreate（プロクリエイト）。
初めは力技で、いきなりイラストを描いて動かそうとしたのですが、「動きがぎこちない…？」と感じる場面が多く、そこから学んだのが “棒人間で動きがほぼ完成した状態から描き起こす” という方法でした。

棒人間で動きを確認しておくと、良いことづくし。
シンプルですが、これが後の自然な動きにつながりました。

  • 重心(人物の場合は関節など)の位置が見やすい
  • タイミングを微調整しやすい
  • イラストに起こす時に迷いが減る

「歩く」動きづくりで気づいたこと

改めて「歩く」動きを観察してみると、
ただ右足と左足が前後している訳ではなかったことなど、
いくつか発見がありました。

頭の位置が上下する

足を開く → 閉じる の間で、頭の高さは少し上下します。最初はそのことに気づかずに作ってしまい、なんだか“ぺたぺた歩く”ような印象に…。
修正後に、頭の位置を少し下げたり上げたりするだけで、動きが一気に自然になりました。

足のつき方を意識する

もうひとつ大事だったのが「つま先と踵の動き」。
歩くとき、つま先から地面に着き、
次に踵がつく──その流れをちゃんと意識することで、
アニメーションがよりリアルになった気がします。

PhotoshopでGIFを書き出す

動きを決めたら、仕上げは Photoshop で。
ここでは、実際にアニメーションGIFを作るときの基本的な流れを簡単にまとめておきます。

❶素材をレイヤーとして読み込み

アニメーションの1コマを1レイヤーとして配置します。
再生中に番号を振っておくと分かりやすいです。

❷フレームアニメーションを作る

「ウィンドウ ＞ タイムライン」を開き、フレームアニメーションを作成します。

1コマあたりの再生速度を設定（例：0.1秒／フレーム）。
ループは「無限」にしておくとWebで繰り返し再生されます。

❸GIFとして書き出す

「ファイル ＞ 書き出し ＞ Web用に保存（従来）」でGIF形式を選択。
色数やサイズを調整して完成です。

完成したアニメーションはこちら。

シンプルな“歩く動作”も、キャラクターと一緒に動くと世界感がぐっと広がりますね。
今後、自然なアニメーションをもっと上手く作れるように
小さな練習を積み重ねていきたいと思います。

それではまた次回に、
ここまで読んでくださりありがとうございました。

（GIFを作成する際に参考にしたサイト）
https://www.adobe.com/jp/learn/photoshop/web/create-animated-gif