バナーにクリックできるURLリンクを追加する

BannerifyでHTMLバナーのエクスポートにURLリンクを追加する方法は2つあります。バナー全体を<a>リンクタグで囲む方法と、タイムラインの個々のレイヤーにクリックできるリンクを追加する方法です。

リンクはHTMLエクスポートにのみ適用されます。 この設定はすべてのHTMLエクスポートオプションに適用されますが、プラグインからのGIFや動画のエクスポートには影響しません。

バナー全体にクリックできるURLを追加する ​

バナー全体をリンクで囲むには、エクスポート設定パネルのURL欄にリンクを貼り付けます。バナー全体が自動で<a>タグで囲まれ、そのhrefには入力欄で指定したURLが設定されます。

タイムラインの特定のレイヤーにクリックできるURLを追加する ​

タイムラインの特定のレイヤーをクリックできるようにするには、Figmaのキャンバスでそのレイヤーをクリックし、Figma標準のPrototypeパネルでOpen linkインタラクションを追加します。FigmaのインタラクションのURL欄にリンクを貼り付けると、HTMLバナーのエクスポートで、その要素にonclick="window.open('https://yourwebsitelink.com', '_blank')"属性が自動で追加されます。

Bannerifyのタイムラインに表示されているレイヤーにのみ適用されます。 この設定は、Figmaのタイムラインに表示されているレイヤーにのみ適用されます。デフォルトでは、バナーフレームの直下の子レイヤーが対象です。必要に応じて、プラグインでネストされたレイヤーを含め、それらのネストされたレイヤーにもプロトタイプのリンクインタラクションを適用できます。

DoubleClickエクスポートでタイムラインのレイヤーにEnabler.exit()を使う ​

DoubleClick Studio形式でエクスポートする場合は、タイムラインのレイヤーのFigmaプロトタイプURLに、通常のWebサイトのURLの代わりにEnabler.exit(...)の呼び出しを設定することもできます。

  1. タイムラインでレイヤーを選択します（たとえば、CTAボタン）。
  2. FigmaのPrototypeパネルで、On click -> Open linkインタラクションを追加します。
  3. URL欄に、次のようなDoubleClickのexit呼び出しを入力します。
js
Enabler.exit("CTA Exit");
  1. Bannerifyで、DoubleClick Studio形式を使ってバナーをエクスポートします。

すると、Bannerifyは次のように処理します。

  • そのレイヤーをEnabler.exit("CTA Exit")に結び付けます。
  • バナー全体のデフォルトの背景exit（Enabler.exit("Background Exit")）はそのまま残します。
  • レイヤーのクリックが背景のexitに伝わらないようにして、exitの呼び出しが重複しないようにします。

DoubleClickエクスポートでのみ使ってください。 DoubleClick以外のHTML形式では、Prototypeのリンクに通常のWebサイトのURL（例：https://example.com）を使ってください。