デザインスキル不要でデモ動画を作成：Claude CodeとRemotionを活用

デモ動画のボトルネックを打破する

ある開発者は、ローンチ準備の整った製品を持っていましたが、よくある壁に直面しました：デモ動画、イラスト、モーショングラフィックスがなかったのです。モーションデザイナーに問い合わせると、1本あたり300〜1,000ドル、納期6〜10週間という見積もりが返ってきて、しかも存在しないFigmaファイルやブランドガイドラインの提供を求められました。これが原因で、ローンチは数ヶ月も先延ばしにされていました。

技術的解決策

ある週末、その開発者はまったく異なるアプローチを実践しました：

• Remotion: Reactベースの動画生成フレームワーク。「コードとしての動画」を実現し、タイムラインのスクラビングやエクスポートメニューは不要。必要なのはJSXと数学的な計算だけです。
• Claude Code: 動画コンポーネントの作成と反復に使用。Remotionのトランジションやフロントエンドデザインに特化したスキルを活かしました。
• Claude Skills: 具体的には、シーン切り替えのためのremotion-transitionsと、イラスト作成のためのfrontend-designを活用。

ワークフローと結果

開発者は以下のプロセスを実行しました：

• 機能イラストの作成: Claude Codeはイラストスキルを使用し、ランディングページコンポーネント内で直接、SVGベースの製品ビジュアルを生成。これにより、デザイナーが数日かかる作業を数時間に短縮しました。
• ランディングページの再構築: プレースホルダーのスクリーンショットを、同じワークフローで実際のブランド化されたアニメーションUIセクションに変換。
• リール動画の作成: Remotionでは各リールがReactコンポーネントです。Claude Codeがシーンの骨組みを作成し、開発者がタイミングやコピーを調整してエクスポート。最初のリールは約3時間、2本目は約90分かかりましたが、現在は1本あたり1時間未満で作成できるようになりました。

結果は即座に現れました：リール動画は数千回再生され、製品がリリースされているかどうか尋ねるDMが届きました。開発者は、自分はデザイナーでもビデオエディターでもなく、1ヶ月前までRemotionが何かほとんど知らなかったと述べています。しかし、これらのツールによって、自身のコードベースを読み解き、製品のビジュアル言語を理解し、シーンごとの動画コンポーネントを即座にプレビューしながら生成できるようになったのです。

総制作コスト：0ドル（Claude Codeのサブスクリプションを除く）。開発者は、モーションデザイナーに反対しているわけではないが、エージェンシーのワークフローではこの反復速度には到底及ばないと強調しています。