パッケージ概要に使い方を書いておく

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;
 }

jig-core/src/main/resources/templates/package.html

@@ -14,6 +14,20 @@ <h1>パッケージ概要</h1>
     <aside class="notice">
         <p>注意: このドキュメントはincubate（作成中）です。次のバージョンで大きく変更したり削除したりする可能性があります。</p>
     </aside>
+    <details class="usage">
+        <summary>ℹ️ 使い方</summary>
+        <p>パッケージ間の依存関係と構成を俯瞰するための一覧です。図と表を組み合わせて、依存方向や責務の偏りを確認してください。</p>
+        <ul>
+            <li>階層集約: 深さを上げるとサブパッケージがまとめられ、全体像を把握しやすくなります。</li>
+            <li>パッケージフィルタ: 対象のパッケージ配下だけを表示します。</li>
+            <li>関連フィルタ: 選択したパッケージの依存関係だけを絞り込みます。</li>
+            <li>図の向き: 横/縦の切り替えで読みやすい方向に調整できます。</li>
+            <li>図のノードクリック: クリックしたパッケージを関連フィルタの対象にします。</li>
+            <li>推移簡約: 直接の依存関係を優先して表示し、冗長な経路を省略します（循環参照は省略しません）。</li>
+        </ul>
+        <p>相互依存は赤い双方向の矢印で強調表示され、下の一覧に原因となるクラス関係が表示されます。</p>
+        <p>依存が多い場合は階層集約やフィルタを活用し、関係が密な範囲から確認するのがおすすめです。</p>
+    </details>
     <details class="controls" open>
         <summary>⚙️ 表示設定</summary>
         <div class="control-row">