キネティック・プロモーション・モーショングラフィックス用プロンプト
Claude Opus 5.5 を使用して、製品プロモーション向けの決定論的かつコード駆動型のキネティックタイポグラフィおよび UI アニメーションを生成するための詳細なシステムプロンプト構造。
プロンプト
<inputs>
以下について質問してください:
• 製品名 + URL
• 製品のストーリーを伝える 8〜12 の UI 状態
• 各状態で表示される実際のデータ
• ブランドカラー + フォント + アクセントカラー
• 必要なフォーマット (1:1, 16:9, 9:16)
</inputs>
<rules>
HTML ファイルは 1 つのみ。Canvas は 1 つのみ。
draw(t) 関数は 1 つのみ。
CSS トランジションは使用しない。
タイマーは使用しない。
フレーム間で状態を保持しない。
形状は常に 1 つのまま、分割しない。
すべての状態では、同じ要素がサイズ、角丸半径、色を変化させながらコンテンツが入れ替わる。
カーソルがシーケンスを駆動し、実際のクリック、入力、ドラッグ操作を行う。
本物の UI。本物のデータ。プレースホルダーはなし。
</rules>
<structure>
120 BPM グリッド
ビートごとに何か起こる
ロゴ → ボタン → ハンドルフィールド → 「あなたですか?」→ ローダー → ピン → ユーザーで埋まる地球儀 → マッチ → タブ → RSVP → 検索 → ロゴ
</structure>
<motion>
小さなオーバーシュートを伴う閉形式スプリングを随所に使用。
値がターゲットを複数回変更する場合、変更ごとにスプリングを 1 つずつ加算する。
コンテンツはコンテナの変形開始後に出現し、次の変形開始前に消去されるため、テキストが重ならない。
遷移には短いブラー効果を使用する。
黒からアクセントカラーへ直接フェードしないこと。代わりに、状態間を移動するアクセント要素を使用する。
タブインジケーターは、各エッジを異なるスプリングに配置することで伸縮させる。
カメラズームにより、すべての状態がフレーム全体を占めるようにする。
最後のフレームが最初のフレームと一致するようにし、全体がループするようにする。
</motion>
<export>
まず、ビートごとに 1 フレームをレンダリングし、コンタクトシートとして確認する。
詰まりや破綻があれば修正する。
その後、ヘッドレス Chrome で 60fps の全フレームをレンダリングし、モーションブラーのために平均 6 サブフレームを使用する。
ffmpeg にパイプする:
H.264 + yuv420p
すべてのアスペクト比を並行して書き出す。
</export>
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
Claude Opus 5.5 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 動画 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 動画 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。