diff --git a/README.md b/README.md
index 5cc7e96..75be9e2 100644
--- a/README.md
+++ b/README.md
@@ -162,4 +162,5 @@ Astro は記事の中身が変わらないと、前の変換結果（`node_modul
 
 - /series1 のスプレッドシートと要件定義書は、iframe で埋め込まず、ページに直接載せている（`src/components/SeriesSheet.astro`・`SeriesDoc.astro`）
 - 中身は Google の「ウェブに公開」版の写し（`src/data/series_docs.json`）。Google 側を直したら `python3 tools/fetch_series_docs.py` を動かして push する。自動では追いかけない
+- デザインノート（`key: site-design`）は Google から写さず、サイト側が正（`src/data/design_note.json`）。色と書体の行はビルドのときに `src/layouts/Base.astro` の `:root` から読む。それ以外の行は、コードを変えたら json も直す
 - 載せる場所は `src/data/static.json` の `{"type": "sheet" | "doc", "key": ...}`。`height` を付けると、その高さで枠の中をスクロールする
diff --git a/src/components/SeriesSheet.astro b/src/components/SeriesSheet.astro
index 0b77483..5fc884c 100644
--- a/src/components/SeriesSheet.astro
+++ b/src/components/SeriesSheet.astro
@@ -1,10 +1,12 @@
 ---
 // シリーズのページに、Google スプレッドシートの中身を表として直接載せる（元は iframe の埋め込み）。
-// 中身は tools/fetch_series_docs.py が書き出した src/data/series_docs.json。タブが2つ以上あれば、表の上に切り替えを出す
-import docs from '../data/series_docs.json';
+// 中身は src/lib/sheets.ts（Google の写し・サイトのデザインの値）。タブが2つ以上あれば、表の上に切り替えを出す
+import { getSheet } from '../lib/sheets';
 interface Props { id: string; height?: number }
 const { id, height } = Astro.props;
-const sheet = (docs.sheets as Record<string, { title: string; tabs: { name: string; rows: string[][] }[] }>)[id];
+const sheet = getSheet(id);
+// 色の値（#d2d2d2 など）には、その色の小さな四角を添える
+const swatch = (c: string) => /^#[0-9a-f]{3,8}$/i.test(c);
 // 中身が短い列（番号・状態など）は折り返さない
 const narrow = (rows: string[][], i: number) => rows.slice(1).every((r) => (r[i] || '').length <= 6);
 // 1つ目のセルにだけ文字がある行は、表の中の小見出しとして扱う
@@ -29,7 +31,7 @@ const isSection = (r: string[]) => r.length > 1 && r[0] && r.slice(1).every((c)
             <tbody>
               {body.map((r) => isSection(r)
                 ? <tr class="sec-row"><td colspan={r.length}>{r[0]}</td></tr>
-                : <tr>{r.map((c, k) => <td class={narrow(t.rows, k) ? 'nw' : undefined}>{c}</td>)}</tr>)}
+                : <tr>{r.map((c, k) => <td class={narrow(t.rows, k) ? 'nw' : undefined}>{swatch(c) && <i class="sw" style={`background:${c}`} />}{c}</td>)}</tr>)}
             </tbody>
           </table>
         </div>
@@ -59,6 +61,7 @@ const isSection = (r: string[]) => r.length > 1 && r[0] && r.slice(1).every((c)
   th { position: sticky; top: 0; z-index: 1; background: #e9e9e9; padding: 10px 12px; font: 600 14px/22px var(--sans); }
   td { background: #fff; padding: 10px 12px; font: 400 14px/22px var(--sans); color: var(--ink); }
   .nw { min-width: 0; white-space: nowrap; }
+  .sw { display: inline-block; width: 14px; height: 14px; margin: 0 8px -2px 0; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; }
   .sec-row td { max-width: none; background: #f7f7f7; font-weight: 600; }
   /* 外枠の線と、端のセルの線が重ならないように */
   tr > :first-child { border-left: 0; }
diff --git a/src/data/static.json b/src/data/static.json
index 82854f4..39cffc2 100644
--- a/src/data/static.json
+++ b/src/data/static.json
@@ -8,67 +8,67 @@
    },
    {
     "type": "text",
-    "html": "Figma/UIデザイン・イメージボード",
+    "html": "要件定義書",
     "link": null
    },
    {
-    "type": "iframe",
-    "html": "<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"100%\" src=\"https://embed.figma.com/design/gDAJCTN8VCdVUwJHrQ5N7z/%E3%83%AD%E3%83%9C%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=0-1&embed-host=share\" allowfullscreen></iframe>",
+    "type": "doc",
+    "key": "hakobu-requirements",
+    "height": 800
+   },
+   {
+    "type": "doc",
+    "key": "tsukamu-requirements",
     "height": 800
    },
    {
     "type": "text",
-    "html": "スプレッドシート/進捗管理",
+    "html": "UIデザイン・イメージボード（Figma）",
     "link": null
    },
    {
-    "type": "sheet",
-    "key": "hakobu-progress",
-    "height": 640
+    "type": "iframe",
+    "html": "<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"100%\" src=\"https://embed.figma.com/design/gDAJCTN8VCdVUwJHrQ5N7z/%E3%83%AD%E3%83%9C%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=0-1&embed-host=share\" allowfullscreen></iframe>",
+    "height": 800
    },
    {
     "type": "text",
-    "html": "スプレッドシート/デザインノート",
+    "html": "フロー図（FigJam）",
     "link": null
    },
    {
-    "type": "sheet",
-    "key": "hakobu-design-note",
-    "height": 480
+    "type": "iframe",
+    "html": "<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://embed.figma.com/board/fFRdzGMRwQGF7Y36dCmB1m/%E5%9F%BA%E6%9C%AC%E3%83%95%E3%83%AD%E3%83%BC%E5%9B%B3?node-id=0-1&embed-host=share\" allowfullscreen></iframe>",
+    "height": 800
    },
    {
     "type": "text",
-    "html": "ドキュメント/要件定義書",
+    "html": "フロー図の部品",
     "link": null
    },
    {
-    "type": "doc",
-    "key": "hakobu-requirements",
-    "height": 800
-   },
-   {
-    "type": "doc",
-    "key": "tsukamu-requirements",
-    "height": 800
+    "type": "sheet",
+    "key": "flow-library"
    },
    {
     "type": "text",
-    "html": "FigJam/フロー図",
+    "html": "デザインノート",
     "link": null
    },
    {
-    "type": "iframe",
-    "html": "<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://embed.figma.com/board/fFRdzGMRwQGF7Y36dCmB1m/%E5%9F%BA%E6%9C%AC%E3%83%95%E3%83%AD%E3%83%BC%E5%9B%B3?node-id=0-1&embed-host=share\" allowfullscreen></iframe>",
-    "height": 800
+    "type": "sheet",
+    "key": "site-design",
+    "height": 560
    },
    {
     "type": "text",
-    "html": "スプレッドシート/ログ &amp; リファレンス",
+    "html": "4コママンガの進行表",
     "link": null
    },
    {
     "type": "sheet",
-    "key": "flow-library"
+    "key": "hakobu-progress",
+    "height": 640
    }
   ]
  },
diff --git a/tools/fetch_series_docs.py b/tools/fetch_series_docs.py
index cb3df22..a5904f2 100644
--- a/tools/fetch_series_docs.py
+++ b/tools/fetch_series_docs.py
@@ -6,6 +6,7 @@
     python3 tools/fetch_series_docs.py
 - 取ってくるのは「ウェブに公開」した版（/pub・/pubhtml）。ログインはいらない
 - 表は CSV で取る。ドキュメントは公開版の HTML から、見出し・段落・箇条書き・表・太字・リンクだけを残す
+- デザインノートは Google から写さない（サイトの値が正。src/data/design_note.json と src/lib/sheets.ts）
 - 載せる場所は src/data/static.json の {"type": "sheet" | "doc", "key": ...} のブロック
 """
 import csv, io, json, re, sys, urllib.request
@@ -19,7 +20,6 @@ DOC = 'https://docs.google.com/document/d/e/{id}/pub?embedded=true'
 SHEETS = {
     # key: 公開版の id（2PACX-...）。タブは公開版に出ている順にすべて取る
     'hakobu-progress': '2PACX-1vQnqeo6YmdjAz9VQiH8-PYR4OzF9RdlgEOBe-SMtNjYcwdeHkkw2gNTOnLw9jSHBcWmIT3gaxnYnTH6',
-    'hakobu-design-note': '2PACX-1vThIVjUIwNFufI1_XPHkqj5Elkz1SL6gx9Dig_UTk-On1SUYWMWu9Yra2gLgk8tMo_5kFByxoUfZ7wo',
     'flow-library': '2PACX-1vRpLxXW9hSt-ediJC6AUIt8peUUbRATWB05SL7fdj14ygbsdQM1Hi9LEondS7phSu43Fv1A5MvGwDCT',
 }
 DOCS = {
