欲張って盛り込みすぎて失敗
やりたいことを詰め込みすぎて破綻。Flowの機能に合わせてフォーカスを絞ることにした。
2026.08.07
前回、Claude CodeでのSVGアニメーション制作が「動きを固定化するほどノイズが増える」という壁にぶつかり、方向転換を決意したところまでお話ししました。今回はいよいよ、同僚のディレクターに教えてもらったGoogle Flowに挑戦です。
まずは無料枠で試してみることに。触ってみると、これがなかなか感触がいい。SVGでは苦戦していた「動き」の部分が、思っていたよりスムーズに出てくるのです。これはいけるかもしれない、と2ヶ月限定で課金することに決めました。
予算は2,000クレジット。せっかくなので、クレジットの消費量によってアウトプットにどれくらい差が出るのかも検証しつつ進めることにしました。とはいえ、今回の本題はそこではありません。メインの検証テーマは、プロンプトの精度を上げて「ブレ」を抑えること。前回SVGで苦しめられたのも、結局は狙った通りの動きを再現できない「ブレ」が原因でした。同じ壁に、ツールを変えても向き合うことになったわけです。
試行錯誤の末にたどり着いたコツは2つ。ひとつは、やりたいことを欲張らないこと。ハードルを下げるために、表現したいことをぐっと絞り込み、フォーカスを一点に定めてから作り切るようにしました。あれもこれもと欲を出すほど、ブレの原因が増えていくと分かったからです。
もうひとつは、プロンプトの「言葉選び」。感覚的な言い回し、いわば文系的な表現(「やわらかく」「ふわっと」「いい感じに」)ではブレが収まらず、数値や条件で明確に指定する理系的な言葉に置き換えていく必要がありました。ここで頼りになったのが「アニメーション原則」です。緩急(イーズイン・イーズアウト)や、タメとツメ、フォロースルーといった、アニメーションの動きを言語化するための原則があります。実はこれ、その昔Flash制作をやっていた頃に培った知識が、思わぬところで活きた瞬間でした。感覚で「いい感じに動かす」のではなく、原則という共通言語でAIに指示を出す。プロンプトも、詩よりは仕様書に近づけていく感覚です。
欲張って盛り込みすぎて失敗
やりたいことを詰め込みすぎて破綻。Flowの機能に合わせてフォーカスを絞ることにした。
絞ったのに、動きがブレる
フォーカスは絞れたはずなのに、出てくる動きに一貫性がない。ブレの原因はまだ別にありそうだった。
アニメーション原則で言語化
予備動作や副次アクションなど、新卒ほやほやの頃の必須ツールだったFlashがヒントになる。
そうして2,000クレジットを使い切り、なんとか一つ目のロゴアニメーションが完成しました。感覚と根性でゴリ押ししていた前回から一歩進んで、「言葉を設計する」ことの大切さを学んだ制作でした。
アニメーション原則という武器を手に入れ、ひとまず納得のいく一本ができました。とはいえ、Google Flowでの検証はこれで終わりではありません。せっかくなので、もう一つ別のツールでも挑戦してみることに。次に取り組んだのは、Adobe Fireflyでのロゴアニメーション制作。同じ「ブレを抑える」というテーマに、今度はどう向き合うことになるのか——制作秘話は次回に続きます。
ちょっとだけ聴いてみる
ちょっとだけ聴いてみる
ちょっとだけ聴いてみる
ちょっとだけ聴いてみる
ちょっとだけ聴いてみる