AIアニメーションタイムラインを作成する

Bannerifyのタイムライン用プロンプトをお好みのAIアシスタントにコピーし、返ってきたJSONプランを検証して、提案されたアニメーションとタイミングを安全に適用します。

Bannerifyは、1つのバナーのレイヤーと現在のタイミングを、ChatGPT、Claude、GeminiなどのAIアシスタント向けの構造化されたプロンプトに変換できます。返ってきたJSONをBannerifyに貼り付けると、何かを適用する前に、提案された登場・退場・ホバーのアニメーションを検証して確認できます。

プロンプトをコピーしても、BannerifyがAIサービスと通信したり、タイムラインを変更したりすることはありません。プロンプトをどこに貼り付けるかはご自身で選べます。タイムラインが更新されるのは、JSONの応答が検証に通り、Apply AI Timelineをクリックした後だけです。

AIタイムラインを作成する ​

  1. バナーのフレームまたはセクションをBannerifyに読み込みます。
  2. アニメーションを付けたいバナーのヘッダーにある、Create AI Animation Timelineのプロンプトアイコンをクリックします。
  3. どのような演出にしたいかを説明します。目指す雰囲気、視覚的な優先順位、重要なレイヤーの順番、控えめにしておきたい要素などを含めてください。
  4. Copy AI Promptをクリックします。
  5. プロンプトがコピーされたことをBannerifyが知らせたら、お好みのAIアシスタントに貼り付けて送信します。含まれているタイムラインのデータやルールは削除しないでください。生成されたプロンプトはプラグインには表示されず、直接クリップボードにコピーされます。
  6. AIの応答からJSONオブジェクトをコピーします。
  7. Bannerifyに戻り、Paste and validate the JSON responseに応答を貼り付けます。貼り付けたJSONはBannerifyが自動で検証します。Validate JSONをクリックして検証することもできます。
  8. Bannerifyが問題を報告した場合は、Copy JSON Fix Promptをクリックし、そのプロンプトを同じAIとの会話に貼り付けます。その後、修正されたJSONの応答をコピーして検証します。
  9. 変更前と推奨されるアニメーションとタイミングを含め、提案されたすべての変更を確認します。
  10. Apply AI Timelineをクリックすると、このバナーだけが更新されます。複数のバナーを読み込んでいて、レイヤー構成が一致している場合は、代わりにApply to All Matching Bannersをクリックします。

プレビューはすぐに更新され、Bannerifyは新しいアニメーション設定をFigmaのレイヤーに保存します。

より役立つ結果を得るには、アニメーションのプリセット名を挙げるのではなく、見せる順番を説明してください。たとえば：最初に見出しを表示し、商品を右から登場させてから、CTAを表示します。動きは控えめにして、CTAにはさりげないホバーを付けてください。 コピーしたプロンプトには、サポートされているBannerifyのアニメーション名がすでに含まれています。

結果を確認して元に戻す ​

確認パネルは右側の列に開き、変更されるトラックだけが表示されます。レイヤーの一覧は単独でスクロールするので、確認パネルのタイトルと適用ボタンはいつでも使えます。変更される各トラックでは、対象のレイヤーについて、現在の登場・退場・ホバーの設定と、検証済みの推奨内容を比較できます。

Apply to All Matching Bannersは、検証済みのプランを、現在Bannerifyに読み込まれているバナー全体に安全に再利用します。バナーが一致とみなされるのは、編集可能なソースのレイヤーそれぞれについて、正規化した名前、レイヤーの種類、セクションのシーン位置が同じレイヤーがちょうど1つあり、かつそのバナーのソースモードとタイムラインの長さが同じ場合だけです。Bannerifyは適用前に、対応付け直したプランを、そのバナーのアニメーションの互換性とタイミングの範囲に照らして検証します。あいまいなバナーや互換性のないバナーはスキップされ、確認メッセージに一致したバナーとスキップしたバナーの数が表示されます。

AIタイムラインを適用すると、複数のレイヤーや一致したバナーが変更された場合でも、Bannerifyの履歴には1つのステップとして記録されます。Undoボタン、またはmacOSではCommand + Z、WindowsではCtrl + Zを使うと、変更前のタイムライン全体が元に戻ります。その後、同じAIプランをやり直すことも、新しいプランを生成することもできます。すべてのショートカットと履歴の動作については、タイムラインの変更を元に戻す・やり直すをご覧ください。

プロンプトに含まれる情報 ​

コピーした各プロンプトには、AIが有効なプランを作るために必要な情報が含まれています。

  • 編集可能なタイムラインの各レイヤーに付けられるL1などの一時的な参照
  • レイヤーの名前、種類、重なり順、境界
  • バナーのサイズとタイムラインの長さ
  • 現在の登場・退場・ホバーの設定
  • 各レイヤーまたはセクションのシーンで許可されるタイミングの範囲
  • Split TextとSVG Drawへの対応状況
  • サポートされているBannerifyのアニメーションIDの一覧（登場・退場のトラックに使える保存済みのカスタムアニメーションを含む）
  • アニメーションの演出に関する指示

Bannerifyは、FigmaのバナーやレイヤーのIDそのもの、エクスポートした画像データ、SVGのマークアップ、その他のレイヤーのアセットのバイトデータは含めません。ただし、コピーしたプロンプトにはレイヤー名やレイアウト・タイムラインのメタデータが含まれるため、機密性のある名前や構成を含むデザインを共有する前には内容を確認してください。

JSONの検証方法 ​

Bannerifyは、どのレイヤーを変更するよりも前に、応答全体を検証します。次の点を確認します。

  • 応答が現在のBannerifyのタイムラインのスキーマを使っており、コピーしたプロンプトと一致している
  • 指定された各レイヤーの参照が、ちょうど1回ずつ含まれている
  • 存在しないレイヤーの参照やアニメーションIDが作られていない
  • Split TextとSVG Drawのアニメーションが、対応するレイヤーにだけ使われている
  • 登場と退場のアニメーションが、そのレイヤーで許可されるタイムラインまたはシーンの範囲に収まっている
  • 登場と退場の範囲が重なっていない
  • 長さが0.1秒以上である
  • タイミングの値を、Bannerifyのタイムラインの0.1秒単位に正規化できる

元のプロンプトでは、応答する前に厳密なJSONかどうかを自己チェックするようAIに求め、説明文、URL、コメント、末尾のカンマ、別の文字列で包んだJSONを明示的に禁止しています。それでも応答が検証に通らない場合は、Copy JSON Fix Promptで、具体的なエラー、却下された応答、サニタイズ済みの元のタイムラインの指示を含む新しいプロンプトが作成されるので、AIは最初からやり直さずに修正できます。

プロンプトをコピーした後に、タイムライン、レイヤー設定、カスタムアニメーションの一覧、シーンのタイミングが変わった場合、Bannerifyは古い応答を却下します。Copy Fresh PromptをクリックしてAIにもう一度依頼し、現在のタイムラインに基づいたプランを作ってもらってください。

JSONの応答形式 ​

コピーしたプロンプトでは、次の形式の1つのJSONオブジェクトを返すようAIに求めます。

json
{
  "schemaVersion": "bannerify.timeline-plan.v1",
  "snapshotId": "ai-example-snapshot",
  "timelineSeconds": 5,
  "layers": [
    {
      "layerRef": "L1",
      "entry": {
        "animationId": "fade-in-bottom",
        "startSeconds": 0.2,
        "durationSeconds": 0.6,
        "loop": false
      },
      "exit": {
        "animationId": "fade-out",
        "startSeconds": 4.3,
        "durationSeconds": 0.5,
        "loop": false
      },
      "hover": null
    }
  ]
}

entry、exit、hoverの各値には、次のいずれかを指定できます。

  • そのトラックを置き換えるアニメーションのオブジェクト
  • アニメーションを削除するnull
  • 現在の値をそのまま残す"keep"

schemaVersion、snapshotId、timelineSeconds、レイヤーの参照、アニメーションIDは編集しないでください。AIが応答を1つのjsonコードブロックで囲んでいても、Bannerifyは読み取れます。

セクションのシーンと特殊なアニメーションの扱い ​

Figmaのセクションから読み込んだバナーでは、プロンプトに各シーンの現在のタイミングの範囲が含まれます。AIはその範囲内でレイヤーのタイミングを変更できますが、レイヤーを別のシーンに移すことはできません。新しい範囲をAIに使わせたい場合は、先にBannerifyでシーンのタイミングを調整してから、新しいプロンプトをコピーしてください。

Split Textのアニメーションは、対象となるテキストレイヤーでのみ使えます。SVG Drawのアニメーションは、対応するSVGレイヤーでのみ使えます。保存済みのカスタムキーフレームアニメーションは、登場と退場の選択肢として含まれます。AIに渡した一覧にない既存のアニメーションも、そのトラックに"keep"を返せば残せます。

名前がlocked-で始まるレイヤーは、意図的に除外されます。ネストしたレイヤーが見つからない場合は、Bannerifyのタイムラインに展開してからバナーを更新し、新しいプロンプトをコピーしてください。

トラブルシューティング ​

応答が有効なJSONではない ​

検証の警告にあるCopy JSON Fix Promptをクリックし、同じAIとの会話に貼り付けて、含まれているエラーやタイムラインの指示を編集せずに送信します。Bannerifyで却下された応答を修正後のJSONに置き換え、もう一度Validate JSONをクリックします。

タイムラインが変更されたと表示される ​

プロンプトが現在のバナーの状態に基づいていません。Copy Fresh Promptをクリックし、AIアシスタントで前のプロンプトを置き換えて、新しいJSONの応答を使ってください。

アニメーションIDが一覧にない ​

コピーしたプロンプトに含まれるanimationCatalogのIDだけを正確に使うよう、AIに依頼してください。表示名で代用したり、新しいアニメーション名を作ったりしないでください。

レイヤーが欠けている、または重複している ​

AIの応答には、指定されたすべてのlayerRefをちょうど1回ずつ含める必要があります。そのレイヤーのすべてのトラックが"keep"の場合も同じです。

登場と退場のアニメーションが重なっている ​

退場が始まる前に登場が終わるよう、AIに依頼してください。また、どちらの範囲も、そのレイヤーのtimeWindowSecondsの中に収める必要があります。

JSONは有効なのに変更が表示されない ​

応答が現在の値をそのまま残したか、すでにタイムラインに設定されている内容を推奨しています。別の結果が欲しい場合は、指示を調整して新しいプロンプトをコピーしてください。

エクスポートする前に、必ずバナー全体をプレビューしてください。JSONの検証で確認できるのは、プランが構造的に安全で、現在のタイムラインと互換性があることです。クリエイティブとしての仕上がりは、目で見て確認する必要があります。