ハコブくんの資料を AI が読めるページに ― Google の埋め込みを表と本文へ

pixelstomotors.com の薬剤搬送ロボットハコブくんのページ（/series1）で、Google スプレッドシートと Google ドキュメントの埋め込み5つをサイトの表と本文に置き換えたところ、ページの HTML から読める資料の欄の文字は275字から77,424字になりました。 埋め込み（iframe）のままだと、資料の中身は Google のページの側にあり、こちらのページの HTML には見出しの数語しか入っていませんでした。

置き換えて、次のことが変わりました。

• AI と検索エンジンが、4コママンガの進行表（182行）・要件定義書2本・フロー図の部品の一覧を、このページの文字として読める。サイトでは AI に読まれた回数を毎日数えていて（LOG451・LOG453）、読まれる中身がページに入っていることが、その前提になる
• 読む人のブラウザは、Google への読み込み（14件・399KB）をしなくなった。表はサイトの文字と線でそろい、見出しの行を固定したまま枠の中でスクロールする
• デザインノートは、2025年12月に Google で作った一般論のメモから、このサイトで実際に使っている色・文字・形・部品・並びの値に替えた。色と書体の値は、サイトのコードからビルドのたびに読むので、書き写した値がずれることがない
• 時間：最初の依頼（09:33）から、3回目の変更を公開するまで（09:51）が18分。代わりに、Google 側を直したときは、写し直すコマンドを1回動かす手間が増えた（自動では追いかけない）

始まりは、ハコブくんのページの「4コママンガ保管庫」（Figma の埋め込み）を外したいという依頼でした。外したあと、同じページの残りの埋め込みを見ると、進捗管理・デザインノート・ログ & リファレンスの3つが Google スプレッドシート、要件定義書の2つが Google ドキュメントで、どれも Google の「ウェブに公開」した版を iframe で枠ごと借りて見せていました。見た目は Google の表のままで、下に Google のタブの帯が出て、文字の大きさも線もサイトとそろっていません。エイイチの指示は次の一言でした。

同じページ内の埋め込みデータをサイトに直製掲載するように変更したい

そこで、公開版の中身を取ってきてサイトのデータに写す道具を作り、サイトの表と本文として描くようにしました。続けて、デザインノートの中身をサイトの実際の値に替え、資料の見出しを「スプレッドシート/進捗管理」のような道具の名前から中身の名前に変えています。Figma の UI デザインのボードと FigJam のフロー図の2つは、拡大して見るボードなので、エイイチの判断で埋め込みのまま残しました。

作業ログ ― ハコブくんのページから、4コママンガ保管庫の埋め込みを外す

外したのは static.json の2ブロック（見出しと Figma の iframe）

シリーズのページの上にある資料は、p2m-site の src/data/static.json に、見出し（text）と埋め込み（iframe・embed）のブロックとして並んでいます。保管庫は、見出し「Figma/薬剤搬送ロボットハコブくん4コママンガ保管庫」と、Figma のページ（node-id=1791-107604）を幅1280px・高さ1280pxで埋め込む iframe の2つでした。この2つを消し、ビルドしたページに「4コママンガ保管庫」の文字がないこと、前後の見出しが残っていることを確かめて公開しました（09:39）。Figma のマンガのデータそのものには手を入れていません。

static.json の差分（保管庫を外した commit 3fd5ee1）

diff --git a/src/data/static.json b/src/data/static.json
index d6f38c0..fa5b997 100644
--- a/src/data/static.json
+++ b/src/data/static.json
@@ -16,16 +16,6 @@
     "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": "Figma/薬剤搬送ロボットハコブくん4コママンガ保管庫",
-    "link": null
-   },
-   {
-    "type": "iframe",
-    "html": "<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"1280\" 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=1791-107604&embed-host=share\" allowfullscreen></iframe>",
-    "height": 1280
-   },
    {
     "type": "text",
     "html": "スプレッドシート/進捗管理",

ビルドして、保管庫の文字が消えたことを確かめたコマンドと出力

$ npm ci --silent; npm run build 2>&1 | tail -5; f=$(ls dist/series1/index.html 2>/dev/null || ls dist/series1.html); grep -c "4コママンガ保管庫" $f; grep -o "UIデザイン・イメージボード\|スプレッドシート/進捗管理" $f
09:39:34 ✓ Completed in 11.17s.

09:39:34 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`
09:39:34 [build] 811 page(s) built in 29.05s
09:39:34 [build] Complete!
0
UIデザイン・イメージボード
スプレッドシート/進捗管理

作業ログ ― Google の埋め込みを、サイトの表と本文に置き換える

iframe と、Google の「ウェブに公開」

iframe は、ページの中に別のページを枠ごとはめ込む仕組みです。枠の中に見えている文字は、はめ込んだ先のページ（ここでは docs.google.com）のもので、こちらのページの HTML には入りません。

Google スプレッドシートと Google ドキュメントには、ウェブに公開 という機能があり、ログインしなくても見られる版（/pubhtml・/pub で終わる住所）を作れます。ハコブくんのページは、この公開版を iframe で埋め込んでいました。

このプロジェクトでは、公開版を「読むだけ」に使い、取ってきた中身をサイトの側で描きます。Google 側は書き換えません。

ハコブくんのページの埋め込みは8つで、Google が5つだった

保管庫を外したあとの、/series1 の資料のブロックの一覧です。iframe は Figma と Google スプレッドシート（進捗管理）を直接、embed は、サイトの public/embeds/ に置いた小さな HTML（その中で Google を iframe で埋め込んでいる）を指しています。

$ python3 -c "import json;d=json.load(open('src/data/static.json')) ..."
0 text None Drug Delivery Robot | 薬剤搬送ロボットハコブくん
1 text None Figma/UIデザイン・イメージボード
2 iframe 800 <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>
3 text None スプレッドシート/進捗管理
4 iframe 640 <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQnqeo6YmdjAz9VQiH8-PYR4OzF9RdlgEOBe-SMtNjYcwdeHkkw2gNTOnLw9jSHBcWmIT3gaxnYnTH6/pubhtml?widget=true&amp;headers=false"    width="100%"    height="640px"    frameborder="0">   </iframe>
5 text None スプレッドシート/デザインノート
6 embed 480 <div class="embed"><iframe src="/embeds/series1-1.html" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation" loading="lazy" title="図解" data-embed allowfullscreen></iframe></div>
7 text None ドキュメント/要件定義書
8 embed None <div class="embed"><iframe src="/embeds/series1-2.html" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation" loading="lazy" title="図解" data-embed allowfullscreen></iframe></div>
9 embed None <div class="embed"><iframe src="/embeds/series1-3.html" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation" loading="lazy" title="図解" data-embed allowfullscreen></iframe></div>
10 text None FigJam/フロー図
11 iframe 800 <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>
12 text None スプレッドシート/ログ &amp; リファレンス
13 embed None <div class="embed"><iframe src="/embeds/series4-1.html" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation" loading="lazy" title="図解" data-embed allowfullscreen></iframe></div>
['series1', 'series2', 'series3', 'series4', 'series5', 'series6', 'series7']

public/embeds/ の4つの中身は、どれも Google の公開版を iframe で読むだけの包みでした（高さを親のページに伝える短いスクリプト付き）。series4-1.html は /series4 でも使っているので、ファイルは消さずに残しています。

公開版の中身は、作業環境から取れた

作業環境（クラウド）から Google の公開版に届くかを先に確かめました。届かなければ、Mac で取ってくる手順に変える必要があったためです。結果は 200（届いた）でした。表の中身は、公開版の HTML ではなく、タブごとに CSV で取ります。HTML はスクリプトで組み立てられていて、表（<table>）が入っていなかったためです。

$ curl -sS -o /dev/null -w "%{http_code}\n" "https://docs.google.com/spreadsheets/d/e/2PACX-1vQnqeo6YmdjAz9VQiH8-PYR4OzF9RdlgEOBe-SMtNjYcwdeHkkw2gNTOnLw9jSHBcWmIT3gaxnYnTH6/pubhtml"
200

== prog tables 0 rows 0
[('4コママンガプロット', 'https:\\/\\/docs.google.com\\/spreadsheets\\/d\\/e\\/2PACX-1vQnqeo6YmdjAz9VQiH8-PYR4OzF9RdlgEOBe-SMtNjYcwdeHkkw2gNTOnLw9jSHBcWmIT3gaxnYnTH6\\/pubhtml\\/sheet?headers\\x3dfalse&gid=2096872720', '2096872720')]
== note tables 0 rows 0
[('Gemini-光のプロンプト集', '…gid=327170320', '327170320'), ('Figma-スタイル', '…gid=519422369', '519422369'), ('Figma-カラー\\/バリアブルベーシックリスト', '…gid=595743752', '595743752'), ('Figma-カラー\\/バリアブル運用', '…gid=1454063175', '1454063175'), ('Figma-カラー\\/機能', '…gid=0', '0')]
== log tables 0 rows 0
[('FigJam-ライブラリ部品', '…gid=0', '0')]

（上の2つ目の出力は、長い住所の繰り返しを「…」で縮めています。タブの名前と gid は出力のままです。）

タブごとに CSV を取ると、行と列の数は次のとおりでした。

== prog 183 rows x 10 cols | imgs 0 | bg colors 4
   ['No.', '対応進捗', 'タイトル', 'テーマ', '登場人物', '1コマ目（起）', '2コマ目（承）', '3コマ目（転）']
   ['1', '完了', 'チョコレート差し入れ', 'ロボットが提供する機能以上の「癒やし」の効果。', '夜勤中の疲れた看護師、ハコブくん（ロボット）', '忙しい夜勤の合間、必要な薬剤を運んできたロボットが到着。看護師が操作する。', 'ロボットの下部にある収納トレイが開き、必要な薬剤を取り出す。看護師の表情はまだ業', '薬剤ケースの下に、先輩からの小さなメモ用紙と、個包装のチョコレートが隠れているの']
   ['2', '完了', '言葉なきコミュニケーション', '緊迫した現場での、非言語的な状況伝達デザインの重要性。', 'ベテラン看護師（超多忙）、新人医師（焦っている）、ハコブくん', '救急搬送が重なり、殺気立つナースステーション。新人医師が「あの薬、まだですか！？', 'その背後からハコブくんが到着。しかし、いつもの「到着しました」という音声アナウン', 'その代わり、顔ディスプレイの色を「緊急を示す赤」ではなく、「落ち着きを促す深い青']
   ['3', '完了', '「最短ルート」の罠', 'エンジニアリング的な効率性と、人間的な空間認識のズレ。', '患者（松葉杖でリハビリ中）、ハコブくん', '広い廊下で、患者が一生懸命松葉杖で歩行訓練をしている。', 'ハコブくんが向こうからやってくる。システム上の「最短ルート」は、患者のすぐ横をす', 'ハコブくんは減速せず、計算通り患者のギリギリ横を「シュンッ」と通過する。患者、驚']
== n1 7 rows x 3 cols | imgs 0 | bg colors 4
   ['原則 (Principle)', '指示の内容 (Instruction)', '得られる効果 (Effect)']
   ['表面下散乱 (SSS)', '光が表面で反射するだけでなく、素材（肌・絹・石材）の数ミリ内側に浸透し、内部で拡', 'デジタル特有の硬さを排除し、有機的な「生命感」と内側から溢れるような「色気」を宿']
   ['明暗法と半影の制御', '光と影が交わる境界線（半影）に注目し、その階調をベルベットのように滑らかにするか', '画面全体の「情緒」を支配する。柔らかい階調はエレガンスを、鋭い対比はドラマチック']
   ['鏡面反射の張力', 'ハイライト（鏡面反射）を広範囲に拡散させず、特定の点に凝縮させる。また、反射の強', '物体の「硬度」や「品質」を定義し、ハイブランドのプロダクトのような、研ぎ澄まされ']
== n2 5 rows x 2 cols | imgs 0 | bg colors 4
   ['項目', 'スタイルで管理すべき理由']
   ['テキスト (Text)', 'フォント、サイズ、行間などを一括管理するため。※バリアブルでも数値（サイズ等）は']
   ['色 (Color)', 'グラデーション（線形・放射状など）、画像・動画の塗り、複数の色を重ねるマルチフィ']
   ['エフェクト (Effect)', 'ドロップシャドウやレイヤーぼかしは、スタイルでしか保存できません。']
== n3 33 rows x 3 cols | imgs 0 | bg colors 4
   ['Text（文字・アイコン色）', '', '']
   ['バリアブル名', '役割・用途', 'Primitive参照例 (Light)']
   ['Text / Primary', '主色。見出し、本文など最も重要な情報。', 'Neutral/900 (黒に近い)']
   ['Text / Secondary', '副色。補足説明、メタデータ、ラベル。', 'Neutral/600 (濃いグレー)']
== n4 4 rows x 5 cols | imgs 0 | bg colors 3
   ['階層', '種類', '意味', '命名例', '役割']
   ['Lv.1', 'Primitive', '素材', 'Blue/500', '色そのものの定義。デザインには直接使わない（推奨）。']
   ['Lv.2', 'Semantic', '意味', 'Button/Primary', '「どこで使うか」の定義。Primitiveを参照する。']
   ['(Lv.3)', '(Component)', '(特定部品)', 'Btn-Submit-Bg', '※大規模な場合のみ使用。特定コンポーネント専用の色。']
== n5 6 rows x 3 cols | imgs 0 | bg colors 4
   ['機能', 'バリアブル (Variables)', 'スタイル (Styles)']
   ['主な用途', '単色（Solid Color）、トークン管理', 'グラデーション、画像、エフェクト']
   ['テーマ切り替え', '◎ モード機能で自動切り替え可能', '△ 手動での切り替えが必要']
   ['参照（エイリアス）', '◎ 他のバリアブルを参照可能', '× 他のスタイルを参照不可']
== log 11 rows x 5 cols | imgs 0 | bg colors 4
   ['No', '部品名 (英語/日本語)', '役割・定義', '形状 / 指定色', 'ルール・記載例']
   ['1', 'Start / 開始', 'フローの起点。仕様の開始地点を固定する。', '小さな丸 / グレー or ブルー', '1フローにつき1つのみ配置。']
   ['2', 'State / Idle / 通常', 'UIや機体が安定しており、待機している状態。', '角丸四角 / 白 or 薄グレー', 'ほぼ全てのフローの基準点となる。']
   ['3', 'Command / ユーザー操作', '人が意図的に起こす操作。UIの責務を明確化。', '四角 / 青', '例：「開始ボタンを押す」「停止を指示」']

（各セルは、確かめのために先頭40字で切って表示しています。写したデータには全文が入っています。）

画像の入ったセルはありませんでした。背景の色は3〜4種類あるだけで、色に意味を持たせた表ではなかったので、写すのは文字だけにしました。ドキュメントのほうは、公開版の HTML の本文（doc-content）に、見出し・段落・箇条書き・表が入っていて、太字は c17 のような番号の付いた CSS の決まり（font-weight:700）で付いていました。

写す道具 tools/fetch_series_docs.py（全文）

表はタブごとに CSV で取り、後ろの空の行と列を落とします。ドキュメントは本文から、見出し・段落・箇条書き（何段目の入れ子か）・表・太字・斜体・リンクだけを残し、Google の色・字の大きさ・余白の指定は捨てます。見出しは、ページの見出し（h1・h2）とラベルの下に入るので3段下げ、文書のタイトル（20pt の段落）は h3 にします。Google の転送の住所（google.com/url?q=）になっているリンクは、元の住所に戻します。

下の全文は、デザインノートを Google から写すのをやめたあと（3回目の変更のあと）の版です。最初の版との差分は、後ろの「デザインノート」の節に載せています。

#!/usr/bin/env python3
"""シリーズのページに埋め込んでいた Google スプレッドシート・ドキュメントの中身を取ってきて、
サイトに直接載せるためのデータ（src/data/series_docs.json）に書き出す。

- 元は Google 側。サイトは書き出した時点の写しを載せる。Google 側を直したら、これを動かして push する
    python3 tools/fetch_series_docs.py
- 取ってくるのは「ウェブに公開」した版（/pub・/pubhtml）。ログインはいらない
- 表は CSV で取る。ドキュメントは公開版の HTML から、見出し・段落・箇条書き・表・太字・リンクだけを残す

fetch_series_docs.py を動かした出力（最初の版・デザインノートを含む）

$ python3 tools/fetch_series_docs.py
sheet hakobu-progress [('4コママンガプロット', 183)]
sheet hakobu-design-note [('Gemini-光のプロンプト集', 7), ('Figma-スタイル', 5), ('Figma-カラー/バリアブルベーシックリスト', 33), ('Figma-カラー/バリアブル運用', 4), ('Figma-カラー/機能', 6)]
sheet flow-library [('FigJam-ライブラリ部品', 11)]
doc hakobu-requirements 12795 chars
doc tsukamu-requirements 1381 chars
-> src/data/series_docs.json
-rw-r--r-- 1 root root 263132 Nov  7 09:43 src/data/series_docs.json
{'hakobu-progress': '薬剤搬送ロボットハコブくん 進捗管理表 2026/10/31', 'hakobu-design-note': 'ナレッジ 2025/12/25', 'flow-library': 'ロボティクスデザイン実務フロー可視化 2026/01/18'}

最初の版では、ハコブくんの要件定義書のタイトル（「薬剤搬送ロボット ハコブくん 要件定義書」）が、見出しではなく太字の段落になりました。字の大きさ（20pt）が段落ではなく中の span の CSS に付いていたためで、span の大きさも見るように直しています（上の全文の「文書のタイトル（大きな文字の段落）は見出しにする」の所）。

表を描く SeriesSheet.astro（全文）

サイトは Astro で作っていて、部品（.astro）がビルドのときに HTML になります。表の部品は、1行目を見出しの行にして、枠の中でスクロールしても見出しの行が上に残るようにしました（position: sticky）。タブが2つ以上ある表は、表の上にボタンを並べて切り替えます。中身が6字以下の列（番号・「完了」など）は折り返さず、1つ目のセルにだけ文字がある行は、表の中の小見出しとして灰色の行にします。線（#d2d2d2）と見出しの行（#e9e9e9）の色は、記事の中の表と同じにしました。

---
// シリーズのページに、Google スプレッドシートの中身を表として直接載せる（元は iframe の埋め込み）。
// 中身は src/lib/sheets.ts（Google の写し・サイトのデザインの値）。タブが2つ以上あれば、表の上に切り替えを出す
import { getSheet } from '../lib/sheets';
interface Props { id: string; height?: number }
const { id, height } = Astro.props;
const sheet = getSheet(id);
// 色の値（#d2d2d2 など）には、その色の小さな四角を添える

本文を描く SeriesDoc.astro（全文）

---
// シリーズのページに、Google ドキュメントの中身を直接載せる（元は iframe の埋め込み）。
// 中身は tools/fetch_series_docs.py が書き出した src/data/series_docs.json（見出し・段落・箇条書き・表・太字・リンクだけ）
import docs from '../data/series_docs.json';
interface Props { id: string; height?: number }
const { id, height } = Astro.props;
const doc = (docs.docs as Record<string, { html: string }>)[id];
---
{doc && <div class="dc" style={height ? `max-height:${height}px` : undefined} set:html={doc.html} />}
<style>
  .dc { overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d2d2d2; padding: 32px 40px; background: #fff; }
  .dc + .dc { margin-top: 24px; }
  .dc > :global(*) { max-width: 760px; }
  .dc :global(h3) { margin: 32px 0 12px; font: 600 22px/32px var(--sans); color: var(--ink); }
  .dc :global(h3:first-child) { margin-top: 0; }
  .dc :global(h4) { margin: 28px 0 8px; font: 600 18px/28px var(--sans); color: var(--ink); }
  .dc :global(h5), .dc :global(h6) { margin: 20px 0 6px; font: 600 16px/26px var(--sans); color: var(--ink); }
  .dc :global(p) { margin: 8px 0; font: 400 15px/27px var(--sans); color: var(--ink); }
  .dc :global(ul), .dc :global(ol) { margin: 8px 0; padding-left: 1.5em; font: 400 15px/27px var(--sans); color: var(--ink); }
  .dc :global(ul.lv1), .dc :global(ol.lv1) { padding-left: 3em; }
  .dc :global(ul.lv2), .dc :global(ol.lv2) { padding-left: 4.5em; }
  .dc :global(ul.lv3), .dc :global(ol.lv3), .dc :global(ul.lv4), .dc :global(ol.lv4) { padding-left: 6em; }
  .dc :global(li) { margin: 2px 0; }
  .dc :global(a) { text-decoration: underline; text-underline-offset: 3px; }
  .dc :global(hr) { border: 0; border-top: 1px solid #d2d2d2; margin: 16px 0; }
  .dc :global(.table) { margin: 12px 0; overflow-x: auto; max-width: none; }
  .dc :global(table) { border-collapse: collapse; min-width: 100%; }
  .dc :global(th), .dc :global(td) { border: 1px solid #d2d2d2; vertical-align: top; text-align: left; padding: 8px 12px; font: 400 14px/22px var(--sans); }
  .dc :global(th) { background: #e9e9e9; font-weight: 600; }
  @media (max-width: 599px) { .dc { padding: 20px 16px; } }
</style>

シリーズのページと static.json の差分（commit 5de80f5）

[series].astro は、ブロックの種類に sheet と doc を足しただけです。static.json は、Google の5つの埋め込みを {"type": "sheet" | "doc", "key": …} に置き換えています。height は、前の埋め込みの高さをそのまま枠の高さにしました。

diff --git a/README.md b/README.md
index 15667e3..5cc7e96 100644
--- a/README.md
+++ b/README.md
@@ -157,3 +157,9 @@ Astro は記事の中身が変わらないと、前の変換結果（`node_modul
 - 同じ記事へのリンクは本文の最初の1か所だけ。書き手が手でリンクを付けていれば、それを1か所目とみなして足さない
 - 自分自身・存在しない番号・リンク／コード／見出し／図の説明の中・ファイル名（`LOG339_01_….png`・`LOG346.md`）・`Log#5` のようなシリーズの中の番号はリンクにしない
 - 英語の記事では、英語版（`LOG201EN`）があればそちらへつなぐ。中のページなので同じタブで移る

ねらい・変わったこと・見込める効果（数字は次の節で測った値）:

• ねらい：資料の中身を、Google のページではなく、このページの文字として置く
• 変わったこと：資料の欄の文字が 275字から77,424字に、表の行（tr）が0から327に、Google への読み込みが14件・399KBから0件になった
• 見込める効果：AI がこのページを読んだときに、ハコブくんの要件や4コマの筋を答えに使える。実際に読まれたかは、サイトの計測（AI の依頼読みの数）で確かめる

表とドキュメントの見た目を、PC とスマホの幅で確かめた

ビルドしたページを Playwright（ブラウザを動かす道具）で、幅1440px と390px で開いて、表とドキュメントを1つずつ画像にして見ました。表はスマホでも横にスクロールして読め、要件定義書は1列に流れて読めました。確かめで撮った画像は記事には載せていません（上と下の画像は、公開後のページを撮り直したものです）。

作業ログ ― 置き換える前と後を、同じ条件で測った

測り方：前の commit を別の場所でビルドし、同じ手順で開く

前の版（保管庫を外す前の commit 57f2226）を git worktree で別のフォルダに取り出してビルドし、前と後の2つのページを同じ手元のサーバーで出しました。ブラウザで開いて、30,000px 下まで送り（遅延読み込みも走らせるため）、6秒待ってから、iframe の数と、読み込んだ先ごとの件数と大きさを数えました。

$ git worktree add -f /tmp/claude-0/old 57f2226 -q; cd /tmp/claude-0/old && ln -s /home/claude/p2m-site/node_modules node_modules && npm run build 2>&1 | grep -E "Complete!|rror"; ls dist/series1.html
10:00:34 [build] Complete!
dist/series1.html

測るスクリプト m.cjs（全文）

const { chromium } = require('playwright');
(async () => {
  const b = await chromium.launch();
  for (const [name, port] of [['before', 4401], ['after', 4402]]) {
    for (const block of [false]) {
      const ctx = await b.newContext({ viewport: { width: 1440, height: 900 } });
      const p = await ctx.newPage();
      const reqs = []; let bytes = {};
      ctx.on('requestfinished', async (r) => { try { const s = await r.sizes(); const h = new URL(r.url()).hostname; reqs.push(h); bytes[h] = (bytes[h]||0) + s.responseBodySize + s.responseHeadersSize; } catch {} });
      const t0 = Date.now();
      await p.goto(`http://localhost:${port}/series1.html`, { waitUntil: 'load', timeout: 90000 });
      const tLoad = Date.now() - t0;
      // 全部の資料まで下へ送って、遅延読み込みも走らせる
      for (let y = 0; y < 30000; y += 800) { await p.mouse.wheel(0, 800); await p.waitForTimeout(120); }
      await p.waitForTimeout(6000);
      const frames = await p.$$eval('iframe', f => f.map(x => x.src).filter(s => !s.includes('/thumbs/')));
      const by = {}; reqs.forEach(h => by[h] = (by[h]||0)+1);
      const tot = Object.values(bytes).reduce((a,c)=>a+c,0);
      console.log(JSON.stringify({ name, loadMs: tLoad, iframes: frames.length, iframeHosts: frames.map(s=>new URL(s, 'http://x').hostname), requests: reqs.length, totalKB: Math.round(tot/1024), byHost: Object.fromEntries(Object.entries(by).map(([h,n])=>[h, n+' req / '+Math.round((bytes[h]||0)/1024)+' KB'])) }, null, 1));
      await ctx.close();
    }
  }
  await b.close();
})();

測った結果（全文）

{
 "name": "before",
 "loadMs": 4017,
 "iframes": 8,
 "iframeHosts": [
  "embed.figma.com",
  "embed.figma.com",
  "docs.google.com",
  "localhost",
  "localhost",
  "localhost",
  "embed.figma.com",
  "localhost"
 ],
 "requests": 183,
 "totalKB": 5417,
 "byHost": {
  "localhost": "28 req / 229 KB",
  "fonts.googleapis.com": "14 req / 430 KB",
  "embed.figma.com": "3 req / 12 KB",
  "fonts.gstatic.com": "87 req / 3670 KB",
  "docs.google.com": "14 req / 399 KB",
  "www.figma.com": "28 req / 663 KB",
  "csp.withgoogle.com": "3 req / 0 KB",
  "errors.figma.com": "3 req / 3 KB",
  "themes.googleusercontent.com": "1 req / 1 KB",
  "ssl.gstatic.com": "2 req / 9 KB"
 }
}
{
 "name": "after",
 "loadMs": 3940,
 "iframes": 2,
 "iframeHosts": [
  "embed.figma.com",
  "embed.figma.com"
 ],
 "requests": 154,
 "totalKB": 4332,
 "byHost": {
  "localhost": "25 req / 535 KB",
  "fonts.googleapis.com": "11 req / 427 KB",
  "embed.figma.com": "2 req / 8 KB",
  "fonts.gstatic.com": "95 req / 2791 KB",
  "www.figma.com": "19 req / 569 KB",
  "errors.figma.com": "2 req / 2 KB"
 }
}

資料の欄（ページ上部の s-hero の中）の文字の数は、HTML からスクリプトと CSS を除き、空白を抜いて数えました。

$ python3 -I -c "… BeautifulSoup(s).select_one('section.s-hero') …"
before html KB 74 資料欄の文字 275 tables 0 rows 0
after html KB 382 資料欄の文字 77424 tables 20 rows 327

前の版の測り方は、3回目の変更（デザインノートの置き換え）の前ではなく、この日の作業を始める前の版との比べです。後の版は3回目の変更まで入った版です。

HTML は74KBから382KBに増えました。 中身をページに入れたぶんで、その代わりに Google の読み込み（399KB）がなくなっています。読み込み全体の大きさ（5,417KB と 4,332KB）には、Google のフォント（fonts.gstatic.com）の読み込みが大きく入っていて、回ごとに件数が揺れたので、比べには使っていません。表示までの時間（4,017ms と 3,940ms）も、手元のサーバーで1回ずつ測っただけなので、差とは言えません。

作業ログ ― デザインノートを、このサイトの実際の値に置き換える

エイイチ「このセクションを今のサイトの状況に合わせて整理することはできますか？」

置き換えたデザインノートの画面写真と一緒に来た依頼です。中身は「ナレッジ 2025/12/25」という Google スプレッドシートで、Gemini で画像を作るときの光のプロンプト集と、Figma の色やスタイルの一般的な決め方の4タブでした。このサイトで実際に使っている色や文字の値は、どこにも書かれていませんでした。

「整理」の中身が3通りに読めたので、エイイチに選んでもらいました。答えは、3つとも、でした。

サイトのコードから、色・文字・角丸の値を拾った

サイト全体の色と書体は、src/layouts/Base.astro の :root に CSS のカスタムプロパティ（--ink のような名前の付いた値）として置いてあります。そのほかの色・字の大きさ・角丸は、コードの中で使われている数を数えて、よく使われているものと、使う場所を拾いました。

$ grep -rhoE "#[0-9a-fA-F]{6}\b" src/pages/*.astro src/components/*.astro src/layouts/*.astro | sort | uniq -c | sort -rn | head -15
     19 #121418
     18 #1a3fcc
     13 #242424
     10 #f2600c
      9 #6b6f78
      7 #f0f0f0
      7 #eceef1
      7 #c9d6ff
      6 #3a3a3a
      5 #f7f7f7
      5 #d2d2d2
      5 #cfd4de
      5 #c8ccd4
      5 #b9bec7
      5 #0b0c0e
$ grep -rhoE "border-radius: ?[0-9]+px" src | sort | uniq -c | sort -rn | head -5
    103 border-radius: 4px
     60 border-radius: 8px
     10 border-radius: 12px
      9 border-radius:4px
      9 border-radius: 16px

== 1a3fcc
src/components/OneYearBanner.astro
src/content/records/LOG381.md
src/data/one-year/body.html
src/pages/one-year.astro
== f2600c
src/components/GuideBanner.astro
src/components/GuideCards.astro
src/components/ServingBanner.astro
src/content/records/LOG369.md
src/content/records/LOG399.md
== 121418
src/components/ThinkingBanner.astro
src/components/GuideBanner.astro
src/components/GuideCards.astro
src/components/ServingBanner.astro
src/components/OneYearBanner.astro
== 6b6f78
src/data/one-year/body.html
src/pages/one-year.astro

     10 font: 400 13px/20px var(--sans)
      9 font: 400 12px/18px var(--sans)
      6 font: 600 14px/22px var(--sans)
      4 font: 600 24px/36px var(--sans)
      4 font: 400 14px/22px var(--sans)
      3 font: 700 12px/18px var(--sans)
      3 font: 600 18px/28px var(--sans)
      3 font: 600 16px/24px var(--sans)
      3 font: 600 14px/20px var(--sans)
      3 font: 400 11px/16px var(--sans)
      2 font: 600 16px/26px var(--sans)
      2 font: 500 20px/30px var(--sans)
      2 font: 500 16px/24px var(--sans)
      2 font: 500 14px/22px var(--sans)

青（#1a3fcc）と灰（#6b6f78）は、1年の記録の LP（/one-year）だけで使っている色なので、サイト全体の値には入れませんでした。オレンジ（#f2600c）は、トップの案内と記事の中のバナーの、大きな数字と押すところにだけ使っている差し色です。

デザインノートの中身 design_note.json（全文）

タブは、色・文字・形・部品・並び・決まり、の6つにしました。決まりのタブには、デザインの進め方の決まり（色を増やさない・細い線より面・ボタンは1つ など）の要点を入れています。{tokens:color} と {tokens:font} の行は、書き写さずにビルドのときに Base.astro から読みます。

{
 "title": "pixelstomotors.com で使っているデザインの値",
 "note": "サイトのコードが正。{tokens:color}・{tokens:font} の行は、ビルドのときに src/layouts/Base.astro の :root から読む（値をここに書き写さない）。それ以外の行は、コードを変えたらここも直す",
 "tokenNotes": {
  "ink": "本文・見出しの文字",
  "ink-2": "説明文・補足の文字",
  "ink-3": "目立たせない文字（日付・アイコン）",
  "line": "区切りの面・メニューを押したときの面",

値を組み立てる src/lib/sheets.ts（全文）

Base.astro を文字のまま読み込み（?raw）、:root の中の --名前: 値; を拾います。# で始まる値は色のタブに、それ以外（書体）は文字のタブに入ります。色の値のセルには、その色の小さな四角を添えるようにしました（SeriesSheet.astro の swatch）。

// シリーズのページに載せる表の中身を返す。
// - Google スプレッドシートの写し（src/data/series_docs.json。tools/fetch_series_docs.py で作る）
// - サイトのデザインの値（src/data/design_note.json。サイト側が正）。色と書体の行は Base.astro の :root から読む
import docs from '../data/series_docs.json';
import note from '../data/design_note.json';
import base from '../layouts/Base.astro?raw';

export type Sheet = { title: string; tabs: { name: string; rows: string[][] }[] };

function tokens() {
  const root = base.match(/:root\s*\{([^}]*)\}/)?.[1] || '';
  return [...root.matchAll(/--([\w-]+):\s*([^;]+);/g)].map((m) => [m[1], m[2].trim()]);
}

function designNote(): Sheet {
  const t = tokens();
  const notes = note.tokenNotes as Record<string, string>;
  const expand = (kind: string) => t
    .filter(([, v]) => (kind === 'color') === v.startsWith('#'))
    .map(([k, v]) => [`--${k}`, v, notes[k] || '']);
  return {
    title: note.title,
    tabs: note.tabs.map((tab) => {
      const width = tab.rows[0].length;
      const rows = tab.rows.flatMap((r) => {
        const m = r[0].match(/^\{tokens:(\w+)\}$/);
        return m ? expand(m[1]) : [r];
      });
      return { name: tab.name, rows: rows.map((r) => [...r, ...Array(width).fill('')].slice(0, width)) };
    }),
  };
}

export function getSheet(key: string): Sheet | undefined {
  if (key === 'site-design') return designNote();
  return (docs.sheets as Record<string, Sheet>)[key];
}

ねらい・変わったこと・見込める効果:

• ねらい：デザインノートを、このサイトを直すときに実際に見る値の表にする
• 変わったこと：Figma の一般論と光のプロンプト集の5タブが、サイトの値の6タブになった。色7つと書体2つは、コードから毎回読む
• 見込める効果：色や書体を変えたときに、ノートだけが古い値のまま残ることがなくなる（見込み）。角丸・字の大きさ・余白などの手で書いた行は、コードを変えたら手で直す必要が残る

fetch_series_docs.py・SeriesSheet.astro・static.json・README の差分（commit a8f8cdd）

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 する。自動では追いかけない

作業ログ ― ハコブくんのページの資料の並びと見出しを、中身の名前にした

見出しが「スプレッドシート/進捗管理」のような道具の名前だったのは、Google と Figma を埋め込んでいたころの名残です。中身をサイトに載せた今は、事実と合いません。見出しを中身の名前にし、並びを、ハコブくんが何か（要件定義書）→ どう見えるか（UI）→ どう動くか（フロー図と部品）→ サイトの値 → 4コマの進行、の順にしました。

公開したページから、見出しを順に読み出した結果です。

[
  '要件定義書',
  'UIデザイン・イメージボード（Figma）',
  'フロー図（FigJam）',
  'フロー図の部品',
  'デザインノート',
  '4コママンガの進行表'
]

Figma の UI デザインのボードと FigJam のフロー図の2つは、ページに直接載せるなら画像に書き出すことになり、拡大や移動ができなくなります。エイイチに聞いて、埋め込みのままにしました。

Figma と FigJam の2つは埋め込みのままでOK

作業ログ ― ビルドと公開の記録

3回の commit と時刻

$ git log --format='%h %ad %s' --date=format:'%H:%M:%S' 57f2226..a8f8cdd
a8f8cdd 09:51:19 series1: デザインノートをサイトの実際の値に置き換え、資料の並びと見出しを整理
a029a65 09:45:09 params: unity_rules に standby_queue（待機点を列で使う）と staff_moves_robot.repeat_stop を足す（どちらも既定は切）
5de80f5 09:44:58 series1: Google スプレッドシート・ドキュメントの埋め込みを、ページに直接載せる表と本文に置き換え
3fd5ee1 09:39:42 series1: ハコブくん4コママンガ保管庫（Figma埋め込み）のセクションを削除

a029a65 は、同じ時間に別の作業（サービスロボット導入シミュレーションの値）で入った commit で、この記事の作業ではありません。

2回目の変更のビルドと、Google の埋め込みが消えたことの確かめ

$ npm run build 2>&1 | grep -i "error\|warn\|Complete" | head; f=dist/series1.html; grep -c "<iframe" $f; grep -o "docs.google.com" $f | wc -l; grep -o "唐揚げは何グラム\|ロボットアームツカムくん - 要件定義書\|表面下散乱\|FigJam-ライブラリ部品" $f | sort | uniq -c
09:44:02 [build] ✓ Completed in 1.42s.
09:44:09 [build] ✓ Completed in 6.53s.
09:44:13   ├─ /record/handover-control-code-complete.md (+9ms) 
09:44:18   ├─ /record/handover-control-code-complete.html (+13ms) 
09:44:21 ✓ Completed in 11.30s.
09:44:21 [build] Complete!
1
0
      1 ロボットアームツカムくん - 要件定義書
      1 唐揚げは何グラム
      1 表面下散乱

<iframe の行が1、docs.google.com が0です。iframe の行の数え方は「iframe を含む行の数」で、Figma の2つは同じ行に入っているため1になっています。FigJam-ライブラリ部品はタブが1枚だけなので、タブの名前を出さない作りで、ページに出ないのが正しい動きです。

公開されたページの確かめ

$ curl -sS https://pixelstomotors.com/series1 | grep -o 'data-sheet\|docs.google.com/spreadsheets' | sort | uniq -c
      4 data-sheet

公開後にエイイチが送ってきた画面写真には、まだ前の Google の埋め込みが写っていました。ブラウザに前のページが残っていただけで、公開されているページは置き換わっていました。

Google 側を直したときの手順（README に書いたもの）

ページに載っているのは、写した時点の中身です。Google のスプレッドシートやドキュメントを直したら、p2m-site で次の1行を動かして push します。

python3 tools/fetch_series_docs.py

写し直しは、Claude に「シリーズ1の表を更新して」と頼んでも行います。デザインノートは Google から写さないので、この手順の対象外です。