# General Translation Knowledge Base: Lottie アニメーションを翻訳するには？
URL: https://generaltranslation.com/ja/kb/translate-lottie-animations.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: アニメーションのテキストレイヤーにある文字列（Lottie JSON の t.d.k[].s.t に格納）を翻訳し、各訳文がボックスに収まっているか、フォントが新しい文字体系に対応しているか、テキストがシェイプとして書き出されていないかを確認します。方法は、言語ごとに再エクスポートする、実行時にテキストを差し替える、スクリプトで JSON を編集する、のいずれかです。General Translation の CLI は dotLottie 1.0 の .lottie ファイルを翻訳し、レイアウトも再調整します。
Category: 翻訳
Last updated: 2026-10-28
Authors: General Translation Team
Published: 2026-10-28

Lottie アニメーションの実体は JSON で、通常は After Effects から Bodymovin プラグインを使って書き出されます。テキストは独立した文字列ファイルではなく、テキストレイヤーの中に含まれています。翻訳では、アニメーションを壊さないように、このテキストを言語ごとに置き換える必要があります。文言の翻訳自体は難しくありません。厄介なのは、固定されたボックスサイズ、埋め込まれたフォントやグリフ、そして右から左に書く文字体系への対応です。

## Lottie ファイル内のテキストの格納場所

レイヤーの種類は `ty` で示され、テキストレイヤーの型は `5` です。各テキストレイヤーは `t` オブジェクトを持ち、そのドキュメントである `t.d` の `k` にキーフレームが格納されます。各キーフレームの `s` はテキストドキュメントで、その `t` が文字列そのものです。改行は `\r` で表されます。テキストドキュメントではフォント (`f`) とサイズ (`s`) も指定され、ボックステキストの場合はさらにボックスのサイズ (`sz`) と位置 (`ps`) も指定されます。アニメーションの途中で変化するテキストには、変化ごとに 1 つずつキーフレームがあります ([Lottie ドキュメント: Text](https://lottiefiles.github.io/lottie-docs/text/)、[Layers](https://lottiefiles.github.io/lottie-docs/layers/)) ：

```json title="animation.json (excerpt)"
{
  "fonts": {
    "list": [
      { "fName": "Inter-Bold", "fFamily": "Inter", "fStyle": "Bold", "origin": 0 }
    ]
  },
  "layers": [
    {
      "ty": 5,
      "nm": "Headline",
      "t": {
        "d": {
          "k": [
            { "t": 0, "s": { "t": "Start your free trial", "f": "Inter-Bold", "s": 48, "sz": [600, 80], "ps": [-300, -40] } }
          ]
        }
      }
    }
  ]
}
```

このほかに、確認すべき場所が3つあります。

* **プリコンポジション。** ネストされたコンポジションのレイヤーは `assets[].layers` に格納されるため、テキストレイヤーはトップレベルの `layers` 配列だけでなく、ここにも含まれている場合があります。
* **フォントとグリフ。** `fonts.list` には各フォントの名前が記載されています。デザイナーが Bodymovin の **Glyphs** 設定をオンにしていた場合、ファイルには使用されているすべての文字のアウトラインを含む `chars` 配列も含まれます。オフの場合は、プレーヤー側にフォントファイル自体が必要です ([Lottie: After Effects export settings](https://lottie.airbnb.tech/#/after-effects)) 。グリフは Android と Web ではレンダリングされますが、iOS ではレンダリングされないため、iOS ではフォントが必要です ([Lottie: Supported features](https://lottie.airbnb.tech/#/supported-features)) 。
* **シェイプに変換されたテキスト。** デザイナーが After Effects でシェイプに変換したテキストはシェイプレイヤー (`ty` 4) になり、翻訳対象の文字列は残りません。After Effects でテキストレイヤーに戻す必要があります。

`.lottie` ファイルは dotLottie パッケージです。`manifest.json` と1つ以上のアニメーション JSON ファイルに加え、任意で画像やフォントを含む ZIP アーカイブです ([dotLottie 2.0 spec](https://dotlottie.io/spec/2.0/)) 。テキストの位置は、各アニメーション JSON 内でも同じです。

## アニメーションを翻訳するときに起こる問題

* **テキストの伸長。** 翻訳後のテキストが翻訳元と同じ長さになることはほとんどありません。[General Translation のサイト](https://generaltranslation.com)では、「Save changes」をドイツ語にすると、英語より幅が 63% 広くなります。ボックステキストレイヤーは `sz` が固定されているため、長いテキストはデザインで想定していない行にまで折り返されます。また、ポイントテキスト (ボックスなし) はフレームからはみ出すことがあります。
* **文字の欠落。** ラテン文字専用のフォントには、日本語、中国語、アラビア語の文字が含まれていません。グリフを書き出した場合、ファイルには英語テキストで使われた文字のアウトラインしか含まれません。lottie-web のメンテナーも、新しいテキストのグリフはすべて「AE から書き出されている必要がある」と述べています ([lottie-web wiki](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData)) 。
* **右から左に書くテキスト。** プレーヤーによって対応状況にばらつきがあります。lottie-android には、右から左に書くテキスト ([#1145](https://github.com/airbnb/lottie-android/issues/1145)) や、アラビア文字が連結されずにレンダリングされる問題 ([#2279](https://github.com/airbnb/lottie-android/issues/2279)) に関する未解決の issue があります。 (アニメーションを配置するページ側の対応については、[CSS で RTL (右から左) 言語をサポートするには？](/kb/right-to-left-css)を参照してください。) 
* **エクスプレッションで制御されるテキスト。** After Effects のエクスプレッションは、ファイル内に保存された JavaScript です (`x` プロパティ) 。エクスプレッションで内容が決まるテキストレイヤーはアニメーションの再生中に計算されるため、翻訳できる固定の文字列が存在しません。

翻訳する前に、より長いテキストやアクセント付きのテキストを使って、翻訳元のアニメーションをテストしておきましょう。 ([疑似ローカライゼーションとは？](/kb/pseudo-localization)を参照してください。)

## Lottie アニメーションを翻訳する方法

| 方法                          | テキストを変更する方法                                                                                                                                | サイズ調整とフォントへの対応                                               | リリースごとに繰り返し実行できるか                 | 利用者側に残る作業                                                |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | --------------------------------- | -------------------------------------------------------- |
| After Effects から言語ごとに書き出し直す | デザイナーがコンポジションを複製し、各テキストレイヤーを編集して、言語ごとに 1 ファイルずつ書き出す                                                                                        | デザイナーが各バージョンを目視で調整する                                         | 不可。文言を変更するたびに、言語ごとに同じ作業を繰り返す必要がある | 言語ごとのファイル管理と、その都度かかるデザイナーの工数                             |
| 実行時にテキストを差し替える              | アニメーションのレンダリング時に、プレーヤーが文字列を置き換える                                                                                                           | 一部対応。lottie-web はボックステキストを縮小して収められるが、フォント、グリフ、周囲のレイヤーは変更されない | 可能。文字列はアプリの翻訳から取得される              | 全言語でのサイズ調整、フォントの対応範囲、グリフへの対応、および安定したキー (原文またはレイヤー名) の管理  |
| スクリプトで JSON を編集する           | スクリプトで各 `s.t` の値を置き換える。機械翻訳や LLM を使うことが多い                                                                                                  | 非対応                                                          | 可能                                | 改行、サイズ調整、フォント、グリフへの対応、および `.lottie` ファイルの再圧縮             |
| General Translation CLI     | [`gt stage`](/docs/cli/reference/commands/stage) と [`gt download`](/docs/cli/reference/commands/download) で、言語ごとに翻訳済みの `.lottie` ファイルを生成する | レイアウト処理 が、アップロードしたフォントを使ってテキストと周辺のレイヤーを再調整する       | 可能                                | 各アニメーションのレビュー、エクスプレッションの削除、および レイアウト処理 の使用量の管理 |

実行時の差し替え機能は、各プレーヤーに標準で組み込まれています。lottie-android では、`TextDelegate` で原文と置換後のテキストを対応付け、`LottieProperty.TEXT` を使って動的プロパティ経由で設定します ([Lottie for Android](https://lottie.airbnb.tech/#/android)) 。

```kotlin
// アニメーションの英語テキストを、ローカライズされた文字列リソースに置き換えます。
val textDelegate = TextDelegate(animationView)
textDelegate.setText("Start your free trial", getString(R.string.trial_cta))
animationView.setTextDelegate(textDelegate)
```

lottie-ios では、`animationView.textProvider` に、テキストレイヤーのキーパスをキーとする `DictionaryTextProvider` を設定します ([lottie-ios のソース](https://github.com/airbnb/lottie-ios/blob/master/Sources/Public/TextProvider/AnimationTextProvider.swift)) 。lottie-web では、テキストレイヤー要素に対して `updateDocumentData` を呼び出します。dotLottie の Web プレーヤーでは、`setTextSlot` を使うと、デザイナーがスロットとして公開したテキストを置き換えられます ([dotLottie のスロット](https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/core-concepts/slots)) 。また lottie-web では、ボックステキストを枠に収まるよう縮小することもできます。[`canResizeFont(true)`](https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont) を使うと、文字列がボックスに収まるまでテキストレイヤーのフォントサイズが縮小されます。縮小の下限は [`setMinimumFontSize`](https://github.com/airbnb/lottie-web/wiki/TextLayer.setMinimumFontSize) で設定します。ただし、これらの API はいずれも、ラベルの背後にあるボタンのシェイプなど、テキスト周囲のレイヤーを移動・リサイズすることはありません。

アニメーションを 1〜2 言語でのみ提供し、デザイナーが全フレームを細かく調整したい場合は、After Effects から書き出し直してください。ユーザー名のように文言がアプリから渡され、ボックスに最も長い翻訳が収まる余裕がある場合は、実行時にテキストを差し替えてください。アニメーションを多数の言語で提供し、リリースのたびに内容が変わり、言語ごとにレイアウトを調整し直す必要がある場合は、General Translation を選んでください。JSON を独自のスクリプトで処理するのは、テキストの収まり具合やフォントのチェックを自分で担える場合に限りましょう。

## General TranslationでLottieファイルを翻訳する方法

General TranslationのCLIである`gt`では、`lottie`ファイルキーを使ってdotLottieファイルを翻訳できます (`gt` 2.16.0以降) 。パスに`[locale]`プレースホルダーを含めた`lottie`エントリを追加します：

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "ja"],
  "files": {
    "lottie": {
      "include": ["animations/[locale]/**/*.lottie"]
    }
  },
  "fonts": {
    "include": ["assets/fonts/**/*.{ttf,otf}"]
  }
}
```

翻訳元のアニメーションは `animations/en/` から読み込まれ、翻訳は `animations/es/` と `animations/ja/` に出力されます。Lottie の翻訳は非同期で実行されるため、[`npx gt stage`](/docs/cli/reference/commands/stage) で送信してから、すべてのロケールが完了するまで [`npx gt download`](/docs/cli/reference/commands/download) を実行してください。処理中のロケールはスキップされ、次回以降の実行で取得されます。[`gt translate`](/docs/cli/reference/commands/translate) では、ステージングされていない Lottie ジョブを1回の実行で完了できないため、ステージングするよう案内が表示されます。ダウンロードされるのは完全な `.lottie` ファイルで、CDN には公開されません。

General Translation は、パッケージの `animations/` フォルダ (dotLottie 1.0 のレイアウト) からアニメーション JSON を読み取ります。dotLottie 2.0 のパッケージでは `a/` に格納されており、単体の `.json` アニメーションはそもそもパッケージではありません。どちらの場合も [`@dotlottie/dotlottie-js`](https://github.com/dotlottie/dotlottie-js) で変換してください。`toDotLottieV1` と `DotLottieV1` を使うと 1.0 のレイアウトを生成できます。

翻訳後のレイアウト処理では、アニメーションのフォントサイズを維持したままテキストを再配置し、周辺のレイヤーを移動して各ラベルが収まるようにします。それでも収まらない場合は、意味を保ちながら対象言語で短縮または言い換えることがあり、省略記号は最後の手段として使われます。等幅のコードトークンが短縮されることはありません。レイアウトの変更をレンダリングして検証できない場合は、代わりにレイアウト調整なしの翻訳済みアニメーションが返されます。公開する前に、ダウンロードした各ファイルを再生して確認してください。 ([Lottie リファレンス](/docs/cli/reference/formats/lottie-files)を参照。) 

トップレベルの [`fonts`](/docs/cli/reference/config#fonts) 設定を使うと、`.ttf` および `.otf` ファイルがアップロードされ、レイアウト処理でアニメーション本来のフォントを使用できるようになります。アニメーションにグリフが埋め込まれている場合、General Translation は各翻訳に必要な文字のアウトラインを追加します。アップロードされたフォントにその文字が含まれていれば、そのフォントから描画されます。フォントは組織のアセットであるため、アップロードには保存済みのログイン、または `org:assets:write` 権限を持つ組織の APIキーが必要です。プロジェクトの APIキーではアップロードできず、その場合はフォールバックフォントを使用し、警告を出したうえで翻訳が続行されます。After Effects のエクスプレッションを含むファイルは、エクスプレッションが実行可能なコードであるため拒否されます。エクスプレッションを削除するかキーフレームにベイクしてから、再エクスポートしてください。

### テストでレイアウト処理によって変わったこと

480 × 160 のピル型ボタンのアニメーションを作成しました。構成は 18px のアイコンと、22px の Arial Bold のラベル「Download invoice」で、パディングは 16〜18px です。これを `gt` 2.26.11 とプロジェクトのAPIキーを使ってドイツ語、フランス語、日本語に翻訳しました。フォントはアップロードしていないため、レイアウト処理ではフォールバックフォントが使われています。各ラベルの幅は、lottie-web 5.13 の SVG レンダラーでブラウザのフォントを使って計測しました。「完全な翻訳」の行は、General Translation が各ラベルをアニメーションとは切り離してプレーンな文字列として翻訳した結果を、比較のために元のボタンに配置したものです。

| バージョン                     | ラベルテキスト                | ラベル幅  | ボタン幅  | 結果                                   |
| ------------------------- | ---------------------- | ----- | ----- | ------------------------------------ |
| 英語の翻訳元                    | Download invoice       | 187px | 251px | 収まる。アイコンとの間隔は 11px                   |
| ドイツ語、完全な翻訳                | Rechnung herunterladen | 260px | 251px | アイコンに 25px 重なり、端から 18px はみ出す         |
| ドイツ語、General Translation  | Rechnung laden         | 171px | 251px | 収まる                                  |
| フランス語、完全な翻訳               | Télécharger la facture | 229px | 251px | アイコンに 9px 重なり、端から 2px はみ出す           |
| フランス語、General Translation | Télécharger facture    | 204px | 273px | 収まる。ボタンが右に 22px 広がり、ラベルとアイコンの間隔は 3px |
| 日本語、完全な翻訳                 | 請求書をダウンロード             | 220px | 251px | アイコンに 5px 重なる                        |
| 日本語、General Translation   | 請求書取得                  | 111px | 251px | 収まる                                  |

すべてのラベルが 22px のサイズを保ったまま収まりました。ドイツ語と日本語では、ボタンを広げるのではなく短い表現が選ばれました。*Rechnung laden* (「請求書を読み込む」) と「請求書取得」は、一般的なラベルよりも簡潔です。フランス語では動詞を残して冠詞を省き、ボタン幅も広がりましたが、ラベルは翻訳元よりもアイコンに近い位置になりました。短い表現や狭い間隔を許容するかどうかはレビュー担当者の判断に委ねられます。また、結果は実行ごとに異なる場合があります。

同じテストの 2 つ目のアニメーションには、幅 180px の「Save changes」ボタンがありました。こちらは標準的な短いラベルである *Speichern*、*Enregistrer*、「保存」に翻訳され、レイアウトを変更せずに収まりました。一方、同じ実行で見出しの「Your changes are ready」は、日本語で「変更内容を保存できます」と翻訳されました。これは意味が変わってしまった例であり、人が結果を読まなければ気づけません。

Lottie の翻訳には、レイアウト処理 の料金が加算されます。この料金は翻訳自体とは別に課金され、アニメーション内のアニメーションプロパティ数に基づいて算出されます ([使用量の計測](/docs/platform/dashboard/guides/managing-billing#usage-metering)、[料金](https://generaltranslation.com/pricing)) 。[コンテキストグループ](/docs/platform/dashboard/guides/defining-context-for-translations)の用語集やカスタムプロンプトはアニメーションのテキストにも適用されるため、オンボーディングアニメーション内の機能名も、アプリや [JSON ロケールファイル](/kb/translate-json-files)の表記と一致します。

## よくある質問

### 翻訳したアニメーションで空の四角が表示されたり、文字が欠けたりするのはなぜですか？

フォントまたは埋め込まれたグリフが、新しい文字に対応していないためです。その文字体系に対応したフォントを同梱してください。グリフとしてエクスポートする場合は、翻訳で使用するすべての文字のアウトラインがファイルに含まれている必要があります。After Effects 上でテキストを翻訳済みのものに置き換えた状態で、その言語を再エクスポートしてください。

### 言語ごとに別々のファイルが必要ですか？

ランタイムで切り替える場合は不要です。1つのファイルですべての言語に対応できます。再エクスポートや General Translation CLI を使う場合は言語ごとにファイルが生成されるため、ロケールに応じて読み込んでください。

### シェイプに変換されたテキストは翻訳できますか？

いいえ。シェイプには置き換え対象の文字列が存在しないため、After Effects でテキストレイヤーを作成し直してから、再度書き出してください。

## 重要なポイント

* Lottie のテキストはテキストレイヤー (`ty` 5) の `t.d.k[].s.t` に格納されています。`assets` 配下のプリコンポジション内にあるテキストレイヤーも同様です。
* グリフとしてエクスポートしたファイルには原文で使われている文字のアウトラインしか含まれず、さらに iOS はグリフをレンダリングしません。追加するすべての文字体系について、対応するフォントを確認してください。
* ランタイム API (`TextDelegate`、`DictionaryTextProvider`、`updateDocumentData`、`setTextSlot`) で文字列を差し替えられます。lottie-web の `canResizeFont` を使えばボックステキストを枠内に収まるよう縮小できますが、どの API も周囲のレイヤーまでは動かしません。
* General Translation の CLI は、[`gt stage`](/docs/cli/reference/commands/stage) と [`gt download`](/docs/cli/reference/commands/download) で dotLottie 1.0 の `.lottie` ファイルを翻訳し、アップロードしたフォントを使ってレイアウトを再調整します。ただし、エクスプレッションを含むファイルは受け付けません。
* 当社のテストでは、レイアウト処理によってフォントサイズを変えずに、ボタンの幅を広げるか文言を短くすることで、すべてのラベルを収めることができました。ダウンロードしたファイルは、それぞれ文言と余白をレビューしてください。
* Lottie 向けのレイアウト処理は別料金で、アニメーション内のアニメーションプロパティ数に応じて算出されます。

## Related questions

- [i18n の JSON ファイルを翻訳するには？](https://generaltranslation.com/ja/kb/translate-json-files.mdx): JSON ロケールファイルでは、文字列の値だけを翻訳します。複数形以外のキー、{{name}} などのプレースホルダー、タグは変更せずに残しますが、複数形のキーは言語によって異なる点に注意が必要です。たとえばポーランド語では inbox_few と inbox_many が必要になります。ファイル形式に対応したツールや API を使い、レビューの前に出力をパースして検証してください。
- [CSS で RTL（右から左）言語をサポートするには？](https://generaltranslation.com/ja/kb/right-to-left-css.mdx): lang だけでは書字方向は変わらないため、html 要素に dir="rtl" と lang の両方を指定します。そのうえで、margin-left などの物理的な CSS を margin-inline-start などの論理プロパティに置き換えます。flex の行、グリッドの列、デフォルトのテキストの配置は自動的に反転しますが、translateX()、left、right は反転しません。
- [疑似ローカライゼーションとは？](https://generaltranslation.com/ja/kb/pseudo-localization.mdx): 疑似ローカライゼーションは、原文をアクセント記号付きで約40%長く水増しし、括弧で囲んだ改変版に置き換えるテストです。これにより、ハードコードされた文字列、切り詰め、フォントの表示崩れ、文の連結といった問題を、翻訳を用意する前に発見できます。Android にはこの用途向けに en-XA と ar-XB の疑似ロケールが用意されています。
- [Google Slides を翻訳するには？](https://generaltranslation.com/ja/kb/translate-google-slides.mdx): 言語ごとにデッキを1部ずつコピーし、すべてのテキストボックス、表のセル、スピーカーノートのテキストを置き換えたうえで、はみ出したテキストのサイズを調整します。General Translation の Google Drive インテグレーションは、言語ごとに翻訳元と同じ場所に個別のコピーを作成して書き込み、フォーマット処理を実行して新しいテキストを各スライドに収めます。
- [SRT 字幕のタイミングを崩さずに翻訳するには？](https://generaltranslation.com/ja/kb/translate-srt-subtitles.mdx): SRT ファイルではキューのテキストだけを翻訳し、キュー番号、タイムコード、区切りの空行、書式タグは翻訳元のまま残します。そのうえで、1 行あたりの文字数と読み取り速度が配信先の要件を満たしているかを確認します。たとえば Netflix の英語ガイドでは、成人向け番組の上限を 1 行 42 文字、1 秒あたり 20 文字としています。

## Previous and next questions

- Previous question: [General Translation と Lingo.dev の比較：どちらを使うべきか](https://generaltranslation.com/ja/kb/general-translation-vs-lingo-dev.mdx)
- Next question: [Next.js Pages Router アプリに i18n を追加するには？](https://generaltranslation.com/ja/kb/add-i18n-to-nextjs-pages-router.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.