UI モーションデザイン ワークフローガイド
Claude Opus 5.5 を使用した UI モーションデザイン動画作成ワークフローの詳細な解説。包括的なプロンプトおよび指示セットとして機能します。
プロンプト
コツはプロンプトではありません。重要なのは次のルールです：すべてのフレームが時間の純粋な関数であること。
曲 -> numpy でビートグリッド生成 -> Opus 5.5 が 1 つの HTML ファイルを作成 -> Playwright でレンダリング -> ffmpeg でブレンド
ステップ 1: 約 120 BPM のロイヤリティフリー音源を選択
ステップ 2: Opus 5.5 に 8〜12 種類の UI 状態を提供（ボタン、ローダー、トグル、チャート、コマンドパレットなど）
ステップ 3: 1440x1440 の単一の HTML ファイルを使用し、すべてのスタイルを seek(t) 内で計算。CSS トランジションやタイマーは使用しない
ステップ 4: スプリングアニメーションを閉形式の数式で実装し、任意のフレームを任意の順序でレンダリング可能にする
ステップ 5: numpy でビートを検出し、すべての UI サウンドを測定されたピークに同期させる
ステップ 6: Playwright で各フレームあたり 4 サブフレームを撮影し、ffmpeg の tmix でそれらをブレンドして 60fps のモーションブラーを実現
ステップ 7: まずビートごとに 1 フレームをレンダリングし、グリッドから外れた部分を修正してから、フルレンダリングを実行
計算:
120 BPM x 7 バーズ = 28 ビート = 14 秒
14 秒 x 60 fps x 4 サブフレーム = 3,360 回のブラウザレンダリング
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
Claude Opus 5.5 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 動画 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 動画 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。