コードかモックアップか？アニメーション学習の効率的な進め方
ウェブアニメーションに本格的に取り組むに当たって、なぜコーディング技術を磨く事に注力するよりも、モックアップを作ってから必要なコーディング技術を調べたほうがいいのかをまとめました。
アニメーションのコーディングには時間がかかる
いくらAIが進化したとはいえ、アニメーションのバリエーションは色々あります、AIが作れるのは基本的な動きだけで、発想するのは人間です。しかし人間も直ぐに優れた発想にいきなり辿り着くわけではなく、色々なバリエーションを試しながら最善の発想を選ぶ必要があります。そしてその発想を試してみる過程での様々なバリエーションを作るのには二つの方法があります。一つはGSAP等のアニメーションライブラリに習熟して、コーディングを素早く仕上げて複数のアニメーションのコードを作る方法。もう一つはAfterEffectsのようなツールを習得してアニメーションのモックアップをいくつも作り、最善のものを選んだ後で、そのモックアップをもとにコーディング方法を様々なサンプルを参考に考え出したり、AIに指示してアニメーションを作る方法です。エンジニアなら先の方法も可能ですが、問題があります。
ウェブには無数のアニメーションサンプルコードがある
アニメーションの得意なフロントエンドエンジニアを目指すなら、様々なサンプルを真似てコーディングしていくうちに、自由にアニメーションのコードを書けるようになるのも良いと思いますが、とにかく時間が物凄くかかります。そして自分のアイデアを自由に形に出来るようになるまでには、発想を磨くためにサンプルを真似てコーディングしなければいけないので面白くありません。
ウェブにある無数のGSAPのアニメーションサンプルはモダンな方法でコーディングされている
私もGSAPの基本的なコードを書けるようになるまではチュートリアルを真似て勉強しましたが、それ以上は真似て作りたいとは思いませんでした。GSAPのサンプルコードは大概はHTMLとCSSとJavaScriptに分かれて書かれており、アニメーションにCSSのプロパティが関係している事も少なくありません。でもTailwindCSSでコードのどこに、どんなCSSが適用されているのか見られるのに慣れていると、HTMLとCSSが分離されているのが見づらくて嫌になります。ASTROというフレームワークを使うとインラインスタイルをコンポーネント内でのみ有効にすることが出来るのですが、そういう方法でアニメーションするスタイルをインラインスタイルにして、残りはTailwindCSSで書いて欲しいと思ってしまいます。
ウェブにあるサンプルは自分の目指すアニメーションを実現するために必要なものだけ探してみればいい
私は先のような理由からウェブにあるサンプルからGSAPアニメーションに習熟していくというアプローチを辞めました。そしてAWWWARDSのクリエーターが多く採用しているAfterEffectsでモックアップを作ってからコーディングするというアプローチを取ることにしました。しかし、これにも問題がありました。
AfterEffectsのような高機能なソフトを習得するには時間がかる
これが私がAfterEffectsでウェブアニメーションのモックアップ作成を一旦は諦めた理由です。しかし、自分は絵を描くのが得意でないので、基本的な要素をレイアウトしてデザインする事しか出来ません。しかもウェブデザインを指定するCSSはボックスレイアウトが基本、FlexやGridといった要素（ブロックといいます）を仮想的なボックスに入っているものとしてレイアウトするように設計されています。つまりレイアウトを奇抜なものにしようとすればするほど、画像を入れて実現したりする必要性が増して、コーディングが複雑になるのです。
発想の転換
AfterEffectsでテーマを決めて、まずはそのテーマに沿ったアニメーションスキルだけを覚えることで、習得時間を短く出来ないだろうか。Skill Shareという無数のデザインチュートリアルを集まっていて、定額で視聴出来るサイトがあります。その中のAfter Effectsのチュートリアルを見ていて気づいたことがあります。After Effects for Beginnersといった全般的な機能を扱ったチュートリアルより、After Effects Logo Animetionといった一つのテーマに絞って解説したチュートリアルのほうが短いということです。幸いにもAfterEffectsは基本さえ分かっていれば、UIアニメーションを実現するためのチュートリアルはSkill ShareにもAwwwadsにもあります。なんとか、この方法で短期間で集中的に学んでAfterEffectsをUIアニメーションのモックアップツールとして使えないだろうか。これが今、私が考えてえいることです。
ただしFigmaでもある程度まではアニメーションが出来る
FigmaはUIモックアップのアニメーションに対応しています。先にFigmaのアニメーション機能に習熟してから、AfterEffects等のアニメーションに手を出すのが順当な道筋でしょう。一度に色々と手を出すと収集がつかなくなってしまいます。しかしFigmaのチュートリアルはAfterEffectsのチュートリアルみたいに派手さがないので直ぐに飽きてしまいます。フロントエンドアニメーションの技術として重要なものには他にもThree.jsもあります。どのような組み合わせでやるにしても、焦らず、自分が飽きない方法でやってみよう。今、私はそう考えています。
Skill Shareのリンクは以下になります
Discussion