コードで作るアニメーションチャート
白紙から始める3つのプロンプト: 作る、見直す、書き出す。
始める前に: brand.md と MOTION.md が存在すれば読んでください。ない場合は、まず brand-intake を実行するか、16進カラーコード、フォント、ロゴファイルを尋ねてください。これらなしに「ブランドに沿った結果」と呼ばないでください。
ステップ1: 数値を聞いて、待つ
タイトル、ラベル、正確な数値、そしてそれらが実際の結果なのかサンプルデータなのか。サンプルデータの場合は、すべてのフレームに「Illustrative data」ラベルを表示します。数値を丸めたり、再フォーマットしたり、値を追加したりしないでください。
プロンプト1: 作る
LinkedIn投稿用のアニメーショングラフィックを1つ作成してください。ブラウザで開ける単一のHTMLファイルとして作ってください。
タイトル: "[タイトル]"。[サンプルデータの場合: "Illustrative data" を表示し続ける。]
値: [ラベル1: 値1]、[ラベル2: 値2]、...
モーションは4つの状態を持ちます:
1. 開始: [最初の見た目]。
2. 変化: [動く1つのもの]。フェードアウトして別のものに置き換わることはありません。
3. 停止: 完成したチャート。[ハイライトする値] にラベルを付ける。
4. 戻る: 開始位置にイージングで戻り、ループにジャンプが生じないようにする。
タイミング: 合計8秒。変化に約2秒、停止に4秒、戻りに1.5秒。
見た目: 背景 [BG]、テキスト [TEXT]、アクセント [ACCENT]、[フォント]。外部フォントや画像は使用禁止。グラデーション、グロー、バウンドは禁止。
サイズ: 1080 x 1350 ピクセル。
作成ルール:
- すべてのフレームを時間のみから計算してください。`window.seek(seconds)` を追加してください。
- タイトル、ラベル、軸は決して動きません。チャートだけが変化します。
- 最後のフレームは最初のフレームと完全に一致しなければなりません。
作成後、0、1、2、4、7秒のスクリーンショットを撮ってください。テキストの重なりや途切れがないか確認し、見つけた問題を修正して、何を変更したか教えてください。
プロンプト2: 見直す
撮影した5フレームとループの境界を検査してください。値が変わっていないか、ラベルが読めるか、重なりがないか、各要素が表示されるべきときにのみ表示されているかを確認してください。実際に観察した問題だけを報告してください。見つけた問題は修正し、以前のバージョンは保持して、同じフレームを再度撮影してください。問題が見つからなければ、その旨を伝え、修正を捏造しないでください。
プロンプト3: 書き出す
これを投稿可能な動画とGIFに変換してください。このコンピュータに既にあるツールを使用してください。インストールされていないものが必要な場合は、インストールする前に止まって何が必要か教えてください。MP4（1080 x 1350、8秒）と、無限ループするGIFを出力してください。その後、完成したGIFから3フレームを表示して、正しくできているか確認できるようにしてください。