サンプルで製造から出荷までをたどるユーザーガイドのページを追加する

CLAUDE.md

@@ -43,6 +43,11 @@ dotnet test tests/MesApp.Api.Tests --filter FullyQualifiedName~MasterCsvTests -v
 ./scripts/Migrations.ps1 -RemoveLast      # 3プロバイダーの最新を取り消す
 ```
 
+ユーザーガイド（`docs/`）の表示確認は Jekyll でビルドする。出力はリポジトリの外に出す（`docs/_site` を作らない）。手動確認用の `jekyll serve` は Readme.md の「ユーザーガイドの確認」:
+```powershell
+jekyll build -s docs -d "$env:TEMP\mes-docs-site"
+```
+
 アプリ起動は `.claude/launch.json` の `mesapp`（preview_start）を使う。シェルから `dotnet run` を常駐させない。
 
 ## 構成（依存は Core ← Infrastructure ← Api、Client.Web → Core）

Readme.md

@@ -187,6 +187,19 @@ $env:MESAPP_TEST_PROVIDER="SqlServer"; $env:MESAPP_TEST_CONNECTION="Server=(loca
 dotnet test tests/MesApp.Api.Tests
 ```
 
+## ユーザーガイドの確認（Jekyll）
+
+`docs/` は GitHub Pages（Jekyll）でそのまま公開されます。手元で見るには Ruby と Jekyll を入れて、リポジトリのルートで次を実行し、
+http://127.0.0.1:4000/ を開きます。`docs/` を保存すると作り直され、ブラウザも自動で再読み込みされます（止めるのは Ctrl+C）。
+
+```powershell
+jekyll serve -s docs -d "$env:TEMP\mes-docs-site" --livereload
+```
+
+ビルドだけ確かめるときは `jekyll build -s docs -d "$env:TEMP\mes-docs-site"` です。
+出力先（`-d`）はリポジトリの外にします。省くと `docs/_site` ができ、未追跡ファイルとして残ります。
+`jekyll` が見つからないときは、インストール後にターミナルを開き直すか、`$env:Path = "C:\Ruby40-x64\bin;$env:Path"` のように Ruby の `bin` を足してください。
+
 ## プロジェクト構成
 
 ```

docs/_config.yml

@@ -34,6 +34,8 @@ nav:
         url: getting-started.html
       - title: 画面構成と共通操作
         url: basics.html
+      - title: サンプルで見る 製造から出荷まで
+        url: walkthrough.html
   - section: 準備
     items:
       - title: マスタ管理

docs/assets/style.css

@@ -363,6 +363,60 @@ ol.steps > li::before {
   font-size: 12.5px;
 }
 
+/* ---------- 図解（walkthrough.md） ---------- */
+/* 担当ロールの色。図の枠と凡例で同じ色を使う */
+:root {
+  --r-pm: #1f6feb; --r-pm-bg: #ddf0ff;   /* 生産管理 */
+  --r-op: #1a7f37; --r-op-bg: #e6f6ec;   /* 現場作業者 */
+  --r-lg: #9a6700; --r-lg-bg: #fff6e0;   /* 物流・倉庫 */
+  --r-qc: #8250df; --r-qc-bg: #f3ecff;   /* 品質管理・品質保証 */
+  --r-ng: #b42318; --r-ng-bg: #ffebe9;   /* 不良・逸脱 */
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --r-pm: #6cb0ff; --r-pm-bg: #16283f;
+    --r-op: #56d364; --r-op-bg: #12261a;
+    --r-lg: #e3b341; --r-lg-bg: #2a2213;
+    --r-qc: #c297ff; --r-qc-bg: #231a38;
+    --r-ng: #ff8a80; --r-ng-bg: #3a1618;
+  }
+}
+.fig { margin: 18px 0 26px; }
+/* 狭い画面では図を縮めすぎず、横にスクロールさせる */
+.fig .scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
+.fig svg { display: block; width: 100%; min-width: 680px; height: auto; font-family: inherit; }
+.fig figcaption { margin-top: 6px; font-size: 13px; color: var(--text-muted); text-align: center; }
+.fig .box { fill: var(--bg-alt); stroke: var(--border); }
+.fig .lane { fill: var(--bg-alt); }
+.fig .card { fill: var(--bg); stroke: var(--border); }
+.fig .t { fill: var(--text); font-size: 13px; }
+.fig .tb { fill: var(--text); font-size: 13px; font-weight: 700; }
+.fig .m { fill: var(--text-muted); font-size: 11.5px; }
+.fig .ln { fill: none; stroke: var(--text-muted); stroke-width: 1.4; }
+.fig .dash { stroke-dasharray: 5 4; }
+.fig .head { fill: var(--text-muted); }
+.fig .pm { fill: var(--r-pm-bg); stroke: var(--r-pm); }
+.fig .op { fill: var(--r-op-bg); stroke: var(--r-op); }
+.fig .lg { fill: var(--r-lg-bg); stroke: var(--r-lg); }
+.fig .qc { fill: var(--r-qc-bg); stroke: var(--r-qc); }
+.fig .ng { fill: var(--r-ng-bg); stroke: var(--r-ng); }
+.fig .c-pm { fill: var(--r-pm); } .fig .c-op { fill: var(--r-op); }
+.fig .c-lg { fill: var(--r-lg); } .fig .c-qc { fill: var(--r-qc); }
+.fig .c-ng { fill: var(--r-ng); }
+.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
+.legend span::before {
+  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px;
+  vertical-align: -1px; border-radius: 3px; border: 1.5px solid;
+}
+.legend .pm::before { background: var(--r-pm-bg); border-color: var(--r-pm); }
+.legend .op::before { background: var(--r-op-bg); border-color: var(--r-op); }
+.legend .lg::before { background: var(--r-lg-bg); border-color: var(--r-lg); }
+.legend .qc::before { background: var(--r-qc-bg); border-color: var(--r-qc); }
+.legend .ng::before { background: var(--r-ng-bg); border-color: var(--r-ng); }
+.shot { margin: 16px 0 24px; }
+.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
+.shot figcaption { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
+
 /* ---------- responsive ---------- */
 @media (max-width: 900px) {
   .menu-toggle { display: block; }

docs/basics.md

@@ -5,8 +5,8 @@ nav_url: basics.html
 lead: すべての画面に共通する見かたと操作です。最初にここを読んでおくと、以降の説明がスムーズです。
 prev_url: getting-started.html
 prev_title: 導入と初期設定
-next_url: masters.html
-next_title: マスタ管理
+next_url: walkthrough.html
+next_title: サンプルで見る 製造から出荷まで
 ---
 
 ## 画面の構成

docs/index.md

@@ -62,6 +62,9 @@ next_title: 導入と初期設定
 | 出荷 | 出荷管理 | 物流・倉庫 | [物流・在庫管理](logistics.html) |
 | 設備・治工具 | 設備保全／治工具管理 | 設備保全 | [設備保全・治工具](maintenance.html) |
 
+この流れをサンプルデータ（ギアポンプ10台の製造から出荷まで）に沿って図と画面写真でたどるページが
+[サンプルで見る 製造から出荷まで](walkthrough.html) です。
+
 ## このバージョンでできること
 
 - 生産管理（生産計画の受け取りと予実・製造指図・工程展開・進捗）

docs/masters.md

@@ -3,8 +3,8 @@ layout: default
 title: マスタ管理
 nav_url: masters.html
 lead: 業務を始める前に登録が必要な基礎データです。登録の順番に決まりがあるので、この順に進めてください。
-prev_url: basics.html
-prev_title: 画面構成と共通操作
+prev_url: walkthrough.html
+prev_title: サンプルで見る 製造から出荷まで
 next_url: production.html
 next_title: 生産管理
 ---