動画チュートリアル：Figmaでバナーにアニメーションを付けてHTMLにエクスポートする

Figmaから、そのまま入稿できるHTMLバナーにアニメーションを付けて数秒でエクスポートする方法を解説した動画です。

アニメーションを選ぶ

Bannerifyには、キーフレームをベースにした数十種類のアニメーションが用意されており、次の5つのカテゴリに分かれています。

• Entrances
• Exits
• Basic Transforms
• Attention Seekers
• Background Pans

登場アニメーションを設定するには、Bannerifyのタイムラインでアニメーションを付けたいレイヤーにマウスを重ね、上のセレクトボックスをクリックします。アニメーションの一覧をスクロールし、アニメーション名をクリックするとレイヤーに適用されます。新しいアニメーションを適用したバナーのプレビューが、すぐに更新されます。

レイヤーからアニメーションを外す。レイヤーにアニメーションを付けたくない場合は、No Entry AnimationやNo Exit Animationを選びます。または、Figmaのレイヤー名の先頭にlocked- を付けても（例：locked-RectangleBackground）、アニメーションが追加されなくなり、プラグインのタイムラインでもアニメーションのセレクトボックスが無効になります。

タイムラインでバナーのアニメーションをプレビューする

Playアイコンボタンをクリックするとバナーのアニメーションをプレビューでき、Pauseアイコンボタンをクリックすると、どの時点でもタイムラインを一時停止できます。Restartアイコンボタンをクリックすると、アニメーションを最初から再生し直せます。

バナーの上にある時間ルーラーをクリックまたはドラッグすると、アニメーションをスクラブできます。共有の再生ヘッドは、すべてのバナーのタイミングトラックと位置がそろったままです。ルーラーが表示されていれば、バナーのヘッダーからスクラブすることもできます。

+、−、ズームスライダー、またはルーラーやタイミングトラックの上でのトラックパッドの2本指ピンチで、100%〜1000% の範囲でズームできます。ズームしているときは、ルーラーの下にある青い角丸のスクロールバーのハンドルをドラッグすると、左右に移動できます。Fitをクリックすると、タイムライン全体がもう一度表示されます。これらの操作は表示を変えるだけで、アニメーションのタイミングやエクスポートの長さは変わりません。ナビゲーション操作の詳細は、タイムラインのズームとスクロールをご覧ください。

さらに細かく編集するには、スナップ、レイヤーフィルター、マーカー、再利用できるモーションシーケンスを使うか、トランジションを調整しながら作業範囲をループ再生します。

Timeline Settings

ヘッダーのTimeline Settingsをクリックします。パネルはGeneralタブで開き、4つのタブがあります。

タブ	設定できる項目
General	タイムラインの長さ、Magic Delays、Magic Speeds
Timeline Tools	プレビュー範囲のループ再生と名前付きマーカーの追加
Motion Sequences	連動したアニメーションの保存と再利用
Sync Timings	バナーサイズ間でのタイミングのコピー

Snap、レイヤーフィルター、Zoom To Selection、グループの折りたたみ操作は、Timeline Settings → Timeline Toolsにあります。

編集履歴の確認と復元

元に戻す・やり直す矢印の横にあるHistoryをクリックすると、タイムラインの編集履歴を確認できます。ステップを選ぶと、その時点まで戻ったり進んだりできます。Currentは現在の状態を示します。前の状態に戻ってから新たに編集すると、それより後の履歴は置き換えられます。

タイムラインの長さを調整する

Timeline Settings → Generalを開き、Total Timeline Lengthで長さを選んでから、Update Timeline Lengthをクリックします。選べる長さは1秒〜3分です。変更はすべてのバナーに適用され、短くしたタイムラインからはみ出すタイミングの範囲は、収まるように調整されます。

Undoを使うか、Historyで前のステップを選ぶと、以前の長さとタイミングに戻せます。タイムラインの長さの調整をご覧ください。

退場アニメーションを追加する

退場アニメーションの追加方法は、登場アニメーションと同じです。上のセレクトボックスではなく、下のセレクトボックスをクリックして、レイヤーの退場アニメーションを選びます。

レイヤーに設定する退場アニメーションは、「登場」アニメーションが終わった後に始まるように設定してください。そうしないと、2つのアニメーションが重なり、同時にトランジションが競合する問題が起こります。

アニメーションの速度とタイミングを調整する

レイヤーのタイムラインバーの左右の端をクリックし、マウスで押したままドラッグすると、アニメーションの長さと開始・終了位置を変えて、速度と遅延を調整できます。

レイヤーのタイムラインバーの中央をクリックし、マウスで押したまま左右にドラッグすると、タイムライン上でアニメーションの位置を移動できます。

キーボードで正確なタイミングの数値を入力する。タイミングバーを使いたくない場合は、タイムラインのレイヤーにある2つ目の値をクリックし、キーボードで新しい数値（例：1.5）を入力して秒数を設定することで、速度と遅延の値を指定することもできます。

アニメーションをループさせる

特定のレイヤーのアニメーションを（バナーのタイムラインが終わった後も）無限に繰り返したい場合は、選択したアニメーションの横にあるLoopトグルをオンにします。「Heartbeat」「Flicker」「Pulse」など、ループ再生に向いたごく短いアニメーションで便利です。

アニメーションをコピー・ペーストする

CopyボタンとPasteボタンを使うと、タイムラインのあるレイヤーのアニメーションを別のレイヤーにすばやくコピーできます。Copyボタンをクリックするとアニメーションがコピーされ、ほかのレイヤーでPasteボタンをクリックすると貼り付けられます。

コピーしたアニメーションを複数のレイヤーに貼り付ける 一括適用機能を使うと、コピーしたアニメーションを複数のレイヤーにまとめて適用することもできます。

アニメーションを一括適用する

複数のレイヤーに同じアニメーションをすばやく適用するには、各レイヤー名の横にあるチェックボックスでレイヤーを選択し（またはQuick Select Layers機能を使い）、プラグインのウィンドウ下部からスライドして現れるエリアでアニメーションを設定します。アニメーションが決まったら、Apply Animations to Selected Layersボタンをクリックすると、選択したすべてのレイヤーに新しいアニメーションが適用されます。

似たレイヤーをすばやく選択する

同じ要素やレイヤーを含む複数のバナーからなるバナーセットで作業している場合は、BannerifyのヘッダーにあるQuick Select Layersメニューを使うと、すべてのバナーから似たレイヤーを自動で選択できます。各レイヤーに手作業でチェックを入れる代わりに便利です。

Quick Select Layersの使用例 たとえば、すべてのバナーにCTA Buttonという名前のレイヤーがある場合、その項目をクリックすると、すべてのCTA Buttonレイヤーに自動でチェックが入ります。これで、すべてのバナーのそのレイヤーに、アニメーションをまとめて一括適用できます。

Magic DelaysとMagic Speedsを使う

Timeline Settings → Generalを開き、Magic DelaysまたはMagic Speedsで値を選びます。Apply To All Entry AnimationsまたはApply To All Exit Animationsをクリックすると、すべてのバナーに適用されます。

Magic Delays

0.1〜0.5秒の範囲で、少しずつずらす遅延を選びます。各レイヤーには、アニメーションの長さを保ったまま、順にずれた遅延が設定されます。

Magic Speeds

0.1〜1秒の範囲で長さを選びます。開始時間は、タイムラインに収めるために早める必要がある場合を除き、そのまま保たれます。

1回の適用が、履歴の1ステップになります。Undo、Redo、またはHistoryパネルを使って、変更の間を移動できます。Magic DelaysとMagic Speedsをご覧ください。