feat: 独立チェックリスト集と図表索引を追加する

.github/workflows/book-qa.yml

@@ -39,6 +39,9 @@ jobs:
       - name: Book metadata consistency check
         run: node scripts/check-metadata-consistency.js
 
+      - name: Check reader-facing checklist and figure contracts
+        run: node scripts/check-issue-240-ux.js
+
       - name: Install dependencies (book-formatter)
         working-directory: book-formatter
         run: npm ci

book-config.json

@@ -193,10 +193,10 @@
     "modules": {
       "quickStart": false,
       "readingGuide": true,
-      "checklistPack": false,
+      "checklistPack": true,
       "troubleshootingFlow": true,
       "conceptMap": false,
-      "figureIndex": false,
+      "figureIndex": true,
       "legalNotice": true,
       "glossary": true
     }

docs/_data/navigation.yml

@@ -51,6 +51,10 @@ appendices:
   path: /appendices/appendix-f/
 - title: 付録G：参考資料
   path: /appendices/appendix-g/
+- title: 独立チェックリスト集
+  path: /appendices/checklist-pack/
+- title: 図表索引
+  path: /appendices/figure-index/
 afterword:
 - title: あとがき
   path: /afterword/

docs/appendices/checklist-pack/index.md

@@ -0,0 +1,57 @@
+---
+layout: book
+title: "独立チェックリスト集"
+---
+
+# 独立チェックリスト集
+
+この付録は、章内に点在する確認事項を実運用の目的別に再編したものです。各項目は未実施の確認作業として扱います。章内のコードブロックや設定例は、実施済みを示すものではありません。
+
+## 準備
+
+- [ ] 対象リポジトリ、責任者、利用するGitHubアカウントまたは組織を確認した。根拠: [第1章](../../chapters/chapter01/)、[第5章](../../chapters/chapter05/)
+- [ ] Gitのユーザー設定、認証方法、必要な開発環境をプロジェクトのルールに合わせた。根拠: [第3章](../../chapters/chapter03/)
+- [ ] 機密情報、学習データ、ライセンスの扱いを公開前に確認した。根拠: [第5章](../../chapters/chapter05/)、[第17章](../../chapters/chapter17/)、[付録G](../appendix-g/)
+
+## Issue と計画
+
+- [ ] Issueに目的、受入基準、制約、変更禁止領域を記録した。根拠: [第2章](../../chapters/chapter02/)、[第4章](../../chapters/chapter04/)
+- [ ] 影響範囲、検証方法、ロールバック方針を作業開始前に合意した。根拠: [第2章](../../chapters/chapter02/)、[第11章](../../chapters/chapter11/)
+- [ ] AI支援を使う場合は、入力可能な情報と人間の確認責任を明確にした。根拠: [第2章](../../chapters/chapter02/)、[第6章](../../chapters/chapter06/)
+
+## ブランチとコミット
+
+- [ ] 変更目的に対応する短命ブランチを作成し、mainへの直接変更を避けた。根拠: [第1章](../../chapters/chapter01/)、[第12章](../../chapters/chapter12/)
+- [ ] コミットをレビュー可能な単位に分け、意図と検証結果を説明できる状態にした。根拠: [第1章](../../chapters/chapter01/)、[第3章](../../chapters/chapter03/)
+- [ ] 実験、release、不要になったブランチの扱いをチームで定義した。根拠: [第12章](../../chapters/chapter12/)
+
+## Pull Request とレビュー
+
+- [ ] PRに変更内容、影響範囲、検証、ロールバック、AI利用の有無を記載した。根拠: [第2章](../../chapters/chapter02/)、[第7章](../../chapters/chapter07/)
+- [ ] 人間が仕様、リスク、セキュリティ上の判断を確認し、AIレビューだけで承認しない。根拠: [第7章](../../chapters/chapter07/)
+- [ ] CODEOWNERS、必須レビュアー、承認条件が対象変更に適用されることを確認した。根拠: [第9章](../../chapters/chapter09/)
+
+## CI/CD
+
+- [ ] 必須テスト、静的解析、依存関係確認をPRの品質ゲートとして実行した。根拠: [第7章](../../chapters/chapter07/)、[第13章](../../chapters/chapter13/)
+- [ ] デプロイ対象環境、承認者、Secretsの参照範囲を確認した。根拠: [第11章](../../chapters/chapter11/)、[第13章](../../chapters/chapter13/)
+- [ ] 失敗時の停止、再実行、ロールバックの手順を検証可能な形で残した。根拠: [第11章](../../chapters/chapter11/)、[付録B](../appendix-b/)
+
+## セキュリティ
+
+- [ ] トークン、パスワード、個人情報、機密データをコード、ログ、Issue、PRへ含めていない。根拠: [第8章](../../chapters/chapter08/)、[第11章](../../chapters/chapter11/)
+- [ ] 入力検証、認証・認可、依存関係更新、破壊的変更のリスクを確認した。根拠: [第7章](../../chapters/chapter07/)、[第8章](../../chapters/chapter08/)
+- [ ] Secret scanning、code scanning、dependency reviewの結果を確認し、例外があれば記録した。根拠: [第8章](../../chapters/chapter08/)
+
+## 組織・大規模運用
+
+- [ ] 組織、チーム、リポジトリの権限継承と直接付与を監査した。根拠: [第9章](../../chapters/chapter09/)、[第10章](../../chapters/chapter10/)
+- [ ] Outside Collaborator、SAML SSO、監査ログの運用を組織ポリシーと照合した。根拠: [第10章](../../chapters/chapter10/)
+- [ ] 大規模データ、モデル、外部協力者、コンプライアンスの責任分界を確認した。根拠: [第14章](../../chapters/chapter14/)、[第16章](../../chapters/chapter16/)、[第17章](../../chapters/chapter17/)
+
+## 関連資料
+
+次の資料はリポジトリ内の導入例であり、この公開チェックリストの実施済み項目ではありません。対象リポジトリの公開範囲と運用文脈を確認したうえで参照してください。
+
+- <https://github.com/itdojp/github-workflow-book/blob/main/examples/ai-agent-starter/security-checklist.md> — AIエージェント向けSecurity checklist: AIレビューの見落としを前提に人間が確認する最小例。
+- <https://github.com/itdojp/github-workflow-book/blob/main/examples/self-hosted-runner-ops-checklist/README.md> — self-hosted runner運用チェックリスト: trusted input、runner分離、ephemeral運用を扱う導入例。

docs/appendices/figure-index/index.md

@@ -0,0 +1,16 @@
+---
+layout: book
+title: "図表索引"
+---
+
+# 図表索引
+
+この索引は、本書の公開本文に掲載する自己完結SVG図版のexact inventoryです。スクリーンショット用コード例、badge、favicon、logoは含めません。
+
+1. [図1.1：ローカルとリモートの同期](../../chapters/chapter01/#figure-chapter01-repository-sync) — 作業ディレクトリ、ステージング、ローカルリポジトリ、GitHubの同期。
+2. [図5.1：Public / Privateリポジトリの判断フロー](../../chapters/chapter05/#figure-chapter05-repository-visibility) — 公開制約と公開目的に基づく可視性の選択。
+3. [図7.1：ハイブリッドレビューワークフロー](../../chapters/chapter07/#figure-chapter07-hybrid-review-flow) — AIレビュー、人間レビュー、CIの品質ゲート。
+4. [図9.1：組織からリポジトリへの権限継承](../../chapters/chapter09/#figure-chapter09-permission-inheritance) — Organization、Team、Repositoryの権限経路。
+5. [図12.1：ML開発向けGit Flow](../../chapters/chapter12/#figure-chapter12-ml-git-flow) — feature、experiment、releaseを含む統合フロー。
+
+各リンクは該当する`figure`要素のstable anchorへ直接移動します。図版はJavaScriptを必要とせず、SVG内のtitleと説明、captionを備えます。

docs/assets/css/main.css

@@ -382,6 +382,23 @@ a:hover {
     height: auto;
 }
 
+.book-figure {
+    margin: 1.5rem 0;
+}
+
+@media (max-width: 640px) {
+    .book-figure:not(.book-figure--narrow) {
+        overflow-x: auto;
+        overscroll-behavior-inline: contain;
+        padding-bottom: 0.5rem;
+    }
+
+    .book-figure:not(.book-figure--narrow) > svg {
+        min-width: 720px;
+        max-width: none !important;
+    }
+}
+
 .page-content table {
     width: 100%;
     border-collapse: collapse;

docs/chapters/chapter01/index.md

@@ -149,17 +149,22 @@ main
 
 ### 同期の仕組み
 
-```mermaid
-graph LR
-    A[作業ディレクトリ] -->|add| B[ステージングエリア]
-    B -->|commit| C[ローカルリポジトリ]
-    C <-->|push/pull| D[リモートリポジトリ<br/>GitHub]
-
-    style A fill:#f9f9f9,stroke:#333,stroke-width:2px
-    style B fill:#e1f5e1,stroke:#333,stroke-width:2px
-    style C fill:#e1e5f5,stroke:#333,stroke-width:2px
-    style D fill:#ffe1e1,stroke:#333,stroke-width:2px
-```
+<figure id="figure-chapter01-repository-sync" class="book-figure">
+  <svg style="display: block; max-width: 100%; height: auto; margin: 0 auto;" viewBox="0 0 960 260" width="960" height="260" role="img" aria-labelledby="figure-chapter01-repository-sync-title figure-chapter01-repository-sync-desc" xmlns="http://www.w3.org/2000/svg">
+    <title id="figure-chapter01-repository-sync-title">ローカルとリモートの同期</title>
+    <desc id="figure-chapter01-repository-sync-desc">作業ディレクトリからステージングエリア、ローカルリポジトリへ進み、ローカルリポジトリとGitHub上のリモートリポジトリをpushとpullで双方向に同期する流れ。</desc>
+    <defs><marker id="sync-arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#1f2937"/></marker></defs>
+    <style>.sync-box{stroke:#1f2937;stroke-width:3}.sync-text{fill:#111827;font:600 18px sans-serif}.sync-label{fill:#111827;font:16px sans-serif}.sync-line{stroke:#1f2937;stroke-width:3;marker-end:url(#sync-arrow)}</style>
+    <rect class="sync-box" x="25" y="80" width="180" height="80" rx="10" fill="#f9fafb"/><text class="sync-text" x="115" y="112" text-anchor="middle">作業</text><text class="sync-text" x="115" y="137" text-anchor="middle">ディレクトリ</text>
+    <rect class="sync-box" x="270" y="80" width="180" height="80" rx="10" fill="#dcfce7"/><text class="sync-text" x="360" y="123" text-anchor="middle">ステージングエリア</text>
+    <rect class="sync-box" x="515" y="80" width="180" height="80" rx="10" fill="#dbeafe"/><text class="sync-text" x="605" y="112" text-anchor="middle">ローカル</text><text class="sync-text" x="605" y="137" text-anchor="middle">リポジトリ</text>
+    <rect class="sync-box" x="760" y="70" width="175" height="100" rx="10" fill="#fee2e2"/><text class="sync-text" x="847" y="101" text-anchor="middle">リモート</text><text class="sync-text" x="847" y="126" text-anchor="middle">リポジトリ</text><text class="sync-label" x="847" y="150" text-anchor="middle">（GitHub）</text>
+    <line class="sync-line" x1="205" y1="120" x2="260" y2="120"/><text class="sync-label" x="232" y="68" text-anchor="middle">add</text>
+    <line class="sync-line" x1="450" y1="120" x2="505" y2="120"/><text class="sync-label" x="477" y="68" text-anchor="middle">commit</text>
+    <line class="sync-line" x1="695" y1="105" x2="750" y2="105"/><line class="sync-line" x1="760" y1="140" x2="705" y2="140"/><text class="sync-label" x="727" y="68" text-anchor="middle">push</text><text class="sync-label" x="727" y="190" text-anchor="middle">pull</text>
+  </svg>
+  <figcaption>図1.1：ローカル作業からGitHub上のリモートリポジトリまでの同期。矢印のラベルは実行するGit操作を示す。</figcaption>
+</figure>
 
 ### リモートブランチの追跡
 - ローカルブランチとリモートブランチの対応

docs/chapters/chapter05/index.md

@@ -152,30 +152,34 @@ policies:
 
 ### AI協働を含む判断フローチャート
 
-```mermaid
-flowchart TD
-    A[リポジトリ作成] --> B{機密情報を含むか？}
-    B -->|Yes| C[Private]
-    B -->|No| D{AI生成コードの<br/>知的財産権が懸念されるか？}
-    D -->|Yes| E[Private + AI使用ポリシー明記]
-    D -->|No| F{特許や独自アルゴリズムを含むか？}
-    F -->|Yes| G[Private]
-    F -->|No| H{オープンソースとして<br/>公開する意図があるか？}
-    H -->|Yes| I[Public + AI協働の明示]
-    H -->|No| J{AI協働の学習事例として<br/>共有したいか？}
-    J -->|Yes| K[Public + AI協働ドキュメント]
-    J -->|No| L{教育目的や<br/>ポートフォリオか？}
-    L -->|Yes| M[Public]
-    L -->|No| N[Private]
-
-    style C fill:#ffcccc
-    style E fill:#ffcccc
-    style G fill:#ffcccc
-    style N fill:#ffcccc
-    style I fill:#ccffcc
-    style K fill:#ccffcc
-    style M fill:#ccffcc
-```
+<figure id="figure-chapter05-repository-visibility" class="book-figure">
+  <svg style="display: block; max-width: 100%; height: auto; margin: 0 auto;" viewBox="0 0 760 900" width="760" height="900" role="img" aria-labelledby="figure-chapter05-repository-visibility-title figure-chapter05-repository-visibility-desc" xmlns="http://www.w3.org/2000/svg">
+    <title id="figure-chapter05-repository-visibility-title">PublicとPrivateリポジトリの判断</title>
+    <desc id="figure-chapter05-repository-visibility-desc">機密情報、AI生成コードの知的財産権、特許・独自アルゴリズム、オープンソース公開の意図、AI協働の学習事例共有、教育・ポートフォリオの順に確認する。各質問のはい側でPrivateまたは目的別のPublicを選び、すべていいえの場合はPrivateを選ぶ判断フロー。</desc>
+    <defs><marker id="visibility-arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#1f2937"/></marker></defs>
+    <style>.visibility-node{stroke:#1f2937;stroke-width:3}.visibility-text{fill:#111827;font:600 17px sans-serif}.visibility-small{fill:#111827;font:15px sans-serif}.visibility-line{fill:none;stroke:#1f2937;stroke-width:3;marker-end:url(#visibility-arrow)}.visibility-answer{fill:#111827;font:600 15px sans-serif}</style>
+    <rect class="visibility-node" x="270" y="15" width="220" height="54" rx="10" fill="#e0f2fe"/><text class="visibility-text" x="380" y="49" text-anchor="middle">リポジトリ作成</text>
+    <polygon class="visibility-node" points="380,88 570,133 380,178 190,133" fill="#fef3c7"/><text class="visibility-text" x="380" y="139" text-anchor="middle">機密情報を含むか？</text>
+    <rect class="visibility-node" x="20" y="105" width="140" height="56" rx="10" fill="#fee2e2"/><text class="visibility-text" x="90" y="140" text-anchor="middle">Private</text><path class="visibility-line" d="M190 133 H170"/><text class="visibility-answer" x="170" y="98" text-anchor="middle">はい</text>
+    <path class="visibility-line" d="M380 178 V203"/><text class="visibility-answer" x="397" y="197">いいえ</text>
+    <polygon class="visibility-node" points="380,210 590,262 380,314 170,262" fill="#fef3c7"/><text class="visibility-text" x="380" y="254" text-anchor="middle">AI生成コードの知的財産権が</text><text class="visibility-text" x="380" y="278" text-anchor="middle">懸念されるか？</text>
+    <rect class="visibility-node" x="5" y="230" width="150" height="64" rx="10" fill="#fee2e2"/><text class="visibility-small" x="80" y="256" text-anchor="middle">Private＋</text><text class="visibility-small" x="80" y="278" text-anchor="middle">AI使用ポリシー</text><path class="visibility-line" d="M170 262 H165"/><text class="visibility-answer" x="165" y="222" text-anchor="middle">はい</text>
+    <path class="visibility-line" d="M380 314 V339"/><text class="visibility-answer" x="397" y="333">いいえ</text>
+    <polygon class="visibility-node" points="380,346 580,394 380,442 180,394" fill="#fef3c7"/><text class="visibility-text" x="380" y="387" text-anchor="middle">特許や独自アルゴリズムを</text><text class="visibility-text" x="380" y="411" text-anchor="middle">含むか？</text>
+    <rect class="visibility-node" x="20" y="366" width="140" height="56" rx="10" fill="#fee2e2"/><text class="visibility-text" x="90" y="401" text-anchor="middle">Private</text><path class="visibility-line" d="M180 394 H170"/><text class="visibility-answer" x="170" y="354" text-anchor="middle">はい</text>
+    <path class="visibility-line" d="M380 442 V467"/><text class="visibility-answer" x="397" y="461">いいえ</text>
+    <polygon class="visibility-node" points="380,474 580,522 380,570 180,522" fill="#fef3c7"/><text class="visibility-text" x="380" y="515" text-anchor="middle">オープンソースとして</text><text class="visibility-text" x="380" y="539" text-anchor="middle">公開する意図があるか？</text>
+    <rect class="visibility-node" x="600" y="490" width="150" height="64" rx="10" fill="#dcfce7"/><text class="visibility-small" x="675" y="516" text-anchor="middle">Public＋</text><text class="visibility-small" x="675" y="538" text-anchor="middle">AI協働の明示</text><path class="visibility-line" d="M580 522 H590"/><text class="visibility-answer" x="590" y="480" text-anchor="middle">はい</text>
+    <path class="visibility-line" d="M380 570 V595"/><text class="visibility-answer" x="397" y="589">いいえ</text>
+    <polygon class="visibility-node" points="380,602 580,650 380,698 180,650" fill="#fef3c7"/><text class="visibility-text" x="380" y="643" text-anchor="middle">AI協働の学習事例として</text><text class="visibility-text" x="380" y="667" text-anchor="middle">共有したいか？</text>
+    <rect class="visibility-node" x="600" y="618" width="150" height="64" rx="10" fill="#dcfce7"/><text class="visibility-small" x="675" y="644" text-anchor="middle">Public＋</text><text class="visibility-small" x="675" y="666" text-anchor="middle">AI協働文書</text><path class="visibility-line" d="M580 650 H590"/><text class="visibility-answer" x="590" y="608" text-anchor="middle">はい</text>
+    <path class="visibility-line" d="M380 698 V723"/><text class="visibility-answer" x="397" y="717">いいえ</text>
+    <polygon class="visibility-node" points="380,730 570,775 380,820 190,775" fill="#fef3c7"/><text class="visibility-text" x="380" y="768" text-anchor="middle">教育目的または</text><text class="visibility-text" x="380" y="792" text-anchor="middle">ポートフォリオか？</text>
+    <rect class="visibility-node" x="600" y="747" width="140" height="56" rx="10" fill="#dcfce7"/><text class="visibility-text" x="670" y="782" text-anchor="middle">Public</text><path class="visibility-line" d="M570 775 H590"/><text class="visibility-answer" x="590" y="736" text-anchor="middle">はい</text>
+    <path class="visibility-line" d="M380 820 V844"/><text class="visibility-answer" x="397" y="839">いいえ</text><rect class="visibility-node" x="310" y="844" width="140" height="50" rx="10" fill="#fee2e2"/><text class="visibility-text" x="380" y="876" text-anchor="middle">Private</text>
+  </svg>
+  <figcaption>図5.1：Public / Private リポジトリの判断フロー。機密性、知的財産、公開意図、共有・教育目的を順に確認し、公開時はAI協働の方針を明示する。</figcaption>
+</figure>
 
 ### Publicリポジトリの利点
 - **コミュニティ貢献**: オープンソースエコシステムへの参加