動画チュートリアル：Figmaのバナーエクスポートにスクロール可能な注意書きテキストを追加する

この動画では、Bannerifyプラグインを使って、Figmaのバナーエクスポートにスクロール可能な注意書きテキスト（自動スクロール付き）を追加する方法を紹介します。

長い法的表記や安全性に関する文言、PI（処方情報）の内容を、限られたスペースで読みやすく表示したい場合、Bannerifyでは省略表示のテキストレイヤーをネイティブのスクロール可能なHTMLテキストとしてエクスポートしたり、自動スクロールするテキストとしてGIF・動画の出力にレンダリングしたりできます。

インラインのスクロールテキストではなく、閉じられるオーバーレイを使いたい場合は、ポップアップオーバーレイを追加をご覧ください。

ステップ1：Figmaで省略表示のテキストレイヤーを作成する

テキストボックスのサイズを固定したテキストレイヤーを作成し、（自動で伸びる設定ではなく）Truncateに設定されていることを確認します。

HTMLエクスポートでは、表示されているテキストボックスのサイズがスクロールコンテナになり、テキストの内容はすべてその中に保持されます。GIF・動画のエクスポートでは、同じテキストボックスが、レンダリングされる自動スクロールの動きを切り抜きます。

ステップ2：Bannerifyでスクロール可能なテキストを有効にする

そのテキストレイヤーのレイヤー設定を開き、次の設定を有効にします。

• Enable scrollable text

この機能は、省略表示のテキストレイヤーでのみ使えます。

ステップ3：スクロールの動作を選ぶ

有効にしたら、次のいずれかのモードを選びます。

• Manual User Scrollable：タイムライン全体を通して、ユーザーが手動でスクロールします。
• Auto Scroll on Layer Enter：レイヤーが登場したときに自動スクロールを開始します。
• Auto Scroll on Banner End：バナーのタイムラインが終わったときに自動スクロールを開始します。

GIF・動画のエクスポートでは、どちらの自動スクロールモードもHTMLエクスポートと同じスクロール速度を使います。元のバナーのタイムラインより長いスクロール時間が必要な場合は、テキストがその速度でスクロールし終えられるよう、エクスポートするファイルが延長されます。

バナーのループ時の動作

• 再生回数が有限の場合、Auto Scroll on Banner Endは最後の再生時にのみ動作します。
• バナーが無限ループに設定されている場合、Auto Scroll on Banner Endはスキップされます。

ステップ4：エクスポート時の注意点を確認する

• HTML出力では、手動モードはユーザーがスクロールできる状態のままです。どちらの自動モードでも、ホイール、タッチ、スクロールバーの操作があると自動の動きがその位置で止まり、ユーザーは続けて手動でスクロールできます。
• GIF・動画出力では、自動スクロールモードはエクスポートしたフレームにレンダリングされます。エクスポートしたファイルは操作できないため、手動モードは静止したままになります。
• ブラウザ・デバイスのネイティブのスクロールバーのスタイルが使われます。
• そのレイヤーに画像形式の上書きが適用されている場合、そのレイヤーではスクロール可能なテキストが無効になります。

スクロールバーのスタイルをカスタマイズする

省略表示されたスクロールできるテキストレイヤーや、ポップアップオーバーレイのテキストのスクロールバーのスタイルをカスタマイズしたい場合は、HTMLエクスポート設定でInject Custom Codeを有効にしてから、次のコードをCustom CSS欄に貼り付けます。

:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

上部の値を変更すると、スクロールバーの色、トラックの色、幅、高さ、角の丸みを更新できます。ブラウザやモバイルデバイスによっては、引き続きシステム標準のスタイルでスクロールバーが表示されることがありますが、カスタムのスクロールバースタイルを許可している環境では、このCSSが適用されます。

スクロール可能なテキストは、省略表示のテキストレイヤー専用に設計されています。省略表示になっていないレイヤーは、通常のテキスト・画像の動作でエクスポートしてください。