wiggle

Wiggle Logo Animator

Lottie JSON 形式を使用してプロフェッショナルなロゴアニメーションを作成します。既存のロゴ（PNG/SVG/JPG）を取り込むか、シンプルなテキストベースのロゴを生成し、プロフェッショナルに作り込まれたモーションパターンでアニメーション化します。出力には Lottie JSON が含まれ、GIF プレビューの自動レンダリングとオプションの MP4 エクスポートに対応しています。

このスキルを使用する場面

ユーザーが次のようなリクエストをしたときにこのスキルを起動します:

• 「ロゴをアニメーション化して」/「ロゴアニメーションを作成して」
• 「ロゴをウィグル/バウンス/回転/パルスさせて」
• 「ロゴにアニメーションの波形エフェクトを」
• 「ブランドロゴ用のモーショングラフィックスを」
• 「ブランド用の Lottie アニメーションを」
• ロゴの登場、ループ、ローディングアニメーション
• 提供されたロゴ画像に適用するあらゆるアニメーションエフェクト

重要: このスキルが出力するのはスタンドアロンのアニメーションファイル（Lottie JSON、GIF、MP4）であり、インタラクティブな React/HTML 成果物ではありません。ユーザーがインタラクティブなツールや Web コンポーネントを希望する場合は、artifacts-builder スキルに委ねてください。

---

コアワークフロー

1. モーションの思想を定義する（30 秒 - 必須！）

アニメーションを作成する前に、次の 3 つの問いに答えてください:

1. このブランドにはどんな個性がありますか？ （遊び心がある、プロフェッショナル、大胆、エレガント、革新的、信頼できる）

2. アニメーションはどんな感情を呼び起こすべきですか？ （興奮、信頼、創造性、自信、好奇心）

3. どんなモーションのメタファーが合いますか？ （有機的な成長、機械的な精密さ、エネルギッシュな爆発、エレガントな出現、リズミカルなパルス）

例: 「Canva = クリエイティブツールのブランド → 遊び心のあるエネルギー + 有機的な成長 → パルスを伴う同時登場」

詳細なフレームワークについては、以下の アニメーションの思想 セクションを参照してください。

---

2. ロゴの構造を分析する（30 秒 - 必須！）

アニメーションを作成する前に、何を扱うのかを理解してください:

# For SVG logos - identify elements
python scripts/extract_svg_elements.py logo.svg --list

簡単な決定ツリー:

Logo has text?
  ├─ YES → Read references/text_animation_guide.md FIRST
  └─ NO  → Continue with standard workflow

Multiple elements (icon + text)?
  ├─ YES → Extract separately, decide timing (simultaneous vs staggered)
  └─ NO  → Animate as single unit

SVG or PNG?
  ├─ SVG → Can extract elements cleanly
  └─ PNG → Limited to single-logo animations

---

3. アセットを準備する

# Single logo (simple animation)
python scripts/prepare_logo.py logo.png --max-size 500 --optimize
# Creates: logo_optimized.png (30-50KB) + logo_base64.txt

# Multi-element logo (extract FIRST, then convert)
python scripts/extract_svg_elements.py logo.svg --output-dir ./elements/
python scripts/prepare_logo.py elements/icon.svg --max-size 200
python scripts/prepare_logo.py elements/text.svg --max-size 250

サイズのガイドライン:

• フルロゴ（単一）: 500-600px
• アイコン要素: 100-200px
• テキスト要素: 200-300px

---

4. Lottie JSON アニメーションを作成する

開発中は EXTERNAL 参照を使用してください:

{
  "v": "5.7.4",
  "fr": 60,
  "ip": 0,
  "op": 180,
  "w": 800,
  "h": 800,
  "layers": [{
    "ind": 1,
    "ty": 2,
    "nm": "Logo",
    "refId": "logo_image",
    "ks": {
      "o": {
        "a": 1,
        "k": [
          {"t": 0, "s": [0], "e": [100], "i": {"x": [0.42], "y": [1]}, "o": {"x": [0.58], "y": [0]}},
          {"t": 60, "s": [100]}
        ]
      }
    }
  }],
  "assets": [{"id": "logo_image", "w": 512, "h": 512, "p": "logo_optimized.png", "e": 0}]
}

重要: 開発中は Cairo のメモリエラーを避けるため、"e": 0（外部参照）を使用してください。

一般的なエフェクトについては、以下の アニメーションパターン を、完全なコード例については references/detailed_examples.md を参照してください。

---

5. 検証する

# Check Lottie structure (warns about large embedded assets)
python scripts/validate_lottie.py logo_animation.json

# Check loop quality (if creating looping animation)
python scripts/validate_loop.py logo_animation.json

---

6. レンダリングする

# RECOMMENDED: Preview first (renders only first N frames) - saves time!
python scripts/render_lottie.py logo_animation.json preview.gif --preview-frames 60

# Alternative: Test render mode (200x200, 15fps with confirmation prompt)
python scripts/render_lottie.py logo_animation.json logo.gif --test-render

# If preview looks good → Render full animation
python scripts/render_lottie.py logo_animation.json logo.gif

# Optional: MP4 export (better compression than GIF)
python scripts/render_lottie.py logo_animation.json logo.mp4

# Optional: Batch export all formats
python scripts/batch_export.py logo_animation.json ./output gif,mp4,json

重要な注意点:

• アセットは Lottie JSON ファイルの場所を基準に解決されます（現在の作業ディレクトリではありません）
• アセットの検証はレンダリング前に自動的に実行されます
• 出力の検証により、空白または破損したファイルを検出します
• 簡単な検証のために最初の N フレームだけをレンダリングするには --preview-frames N を使用します

---

7. オプション: 配布用に埋め込む

レンダリングが成功した後、オプションでスタンドアロン配布用に埋め込み base64 へ変換できます:

// Replace external reference with base64 from logo_base64.txt
"assets": [{"id": "logo_image", "p": "data:image/png;base64,...", "e": 1}]

注意: 将来の編集/レンダリング用に外部参照版を保持してください！

---

アニメーションの思想

2 段階のアプローチ

フェーズ 1: 思想を定義する（実装する前に考える）

1. このブランドにはどんな個性がありますか？
2. アニメーションはどんな感情を呼び起こすべきですか？
3. どんなモーションのメタファーが合いますか？

フェーズ 2: 技術的な選択を通して表現する

• 思想を表現する プロパティを選ぶ（位置/スケール/回転/不透明度）
• 個性に合う イージングを選ぶ（ease-out=自信、bounce=遊び心）
• 感情に合う タイミングを設定する（速い=エネルギッシュ、遅い=エレガント）

フィロソフィーの例

「自信に満ちたプロフェッショナリズム」

• フィロソフィー: 信頼できる、確立された、有能
• 表現: ゆっくりとしたイーズアウトのフェード（不透明度 0→100%）+ 緩やかなスケール（95%→100%）
• タイミング: 2 秒間、オーバーシュートなし
• 例: references/real-world-examples/slack-hover-pinch.json

「遊び心のあるエネルギー」

• フィロソフィー: 楽しい、親しみやすい、印象的
• 表現: オーバーシュートを伴うバウンスの登場
• タイミング: 1 秒間、バックイージング（0.6/-0.28）
• 例: references/real-world-examples/reddit-hover-pinch.json

「オーディオ／スピーチブランド」

• フィロソフィー: 音、リズム、波形、ダイナミック
• 表現: 高密度なキーフレームを伴う縦方向の波形（30〜45 キーフレーム、60fps）
• タイミング: 3 秒ループ、オーガニックなイージング（0.25/0.75）
• 重要: 後述のモーションタイプセクションの「オーガニック／連続モーション」を参照してください

その他の例は references/preset_library.md および references/animation_theory.md にあります。

---

モーションタイプ早見表

ブランドの個性に基づいてモーションタイプを選択します:

静的／コーポレートモーション

プロフェッショナルなブランド（B2B、金融、法務）

パラメータ:

• キーフレーム: 8〜12（疎で、意図的）
• イージング: 0.42/0.58（標準的な ease-in-out）
• FPS: 30
• 再生時間: 1.5〜2 秒

用途: コーポレートロゴ、B2B ブランド、プロフェッショナルなプレゼンテーション

---

オーガニック／連続モーション

オーディオ、音楽、スピーチ AI、自然派ブランド

パラメータ:

• キーフレーム: 25〜45 ← 滑らかさのために重要
• イージング: 0.25/0.75（より柔らかく、よりオーガニック）
• FPS: 60 ← 流動性のために必須
• 再生時間: 3 秒

用途: オーディオアプリ、音楽プラットフォーム、スピーチ AI、オーガニック製品

例: references/detailed_examples.md の縦棒波形パターン

---

大胆／注目を集めるモーション

スタートアップ、ソーシャルメディア、マーケティング

パラメータ:

• キーフレーム: 15〜25
• イージング: 0.34/1.56（遊び心のあるバウンス）または 0.6/-0.28（バックオーバーシュート）
• FPS: 60
• 再生時間: 0.8〜1.5 秒

用途: スタートアップのロゴ、ソーシャルメディアのイントロ、マーケティングキャンペーン

---

シネマティック／複雑なモーション

プレミアムブランド、映画制作

パラメータ:

• キーフレーム: 50〜120
• イージング: カスタムベジェ曲線、可変タイミング
• FPS: 60〜120
• 再生時間: 3〜5 秒

用途: ラグジュアリーブランド、映画のイントロ、ハイエンドなエージェンシーの制作物

---

アニメーションパターン早見表

単一要素のパターン

パターン	再生時間	プロパティ	用途
フェード + 緩やかなスケール	1.5 秒	不透明度: 0→100%、スケール: 95→100%	コーポレートの登場
バウンス登場	1.2 秒	位置、スケール、不透明度	エネルギッシュなブランド
スケールパルス	3 秒ループ	スケール: 100→103→100%	アイドル状態、CTA
滑らかな回転	10 秒ループ	回転: 0→360°	ローディング、テックロゴ
ウィグル／ジェロ	0.8 秒	回転: ±5° の振動	遊び心のある通知

完全なコード例: references/detailed_examples.md

---

複数要素の連携

パターン 1: 同時登場 両方の要素が同時に現れます（一体感のあるブランド）

Icon: {"t": 0, "s": [0]}, {"t": 60, "s": [100]}
Text: {"t": 0, "s": [0]}, {"t": 60, "s": [100]}
// Both start at t:0 → Synchronized

パターン 2: ずらした登場 アイコンが先に確立し、テキストがそれを補強します（ストーリーテリング）

Icon: {"t": 0, "s": [0]}, {"t": 45, "s": [100]}
Text: {"t": 30, "s": [0]}, {"t": 75, "s": [100]}
// Text delayed 30 frames (0.5s at 60fps)

タイミングのガイドライン:

• 15 フレーム（0.25 秒）: 微妙なずらし
• 30 フレーム（0.5 秒）: 認識できるシーケンス ← 最も一般的
• 45 フレーム（0.75 秒）: ドラマチックな二幕構成の登場

完全なパターン: references/detailed_examples.md#multi-element-coordination

---

ユーザーインテントの分類

適切なアニメーションスタイルを選択するために、常にユーザーインテントを分類してください:

インテント	キーフレーム	イージング	FPS	再生時間	モーション
控えめ/プロフェッショナル	8-12	0.42/0.58	30	1.5-2s	低速、制御された、最小限の回転
大胆/注目	15-25	0.34/1.56	60	0.8-1.5s	中速、ダイナミック、±10-20% のスケール
遊び心/クリエイティブ	12-20	0.34/1.56	30-60	1-2s	弾むような、誇張された、ウィグル効果
オーガニック/連続的	25-45	0.25/0.75	60	3s	波形、パルス、流れるようなリズム

デフォルト: ユーザーが明示的に選択肢を求めない限り、質問するのではなくアニメーションを提供してください。

---

既知の制限事項

アセットパスの解決

現在の動作:

• 外部アセット (PNG/SVG) は Lottie JSON ファイルの場所を基準に 解決されます
• レンダラーはレンダリング中に作業ディレクトリを JSON ファイルのディレクトリに変更します
• アセットの検証はレンダリング開始前に自動的に実行されます

例:

project/
├── animations/
│   └── logo_animation.json  (references "logo_optimized.png")
└── logo_optimized.png

# This will FAIL - asset not found

解決策: アセットを JSON ファイルと同じディレクトリに配置してください:

project/animations/
├── logo_animation.json
└── logo_optimized.png  # ✅ Correct location

埋め込み Base64 と外部参照

埋め込み base64 ("e": 1):

• 長所: スタンドアロンファイル、配布が容易
• 短所: 100KB を超える画像で Cairo の MemoryError、ファイルサイズの増大、編集不可

外部参照 ("e": 0):

• 長所: メモリ問題なし、JSON ファイルが小さい、アセットの更新が容易
• 短所: JSON と一緒にアセットファイルを保持する必要がある

推奨ワークフロー:

1. 開発/レンダリング中は外部参照を使用する
2. 配布用に、レンダリング成功後にオプションで base64 を埋め込む
3. 将来の編集用に外部バージョンを保持する

---

重要な警告

❌ 避けるべきよくある間違い

1. 哲学を定義する前にアニメーションを作成する → ランダムな試行錯誤で 15〜30 分を浪費します
2. PIL ImageDraw を使ってロゴテキストを再現する → あなたのロゴテキストではなく、異なるテキストが作成されます
3. レンダリング前に base64 を埋め込む → Cairo の MemoryError でクラッシュします (100KB を超える画像)
4. 小さな要素に 1000px を使用する → 巨大なファイル (400KB 以上)、メモリ問題
5. ロゴ分析をスキップする → 誤ったワークフローになり、やり直しが必要になります
6. ループ検証を忘れる → アニメーションのループ時に目に見えるジャンプが発生します
7. プレビューレンダリングをスキップする → コンセプトを検証する前にフルレンダリングで時間を浪費します
8. フル SVG をレンダリングしてからクロップする → エッジがぼやけ、ファイルサイズが巨大になります

コード例を含む完全なリスト: references/anti_patterns.md

---

⚠️ ロゴ内のテキスト - 重要

ロゴにテキストが含まれている場合、専門的なワークフローに必ず従ってください:

1. ロゴ SVG からテキストを抽出する (PIL ImageDraw で再現しないでください)
2. 適切なテキストアニメーション方法を選択する (フェード/ストローク/トランスフォーム)
3. 他の要素との適切な同期を実装する

参照: 完全なガイドについては references/text_animation_guide.md をご覧ください

---

⚠️ 外部参照が必要

開発/レンダリング中は常に外部ファイル参照を使用してください:

// ✅ CORRECT: External reference
"assets": [{"id": "logo", "p": "logo_optimized.png", "e": 0}]

// ❌ WRONG: Embedded base64 (causes Cairo crash if >100KB)
"assets": [{"id": "logo", "p": "data:image/png;base64,...", "e": 1}]

理由: Cairo レンダラーは 100KB を超える埋め込み画像でクラッシュします。開発中は外部参照を使用し、レンダリング成功後にオプションで埋め込んでください。

---

ヘルパースクリプト早見表

スクリプト	目的	例
prepare_logo.py	ロゴ画像を最適化して変換します	python scripts/prepare_logo.py logo.png --max-size 500
extract_svg_elements.py	SVG から要素を抽出します	python scripts/extract_svg_elements.py logo.svg --list
validate_lottie.py	Lottie の構造をチェックします	python scripts/validate_lottie.py animation.json
validate_loop.py	完全なループを検証します	python scripts/validate_loop.py animation.json
render_lottie.py	GIF/MP4 にレンダリングします（アセット検証付き）	python scripts/render_lottie.py animation.json output.gif
render_lottie.py --preview-frames N	クイックプレビュー（最初の N フレーム）	python scripts/render_lottie.py animation.json preview.gif --preview-frames 60
render_lottie.py --test-render	サイズ警告付きのテストモード	python scripts/render_lottie.py animation.json test.gif --test-render
batch_export.py	複数のフォーマットをエクスポートします	python scripts/batch_export.py animation.json ./output gif,mp4

render_lottie.py の新機能:

• ✅ 自動アセット検証（不足している外部ファイルをチェックします）
• ✅ アセットパスの解決（JSON ファイルの場所を基準にした相対パス）
• ✅ 出力検証（空白または破損したファイルを検出します）
• ✅ プレビューモード（--preview-frames N）- 最初の N フレームのみをレンダリングします
• ✅ テストモード（--test-render）- 確認プロンプト付きの小さなテストレンダリング

詳細な使用方法: references/script_usage.md

---

Lottie JSON の基礎

基本構造

{
  "v": "5.7.4",           // Lottie version
  "fr": 60,               // Frame rate
  "ip": 0,                // In point (start frame)
  "op": 180,              // Out point (end frame)
  "w": 800,               // Width
  "h": 800,               // Height
  "layers": [...],        // Animation layers
  "assets": [...]         // Image/asset references
}

レイヤーの種類

• Type 2（画像レイヤー）: 最も一般的 - PNG/SVG 画像をアニメーション化します
• Type 4（シェイプレイヤー）: プログラムによるジオメトリ（円、矩形、パス）

アニメーション化されるプロパティ

• o: 不透明度（0〜100）
• p: 位置 [x, y]
• s: スケール [x%, y%]
• r: 回転（度）
• a: アンカーポイント [x, y]

キーフレームの構造

"o": {
  "a": 1,  // Animated (1) or static (0)
  "k": [
    {"t": 0, "s": [0], "e": [100], "i": {...}, "o": {...}},
    {"t": 60, "s": [100]}
  ]
}

• t: 時間（フレーム番号）
• s: 開始値
• e: 終了値
• i: インタンジェント（イーズイン）
• o: アウトタンジェント（イーズアウト）

完全な仕様: references/lottie_spec.md

---

イージング関数

リニアイージングは決して使用しないでください - プロフェッショナルなモーションには常にカーブを使用します。

イージング	値	印象	用途
イーズインアウト（標準）	0.42/0.58	バランスが良く、プロフェッショナル	企業向け、一般的な用途
オーガニック	0.25/0.75	柔らかく、自然	オーディオブランド、波形、連続的なモーション
バウンス	0.34/1.56	遊び心があり、エネルギッシュ	スタートアップ、遊び心のあるブランド
バック	0.6/-0.28 & 0.735/0.045	オーバーシュート、ダイナミック	大胆なマーケティング、注意を引く用途

理論と例: references/animation_theory.md

---

依存関係

必須

pip install lottie[all]    # Lottie manipulation
pip install Pillow         # Image processing
pip install pycairo        # Cairo rendering (for GIF)

Cairo のインストール

macOS:

brew install cairo pkg-config
pip install pycairo

Linux（Ubuntu/Debian）:

sudo apt-get install libcairo2-dev pkg-config python3-dev
pip install pycairo

確認:

python3 -c "import cairo; print('Cairo OK')"

トラブルシューティング: references/troubleshooting.md#cairo-and-dependencies

---

トラブルシューティング

クイック修正

アセットが見つからないエラー:

• 原因: アセットが Lottie JSON と同じディレクトリにない
• 修正: アセットを JSON ファイルのディレクトリに移動するか、絶対パスを使用します
• 検証: render_lottie.py を実行します - レンダリング前にアセットを検証します

空白または破損した出力:

• 原因: アセットの欠落、誤ったパス、またはレンダリングエラー
• 修正: アセット検証メッセージを確認し、ファイルサイズを検証します（出力が1KB未満は失敗を示します）
• 検出: レンダリング後に出力検証が自動的に実行されます

GIF レンダリング中の MemoryError:

• 原因: 埋め込み base64 画像が100KB超
• 修正: 代わりに外部参照（"e": 0）を使用します

ループに目に見えるジャンプがある:

• 原因: 最後のキーフレームが最初と一致していない
• 修正: validate_loop.py を実行し、最後のフレーム = 最初のフレームであることを確認します

テキストがおかしく見える:

• 原因: PIL ImageDraw を使用してテキストを再作成した
• 修正: extract_svg_elements.py でロゴ SVG からテキストを抽出します

アニメーションがカクカクしすぎる:

• 原因: キーフレームが少なすぎる、または FPS が間違っている
• 修正: キーフレームを追加し（有機的な動きには25〜45）、連続的な動きには60fpsを使用します

プレビューレンダリングで時間を節約:

• ヒント: 完全なレンダリング前にコンセプトを検証するには --preview-frames 60 を使用します
• ヒント: サイズ警告付きのインタラクティブなテストには --test-render を使用します

包括的なガイド: references/troubleshooting.md

---

高度なリファレンス

詳細ドキュメント

• references/detailed_examples.md - すべてのパターンの完全な Lottie JSON コード
• references/animation_theory.md - モーションデザインの原則とイージング理論
• references/preset_library.md - 実例付きの完全なプリセットコレクション
• references/lottie_spec.md - Lottie JSON 仕様の詳細
• references/script_usage.md - 完全なスクリプトドキュメント
• references/text_animation_guide.md - 専門的なテキストアニメーションワークフロー
• references/anti_patterns.md - 完全なコード例付きのよくある間違い
• references/troubleshooting.md - 包括的なトラブルシューティングガイド
• references/real-world-examples/ - 主要ブランドの本番アニメーション

---

ファイルサイズのガイドライン

さまざまなユースケースの目標サイズ:

ユースケース	Lottie JSON	GIF	MP4	画像アセット
メール署名	20-50KB	500KB-1MB	200-500KB	各 <30KB
ウェブサイトのヒーロー	30-80KB	1-3MB	500KB-1.5MB	各 <50KB
ソーシャルメディア	50-150KB	3-8MB	1-3MB	各 <80KB
スプラッシュ画面	30-100KB	2-5MB	800KB-2MB	各 <60KB

最適化: scripts/optimize_lottie.py を使用して、冗長なキーフレームを削除し値を丸めることでファイルサイズを削減します。

---

厳選プリセット

一般的なプリセットへのクイックリファレンス（完全なコードは references/preset_library.md にあります）:

ブランディングスタイル:

• Corporate Subtle - フェード + 緩やかなスケール（1.5秒）
• Startup Energetic - バウンス + オーバーシュート（1.2秒）
• Luxury Elegant - ゆっくりとしたフェード + 最小限のスケール（3秒）
• Tech Glitch - デジタルグリッチ効果（1秒）

ユースケース:

• Website Hero - 迅速でプロフェッショナルな登場（0.8秒）
• Email Signature - 控えめなループ（3秒）
• Social Media Intro - 大胆な登場（2秒）
• Splash Screen - 退出を伴うブランドの瞬間（2.5秒）

実例: references/real-world-examples/ で主要ブランドのホバーアニメーションを学びましょう:

• Reddit - 遊び心のある弾力性のあるバウンス
• Slack - プロフェッショナルで抑制の効いたピンチ
• Medium - 穏やかなエディトリアルフェード
• Flickr - カメラのシャッター効果
• Discord - キャラクターのウィンク

---

クイック判断チェックリスト

アニメーションを作成する前に、以下を確認してください:

• モーションの哲学を定義した(パーソナリティ + 感情 + メタファー)
• ロゴの構造を分析した(テキスト?複数要素?SVG または PNG?)
• 分析に基づいて正しいワークフローを選択した
• テキストがある場合:references/text_animation_guide.md を読んだ
• 開発中に外部参照("e": 0)を使用している
• 要素のサイズが適切である(ロゴ全体は 500px、要素は 100-250px)
• モーションの種類を選択した(Static/Organic/Bold/Cinematic)
• タイミング戦略を選択した(同時 vs ずらし)
• 本番レンダリングの前にプレビューレンダリングで検証する
• ループを作成する場合は validate_loop.py を実行する

すべてチェック済み → 自信を持って進めてください ✅

---

成功のためのヒント

1. まず哲学から - 30 秒の計画で 15〜30 分の試行錯誤を節約できます
2. アニメーションの前に分析 - ロゴの構造を事前に理解しましょう
3. 早めに、頻繁にプレビュー - 本番レンダリングの前に 30〜60 フレームのバージョンでテストしましょう
4. 開発中は外部参照を使用 - base64 の埋め込みはレンダリングが成功した後にのみ行いましょう
5. モーションをブランドに合わせる - 企業 ≠ スタートアップ ≠ オーディオブランド
6. 完璧なループは重要 - validate_loop.py で検証しましょう
7. 要素のサイズを適切に - 要素は 100-250px で、1000px ではありません
8. 抽出する、再作成しない - ロゴのテキストを再作成するために PIL を決して使用しないでください
9. レンダリングの前に検証 - validate_lottie.py と validate_loop.py を実行しましょう
10. 行き詰まったら参照を読む - すべてのトピックについて詳細なドキュメントがあります

---

覚えておいてください: 目標は、ランダムなアニメーションではなく、ブランドアイデンティティを高めるモーションを作成することです。哲学優先のワークフローにより、最初から整合性が確保されます。