記事の図解414本を同じ色の決まりに ― 青を見れば主役が分かる

pixelstomotors.com の記事の図解とグラフは、色に役割を決めて（青＝その図の主役、灰＝比べる相手、赤＝悪い、緑＝良い）、字を Inter と Noto Sans にそろえると、どの記事の図でも同じ読み方ができる。サイトにある記事の図解414本と、記事のグラフ画像7枚、配膳ロボットのシミュレーションの報告動画を、この1つの決まりに直した。

色の意味がそろったことで、読む人は図ごとに凡例を読み解かなくても、青を見れば「この図で見てほしいもの」が、赤を見れば「困っている所」が分かるようになった。 変わったことは3つある。

• 図の読み方がそろう：前は、記事を書いた時期によって、黒一色と模様の図、オレンジと青の図、緑と赤の図が混ざっていた。今は414本すべてが同じ字・同じ地の色・同じ役割の色になった
• AI と検索が表の中身を読める：Google スプレッドシートの表を埋め込んでいた28か所のうち27か所を、サイトの中の HTML の表に作り直した。そのうち12か所は元のシートが消えて真っ白になっていたので、過去のチャットに残っていた CSV から中身を戻した（残る1か所は中身が見つからず、断り書きにした）
• 次の図を作る時間が減る見込み：色・字・形の決まりを1つのファイル（STYLE.md と style.py）にまとめたので、新しい図やグラフを作るたびに色を考え直さなくてよい。前に1本あたり何分かかっていたかは測っていないので、これからの記事で確かめる

作業は、朝の約3時間半（最初の図解の公開が 8:33、最後が 12:02）でサイトに出した。そのうち283本は、Claude の作業を9つに分けて同時に動かし、1つのまとまりを15〜18分で仕上げた。

困っていたのは、図ごとに色の意味がばらばらだったことだ。ある図では青が「スタッフ」、別の図では青が「Unity の値」、また別の図では「今の決まり」だった。黒い枠線の太さも図ごとに違い、Google の表は消えても気づかないまま白い箱になっていた。読む人にとっては、図を1本見るたびに、その図だけの約束を覚え直すことになる。

作業ログ ― 報告動画の色を、場面ではなく役割で決める

サービスロボット導入シミュレーションでは、Claude Code が Unity で回した結果を、依頼が終わるたびに短い報告動画にしている（LOG435）。報告動画・パネル付き動画・詰まりの地図（散布図）の3種類があり、それぞれ別のスクリプトで作っていた。

このようなレポート動画のデザインをルール化したい。ルールは他のレポートに合わせたいが、揃っていないことがあれば調べて何が問題か教えてください。

調べると、形（字幕帯・グラフの置き方）はそろっていたが、色がスクリプトごとに違っていた。グラフの Unity の線が黒のものと青のもの、札の「良くなった」が青のものと緑のもの、地図の通れない所が黄色のもの。黄色は Unity の録画でお客さんの色なので、地図で使うと読み違える。

最初は「青はスタッフの色だから、ほかでは使わない」と決めて、グラフの線と地図の待機点から青を外した。見本を見たエイイチから、こう返ってきた。

折れ線やグラフの青やロボットの待機所の薄い青はなぜなくしたの（見えやすかったけど）

「グラフでは Unity、地図では待機点。1つの画面の中では1つの意味だけ」 これはこれだけに決めちゃうと他で使えなくなってしまわない？

場面ごとに色の意味を決めると、新しい種類の図が出るたびに決まりを足すことになる。そこで、色は場面ではなく役割で決めることにした。青は「その画面の主役」で、グラフなら Unity の線、地図なら待機点になる。スタッフが出る画面（Unity の録画）だけは、青をスタッフに使い、主役に青を使わない。

• ねらい：新しい種類の図でも、「何が主役か」を決めれば色が決まるようにする
• 変わったこと：色の値を style.py の1か所に置き、3つのスクリプトはそこから読む。札の色は good・bad・quiet・next の4つだけにし、ほかの名前は止まる
• 見込める効果：報告動画を作るたびに色を選ぶ手間がなくなり、読み手は前の報告と同じ読み方で次の報告を読める（見込み）

字は、サイトと同じ組み合わせにした。日本語は Noto Sans、英数字は Inter。1つの文字列の中で、英数字と半角の記号だけ Inter、かな・漢字・全角の記号は Noto で描く。Pillow は1つの文字列に1つの字しか使えないので、文字列を英数字とそれ以外に分けて描く関数を style.py に作った。

KIOXIA の service_sim/status_videos/tools/STYLE.md（色と字の決まり）

# ServiceSim レポートの色と字（決まり）

報告動画・パネル付き動画・詰まりの地図（散布図）の3つと、サイトの記事の図解（article_rules.md の HTML図解）は、すべてこの色と字と形にそろえる。2026-11-08 エイイチ了承。変えるときはエイイチに確かめてから。
色と字の値は `tools/style.py` にだけ書く。3つのスクリプト（make_video.py・make_panel_video.py・make_jam_map.py）はそこから読み、スクリプトの中で色や字を決めない。

## 字

- 日本語は Noto Sans（Noto Sans CJK JP）、英数字は Inter。サイト pixelstomotors.com と同じ組み合わせ

KIOXIA の service_sim/status_videos/tools/style.py（色と字の値・字を分けて描く関数）

"""ServiceSim のレポート（報告動画・パネル付き動画・詰まりの地図）の色と字。決まりは STYLE.md（2026-11-08 エイイチ了承）。
3つのスクリプトはここから色と字を読む。スクリプトの中で色や字を決めない。変えるときはエイイチに確かめてから。
字：日本語は Noto Sans（Noto Sans CJK JP）、英数字は Inter（サイト pixelstomotors.com と同じ組み合わせ）。
"""
import os

HERE = os.path.dirname(os.path.abspath(__file__))

KIOXIA の service_sim/status_videos/tools/make_jam_map.py（詰まりの地図を決まった形で描く）

#!/usr/bin/env python3
# ServiceSim 詰まりの地図（散布図）を、決まった形で描く。形の決まりは JAM_MAP_FORMAT.md（2026-11-08 エイイチ了承）。
# 形は依頼119 の fig119.py（fig_where_by_type_sb119.png）に固定した。色と字は 2026-11-08 に style.py へ移した。手で別の形を作らない。
#
# 使い方：
#   python3 make_jam_map.py out.png --layout-dir DIR --store p6_large_center \
#     --set "EP.csv|RUN_GLOB|並べる回の名前" --set "EP2.csv|RUN_GLOB2|名前2" \
#     --note "⑧5台・すぐ押す（種0〜9 の 10 回）"

KIOXIA の service_sim/status_videos/tools/JAM_MAP_FORMAT.md（詰まりの地図の形の決まり）

# ServiceSim 詰まりの地図（散布図）の形（決まり）

報告に付ける「待機場所のそばの詰まりの地図」は、すべてこの形にそろえる。2026-11-08 エイイチ了承（依頼119 の fig_where_by_type_sb119.png の見た目を標準にした）。変えるときはエイイチに確かめてから。
作り方：`tools/make_jam_map.py out.png --layout-dir <店の形のフォルダ> --store p6_large_center --set "ep.csv|回のフォルダの glob|並べる回の名前" --set ... --note "⑧5台・すぐ押す（種0〜9 の 10 回）"`
（形はこのスクリプトに固定してある。依頼ごとに fig*.py を写して手で直さない）

- 並べ方：比べる回を横に並べる（1枚 9.5x7 インチ・120dpi。2つなら 19x7）
- 下地：地図（通れる所＝白・狭い道だけ＝薄い灰・通れない＝濃い灰）、卓（薄い灰の枠と番号）、待機点（主役：薄い青の四角に青の破線と「待機点N」）、受け渡し口の前（黒い星）、スタッフの持ち場（灰の小さい三角）
- 見る範囲：待機点の外側から 左2.4・右1.3・下1.95・上0.85 m（⑧では x 16.3〜24.8・y 9.0〜12.6）。別の場所を見るときだけ --view
- 点：30 秒以上のロボット同士の詰まりの始めの位置。BAD の円（半透明・INK の細い縁）、円の大きさ＝詰まりの秒（秒/3・最小 8）。右端の図に「円の大きさ：30・300・900 秒」の見本
- 型D（抜けられなかった行ったり来たり）は INK の × で別に描き、合計に入れない（件数と秒は左下の説明に書く）
- 図の上（太字・13pt）：回の名前 → 待機場所のそばの30秒以上の詰まり：件数・秒（N 回の和）→ 1回あたりの秒 → ロボットの止まりの合計：1回あたりの秒 → 30秒の呼び出し：1回あたりの回数・入店待ち：分
- 「1回あたり」はすべて回の中央値。数字の元は回のフォルダの stops.csv・summary.json と、agg*.py が作る ep_<label>_r5.csv
- 図の下（10pt）：「店・台数・回数：何の図か。1回あたりの数は N 回の中央値」
- 色と字：`tools/STYLE.md`（値は `tools/style.py`）。日本語は Noto Sans、英数字は Inter（2026-11-08。それまでは Hiragino・独自の色だった）

KIOXIA の service_sim/status_videos/tools/make_video.py（報告動画）

"""ServiceSim の報告動画を作る。spec.json（スライドの並び）→ 1920x1080 の mp4。
使い方: python3 make_video.py spec.json out.mp4
スライドの種類: title / chart / rows / steps
"""
import json, sys, subprocess, html, pathlib, tempfile, math, os
from playwright.sync_api import sync_playwright
sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
import style as st   # 色と字は style.py（決まりは STYLE.md）。ここで色を決めない

KIOXIA の service_sim/status_videos/tools/make_panel_video.py（パネル付き動画）

"""ServiceSim の録画に、店の様子のパネル（timeline.csv）を横に付ける。
使い方: python3 make_panel_video.py rec.mp4 frames.csv timeline.csv out.mp4 [--from 秒] [--to 秒] [--speed 倍] [--title 文字]
録画は 1コマ = frames.csv の t_s（店の時刻・秒）。パネルは timeline.csv の t_s ごと（60秒おき）に描き直す。
"""
import csv, sys, argparse, subprocess, tempfile, pathlib, bisect
from PIL import Image, ImageDraw

W, H, PW = 1920, 1080, 560          # 全体・パネルの幅

作業ログ ― 記事の図解131本を、見本を見てから直す

報告動画の決まりができたところで、同じ決まりをサイトの記事の図解（HTML で作った、動く図）にも使うことにした。

現行サイトの記事内に使われているグラフやレポート解説図などデザインルール化で決めた内容で作り直して掲載し直してください。

ここで1つ失敗した。130本を字と色だけ置き換えて、見本を見せる前に公開してしまった。エイイチから「見た目が変わる所、一旦どのような見た目になるのか先に見せてください」と言われ、ここからは見本を2〜3本作って見てもらってから全部に広げる流れに変えた。直す前の130本は、iCloud の site_archive/embeds_before_style_20261108/ に tar でまとめて残してある。

見本を見たエイイチの指摘で、形の決まりが3つ増えた。

周りの枠線いる？角丸とか、色とかも新しいルールに揃えていいんだけど。

https://pixelstomotors.com/one-year このページのグラフの書き方を取り入れることはできますか？（斜線の描き方とか）

角丸と角丸がないのと（例えば線グラフとか）を分けるルールを作れますか？

1. 外側の黒い枠線をやめ、白いカード（角丸8px）を地の灰（#f7f7f7）から浮かせる
2. 比べる相手（前・基準・試算）は、主役と同じ色の細かい斜線（線2px・4px おき）で描く。主役は塗る。1年のページ（/one-year）と同じ書き方
3. 角丸にするのは入れ物（カード・箱は8px）と押すもの（ボタン・札は4px）だけ。棒・帯・線・軸・地図の形は四角のまま。棒の端の位置が値なので、丸めると値が読みにくくなる

作業は2段に分けた。1段目はスクリプトで、どの図にも共通する所（字・地の色・外側のカード・枠のある箱・ボタン・斜線）を置き換える。2段目は1本ずつ中身を読んで、何がその図の主役かを決め、役割の色を入れる。2段目は判断が要るので、決まりの文（recolor_spec.md）を書いて Claude の作業を分け、同時に動かした。

/tmp/claude-0/restyle_embeds.py（字と下地の色の置き換え）

"""記事の図解（public/embeds）を article_rules.md の新しい決まり（2026-11-08）にそろえる。
字：IBM Plex Mono → Inter（英数字）、Noto Sans JP の前に Inter。色：#0d0d0d → #242424、#f5f5f0 → #f7f7f7。
数字と文・作りは変えない。"""
import re, sys, pathlib
files = [l.strip() for l in open(sys.argv[1]) if l.strip()]
root = pathlib.Path('public/embeds')
for name in files:
    p = root / name
    h = p.read_text(encoding='utf-8'); o = h
    # Google Fonts の読み込み
    h = h.replace('family=IBM+Plex+Mono:', 'family=Inter:')
    # CSS / JS の字の名前
    h = re.sub(r"(['\"])IBM Plex Mono\1\s*,\s*(['\"])Noto Sans JP\2", r"\1Inter\1,\2Noto Sans JP\2", h)
    h = re.sub(r"(['\"])IBM Plex Mono\1", r"\1Inter\1", h)
    h = h.replace('IBM Plex Mono', 'Inter')
    h = re.sub(r"(?<![\w,]\s)(?<![\w,])(['\"])Noto Sans JP\1(\s*,\s*sans-serif)", r"\1Inter\1,\1Noto Sans JP\1\2", h)
    h = re.sub(r"(['\"])Inter\1\s*,\s*(['\"])Inter\2", r"\1Inter\1", h)
    # JS の属性で字を1つだけ書いている所（'font-family':'Noto Sans JP'）
    h = re.sub(r"(['\"]font-family['\"]\s*:\s*)(['\"])Noto Sans JP\2", r"\1\2Inter, Noto Sans JP\2", h)
    h = re.sub(r"(font-family=\")Noto Sans JP(\")", r"\1Inter, Noto Sans JP\2", h)
    h = re.sub(r"(['\"]font-family['\"]\s*:\s*)(['\"])Inter\2", r"\1\2Inter, Noto Sans JP\2", h)
    # 色
    h = re.sub(r"#0d0d0d", "#242424", h, flags=re.I)
    h = re.sub(r"#f5f5f0", "#f7f7f7", h, flags=re.I)
    h = re.sub(r"#0d0d0d", "#242424", h, flags=re.I)
    # 数字の桁（前の等幅の代わり）
    if 'tabular-nums' not in h:
        h = h.replace('<style>', '<style>html{font-variant-numeric:tabular-nums}', 1)
    if h != o:
        p.write_text(h, encoding='utf-8')
print('ok', len(files))

/tmp/claude-0/shape_embeds.py（白いカード・角丸・細かい斜線）

"""記事の図解に共通の形を入れる（STYLE.md の「斜線と塗り」「角丸」・article_rules の HTML図解。2026-11-08）。
外側の枠をやめて白いカード、中の箱は灰の面、ボタンは角丸4px、小さい英字ラベルは灰、斜めの斜線は細かく。
色の意味づけ（青・赤・緑）は入れない（1本ずつ別に入れる）。"""
import re, sys, pathlib

INK = r"(?:#242424|var\(--(?:ink|black|fg|blk|bk)\)|#000|#0a0a0a|#111)"
PAPERS = ("#f7f7f7", "var(--paper)", "var(--bg)")

/tmp/claude-0/recolor_spec.md（1回目の、役割の色を入れる作業の決まり）

# 図解の色の意味づけ（作業の決まり）

対象：/home/claude/p2m-site/public/embeds/ の、渡された図解 HTML。すでに共通の形（白いカード・角丸・細かい斜線・Inter＋Noto）は入っている。
やること：1本ずつ中身を読んで、何がその図の「主役」かを決め、役割の色を入れる。見本は /tmp/claude-0/LOG349_replay_attempts.html・LOG440_serve_vs_bus.html・LOG456_standby_entry.html（この3本を最初に読んで、同じ密度にそろえる）。

## 色（これ以外の色を足さない）
- 字・線の基本 #242424、補足の字 #555、目立たせない字や枠 #888、細い区切り #e6e6e6、地 #f7f7f7、白 #fff
- 主役（その図で一番見てほしいもの・今・後・選んだ物）：青 #2f6fdf（塗り）。面に薄く敷くときは #e8f0ff
- 比べる相手（前・基準・試算・もう一方）：主役と同じ色の細かい斜線 `repeating-linear-gradient(-45deg,色 0 2px,transparent 2px 4px)`。主役が青なら青の斜線
- 悪い（詰まり・待ち・止まり・失敗・増えて困るもの）：赤 #d85a30。面は赤の斜線か塗り。薄い面は #fbe6de
- 良い（合格・成功・減って良くなったもの）：緑 #1d9e75。薄い面は #dff3ec
- 記録だけ・取りやめ・試していない・関係ない物：灰 #9a9a9a（斜線か塗り）
- 1つの図の中で青に2つの意味を持たせない。凡例があれば凡例の色も合わせる。主役が決められない図（手順・一覧・文章の図）は、無理に色を入れず黒のままでよい。選んでいるボタン・タブは黒の塗りのまま（青にしない）
- 黄色は使わない（お客さんの色）。Unity の画面のようにスタッフが出る絵では、スタッフを青にしてあれば、その図では主役に青を使わない

## 形
- 角丸は入れ物と押すものだけ（箱・カード 8px、ボタン・札 4px）。棒・帯・面・線・軸・地図の形は四角のまま
- 中に残っている黒い 1.5px の枠の箱（説明の欄・数字の欄）は、#f7f7f7 の面・角丸8px・枠なしにする。データの枠（棒の外枠など）は残してよい
- 縦線や太い斜線の模様は、細かい斜め（上の書き方）にする
- 線グラフの線は stroke-linecap:butt・stroke-linejoin:round

## 変えてはいけないもの
- 数字・データ・文の中身・作り・動き（JS の動作）・iframe の高さを送る最後の script。文で変えてよいのは、色や模様を説明している言葉だけ（例「黒が配膳だけ、斜線が…」→「斜線が配膳だけ、塗りが…」）
- git の commit・push はしない（まとめ役がする）。渡されたファイル以外を触らない

## 確かめ方
- 直したら `python3 /tmp/claude-0/render_one.py <ファイル>` で画像にして、Read で開いて見る。字の重なり・はみ出し・色の意味のずれがないかを見る。動く図は、最初の画面で見えていればよい
- 終わったら、ファイルごとに1行で「主役に何を青にしたか／赤・緑・灰を何に使ったか／色を入れなかった理由」を返す

公開したあと、3つの不具合が見つかった。

• 図の枠の中にスクロールバーが出ていた。図の高さが小数（例 812.4px）で、親のページが切り捨てた高さで枠を作り、1px 足りなかった。p2m-site の Base.astro で、受け取った高さに2px 足すようにした（Math.ceil(h) + 2）
• LOG455 の紙吹雪が出なかった。紙吹雪を画面の上の外から出していて、iframe の中では見えなかった。床の楕円から打ち上げる動きに直した
• LOG468 の図解が一覧から漏れていた。一覧を作ったあとに公開された記事だったので、後から同じ決まりで直した

作業ログ ― 線の太さを、数字ではなく強さの順番で直す

枠線と統一されていますか？太いのと細いのがあるようですが（同じ太さにしろという意味ではなくて、枠の大きさによって同じように見えるように統一してほしいという意味です）

最初は、SVG の線を図の大きさに関係なく同じ太さで描く指定（non-scaling-stroke）を全部に入れた。見本で見ると、細い線で描いていた図が重くなった。

456のSPは前の方がいいね

379も修正前の方がいい 線の太さが統一されていればいいというわけではなく、細い線の方がいいときはあるよ

太さの数字をそろえるのをやめ、図の中の強さの順番（目盛り・区切り ＜ 軸 ≦ データの線 ＜ 選んだ物の囲み・強調）が逆になっている所だけを直すことにした。131本を調べ、逆になっていたのは9本だった。前と後の画像を見てもらってから公開した。

/tmp/claude-0/lines_spec.md（線の強さの点検の決まり）

# 図解の線の太さの点検（作業の決まり）

対象：/home/claude/p2m-site/public/embeds/ の、渡された図解 HTML（色と形はもう新しい決まりで入っている）。
やること：1本ずつ画像にして見て、線の「強さの順番」が逆になっている所だけを直す。逆になっていなければ何もしない（直さない図が多くてよい）。

## 強さの順番（1つの図の中で）
目盛り・区切り ＜ 軸 ≦ データの線 ＜ 選んだ物の囲み・強調

- 逆の例：選んだ棒の囲みが薄い灰の細い線なのに、下の軸が黒い太い線（→ 囲みを軸と同じか少し強く、黒にする。または軸を細くする）。目盛りの線がデータの線より太い・濃い。区切り線が強調の線より目立つ
- 同じ役割の線は、1つの図の中で同じ太さにそろえる（例：同じ図の中で、凡例の線見本と本体の線の太さが違う）
- 直し方は、弱すぎる側を少し強めるか、強すぎる側を弱めるか、見た目が軽くなるほうを選ぶ。全体を太くしない

## してはいけないこと
- 線の太さを全部同じ数字にそろえない。細い線のほうがよいとき（点の多い線グラフ・細かい模様・地図の細部）は細いままにする
- SVG に vector-effect:non-scaling-stroke を入れない（線は絵と一緒に縮めてよい）
- 色・数字・文・動き・作り・最後の高さを送る script は変えない
- git の commit・push はしない。担当以外のファイルは触らない

## 確かめ方
- `python3 /tmp/claude-0/render_one.py <ファイル>` で画像にして Read で見る。直す前の原本は /tmp/claude-0/lw_before/ に同じ名前である（見比べに使う。書き換えない）
- 最後に、直したファイルだけを「ファイル名：どの線がどう逆だったか → どう直したか」の1行ずつで返す。直さなかったファイルは数だけ返す

/tmp/claude-0/lines.py（線の太さの一覧を出す）

"""図解の線を3段（1px・2px・3px）にそろえ、伸び縮みしても画面の上で同じ太さに見えるようにする（2026-11-08）。"""
import re, sys, pathlib
def snap(v):
    v = float(v)
    return '1' if v <= 1.25 else ('2' if v <= 2.6 else '3')
def process(p):
    h = p.read_text(encoding='utf-8'); o = h
    # 1. SVG の線は伸び縮みしない（画面の上の px で太さが決まる）
    if 'non-scaling-stroke' not in h:
        h = h.replace('<style>', '<style>svg *{vector-effect:non-scaling-stroke}', 1)
    # 2. SVG の stroke-width を 1・2・3 にそろえる（属性・JS のオブジェクト・テンプレート文字列）
    h = re.sub(r'(stroke-width=")([0-9.]+)(")', lambda m: m.group(1) + snap(m.group(2)) + m.group(3), h)
    h = re.sub(r"(['\"]stroke-width['\"]\s*:\s*)([0-9.]+)", lambda m: m.group(1) + snap(m.group(2)), h)
    h = re.sub(r"(['\"]stroke-width['\"]\s*:\s*['\"])([0-9.]+)", lambda m: m.group(1) + snap(m.group(2)), h)
    h = re.sub(r"(stroke-width\s*:\s*)([0-9.]+)(px)?", lambda m: m.group(1) + snap(m.group(2)) + 'px', h)
    # 3. HTML の線：1.5px の線は役割で分ける（軸・区切りは 1px、凡例の線見本は 2px）
    h = re.sub(r'(border(?:-(?:top|bottom|left|right))?\s*:\s*)(1\.5|1\.2)px', r'\g<1>1px', h)
    h = re.sub(r'(border(?:-(?:top|bottom|left|right))?\s*:\s*)(2\.5|2\.2)px', r'\g<1>2px', h)
    # 選んだ物の囲み（outline）は黒の 2px
    h = re.sub(r'outline\s*:\s*[0-9.]+px\s+solid\s+[^;}"]+', 'outline:2px solid #242424', h)
    if h != o: p.write_text(h, encoding='utf-8'); return True
    return False
if __name__ == '__main__':
    n = sum(process(pathlib.Path(a)) for a in sys.argv[1:]); print('changed', n)

あわせて、LOG468 の図解の「スタッフの手すき」の棒を、オレンジから灰にした。手すきは悪い値ではないので、赤（悪い）の意味に合わないため。

作業ログ ― 消えた Google スプレッドシートの表を、過去のチャットから戻す

LOG3 の記事を開いたエイイチが、表が出ていないことに気づいた。

画像が表示されていないページがありました。何が原因か調べてください。

古い DAY の記事は、Studio のころに Google スプレッドシートの「ウェブに公開」の表を iframe で埋め込んでいた。その公開の URL を開くと、1つのブック（2PACX-1vSAGYq…）は 410（もう無い）、進捗管理表のブック（2PACX-1vQnqeo…）は 400 を返した。元のスプレッドシートが消えるか公開をやめたため、記事の中が白い箱になっていた。

できればスプシとドキュメントの内容を読み込んで、サイトに直接反映してほしい（ページ共有はなし）

iCloud とドライブには写しがなく、ゴミ箱も空だった。残っていたのは、2026年3月の claude.ai のチャット「Difyへのデータ形式について」で、Dify（チャットボットを作るサービス）に読ませるために、このブックの全部のタブを CSV に変えていた記録だった。

LOG9 は、エイイチの指示で最初の数話（3話）だけを載せた。LOG11 のシフト表の「次次帯還開始」は CSV に変えたときの読み違いと見て、「順次帰還開始」「順次出動開始」に直した（元の言葉は推測）。

表は、図解と同じ白いカードにした。スマホの幅では、1行を1枚のカードにして縦に並べる。列の多い表（画面リスト）は、カテゴリごとに見出しの行を入れ、列を6つに絞った。

/tmp/claude-0/sheets/build.py（消えた表13か所を作り直す）

# 消えた Google スプレッドシートの埋め込みを、サイトの中の表に置き換える（2026-11-08）
import csv, io, html, sys
OUT = sys.argv[1]
JS = open('/tmp/claude-0/sheets/height.js', encoding='utf-8').read()

CSS = """<style>html{font-variant-numeric:tabular-nums}
*{box-sizing:border-box}
body{margin:0;background:#f7f7f7;color:#242424;font-family:'Inter','Noto Sans JP',sans-serif;padding:8px 0}

まだ表示されていた Google の埋め込み15本も、同じ形に作り直した。公開中のシートは pub?output=csv&gid=… で CSV を読める。1つのシートに表がいくつも並んでいるもの（空の行で区切られ、先頭の列に表の名前がある）は、表ごとに分けた。LOG22 はブックがまるごと（タブ15枚）埋め込まれていたので、記事の文に合う「ROS 2 基本コマンド（エラー対応メモ）」と「デバック情報まとめ」の2つだけを載せた。LOG78 は Google ドキュメントだったので、見出しと箇条書きを残した本文にした。

• ねらい：表の中身を、サイトの HTML の文字として持つ
• 変わったこと：Google の表は iframe の中の別のページで、記事のページを読む AI や検索には中身が見えなかった。今は記事の図解の HTML に文字として入っている。元のシートが消えても、表は消えない
• 見込める効果：AI が記事を読んだときに、表の中身まで答えに使える（見込み。サイトの記録で、AI が読みに来た回数とあわせて確かめる）

/tmp/claude-0/gs/build2.py（表示中の Google の埋め込み15本を作り直す）

# 公開中の Google スプレッドシート・ドキュメントの埋め込み15本を、サイトの中の表と本文に置き換える（2026-11-08）
# 使い方: python3 build2.py <public/embeds のフォルダ>
import csv, html, re, sys, importlib.util
from html.parser import HTMLParser
OUT = sys.argv[1]
G = '/tmp/claude-0/gs/'
spec = importlib.util.spec_from_file_location('b1', '/tmp/claude-0/sheets/build.py')
src = open('/tmp/claude-0/sheets/build.py', encoding='utf-8').read()

作業ログ ― 記事のグラフ画像7枚を、数を変えずに描き直す

導入シミュレーションの記事には、コードで描いたグラフの画像（PNG）がある。206枚の画像を一覧にして見て、画面写真・Unity の画面・前の案と後の案を比べた平面図は、その時の見た目を残すための画像なので外した。描き直したのは、元のデータか作ったコードが残っている7枚。

元の画像は R2 に残し、新しい画像は名前の最後に _v2 を付けて入れた。

LOG468_02 は、最初の見本の凡例に「オレンジの斜線」が無かった。

赤斜めの意味は？

色（青＝そのほかの呼び出し、赤＝人の道をふさいでいた分）と模様（塗り＝今、斜線＝前）に別々の意味を持たせていたのに、凡例は3つしかなかった。凡例を4つにした。

描き直さなかった図もある。作ったコードが見つからない図（LOG456_03・04・05、LOG423_04、LOG452_04）は、手で描き直すと中身が変わるおそれがある。LOG456_06 は、当時の2列の待機点の店の形が残っていない。店の平面図の上に描いた止まりの地図（LOG398_04、LOG402_04、LOG423_01〜03）は、下地の平面図がサイトの試算と同じ部品で、ロボットの道がオレンジのまま。直すには平面図の部品から変えることになり、サイトの試算の見た目も変わるので、エイイチの判断を待っている。

iCloud の graph_restyle_20261108/README.md

# 導入シミュレーションの記事のグラフを、決まりの色と字で描き直したもの（2026-11-08）

色と字の決まりは KIOXIA の service_sim/status_videos/tools/STYLE.md（style.py）。数と形は元の図のまま、色と字だけを変えた。
元の画像は消さずに残し、記事は新しい名前（末尾 _v2）に差し替えた。

| 新しい画像 | 作り方 | 元のデータ |
|---|---|---|
| LOG452_08_p6_10min_v2.png | fig_452_08.py <csv> <出力> | KIOXIA unity/rec_large_20261106/large_p6/compare_r2_r5/compare_r2_r5_10min.csv |
| LOG456_07_fix_options_v2.png | fig_fix_options_v2.py <tools> <出力> | 絵（LOG456_sources/fig_fix_options.py の写し） |
| LOG456_08_straight_entry_112_v2.png | tools/make_jam_map.py（--set 3つ：sm101p6on cs87・sb112ret cs97・sb112se cs97） | KIOXIA unity/night/20261107_sb112/ep_*_r5.csv と回のフォルダ |
| LOG456_09_straight_entry_114_v2.png | tools/make_jam_map.py（--set 2つ：sb114ret・sb114se cs99） | KIOXIA unity/night/20261107_sb114/ep_*_r5.csv と回のフォルダ |
| LOG468_01_where_jams_sb119_v2.png | tools/make_jam_map.py（--set 2つ：sb119ret・sb119se cs101） | KIOXIA unity/night/20261107_sb119/ep_*_r5.csv と回のフォルダ |
| LOG468_02_people_avoid_effect_v2.png | fig_468_02.py <出力> | LOG468 の記事の表（依頼114・119 の中央値） |
| LOG468_04_standby_area_map_v2.png | fig_468_04.py <tools> <店の形のフォルダ> <出力> | p2m-site public/sim/layouts/large/unity/p6_large_center（large-99db3254b08b） |

店の形は p2m-site の public/sim/layouts/large/unity/ を使った。

graph_restyle_20261108/fig_452_08.py

#!/usr/bin/env python3
# LOG452_08 ⑧ロボット2台と5台の10分ごとの数を、STYLE.md の色と字で描き直す（2026-11-08）
# 数は依頼96 の cmp96.py が出した compare_r2_r5_10min.csv そのまま。灰の帯＝動画で長めに見せた30分（notes の 6900〜8700 秒）
import csv, sys
sys.path.insert(0, '/Volumes/KIOXIA/r2r2r-data/service_sim/status_videos/tools')
import style as st
st.mpl_setup()
import matplotlib.pyplot as plt

src, out = sys.argv[1], sys.argv[2]
R = list(csv.DictReader(open(src, encoding='utf-8-sig')))
X = [int(r['開店から（分）'].split('〜')[0]) + 5 for r in R]
keys = [k[:-3] for k in R[0] if k.endswith('_2台')]
NAME = {'入口で待つ組': '入口で待つ組', '席にいる組': '席にいる組', '片付けを待つ卓': '片付けを待つ卓',
        'ロボットの止まり（秒）': 'ロボットの止まり（秒・10分ごと）'}


def label(k):
    if k in NAME: return NAME[k]
    a, b = k.split('_', 1)
    return '%s：%s（%s）' % (a, b, '人' if a == 'スタッフ' else '台')


def nice(v):
    import math
    if v <= 0: return 1
    e = 10 ** math.floor(math.log10(v / 4))
    for m in (1, 2, 2.5, 5, 10):
        if v / (m * e) <= 4: return m * e
    return 10 * e


fig, axs = plt.subplots(5, 4, figsize=(20, 19), sharex=True)
for ax, k in zip(axs.flat, keys):
    y2 = [float(r[k + '_2台']) for r in R]; y5 = [float(r[k + '_5台']) for r in R]
    ax.axvspan(115, 145, color=st.BAND, zorder=0, linewidth=0)
    ax.plot(X, y2, color=st.QUIET, lw=1.8, solid_capstyle='butt', solid_joinstyle='round', label='2台（比べる相手）')
    ax.plot(X, y5, color=st.MAIN, lw=2.2, solid_capstyle='butt', solid_joinstyle='round', label='5台')
    ax.set_title(label(k), fontsize=13, loc='left', color=st.INK)
    ax.set_facecolor(st.SHEET)
    top = max(max(y2), max(y5))
    s = nice(top)
    ax.set_ylim(0, max(s, (int(top / s) + 1) * s)); ax.set_yticks([i * s for i in range(int(ax.get_ylim()[1] / s) + 1)])
    ax.yaxis.grid(True, color=st.RULE, lw=0.8); ax.set_axisbelow(True)
    for sp in ('top', 'right'): ax.spines[sp].set_visible(False)
    ax.spines['left'].set_color(st.FAINT); ax.spines['bottom'].set_color(st.FAINT)
    ax.tick_params(length=0, labelsize=10)
for ax in axs.flat[len(keys):]:
    ax.axis('off')
n = len(keys)
for i, ax in enumerate(axs.flat[:n]):
    if i + 4 >= n:   # その下に図が無いものに、横の目盛りと名前を付ける
        ax.tick_params(labelbottom=True); ax.set_xlabel('開店からの分', color=st.MUTED)
axs.flat[0].legend(frameon=False, fontsize=12, loc='upper left')
fig.suptitle('⑧ ロボット2台 と 5台（10分ごとの平均・灰の帯＝動画で長めに見せた30分）', fontsize=16, x=0.01, ha='left', weight='bold')
fig.tight_layout(rect=(0, 0, 1, 0.97))
fig.savefig(out, dpi=110)
print(out)

graph_restyle_20261108/fig_468_02.py

#!/usr/bin/env python3
# LOG468_02 人が待機点を通らない形の効果（⑧・5台・10回の中央値）を、STYLE.md の色と字で描き直す（2026-11-08）
# 数は LOG468 の表（依頼114・依頼119 の中央値）そのまま
import sys
sys.path.insert(0, '/mnt/user-data/outputs/tools')
import style as st
st.mpl_setup()
import matplotlib.pyplot as plt
import matplotlib.patches as mp
plt.rcParams['hatch.linewidth'] = 1.4

NAMES = ['斜めに寄る\n人は通る', 'まっすぐ入る\n人は通る', '斜めに寄る\n人は通らない', 'まっすぐ入る\n人は通らない']
AFTER = [False, False, True, True]          # 主役＝人は通らない（塗り）、比べる相手＝人は通る（斜線）
JAM = [3317, 1255, 2115, 809]
CALL = [115.5, 180.0, 31.0, 22.0]
BLK = [85.0, 164.5, 4.0, 3.0]


def bar(ax, x, y0, h, color, after):
    if after:
        ax.bar(x, h, 0.62, bottom=y0, color=color, edgecolor=color, linewidth=0)
    else:
        ax.bar(x, h, 0.62, bottom=y0, color=st.SHEET, edgecolor=color, hatch='//////', linewidth=0)


def frame(ax, title, ymax, step):
    ax.set_facecolor(st.SHEET)
    for s in ('top', 'right'):
        ax.spines[s].set_visible(False)
    ax.spines['left'].set_color(st.FAINT); ax.spines['bottom'].set_color(st.FAINT)
    ax.set_ylim(0, ymax); ax.set_yticks(range(0, ymax + 1, step))
    ax.yaxis.grid(True, color=st.RULE, linewidth=0.8); ax.set_axisbelow(True)
    ax.tick_params(length=0, labelsize=10)
    ax.set_xticks(range(4)); ax.set_xticklabels(NAMES, fontsize=10, color=st.INK)
    ax.set_title(title, fontsize=13, weight='bold', loc='left', pad=12)


fig, axs = plt.subplots(1, 2, figsize=(16, 6.6))
ax = axs[0]
frame(ax, '待機場所のそばの30秒以上の詰まり（1回の営業あたり）', 3500, 500)
for i in range(4):
    bar(ax, i, 0, JAM[i], st.MAIN, AFTER[i])
    ax.text(i, JAM[i] + 50, '{:,}秒'.format(JAM[i]), ha='center', va='bottom', fontsize=11, weight='bold')

ax = axs[1]
frame(ax, '30秒の呼び出し（1回の営業あたり）', 200, 50)
for i in range(4):
    bar(ax, i, 0, CALL[i] - BLK[i], st.MAIN, AFTER[i])
    bar(ax, i, CALL[i] - BLK[i], BLK[i], st.BAD, AFTER[i])
    ax.text(i, CALL[i] + 3, '{:g}回'.format(CALL[i]), ha='center', va='bottom', fontsize=11, weight='bold')
    ax.text(i, CALL[i] + 11.5, 'うち人の道 {:g}'.format(BLK[i]), ha='center', va='bottom', fontsize=9, color=st.BAD)

H = '//////'
leg = [mp.Patch(facecolor=st.MAIN, edgecolor=st.MAIN, label='今：人は待機点を通らない（依頼119）'),
       mp.Patch(facecolor=st.SHEET, edgecolor=st.MAIN, hatch=H, label='前：人は待機点を通る（依頼114）'),
       mp.Patch(facecolor=st.BAD, edgecolor=st.BAD, label='今の呼び出しのうち、止まった台が人の道をふさいでいた分'),
       mp.Patch(facecolor=st.SHEET, edgecolor=st.BAD, hatch=H, label='前の呼び出しのうち、止まった台が人の道をふさいでいた分')]
fig.legend(handles=leg, loc='upper center', ncol=2, frameon=False, fontsize=10, bbox_to_anchor=(0.5, 0.995), columnspacing=3)
fig.suptitle('大型ファミレス⑧・配膳ロボット5台（Unity のシミュレーション・種0〜9の10回の中央値）', fontsize=10, color=st.MUTED, y=0.035)
fig.subplots_adjust(left=0.05, right=0.99, top=0.80, bottom=0.2, wspace=0.14)
fig.savefig(sys.argv[1], dpi=120)
print(sys.argv[1])

graph_restyle_20261108/fig_468_04.py

# LOG468_04 ⑧のパントリーの前を上から見た図。make_jam_map.py の下地（STYLE.md の色と字）で描き直した版（2026-11-08）
# 使い方: python3 fig_468_04.py <tools のフォルダ> <店の形のフォルダ> <出力.png>
import sys
sys.path.insert(0, sys.argv[1])
import make_jam_map as J
import matplotlib.pyplot as plt
lay, m = J.load_layout(sys.argv[2], 'p6_large_center')
fig, ax = plt.subplots(figsize=(9.33, 4.67))
J.draw_base(ax, lay, m, (14, 30, 7, 15))
fig.savefig(sys.argv[3], dpi=120, bbox_inches='tight'); print(sys.argv[3])

graph_restyle_20261108/fig_fix_options_v2.py

# LOG456_07 ⑧ロボットの待機点の直し方（上から見た図）。fig_fix_options.py の形と中身はそのまま、色と字を STYLE.md にそろえた版（2026-11-08）
# 使い方: python3 fig_fix_options_v2.py <style.py のあるフォルダ> <出力.png>
import sys
sys.path.insert(0, sys.argv[1])
import style as st
st.mpl_setup()
import matplotlib
matplotlib.use("Agg")

詰まりの地図を描き直したコマンド（LOG456_08・09）

T=~/mnt/KIOXIA/r2r2r-data/service_sim/status_videos/tools; U=~/mnt/KIOXIA/r2r2r-data/service_sim/unity; N=$U/night; O=~/mnt/PixelstoMotors/デジタルツイン学習R2R2R/サービスロボット導入シミュレーション/LOG456_images
cd $T && python3 -B make_jam_map.py $O/LOG456_08_straight_entry_112_v2.png --layout-dir ~/lay --store p6_large_center \
 --set "$N/20261107_sb112/ep_sm101p6on_r5.csv|$U/20261107_sm101p6on_cs87_large_p6_r5_s*|今のまま（sm101p6on）" \
 --set "$N/20261107_sb112/ep_sb112ret_r5.csv|$U/20261107_sb112ret_cs97_large_p6_r5_s*|どかされた台が戻る（sb112ret）" \
 --set "$N/20261107_sb112/ep_sb112se_r5.csv|$U/20261107_sb112se_cs97_large_p6_r5_s*|戻る＋まっすぐ入る（sb112se）" \
 --note "⑧5台・すぐ押す（種0〜9 の 10 回）"
python3 -B make_jam_map.py $O/LOG456_09_straight_entry_114_v2.png --layout-dir ~/lay --store p6_large_center \
 --set "$N/20261107_sb114/ep_sb114ret_r5.csv|$U/20261107_sb114ret_cs99_large_p6_r5_s*|どかされた台が戻る・斜めに寄る（sb114ret）" \
 --set "$N/20261107_sb114/ep_sb114se_r5.csv|$U/20261107_sb114se_cs99_large_p6_r5_s*|戻る＋まっすぐ入る・順番待ちは止まりにしない（sb114se）" \
 --note "⑧5台・すぐ押す（種0〜9 の 10 回）"

/sessions/rcw-01levextvchrhzmgcuinsz1t/mnt/PixelstoMotors/デジタルツイン学習R2R2R/サービスロボット導入シミュレーション/LOG456_images/LOG456_08_straight_entry_112_v2.png
/sessions/rcw-01levextvchrhzmgcuinsz1t/mnt/PixelstoMotors/デジタルツイン学習R2R2R/サービスロボット導入シミュレーション/LOG456_images/LOG456_09_straight_entry_114_v2.png

店の形（p6_large_center.json と p6_large_center_map.json）は、サイトの公開版（/sim/layouts/large/unity/）から取った。件数と秒数は、LOG456_08 が 368件・22,688秒／523件・31,746秒／277件・16,485秒、LOG456_09 が 537件・32,885秒／228件・12,442秒で、元の図と同じだった。

作業ログ ― 残りの図解283本を、9つに分けて同時に仕上げる

1回目で直したのは、LOG と LOG334 以降の記事の図解131本だった。サイトの図解を数えると全部で439本あり、Studio から移した記事の、名前の付いた図解と、LOG1〜100台の図解（day-○○ の名前）が、まだ古い見た目のまま残っていた。

図解HTMLはサイトの記事全体にあるのですが、その修正はどんなスケジュールですか？

1回目と同じく、見本3本（SSH の速さの図、Motion UX 三相モデル、j0 の届く範囲の図）を先に見てもらった。古い図解は色を CSS の変数（—black・—white・—gray-mid など）で書いていて、1回目のスクリプトでは黒い枠の箱を見つけられなかった。変数の名前と、決まりにない灰（#e8e8e3・#999・#444 など）を置き換えるスクリプトを足した。見本の SSH の図では、黒く塗った「×50 FASTER」の箱が灰の面に変わり、白い字が消えて空の箱になっていた。黒く塗った箱は黒のまま残すようにスクリプトを直した。

/tmp/claude-0/palette2.py（古い図解の色の変数と灰を置き換える）

"""古い図解の色の変数と灰色を、決まりの色に置き換える（2026-11-08・2回目のまとまり用）"""
import re, sys, pathlib
MAP = [(r'#e8e8e3|#e8e6df|#e4e4dc', '#ececec'), (r'#c9c9c3|#cfcfc9|#cdc9bf|#d6d6d0|#dcdcd6', '#e6e6e6'),
       (r'#999999\b|#999\b|#aaa\b|#8a8a84|#8a8a86|#8c8c86', '#888'), (r'#444444\b|#444\b|#6f6f6a|#6a6a65|#6a635a|#666\b|#777\b', '#555'),
       (r'#1a1a1a', '#242424')]
INKV = r'var\(--(?:black|ink|fg|blk|bk)\)'
for name in open(sys.argv[1]).read().split():
    p = pathlib.Path('public/embeds') / name; h = p.read_text(encoding='utf-8'); o = h
    for a, b in MAP: h = re.sub(a, b, h, flags=re.I)
    # 枠の 1.5px の黒 → 1px（中の箱は後で面にする）
    h = re.sub(r'border(-\w+)?\s*:\s*1\.5px\s+solid\s+(' + INKV + r'|#242424)', r'border\1:1px solid \2', h)
    if h != o: p.write_text(h, encoding='utf-8')

見本が通ったあと、スクリプトで共通の所を入れ、266本を9つのまとまり（29〜30本ずつ）に分けて、Claude の作業を同時に9つ動かした。それぞれが決まりの文（round2_spec.md）と見本3本を読み、1本ずつ直しては画像にして確かめた。

9つのまとまりは、同じ作業用のフォルダを使っていた。あるまとまりが置いた置き換えのスクリプトを、別のまとまりが同じ名前で上書きする、ということが起きた。どのまとまりも途中で気づいて、自分の道具を別のフォルダに分けていた。

/tmp/claude-0/round2_spec.md（2回目の、1本ずつ仕上げる作業の決まり）

# 図解の仕上げ（2回目のまとまり・作業の決まり）

対象：/home/claude/p2m-site/public/embeds/ の、渡された図解 HTML だけ。ブランチ embeds-style-round2 の作業ツリーにある。
すでにスクリプトで「字（Inter＋Noto Sans JP）・下地の色（#242424 / #f7f7f7）・外側の白いカード・一部の箱の灰の面」が入っている。
スクリプトでは直しきれない所を、1本ずつ中身を読んで仕上げるのが仕事。直す前の元のファイルは /tmp/claude-0/before2/<同じ名前> にある（読むだけ）。

## まず読む見本（この3本と同じ密度・同じ見た目にそろえる）
- /home/claude/p2m-site/public/embeds/mecharm-ssh-overhead-40x-speedup-7Uxkyf0a.html（棒：待ち＝赤、改善後＝青。結果の黒い箱は黒のまま）
- /home/claude/p2m-site/public/embeds/motion-ux-three-phase-model-VWZggSw_.html（枠の箱→灰の面、札は白地＋#e6e6e6 の枠・角丸4px、比べる2つのうち主役を薄い青の面）
- /home/claude/p2m-site/public/embeds/j0-sweep-reachability-map-e8VFvq2d.html（測った点＝青、基準＝黒、補助の枠＝細い灰の点線）
画像で見たいときは `python3 /tmp/claude-0/render_one.py <ファイル>` → /tmp/claude-0/rc_png/<名前>.png を Read で開く。

## 形
1. 外側：白いカード（background:#fff・border-radius:8px・padding 28px 24px 前後）が1枚だけ。body は背景 #f7f7f7・padding:8px 0。
   - スクリプトが、幅の入れ物（max-width の要素）を白いカードにし、そのすぐ中の「枠のある大きな箱」（.frame など）を灰の面にしてしまっていることがある。外側の枠がカードの役なら、その中の箱は背景なし・枠なし・padding 0 にして、白いカードの上に直接のせる（白の中に灰の大箱が1枚だけ、を作らない）
   - 外側の黒い枠線は使わない
2. 中の箱（説明の欄・数字の欄・カード）：黒い枠をやめて #f7f7f7 の面・角丸 8px・枠なし。黒く塗られた箱（強調・結果・選んでいる物）は黒のまま角丸 8px（灰にしない）
3. ボタン・タブ・札（タグ）：角丸 4px。押していない物は白地＋1px #e6e6e6 の枠、選んでいる物は黒塗り＋白字。札に 8px の灰の面が付いていたら 4px の白＋#e6e6e6 枠に直す
4. データ（棒・帯・割合・面・線・軸・目盛り・地図の形）は角丸にしない
5. 区切りの線：段落や欄を分けるだけの線は #e6e6e6 の 1px。表の見出しの下・グラフの軸は黒（#242424）のままでよい
6. 模様：縦じま・太い斜線・横じまは使わない。比べる相手は細かい斜線 `repeating-linear-gradient(-45deg,色 0 2px,transparent 2px 4px)`
7. 灰色：#888（目立たせない字・小さいラベル）、#555（補足の字）、#e6e6e6（細い区切り）、#ececec（帯の地・トラック）。これ以外の灰を新しく足さない。opacity で字を薄くしている所は、そのままでもよい

## 色（役割で決める。これ以外の色を足さない）
- 主役（その図で一番見てほしいもの・今・後・選んだ物・自分の案・測った値）：青 #2f6fdf。面に薄く敷くときは #e8f0ff
- 比べる相手（前・基準・試算・もう一方）：主役と同じ色の細かい斜線、または灰 #9a9a9a
- 悪い（詰まり・待ち・止まり・失敗・エラー・危険・増えて困るもの）：赤 #d85a30（薄い面 #fbe6de）
- 良い（合格・成功・完了・安全・減って良くなったもの）：緑 #1d9e75（薄い面 #dff3ec）
- 記録だけ・取りやめ・試していない・関係ない物：灰 #9a9a9a
- 1つの図の中で青に2つの意味を持たせない。凡例があれば凡例の色と言葉も合わせる（「黒が〜」→「赤が〜」など、色を説明している言葉だけは直してよい）
- 主役が決められない図（手順・一覧・文章・用語の図）は、無理に色を入れず黒と灰のままでよい
- 元から色が付いている図（赤・緑・青・黄・紫など）は、上の役割の色に置き換える。意味が合う色がなければ、黒・灰に落とす。黄色 #e8c520 系はお客さんの色なので使わない（警告の黄色は赤に）
- ロボットの関節や軸（X=赤・Y=緑・Z=青のような、決まった色の約束を説明している図）は、その約束どおりの色を残してよい（記事の中身なので）。その場合も色の値だけ近い決まりの色（#d85a30・#1d9e75・#2f6fdf）にそろえる

## 線の強さ
- 目盛り・区切り ＜ 軸 ≦ データの線 ＜ 選んだ物の囲み・強調。この順番が逆になっている所だけ直す。太さの数字をそろえることはしない（細い線のほうがよい所は細いままでよい）
- 線グラフの線は stroke-linecap:butt・stroke-linejoin:round

## 変えてはいけないもの
- 数字・データ・文の中身・作り・動き（JS の動作）・最後にある iframe の高さを送る script（p2mHeight を postMessage するもの）
- 渡されたファイル以外は触らない。git の add・commit・push はしない（まとめ役がする）
- YouTube や Figma の iframe を中に持つ図は、外側の形だけ直し、iframe には触らない

## 確かめ方
- 1本直すごとに render_one.py で画像にして Read で見る。字の重なり・はみ出し・空の箱（白字が白い面に乗って消えている、など）・色の意味のずれがないかを見る。動く図・押して出る図は最初の画面で見えていればよい
- 壊れている所（CSS の書き間違いで崩れている・高さの script が無い・画面の外にはみ出す）を見つけたら、直してよい。直したら返事に書く
- 終わったら、ファイルごとに1行で「主役に何を青にしたか／赤・緑・灰を何に使ったか／色を入れなかった理由／直した壊れ」を返す。最後に、迷ったもの・自信のないものを別に挙げる

途中で、トップページの部品（top-video と top-banner）も直す対象に入っていたことに気づいた。

バナーを修正しろという指示はしていません。関係ないページまで修正しないように注意してください。

記事の図解として使われていない部品（top-video・top-banner・mecharm_data_blueprint・series4-2）は、公開前に元に戻した。公開後、本番の top-video と top-banner が、作業の前とバイト単位で同じことを確かめた。

最後に、283本すべてを PC の幅（760px）とスマホの幅（390px）で画面に出した。高さを親のページに伝える script は283本すべてに1つずつ残っていた。スマホの幅で横にはみ出したのは4本（day112・day150・day151・day92）で、どれも直す前からはみ出していた。day92 だけは直す前より広がっていたので直した。

/tmp/claude-0/render_one.py（1本を画像にして確かめる）

# 使い方: python3 /tmp/claude-0/render_one.py <図解のHTMLのパス>...  → /tmp/claude-0/rc_png/<名前>.png（幅760・2倍）
import re, sys, pathlib
from playwright.sync_api import sync_playwright
T='/mnt/user-data/outputs/tools/fonts/'
R="unicode-range:U+0000-00D6,U+00D8-024F,U+2000-206F"
FACES=("@font-face{font-family:'Inter';font-weight:400 500;src:url(file://%sInter-Regular.ttf);%s}"
 "@font-face{font-family:'Inter';font-weight:600 900;src:url(file://%sInter-Bold.ttf);%s}"
 "@font-face{font-family:'Noto Sans JP';font-weight:100 500;src:local('Noto Sans CJK JP')}"
 "@font-face{font-family:'Noto Sans JP';font-weight:600 900;src:local('Noto Sans CJK JP Bold')}") % (T,R,T,R)
with sync_playwright() as p:
    b=p.chromium.launch(); pg=b.new_page(viewport={'width':760,'height':900},device_scale_factor=2)
    for src in sys.argv[1:]:
        src=str(pathlib.Path(src).resolve())
        h=open(src,encoding='utf-8').read()
        h=re.sub(r'<link[^>]+fonts\.googleapis[^>]+>','',h).replace('<head>','<head><style>'+FACES+'</style>',1)
        t=pathlib.Path('/tmp/claude-0/rc_png/_tmp_'+pathlib.Path(src).name); t.write_text(h,encoding='utf-8')
        pg.set_viewport_size({'width':760,'height':900}); pg.goto('file://'+str(t)); pg.wait_for_timeout(3000)
        hg=min(pg.evaluate('document.documentElement.scrollHeight'),1800); pg.set_viewport_size({'width':760,'height':hg})
        out='/tmp/claude-0/rc_png/'+pathlib.Path(src).stem+'.png'; pg.screenshot(path=out); t.unlink(); print(out)
    b.close()

/tmp/claude-0/render_many.py（全部を同時に画像にし、はみ出しを数える）

import re, sys, pathlib
from concurrent.futures import ThreadPoolExecutor
from playwright.sync_api import sync_playwright
T='/mnt/user-data/outputs/tools/fonts/'
R="unicode-range:U+0000-00D6,U+00D8-024F,U+2000-206F"
FACES=("@font-face{font-family:'Inter';font-weight:400 500;src:url(file://%sInter-Regular.ttf);%s}"
 "@font-face{font-family:'Inter';font-weight:600 900;src:url(file://%sInter-Bold.ttf);%s}"
 "@font-face{font-family:'Noto Sans JP';font-weight:100 500;src:local('Noto Sans CJK JP')}"
 "@font-face{font-family:'Noto Sans JP';font-weight:600 900;src:local('Noto Sans CJK JP Bold')}") % (T,R,T,R)
names=[l.strip() for l in open(sys.argv[1]) if l.strip()]; W=int(sys.argv[2]); out=pathlib.Path(sys.argv[3]); out.mkdir(exist_ok=True)
def run(chunk):
    with sync_playwright() as p:
        b=p.chromium.launch(); pg=b.new_page(viewport={'width':W,'height':900},device_scale_factor=1)
        for n in chunk:
            src=pathlib.Path('/home/claude/p2m-site/public/embeds')/n
            h=src.read_text(encoding='utf-8')
            h=re.sub(r'<link[^>]+fonts\.googleapis[^>]+>','',h); h=re.sub(r"@import url\('https://fonts[^)]*\);",'',h)
            h=('<style>'+FACES+'</style>')+h
            t=out/('_t_'+n); t.write_text(h,encoding='utf-8')
            try:
                pg.set_viewport_size({'width':W,'height':900}); pg.goto('file://'+str(t),timeout=15000); pg.wait_for_timeout(1500)
                hg=min(pg.evaluate('document.documentElement.scrollHeight'),2400); sw=pg.evaluate('document.documentElement.scrollWidth')
                pg.set_viewport_size({'width':W,'height':max(hg,100)}); pg.screenshot(path=str(out/(n[:-5]+'.png')))
                if sw>W+2: print('OVERFLOW',n,sw,flush=True)
            except Exception as e: print('ERR',n,e,flush=True)
            t.unlink()
        b.close()
k=6; chunks=[names[i::k] for i in range(k)]
with ThreadPoolExecutor(k) as ex: list(ex.map(run,chunks))
print('done')

スマホの幅（390px）で横にはみ出した図解

OVERFLOW day112-W9yz_lYl.html 408
OVERFLOW day150-N7MVWVrc.html 402
OVERFLOW day151-Q4aHCIRt.html 640
OVERFLOW day92-JQEFn0GS.html 455
4

直す前の同じ4本
OVERFLOW _b_day150-N7MVWVrc.html 400
OVERFLOW _b_day112-W9yz_lYl.html 405
OVERFLOW _b_day151-Q4aHCIRt.html 640
OVERFLOW _b_day92-JQEFn0GS.html 402

図の中の字の中身に手が入った所が2つある。measuring-the-stuck-joint は、軸の向きの字（浅い・深い）が点の並びと左右逆だった。JS のコメントには「-40（右/浅い）」と書いてあるが、位置を出す式 pct = v => ((A_HI - v) / (A_HI - A_LO)) * 100 では -40 が 0%（左）になる。字のほうを、実際の並びに合わせて入れ替えた。day123 は、Cloudflare のメールの伏せ字で「[email protected]」になっていた所を、元の ssh ubuntu@10.42.0.1 に戻した。家の中のネットワークの番号で、外からは届かない。

9つのまとまりの報告（全量）

まとまり0

r2_b_00 の30本を見終わりました。29本を直し、day39 は直す所がなかったのでそのままです。1本直すごとに画像にして確かめ、押して開く図は開いた状態の画像も見ました。p2mHeight の高さの script は30本とも残っています。git の操作はしていません。

**ファイルごと（主役の青／赤・緑・灰の使い方／色を入れなかった理由／直した壊れ）**

- **DesFKiCf-VFo5M_Nm**：青なし（3分野を並べる図で主役がない）。例外の区間を細かい赤の斜線、「!」と EXCEPTION の字を赤に。説明の文「斜線の区間」→「赤い斜線の区間」。外枠と左の太線をやめて灰の面に、＋ボタンと札を角丸4px。
- **avatar-gitai-pikari**：信号の四角を青。通信を切ったときの×を赤。操縦者の部屋と病棟の2つの枠を灰の面に。壊れ：床の CSS が書き間違いで模様が出ていなかったので、#ececec の床に直した。吹き出しがピカリくんの頭に重なって字が隠れていたので、幅を狭めて右に寄せた。
- **category-strategy**：陣取りの棒を青（測った値）。3層の箱を灰の面、札とフロー図の箱を白地＋#e6e6e6 の枠。壊れ：点線の箱が太さの指定漏れで3pxの太い点線になっていたので、1px の #888 の点線に直した。
- **digital-twin-place-surface**：爪先と、残した弧の点を青。面の点を灰 #9a9a9a。凡例の●も青に。壊れ：トグルのボタンが灰の上に灰で見えなかったので、白地＋枠に直した。

まとまり1

（このまとまりの係は英語で返事をしたので、まとめ役の Claude が日本語に直して載せる。中身は変えていない）

30本すべて仕上げた。高さを送る script（p2mHeight）は全ファイルに残っていて、git の操作はしていない。

## ファイルごと
- **ai-visual-inspection-lighting**：色は入れていない（手順の説明のため）。見出しと3つの段の余白が二重になっていたのを直した。番号の札を白地＋#e6e6e6 の枠・角丸4px に。画像の枠を #e6e6e6 に。
- **beyond-the-arc-taught-grasp**：届いた＝緑、j2 の限界の近く＝緑の細かい斜線、再生できない＝赤の点線の枠、弧の芯の帯＝灰の細かい斜線。壊れ：「空白帯」の字が目盛りの200に重なっていた。seq5 と seq4 の名前が重なっていた（seq4 を1段下へ）。
- **claude-instructions-hit-a-wall**：青＝今の断面とその点、灰＝前の版。つながった黒い枠のタブを、離した角丸4px のボタンに。見出しと図の欄を灰の面に。

まとまり2

渡された30本をすべて直しました。1本直すごとに画像にして見ており、押して出る図は押した後の画面も確かめています。git の操作はしていません。どのファイルにも高さを送る script が残っています。

**ファイルごと**
- ai-writes-code-not-motions-OIeOlSIq.html：青＝各工程まで成功している確率の箱と、下の2本の棒。赤・緑・灰は使っていない。壊れ：中の％の字が混色（mix-blend）で崩れていたので、白い札に変えた。凡例の文「箱の黒い部分」を「青い部分」に直した。
- box-collision-misdiagnosed-three-times-SVIWOrWA.html：青＝正解の j1 関節。赤＝「外れ」の札と、当たっている箱の線。緑＝「当たり」の札。
- code-skeleton-agent-judgment-lMyJu6FS.html：青＝最後まで残る「振る舞いの設計」の棒。灰＝誰でも手に入るようになる層の棒と細かい斜線（太い斜線から直した）。
- dont-trust-logs-trust-the-arm-zMxJJf6Q.html：青＝REAL の札と、実機側の比較の欄。緑＝✓、赤＝✗ と「PICK姿勢」の札、灰＝—。
- fill-the-hole-not-loosen-the-guard-ohcznTlz.html：青＝穴を埋めた新しい点。赤＝閾値を緩めたときのずれ（21.9mm）。

まとまり3

30本すべて直しました。どれも render_one.py で画像にして確かめています。押して切り替わる図のうち、色が状態で変わるものは、押したあとの画面も見ました。最後の高さを送る script は30本とも直す前と同じで、git の操作もしていません。

**ファイルごと**
- **akita-data-center-robotics-perspective**：青＝雇用の折れ線・カーソル・％の大きな数字。基準の4施設の破線は黒のまま。凡例を「青い折れ線」に直した。外側の黒枠をやめ、施設タイプのボタンを4pxの札に、施設アイコンを灰の面に。
- **build-in-public-double-structure**：赤＝解くべき課題（hot）の点。太い斜線の警告テープは消した。カードは白・角丸8pxで枠なし、CTAボタンは4px。〔壊れ〕`@import` が `html{}` より後ろにあり、字が読み込まれていなかった。順を入れ替えた。
- **correction-blocked-by-table-gap**：青＝高い姿勢の点、灰＝低い姿勢の点、ABORT＝赤、OK＝緑。凡例もそろえた。タブを分け、札を4pxに。
- **drag-teach-v2-replay-and-position-binding**：青＝JSONの中の位置（Mac検出で埋める枠）と凡例。灰の上に灰が重なって見えなかったステップの箱と JSON を白の面に、札を4pxに。
- **find-tasks-where-nobody-comes**：青＝通る作業の印・残り数の点、灰＝外れた作業の印と斜線、赤＝注意点の三角と凡例。スイッチを4pxの札に、外側の黒い区切りをやめた。

まとまり4

30本すべて仕上げました。直したのは /home/claude/p2m-site/public/embeds/ の、一覧にあるファイルだけです。git の操作はしていません。1本直すごとに画像にして見ました。押して出る画面も、開いた状態で確かめています。30本とも、高さを送る script は1つずつ残っていて、div の開きと閉じの数も合っています。

**ファイルごと**
- approach-move-passes-bFY6JmuB.html：「原因1・2」の札を赤にし、「結果」の箱を薄い緑の面にして札を緑にしました。新しく足されていたホバーの灰を #ececec に直しました。直した壊れ：`</style>` が2つ重なっていた。
- build-in-public-double-structure-p87fRgQY.html：課題の一覧の図なので色は入れていません。札を角丸4px に、区切りの線を #e6e6e6 にし、ホバーの灰を #ececec に直しました。
- dashboard-reads-the-failure-xzdf8P6i.html：タブを1つずつのボタン（角丸4px）に分けました。札を白地＋#e6e6e6 の枠にし、「place: unknown」を赤にしました。結論の上の線は #e6e6e6 です。
- drag-teaching-records-and-replays-7mJ0BFPI.html：実測の帯を青、仮置きを灰の破線にしました。直した壊れ：仮置きの破線が実測の帯の下に隠れて見えなかったので、帯の上へずらしました。
- first-grasp-by-loosening-z-threshold-eh30dxk2.html：数字の欄と壁のタブの黒い枠をやめて、灰の箱に分けました。前後を比べる欄の黒い枠も外しました。結果の黒い箱の点滅を緑にしました。スマホ用の黒い枠の指定も消しました。

まとまり5

29本すべて見直しました。うち27本を直し、day3・day9 の2本は直す所がなかったので手を入れていません。直した27本は直すたびに render_one.py で画像にして見ました。押して出る画面も、開いた状態の写しを作業用フォルダで画像にして確かめています。どのファイルも高さを送る script は1本ずつ残っていて、git の操作はしていません。

**ファイルごと**
- arcs-without-area：主役は FK の点で、青にしました。赤・緑・灰は使っていません。外の枠と canvas の黒い枠を外し、目盛りは #e6e6e6 にしています。段の札（ALL/PICK…）は角丸4pxで、白地＋枠、選んでいる物は黒です。
- build-robot-arm-telemetry-dashboard：主役は DASHBOARD の欄で、薄い青の面にして見出しも青にしました。赤は STALE の札に使っています。2つの欄は黒い枠をやめて灰の面にし、#bbb・#ccc は決まりの灰に置き換えました。
- data-map-before-real-run：手順の図なので色は入れていません。live・real・twin の箱は灰の面、ARM は黒のまま角丸にしました。切り替えボタンは間を空けた2つのタブにし、見出しの下の線は #e6e6e6 です。
- dual-camera-detection-design：バナーなので色は入れていません。黒いバナーを角丸8pxにし、VIEW の札は角丸4pxです。
  - 直した壊れ：幅が box-sizing の指定なしで右へはみ出していたので、指定を足しました。

まとまり6

担当の29本は、すべて決まりの見た目にそろえました。1本直すごとに画像にして目で確かめ、押して出る画面もクリックした状態で確かめています。高さを送る script は29本とも1つずつ残っています。決まりにない色は、top-video のサムネイルの裏地 #141414 だけです（画像の下に敷く色なので残しました）。git の操作はしていません。

**ファイルごと**
- **arm-posture-vs-payload**：青＝測ったブロック位置の点と弧（選んでいる点は濃い青）。マットの外枠は細い灰の点線にし、読み取りの欄は灰の面3つに分けた。
- **building-a-physical-ai-lab-at-home**：青＝中心の CONFIG ノード（薄い青の面）。赤・緑は使わず、ノードは灰の面・角丸にした。直した壊れ：矢印の線に重なっていた札（MEASURE・DEPLOY・EXPORT USD）の字が読めなかったので、白いふちを付けた。
- **decisions-api-grasp-check**：緑＝掴めた写真の丸、赤＝失敗した写真の丸。説明文の「黒丸／白丸」は「緑の丸／赤の丸」に直した。タブは1つずつ分かれたボタンにした。直した壊れ：％の数字が丸に重なっていた。
- **dual-camera-detection-design**：青と緑は実物のシールの色（青シール・緑シール）で、記事の中身として残した。除外の札は灰にした。直した壊れ：html・body の枠がなく、ページの周りが白かったので背景を入れた。字を読み込む行がなかったので足した。「TIP = green中点」の字が爪の線に重なっていたので、ふちを付けた。
- **fk-place-one-fix-reveals-next**：赤＝ずれた爪、問題の関節、角度、stalled。比べる相手（ghost）は灰。外の大きな灰の箱は外した。

まとまり7

29本の作業が終わりました。git の操作はしていません。直したあと、1本ずつ `render_one.py` で画像にして確かめました。動く図は、押したあとの画面も写して確かめています。day10 と day3 はもう決まりどおりだったので、手を入れていません。

## ファイルごと

- **autodesk-fusion-mcp-setup**：主役がない図なので青は入れていません（つながりの順番を示す図のため）。切れた所の「×」印を赤にしました。黒い枠を、灰の面・白い札・角丸に替えています。
- **calibration-arm-not-moving**：青なし（比べる2列のどちらも主役ではないため）。「動く」の札を緑、「止まる」の札と占有している行を赤にしました。黒い枠の比べる2列は、隙間を空けた灰の面にしました。
  - 壊れ：外枠の余白が 40px で背景が透明だったので、背景 #f7f7f7・余白 8px 0 に直しました。中の欄の余白が二重になっていたのも直しました。
- **descend-passed-but-placement-drifts**：落ちた位置のブロックを青にしました。ずれの線は赤、結果の帯は「入った」を緑、「入らなかった」を赤、マットの枠は細い灰の点線です。

まとまり8

担当の29本を直しました（day38 は手を入れていません）。全ファイルを画像にして見て、押して出る画面もタブ・パネルを開いた状態で確かめています。高さを送る script は29本とも残っています。git は触っていません。

## ファイルごとの結果

- **avatar-gitai**：選んだ候補の五角形を青（薄い青の面）にしました。比べる相手の馬・車の点線は灰、「満たした／見込み」は緑、「弱い」は赤の×にし、凡例も同じ色にそろえました。太い斜線の模様をやめ、黒い枠線は #e6e6e6 にしました。
- **category-strategy-en**：検索の量の棒を青にしました。重なった黒枠の3層は灰の面に、札は白地＋枠・角丸4px にし、入口のノードは細い灰の点線にしました。
- **design-implementation-split**：進行中を青、検証済みを緑、未着手を灰の帯にしました（縦じま・斜線はやめました）。黒枠を積み重ねていたフェーズは灰の面にしています。
- **explainer-video-character-narration**：口・目・リングの線を青、元になる声の線を灰にしました。つながったタブは、離した角丸4pxのボタンにしています。

作業ログ ― p2m-site に入れた commit の一覧

p2m-site（GitHub PixelstoMotors/p2m-site）

r2r2r-content（記事の作り方の決まり）

決まりは、記事の作り方の決まり（article_rules.md）の「HTML図解」の節と、KIOXIA の STYLE.md に書いた。次に新しい図解やグラフを作るときは、この2つを読んでから作る。残っているのは、店の平面図の部品の色をどうするかと、サムネイル（今は前のまま）の2つ。