SpriteStudio · Naruto · Jun 24, 2026 · Jun 24, 2026 · Jun 24, 2026 · Jun 24, 2026
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -39,7 +39,7 @@ jobs:
             mkdocs-material-
 
       - name: Install dependencies
-        run: pip install mkdocs-material mkdocs-static-i18n
+        run: pip install mkdocs-material mkdocs-static-i18n mkdocs-callouts
 
       - name: Deploy docs
         run: mkdocs gh-deploy --force
diff --git a/docs/assets/1-sspj_import.webm b/docs/assets/1-sspj_import.webm
diff --git a/docs/assets/1-sspj_import.webp b/docs/assets/1-sspj_import.webp
diff --git a/docs/assets/2-fast_iteration_inspector.webm b/docs/assets/2-fast_iteration_inspector.webm
diff --git a/docs/assets/2-fast_iteration_inspector.webp b/docs/assets/2-fast_iteration_inspector.webp
diff --git a/docs/assets/3-setup_drag_and_drop.webm b/docs/assets/3-setup_drag_and_drop.webm
diff --git a/docs/assets/3-setup_drag_and_drop.webp b/docs/assets/3-setup_drag_and_drop.webp
diff --git a/docs/assets/4-inspector_preview-1.webm b/docs/assets/4-inspector_preview-1.webm
diff --git a/docs/assets/4-inspector_preview-1.webp b/docs/assets/4-inspector_preview-1.webp
diff --git a/docs/assets/4-inspector_preview-2.webm b/docs/assets/4-inspector_preview-2.webm
diff --git a/docs/assets/4-inspector_preview-2.webp b/docs/assets/4-inspector_preview-2.webp
diff --git a/docs/assets/5-open_sspj_from_inspector.png b/docs/assets/5-open_sspj_from_inspector.png
diff --git a/docs/assets/6-connect_signals_node_tab.png b/docs/assets/6-connect_signals_node_tab.png
diff --git a/docs/assets/7-cellmap_override_after.png b/docs/assets/7-cellmap_override_after.png
diff --git a/docs/assets/7-cellmap_override_before.png b/docs/assets/7-cellmap_override_before.png
diff --git a/docs/en/workflow/usage_asset_pipeline.md b/docs/en/workflow/usage_asset_pipeline.md
@@ -18,10 +18,11 @@ This triggers the conversion process, generating `.ssab` and `.ssqb` files in th
 Drag and drop the generated `.ssab` file into the 2D viewport to place a `SpriteStudioPlayer2D` node in advance (see [Basic Usage](usage_basic.md) for details).
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/sspj_import.webm" type="video/webm">
+>   <source src="../../assets/1-sspj_import.webm" type="video/webm">
 > </video>
-> *(※ Video showing the drag-and-drop import of an .sspj file into the SS Import dock will be placed here)*
+> <img src="../../assets/1-sspj_import.webp" width="100%" style="display: none;">
 
 ---
 
@@ -36,8 +37,7 @@ When working in Godot and feeling the need to tweak an animation, you don't have
 This action automatically launches SpriteStudio and opens the underlying `.sspj` file, allowing you to start editing immediately.
 
 > [!NOTE]
-> ![Opening SSPJ from the Inspector](../../assets/open_sspj_from_inspector.png)
-> *(※ Image highlighting the "Open SSPJ" button in the Inspector will be placed here)*
+> ![Opening SSPJ from the Inspector](../../assets/5-open_sspj_from_inspector.png)
 
 ---
 
@@ -54,10 +54,11 @@ With just the following steps, your changes will instantly reflect in the game (
 > You can call SpriteStudio directly from the Inspector with the node selected, and immediately reconvert in Godot after editing. **This powerful asset pipeline that allows seamless transition between SpriteStudio and Godot** drastically lowers the cost of trial and error during animation adjustments.
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/fast_iteration_inspector.webm" type="video/webm">
+>   <source src="../../assets/2-fast_iteration_inspector.webm" type="video/webm">
 > </video>
-> *(※A video demonstrating the fast workflow: Open from Inspector -> Save in SpriteStudio -> Reconvert in Inspector -> Preview updates instantly)*
+> <img src="../../assets/2-fast_iteration_inspector.webp" width="100%" style="display: none;">
 
 ---
 

diff --git a/docs/en/workflow/usage_basic.md b/docs/en/workflow/usage_basic.md
@@ -15,10 +15,11 @@ Taking advantage of Godot's powerful editor, you can set up an animation with th
 This action automatically creates a `SpriteStudioPlayer2D` node and assigns the resource to it.
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/setup_drag_and_drop.webm" type="video/webm">
+>   <source src="../../assets/3-setup_drag_and_drop.webm" type="video/webm">
 > </video>
-> *(※ Short video showing node creation by dragging and dropping an .ssab file will be placed here)*
+> <img src="../../assets/3-setup_drag_and_drop.webp" width="100%" style="display: none;">
 
 ---
 
@@ -39,15 +40,23 @@ Once the node is selected, you can adjust various settings from Godot's Inspecto
 1. **Select an `Animation`**
    Open the dropdown for the `Animation` property in the Inspector. You will see a list of animations contained in the `.ssab`. Select the name of the animation you want to play.
 
+> [!TIP]
+> 
+> <video autoplay loop muted playsinline width="100%">
+>   <source src="../../assets/4-inspector_preview-1.webm" type="video/webm">
+> </video>
+> <img src="../../assets/4-inspector_preview-1.webp" width="100%" style="display: none;">
+
 2. **In-Editor Preview**
    With the node selected, the **SpriteStudio** bottom panel appears. Use its transport controls (play from start / play from current / stop and the frame scrubber) to **play the animation directly in the editor without running the game**. Keyboard shortcuts mirror the AnimationPlayer editor: **D** play from current, **Shift+D** play from start, **S** stop (active while the panel is visible).
    Changes to parameters like `Frame`, `Speed`, and `Loop Count` are reflected in the preview in real-time, enabling quick adjustments.
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/inspector_preview.webm" type="video/webm">
+>   <source src="../../assets/4-inspector_preview-2.webm" type="video/webm">
 > </video>
-> *(※ Video showing the animation preview via the SpriteStudio bottom panel will be placed here)*
+> <img src="../../assets/4-inspector_preview-2.webp" width="100%" style="display: none;">
 
 ---
 

diff --git a/docs/en/workflow/usage_scripting.md b/docs/en/workflow/usage_scripting.md
@@ -60,8 +60,7 @@ func _on_animation_finished(anim_name: String):
 ```
 
 > [!NOTE]
-> ![Signal connection screen](../../assets/signal_connection.png)
-> *(※ Image showing signals connected in the "Node" tab of the Godot editor will be placed here)*
+> ![Signal connection screen](../../assets/6-connect_signals_node_tab.png)
 
 ### Example: Triggering Events using User Data
 This is an example of receiving user data configured in SpriteStudio (such as playing footsteps or generating attack hitboxes) and processing it in the game.
@@ -99,5 +98,5 @@ func change_weapon():
 This feature allows you to build an efficient avatar system without needing to prepare multiple animation variations for each part.
 
 > [!TIP]
-> ![Before/After comparison of equipment change](../../assets/change_equipment.png)
-> *(※ Before/After image comparison of the character changing weapons will be placed here)*
+> ![Before equipment change](../../assets/7-cellmap_override_before.png)
+> ![After equipment change](../../assets/7-cellmap_override_after.png)
diff --git a/docs/ja/workflow/usage_asset_pipeline.md b/docs/ja/workflow/usage_asset_pipeline.md
@@ -18,10 +18,11 @@ SpriteStudioPlayerForGodot は単にアニメーションを再生するだけ
 生成された `.ssab` を 2D ビューポートへドラッグ＆ドロップして、あらかじめ `SpriteStudioPlayer2D` ノードを配置しておきましょう（詳細は [基本的な使い方](usage_basic.md) を参照）。
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/sspj_import.webm" type="video/webm">
+>   <source src="../../assets/1-sspj_import.webm" type="video/webm">
 > </video>
-> *(※上記に .sspj を SS Import ドックへドラッグ＆ドロップしてコンバートする様子の動画が入ります)*
+> <img src="../../assets/1-sspj_import.webp" width="100%" style="display: none;">
 
 ---
 
@@ -36,8 +37,7 @@ Godot で作業中に「もう少しアニメーションを微調整したい
 この操作により、SpriteStudio が起動して元となる `.sspj` ファイルが開き、すぐに編集作業に入ることができます。
 
 > [!NOTE]
-> ![インスペクタからSSPJを開く画像](../../assets/open_sspj_from_inspector.png)
-> *(※ここにインスペクタ上の「Open SSPJ」ボタンがハイライトされた画像が入ります)*
+> ![インスペクタからSSPJを開く画像](../../assets/5-open_sspj_from_inspector.png)
 
 ---
 
@@ -54,10 +54,11 @@ SpriteStudio 側でアニメーションを修正して保存したら、Godot
 > ノードを選択したままインスペクタから SpriteStudio を呼び出し、編集後すぐに Godot 上で再コンバートをかけることができます。**SpriteStudio と Godot をシームレスに行き来できるこの強力なアセットパイプライン**により、アニメーション調整におけるトライアンドエラーのコストが劇的に下がります。
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/fast_iteration_inspector.webm" type="video/webm">
+>   <source src="../../assets/2-fast_iteration_inspector.webm" type="video/webm">
 > </video>
-> *(※上記に「インスペクタから開く -> SpriteStudioで保存 -> インスペクタでReconvert -> プレビューが即座に変わる」という一連の高速ワークフロー動画が入ります)*
+> <img src="../../assets/2-fast_iteration_inspector.webp" width="100%" style="display: none;">
 
 ---
 

diff --git a/docs/ja/workflow/usage_basic.md b/docs/ja/workflow/usage_basic.md
@@ -15,10 +15,11 @@ Godot エディタの強力な機能を活かし、最短の手順でアニメ
 これだけで自動的に `SpriteStudioPlayer2D` ノードがシーンに追加され、リソースの割り当ても完了します。
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/setup_drag_and_drop.webm" type="video/webm">
+>   <source src="../../assets/3-setup_drag_and_drop.webm" type="video/webm">
 > </video>
-> *(※上記に .ssab をドラッグ＆ドロップしてノードが自動生成される様子を示す動画が入ります)*
+> <img src="../../assets/3-setup_drag_and_drop.webp" width="100%" style="display: none;">
 
 ---
 
@@ -39,15 +40,23 @@ Godot エディタの強力な機能を活かし、最短の手順でアニメ
 1. **`Animation` の選択**
    インスペクタの `Animation` プロパティのドロップダウンを開くと、`.ssab` に含まれるアニメーションのリストが表示されます。再生したいアニメーション名を選択してください。
 
+> [!TIP]
+> 
+> <video autoplay loop muted playsinline width="100%">
+>   <source src="../../assets/4-inspector_preview-1.webm" type="video/webm">
+> </video>
+> <img src="../../assets/4-inspector_preview-1.webp" width="100%" style="display: none;">
+
 2. **エディタ上でのプレビュー**
    ノードを選択すると **SpriteStudio** ボトムパネルが表示されます。先頭から再生 / 現在位置から再生 / 停止のトランスポートとフレームスクラバを使って、**ゲームを実行せずにエディタ上でアニメーションを再生**できます。ショートカットは AnimationPlayer エディタと同じく **D** 現在位置から再生 / **Shift+D** 先頭から / **S** 停止（パネルが表示中に有効）。
    `Frame` や `Speed`、`Loop` などのパラメータを変更するとリアルタイムにプレビューへ反映されるため、素早い調整が可能です。
 
 > [!TIP]
+> 
 > <video autoplay loop muted playsinline width="100%">
->   <source src="../../assets/inspector_preview.webm" type="video/webm">
+>   <source src="../../assets/4-inspector_preview-2.webm" type="video/webm">
 > </video>
-> *(※上記に SpriteStudio ボトムパネルでプレビューが動く様子を示す動画が入ります)*
+> <img src="../../assets/4-inspector_preview-2.webp" width="100%" style="display: none;">
 
 ---
 

diff --git a/docs/ja/workflow/usage_scripting.md b/docs/ja/workflow/usage_scripting.md
@@ -60,8 +60,7 @@ func _on_animation_finished(anim_name: String):
 ```
 
 > [!NOTE]
-> ![シグナル接続画面の画像](../../assets/signal_connection.png)
-> *(※ここに Godot エディタ右側の「ノード」タブでシグナルを接続している様子の画像が入ります)*
+> ![シグナル接続画面の画像](../../assets/6-connect_signals_node_tab.png)
 
 ### 実装例: ユーザーデータを使ったイベント発火
 SpriteStudio 上で設定したユーザーデータ（足音の再生、攻撃判定の発生など）を受け取り、ゲーム側で処理を行う実装例です。
@@ -99,5 +98,5 @@ func change_weapon():
 この機能により、アニメーションデータをパーツごとに何パターンも用意することなく、効率的なアバターシステムを構築できます。
 
 > [!TIP]
-> ![着せ替えの Before/After 比較画像](../../assets/change_equipment.png)
-> *(※ここにキャラクターが武器を持ち替えた Before/After の比較画像が入ります)*
+> ![着せ替え前](../../assets/7-cellmap_override_before.png)
+> ![着せ替え後](../../assets/7-cellmap_override_after.png)
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -32,6 +32,7 @@ theme:
 
 plugins:
   - search
+  - callouts
   - i18n:
       docs_structure: folder
       languages: