---
url: "/ja/bannerify/animation/split-text.md"
description: "Bannerifyでテキストを文字・単語・行ごとにアニメーションさせる方法を、最新の設定手順、対応レイヤーの条件、エクスポート時の注意点とあわせて紹介します。"
---

# Split Textアニメーション

> Bannerifyでテキストを文字・単語・行ごとにアニメーションさせる方法を、最新の設定手順、対応レイヤーの条件、エクスポート時の注意点とあわせて紹介します。

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

この動画では、Bannerifyプラグインを使って、Figmaのバナーに（文字・単語・行ごとの）Split Textアニメーションを追加する方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/NrzaotL5IMw)

[Video](/assets/videos/bannerify/animation/bannerify-split-text.mp4)

## Split Textアニメーションを使う {#using-split-text-animations}

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

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

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

> **Tip:** Bannerify専用のSplit Textランタイムを使い、最もきれいな最終出力を得たい場合は、[HTML / GSAPエクスポート](/ja/bannerify/export/html)を使ってください。

## 登場と退場の組み合わせ {#entry-and-exit-pairing}

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

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

## 対応するテキストレイヤー {#supported-text-layers}

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

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

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

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

## カスタムフォントのURL {#custom-font-urls}

テキストレイヤーで、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が追加されるまで、バナープレビューの下に警告が表示されます。

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

## Split Textが使えない場合 {#when-split-text-is-unavailable}

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

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

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

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

## 一括適用、ペースト、テンキーショートカット {#bulk-apply-paste-and-numpad-shortcuts}

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

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

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

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

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

## プレビューとエクスポートに関する注意 {#preview-and-export-notes}

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

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

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

## よりよい結果を得るために {#best-results}

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