From d46ed04cd4fe90daf50bd3f41344b9adcf1f5fb1 Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sat, 7 Feb 2026 17:34:35 +0900
Subject: [PATCH 1/6] Add usage guidance to package overview

---
 jig-core/src/main/resources/templates/package.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/jig-core/src/main/resources/templates/package.html b/jig-core/src/main/resources/templates/package.html
index dd297dae5..0cb4bec40 100644
--- a/jig-core/src/main/resources/templates/package.html
+++ b/jig-core/src/main/resources/templates/package.html
@@ -14,6 +14,19 @@ <h1>パッケージ概要</h1>
     <aside class="notice">
         <p>注意: このドキュメントはincubate（作成中）です。次のバージョンで大きく変更したり削除したりする可能性があります。</p>
     </aside>
+    <section class="usage">
+        <h2>使い方</h2>
+        <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存の流れや責務の偏りを確認してください。</p>
+        <ul>
+            <li>階層集約: 深さを上げるとサブパッケージがまとめられ、全体像を把握しやすくなります。</li>
+            <li>パッケージフィルタ: 対象のパッケージ配下だけを表示します。</li>
+            <li>関連フィルタ: 選択したパッケージの依存関係だけを絞り込みます。</li>
+            <li>図の向き: 横/縦の切り替えで読みやすい方向に調整できます。</li>
+            <li>図のノードクリック: クリックしたパッケージを関連フィルタの対象にします。</li>
+            <li>表のボタン: 行ごとに絞り込み/関連表示を切り替えられます。</li>
+        </ul>
+        <p>依存が多い場合は階層集約やフィルタを活用し、関係が密な範囲から確認するのがおすすめです。</p>
+    </section>
     <details class="controls" open>
         <summary>⚙️ 表示設定</summary>
         <div class="control-row">

From 293646659374e716ad9f5aa2cbcd7c94642d36a1 Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sat, 7 Feb 2026 17:40:23 +0900
Subject: [PATCH 2/6] Add mutual dependency and reduction notes

---
 jig-core/src/main/resources/templates/package.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/jig-core/src/main/resources/templates/package.html b/jig-core/src/main/resources/templates/package.html
index 0cb4bec40..2cb4540e3 100644
--- a/jig-core/src/main/resources/templates/package.html
+++ b/jig-core/src/main/resources/templates/package.html
@@ -24,6 +24,8 @@ <h2>使い方</h2>
             <li>図の向き: 横/縦の切り替えで読みやすい方向に調整できます。</li>
             <li>図のノードクリック: クリックしたパッケージを関連フィルタの対象にします。</li>
             <li>表のボタン: 行ごとに絞り込み/関連表示を切り替えられます。</li>
+            <li>相互依存: 双方向の依存は赤い双方向の矢印で強調表示され、下の一覧に原因となるクラス関係が表示されます。</li>
+            <li>推移簡約: 直接の依存関係を優先して表示し、冗長な経路を省略します（循環参照は省略しません）。</li>
         </ul>
         <p>依存が多い場合は階層集約やフィルタを活用し、関係が密な範囲から確認するのがおすすめです。</p>
     </section>

From be7465ec04b0db488e3a5fd0a8fc7243065688f3 Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sat, 7 Feb 2026 17:43:41 +0900
Subject: [PATCH 3/6] Collapse usage guidance by default

---
 jig-core/src/main/resources/templates/package.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/jig-core/src/main/resources/templates/package.html b/jig-core/src/main/resources/templates/package.html
index 2cb4540e3..3dc18ab0f 100644
--- a/jig-core/src/main/resources/templates/package.html
+++ b/jig-core/src/main/resources/templates/package.html
@@ -14,8 +14,8 @@ <h1>パッケージ概要</h1>
     <aside class="notice">
         <p>注意: このドキュメントはincubate（作成中）です。次のバージョンで大きく変更したり削除したりする可能性があります。</p>
     </aside>
-    <section class="usage">
-        <h2>使い方</h2>
+    <details class="usage">
+        <summary>使い方</summary>
         <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存の流れや責務の偏りを確認してください。</p>
         <ul>
             <li>階層集約: 深さを上げるとサブパッケージがまとめられ、全体像を把握しやすくなります。</li>
@@ -28,7 +28,7 @@ <h2>使い方</h2>
             <li>推移簡約: 直接の依存関係を優先して表示し、冗長な経路を省略します（循環参照は省略しません）。</li>
         </ul>
         <p>依存が多い場合は階層集約やフィルタを活用し、関係が密な範囲から確認するのがおすすめです。</p>
-    </section>
+    </details>
     <details class="controls" open>
         <summary>⚙️ 表示設定</summary>
         <div class="control-row">

From 81ffcabbc0bffb6ff2aa20abb28993d7bdb6ed3d Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sat, 7 Feb 2026 17:45:29 +0900
Subject: [PATCH 4/6] Align usage styling with display controls

---
 jig-core/src/main/resources/templates/package.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/jig-core/src/main/resources/templates/package.html b/jig-core/src/main/resources/templates/package.html
index 3dc18ab0f..f817934a2 100644
--- a/jig-core/src/main/resources/templates/package.html
+++ b/jig-core/src/main/resources/templates/package.html
@@ -14,8 +14,8 @@ <h1>パッケージ概要</h1>
     <aside class="notice">
         <p>注意: このドキュメントはincubate（作成中）です。次のバージョンで大きく変更したり削除したりする可能性があります。</p>
     </aside>
-    <details class="usage">
-        <summary>使い方</summary>
+    <details class="controls usage">
+        <summary>ℹ️ 使い方</summary>
         <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存の流れや責務の偏りを確認してください。</p>
         <ul>
             <li>階層集約: 深さを上げるとサブパッケージがまとめられ、全体像を把握しやすくなります。</li>

From 778be3913735f0967b0176af25a14c7436f749eb Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sat, 7 Feb 2026 17:46:38 +0900
Subject: [PATCH 5/6] Use usage class without controls styling

---
 jig-core/src/main/resources/templates/assets/style.css | 9 ++++++---
 jig-core/src/main/resources/templates/package.html     | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/jig-core/src/main/resources/templates/assets/style.css b/jig-core/src/main/resources/templates/assets/style.css
index 832446872..7a8b31583 100644
--- a/jig-core/src/main/resources/templates/assets/style.css
+++ b/jig-core/src/main/resources/templates/assets/style.css
@@ -259,7 +259,8 @@ label {
 }
 
 /* パッケージ概要の表示設定 */
-.package-list details.controls {
+.package-list details.controls,
+.package-list details.usage {
     background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
     border: 1px solid #ccc;
     border-radius: 8px;
@@ -269,13 +270,15 @@ label {
     width: 95%;
     max-width: 980px;
 }
-.package-list details.controls summary {
+.package-list details.controls summary,
+.package-list details.usage summary {
     list-style: none;
     cursor: pointer;
     padding: 6px 0;
     font-weight: 600;
 }
-.package-list details.controls > :not(summary) {
+.package-list details.controls > :not(summary),
+.package-list details.usage > :not(summary) {
     display: block;
     margin: 8px 0;
 }
diff --git a/jig-core/src/main/resources/templates/package.html b/jig-core/src/main/resources/templates/package.html
index f817934a2..636015a81 100644
--- a/jig-core/src/main/resources/templates/package.html
+++ b/jig-core/src/main/resources/templates/package.html
@@ -14,7 +14,7 @@ <h1>パッケージ概要</h1>
     <aside class="notice">
         <p>注意: このドキュメントはincubate（作成中）です。次のバージョンで大きく変更したり削除したりする可能性があります。</p>
     </aside>
-    <details class="controls usage">
+    <details class="usage">
         <summary>ℹ️ 使い方</summary>
         <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存の流れや責務の偏りを確認してください。</p>
         <ul>

From b16d386102b5cae8ce2360c530480b53e308ef3b Mon Sep 17 00:00:00 2001
From: irof <irof.ocean@gmail.com>
Date: Sat, 7 Feb 2026 19:30:29 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jig-core/src/main/resources/templates/package.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/jig-core/src/main/resources/templates/package.html b/jig-core/src/main/resources/templates/package.html
index 636015a81..421d0723f 100644
--- a/jig-core/src/main/resources/templates/package.html
+++ b/jig-core/src/main/resources/templates/package.html
@@ -16,17 +16,16 @@ <h1>パッケージ概要</h1>
     </aside>
     <details class="usage">
         <summary>ℹ️ 使い方</summary>
-        <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存の流れや責務の偏りを確認してください。</p>
+        <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存方向や責務の偏りを確認してください。</p>
         <ul>
             <li>階層集約: 深さを上げるとサブパッケージがまとめられ、全体像を把握しやすくなります。</li>
             <li>パッケージフィルタ: 対象のパッケージ配下だけを表示します。</li>
             <li>関連フィルタ: 選択したパッケージの依存関係だけを絞り込みます。</li>
             <li>図の向き: 横/縦の切り替えで読みやすい方向に調整できます。</li>
             <li>図のノードクリック: クリックしたパッケージを関連フィルタの対象にします。</li>
-            <li>表のボタン: 行ごとに絞り込み/関連表示を切り替えられます。</li>
-            <li>相互依存: 双方向の依存は赤い双方向の矢印で強調表示され、下の一覧に原因となるクラス関係が表示されます。</li>
             <li>推移簡約: 直接の依存関係を優先して表示し、冗長な経路を省略します（循環参照は省略しません）。</li>
         </ul>
+        <p>相互依存は赤い双方向の矢印で強調表示され、下の一覧に原因となるクラス関係が表示されます。</p>
         <p>依存が多い場合は階層集約やフィルタを活用し、関係が密な範囲から確認するのがおすすめです。</p>
     </details>
     <details class="controls" open>