動画チュートリアル：FigmaのバナーにSplit Textアニメーションを追加する

この動画では、Bannerifyプラグインを使って、Figmaのバナーに（文字・単語・行ごとの）Split Textアニメーションを追加する方法を紹介します。

Split Textアニメーションを使う

Bannerifyには、テキストレイヤー向けの専用のSplit Textアニメーションが用意されています。レイヤー全体を1つのかたまりとして動かすのではなく、テキストを文字、単語、行ごとにアニメーションさせられます。

適用するには、次の手順に従います。

1. 通常のFigmaのテキストレイヤーをバナーに追加します。
2. そのレイヤーをBannerifyのタイムラインに読み込みます。
3. そのテキストレイヤーの登場または退場アニメーションのセレクトボックスをクリックします。
4. Split Text (GSAP Only) グループを開きます。
5. 使いたいSplit Textアニメーションを選びます。
6. Bannerifyで結果をプレビューし、必要に応じてタイミングを調整します。

Bannerify専用のSplit Textランタイムを使い、最もきれいな最終出力を得たい場合は、HTML / GSAPエクスポートを使ってください。

登場と退場の組み合わせ

Split Textは、登場アニメーション、退場アニメーション、またはその両方に使えます。

• 登場と退場のSplit Textアニメーションは、セレクトリストで同じ順番に並んでいるため、簡単に組み合わせられます。
• 退場のラベルは、Type On / Type Off、Rise / Fall、Reveal / Concealのように、できるかぎり登場と対になっています。
• 最良の結果を得るには、登場アニメーションが終わった後に退場アニメーションが始まるようにしてください。

対応するテキストレイヤー

Split Textは、選択したレイヤーをリッチなHTMLテキストとして安全に準備できる場合にのみ使えます。

テキストレイヤーは、次の条件を満たしている必要があります。

• 通常のテキストレイヤーであること
• Webセーフフォント、Googleフォント、またはBannerifyのカスタムフォントパネルで直接の .woff / .woff2 URLを追加したカスタムフォントを使っていること
• インラインのテキストリンクを含まないこと
• リスト書式を使っていないこと
• テキスト書式のオーバーライドがないこと
• Bannerifyのスクロールテキストモードを使っていないこと

対応しているレイヤーを、後から非対応のフォントや非対応のテキスト設定に戻した場合、Bannerifyは選択したSplit Textアニメーションをレイヤーに残したまま、レイヤーが再び条件を満たすまで利用不可として表示します。

カスタムフォントのURL

テキストレイヤーで、WebセーフフォントやGoogleフォントとして使えないブランド独自のカスタムフォントを使っている場合は、Bannerifyのカスタムフォントパネルに、.woffまたは .woff2フォントファイルへの直接のURLを追加します。

URLは、https://example.com/fonts/client-font.woff2のように、フォントファイルそのものを直接指している必要があります。通常のフォント紹介ページ、ダウンロードページ、CSSファイル、ZIPファイルは、この欄では使えません。

Bannerifyは、Split Textレイヤーで使われているカスタムフォントのスタイルを検出し、フォントスタイルごとに1回だけ一覧表示します。そのため、すべてのテキストレイヤーに同じURLを追加する代わりに、フォントスタイルごとにURLを貼り付けるだけで済みます。

カスタムフォントパネルを開くには、次の手順に従います。

1. カスタムフォントを使うテキストレイヤーに、Split Textアニメーションを適用します。
2. バナープレビューの下に表示される警告でConfigure Fontsをクリックするか、タイムラインでテキストレイヤーにカーソルを合わせてFontsをクリックします。
3. 一覧の各フォントスタイルに、直接の .woffまたは .woff2 URLを貼り付けます。
4. Doneをクリックし、もう一度プレビューまたはエクスポートします。

Bannerifyは、これらのフォントURLを使って、Split Textのプレビュー、canvas・動画のエクスポート、HTML / GSAPのエクスポートをレンダリングします。HTML / GSAPのエクスポートでは、対応する@font-faceルールも自動で追加されます。

フォントURLを追加する前でも、カスタムフォントのレイヤーでSplit Textアニメーションを選ぶことはできます。有効な .woffまたは .woff2 URLが追加されるまで、バナープレビューの下に警告が表示されます。

以前にテキストレイヤーへ直接カスタムのSplit TextフォントURLを追加していた場合は、新しいカスタムフォントパネルを開いたときに、保存済みのURLが自動でパネルに移されます。

Split Textが使えない場合

次のいずれかに当てはまるレイヤーでは、BannerifyはSplit Textをブロックします。

• 選択したレイヤーがテキストレイヤーではない
• レイヤーに書式のオーバーライドがある
• そのレイヤーでScrollable Textが有効になっている
• テキストにインラインリンクが含まれている
• テキストがリストとして書式設定されている
• BannerifyがSplit Textのプレビュー用にテキストレイヤーを準備できない

この場合、Bannerifyはアニメーションを黙って適用するのではなく、プラグインのUIにその理由を直接表示します。

問題が、有効な .woff / .woff2 URLのないカスタムフォントだけである場合は、オプションを非表示にするのではなく、Split Textアニメーションを選べるようにしたうえで警告を表示します。

一括適用、ペースト、テンキーショートカット

複数のレイヤーにまとめて適用する場合、Split Textには通常のアニメーションより厳しいルールが適用されます。

• 選択したすべてのレイヤーがテキストレイヤーであること
• 選択したすべてのテキストレイヤーが、すでにSplit Textの条件を満たしているか、カスタムの .woff / .woff2フォントURLが足りないだけであること

このルールは、次の操作に適用されます。

• 一括適用
• アニメーションのコピー・ペースト
• テンキーショートカットでの適用

選択したレイヤーのうち1つでも非対応のものがあると、BannerifyはそのSplit Textの操作をブロックし、警告を表示します。

プレビューとエクスポートに関する注意

HTML / GSAPのエクスポートではBannerify専用のSplit Textランタイムを使うため、このグループにはSplit Text (GSAP Only) というラベルが付いています。

現在のバージョンでは、次のようになっています。

• BannerifyのプレビューはSplit Textに対応しています
• 現在のcanvasレンダリングによるエクスポートでも、Split Textをレンダリングできます
• テキストベースの分割アニメーションを最も忠実に出力したい場合は、引き続きHTML / GSAPエクスポートが最適です

よりよい結果を得るために

• Split Textは、短い見出し、キャッチコピー、コンパクトな文章に使うのが効果的です。
• 行ごとの分割アニメーションはレンダリングされたテキストのレイアウトに従うため、意図した改行に注意してください。
• エクスポートする前に、最終的なバナーサイズでアニメーションをプレビューしてください。