動作グラフィック向けClaude：動画としてキャプチャ可能なアニメーションHTMLビジュアルを生成するプロンプトパターン

r/ClaudeAIのRedditユーザーが、Claudeを使ってモーショングラフィックスやアニメーションチャートを直接生成する方法を紹介しています。他のツール用のプロンプトではなく、ClaudeにHTMLウィジェットとしてビジュアルを作成させ、それをPlaywrightとffmpegでMP4としてキャプチャするという手法です。彼らは一貫して機能するプロンプトパターン、すなわち「破綻点のあるストーリーを説明する」ことを共有しています。

効果的な方法

鍵となるのは、ユーザーに何かを壊させることです。良い出力が得られた例：

• リスクで満たされる5つのグラスを表示。最後の1つが溢れて粉々になる。
• クリックするたびに伸びていき、最後に切れる輪ゴムを表示。

ユーザーは、Claudeにユーザーが何かを壊せるように指示することが、出力を実際に面白くする方法だと報告しています。

求めているもの

このユーザーは特にコミュニティに対して、以下のようなプロンプトを求めています：

• 実際に動くアニメーションチャートやデータビジュアライゼーション
• ユーザーが何かを操作できるインタラクティブな説明ツール
• Claudeの出力から動画キャプチャに成功したもの
• 5回目ではなく、初回から一貫して良いビジュアルを生成するプロンプト構造

元の投稿にはコミュニティからの具体的なプロンプトは含まれておらず、スレッドはまだ回答を収集中です。

実用的なポイント

ClaudeでアニメーションHTMLウィジェットを作成し、後で動画としてキャプチャする場合、緊張と解放のアークを持つストーリーを中心にプロンプトを構成してください。破綻点（溢れ、切れ、粉砕）が視覚的な変化を引き起こし、アニメーションを魅力的にします。スクリーンショットや録画にはPlaywright、MP4エンコードにはffmpegを組み合わせてください。