使い方ガイドへスキップ
text-to-lottie作者 diffusionstudio

Text to Lottie スキル。

有効な JSON ファイルを作るだけでなく、実際のプレーヤーで Lottie アニメーションを制作・修正。Text to Lottie はリポジトリ内のローカル Skia Skottie プレビューを対象とし、重要な値を編集可能なコントロールとして公開します。

  • Lottie
  • モーション
  • Skottie
ソースレビュー · text-to-lottieSKILL.md
タスク Lottie アニメーションの JSON を作成・編集します。 成果物 • シーンの lottie.json • 任意の編集可能なコントロール • ローカルプレーヤーでのフレーム単位の確認 始める前に 提供元のプレーヤープロジェクトを使い、シーンに必要なフォントや原画を用意します。
編集上の要約 · ソース確認日 2026-11-02 · レンダリング済みの実演ではありません

01 機能概要

プレーヤーで実際に描画できるアニメーションを作る

ソースはアニメーション制作と公式ローカル Skottie プレーヤーを結び付けます。JSON 検証は確認の一つであり、シーンの見た目が正しい証明ではありません。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

このスキルは、プレーヤープロジェクト内にシーンの lottie.json と、必要に応じて controls.json を書き込みます。依頼された作業の主な手順を選んだうえで、フォント、SVG 変換、アニメーション構造、コントロールに必要な追加資料だけを読みます。

編集は対象シーンの特定から始まります。明示されたパスは、ブラウザーのルートや探索で見つかった文脈より優先されます。プレーヤーで編集した値が同じ JSON に書き戻される可能性があるため、既存ファイルの変更前にはエージェントが必ず読み直します。

想定される成果物

  • 選択したプロジェクトとシーンディレクトリ内の Lottie JSON シーン
  • 調整できるアニメーション値にラベルを付けた任意のコントロール
  • ローカル Skottie プレーヤーでの代表的なフレームの確認
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    シーンを特定する

    書き込む前にプロジェクトとシーンを明示します。探索は文脈の把握に使い、無関係なアニメーションを上書きする許可とは扱いません。

  2. 02
    手順と素材を選ぶ

    アニメーション作業を特定し、必要な SVG やフォントファイルを用意します。ロゴ、ローダー、オーバーレイでは、ソースは透明背景を標準としています。

  3. 03
    変更する値を公開する

    重要な編集可能値にはスロットとコントロールを使い、分かりやすいラベルと範囲を付けます。全画面の背景には、編集可能な背景色が必要です。

  4. 04
    実際のフレームを確認する

    JSON を検証し、ローカルプレーヤーを開き、最初、中間、最後の可視フレームを確認します。素材の欠落、見切れ、レイヤー順、タイミングを調べます。

02 利用場面

使いどころ

この手順は提供元のローカルプレーヤープロジェクトに依存します。フォントと取り込む原画をそのプロジェクトから利用できる必要があります。他の Lottie 実行環境では挙動が異なる場合があります。

向いているケース

  • 編集可能なブランドモーション初版の後で色やタイミングを調整するロゴの出現演出やローダーに適しています。
  • 既存シーンの修復JSON アニメーションは読み込めるものの、Skottie でフォント欠落、原画の見切れ、レイヤー順の誤りがある場合に役立ちます。

確認すべき制限

  • 全プレーヤーでの動作保証ではない指示は公式ローカル Skottie プレーヤーを対象にしています。同じファイルが別の実行環境でも同じように描画されると約束する前に、その環境で確認してください。
  • 素材は自動的には含まれない文字には利用可能なフォントファイルと一致するフォントメタデータが必要です。取り込む SVG 原画も正規化と目視確認が必要です。

用意する入力

  • 対象シーンプロジェクトとシーンのパスを示し、新規作成か既存シーンの編集かを伝えます。
  • 原画とフォントファイル使用権のある SVG やロゴと必要なフォントを用意します。編集可能な状態を保つ図形や文字を指定します。
  • モーションの要件尺、キャンバス寸法、透明度、ループの挙動、後から調整したい値を指定します。

03 重要な判断

重要な判断

  1. 有効なファイルでも空白のシーンになりうる

    ソースは JSON 検証に加えて実際のプレーヤーでの確認を求めます。解析成功だけでは、すべてのフォント欠落や不可視レイヤーを検出できません。

  2. 最後の可視フレームは op の前

    Lottie のアウト点は表示範囲に含まれません。推奨される最終フレーム確認は、アウト点自体ではなく op から 1 を引いた位置を使います。

  3. コントロールが編集手順を変える

    プレーヤーの操作がソースへ書き戻される可能性があるため、ファイルを読み直すことで、ユーザーの最新編集を古い値で置き換えるのを防ぎます。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

プレーヤーの設定を確認する

提供元のソースとリポジトリの設定を読んでください。下の参照はソースへのリンクであり、インストールコマンドではありません。

アップストリームのソースファイル
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md

既存のプロジェクトファイルを変更する前に、別のテストシーンを使ってください。

1 つのアニメーションを説明する

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
text-to-lottie を使い、提供する SVG ロゴの 4 秒ループアニメーションを作成してください。指定したテストプロジェクトに logo-loop という新規シーンを作り、他のシーンは上書きしないでください。背景を透明に保ち、ロゴの縦横比を維持してください。アクセントカラーをラベル付きコントロールとして公開してください。均一な線形移動ではなく、意図のあるイージングを使ってください。JSON を検証し、公式ローカル Skottie プレーヤーを開いて、フレーム 0、中間フレーム、最後の可視フレームを確認してください。素材の欠落、見切れ、ループの不連続を報告し、実施済みの確認と未確認の項目を区別してください。

描画されたフレームを確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 正しい新規シーンを使い、既存の編集を損なっていない。
  • 確認したフレームでロゴが見切れずに表示され、背景が透明になっている。
  • アクセントカラーのコントロールが意図した値を更新し、実際のプレーヤーでループを確認している。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
diffusionstudio
リポジトリ
diffusionstudio/lottie
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · 3c72912fad54
編集部によるソース要約
Text to Lottie の手順をソースに基づいて整理した内容です。対象シーンの指定、Lottie 制作、編集可能なコントロール、ローカル Skottie プレーヤーでの検証を扱います。この掲載のためのサンプルアニメーションは実行していません。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

有効な Lottie JSON なら正しく描画されますか?

いいえ。ソースはローカルプレーヤーで実際のフレームを確認するよう求めています。フォントの読み込み、レイヤー順、クリッピングによって、結果が誤ることがあります。

どの Lottie プレーヤーでも使えますか?

確認した指示はローカル Skottie プレーヤー向けです。同等の対応を前提にする前に、想定する実行環境で書き出したアニメーションをテストしてください。

アニメーションの色は編集可能にできますか?

はい。ソースは重要な調整値にスロットとコントロールを使い、ラベルと範囲を付けるよう指示しています。具体的なコントロールはシーンによって異なります。

OpenDesign

アニメーションと制作要件を一緒に管理。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md