# 記事の図解414本を同じ色の決まりに ― 青を見れば主役が分かる - 記録: LOG469（ひとり研究所の裏側） - 公開: 2026/11/8 - 記事のページ: https://pixelstomotors.com/record/unify-article-figure-colors-by-role - サイト: Pixels to Motors（ADAPT DESIGN / 島津 栄一） https://pixelstomotors.com/ - 要約: 記事の図解とグラフは、色に役割を決め（青＝主役・灰＝比べる相手・赤＝悪い・緑＝良い）字をそろえると同じ読み方ができる。pixelstomotors.com の図解414本とグラフ7枚、Google の表27か所をこの決まりに直した。 > AI が読むための記事の全文です（コード・実行ログを含む）。引用するときは上の「記事のページ」の住所を使ってください。 --- 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本見るたびに、その図だけの約束を覚え直すことになる。 | やったこと | 本数 | 結果 | |---|---|---| | 報告動画・散布図の色と字の決まりを作る | 3種類のスクリプト | STYLE.md と style.py に1本化。色は役割で決める | | 記事の図解を直す（1回目） | 131本 | 字・地の色・白いカード・角丸・細かい斜線・役割の色 | | 線の強さの逆転を直す | 9本 | 目盛り＜軸≦データ＜強調の順番が逆の所だけ | | 消えた Google の表をサイトの表に戻す | 13か所 | 12か所を復元、1か所は見つからず断り書き | | 表示中の Google の表もサイトの表に | 15か所 | シート14・ドキュメント1 | | 記事のグラフ画像を描き直す | 7枚 | 数は元のまま、色と字だけ | | 記事の図解を直す（2回目） | 283本 | 9つに分けて同時に作業。トップページの部品は触らない | [図解: LOG469_color_roles.html](https://pixelstomotors.com/embeds/LOG469_color_roles.html) ## 作業ログ ― 報告動画の色を、場面ではなく役割で決める サービスロボット導入シミュレーションでは、Claude Code が Unity で回した結果を、依頼が終わるたびに短い報告動画にしている（LOG435）。報告動画・パネル付き動画・詰まりの地図（散布図）の3種類があり、それぞれ別のスクリプトで作っていた。 > このようなレポート動画のデザインをルール化したい。ルールは他のレポートに合わせたいが、揃っていないことがあれば調べて何が問題か教えてください。 調べると、形（字幕帯・グラフの置き方）はそろっていたが、色がスクリプトごとに違っていた。グラフの Unity の線が黒のものと青のもの、札の「良くなった」が青のものと緑のもの、地図の通れない所が黄色のもの。黄色は Unity の録画でお客さんの色なので、地図で使うと読み違える。 最初は「青はスタッフの色だから、ほかでは使わない」と決めて、グラフの線と地図の待機点から青を外した。見本を見たエイイチから、こう返ってきた。 > 折れ線やグラフの青やロボットの待機所の薄い青はなぜなくしたの（見えやすかったけど） > 「グラフでは Unity、地図では待機点。1つの画面の中では1つの意味だけ」 これはこれだけに決めちゃうと他で使えなくなってしまわない？ 場面ごとに色の意味を決めると、新しい種類の図が出るたびに決まりを足すことになる。そこで、**色は場面ではなく役割で決める**ことにした。青は「その画面の主役」で、グラフなら Unity の線、地図なら待機点になる。スタッフが出る画面（Unity の録画）だけは、青をスタッフに使い、主役に青を使わない。 - ねらい：新しい種類の図でも、「何が主役か」を決めれば色が決まるようにする - 変わったこと：色の値を style.py の1か所に置き、3つのスクリプトはそこから読む。札の色は good・bad・quiet・next の4つだけにし、ほかの名前は止まる - 見込める効果：報告動画を作るたびに色を選ぶ手間がなくなり、読み手は前の報告と同じ読み方で次の報告を読める（見込み） ![報告動画の1枚の前と後。上の「今」は目盛りが6.9・5.1・3.4のような半端な数、下の「決まりのあと」は0・2・4・6・8のきりのいい数。Unity の線は青、サイトの試算は灰の点線](https://pixelstomotors.com/media/LOG469_01_report_graph_before_after.png) 字は、サイトと同じ組み合わせにした。日本語は Noto Sans、英数字は Inter。1つの文字列の中で、英数字と半角の記号だけ Inter、かな・漢字・全角の記号は Noto で描く。Pillow は1つの文字列に1つの字しか使えないので、文字列を英数字とそれ以外に分けて描く関数を style.py に作った。 ### KIOXIA の service_sim/status_videos/tools/STYLE.md（色と字の決まり） ```markdown # 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 と同じ組み合わせ - Inter は `tools/fonts/` に同梱（OFL）。Noto Sans CJK JP は入っている所から探し、無ければ止まる（別の字で作らない） - 1つの文字列の中で、英数字と半角の記号だけ Inter、かな・漢字・全角の記号・①などは Noto で描く ## 下地（サイトと同じ） | 名前 | 色 | 使う所 | |---|---|---| | PAPER | #f7f7f7 | 背景 | | SHEET | #ffffff | 白い面・地図の通れる所・待機点の中 | | INK | #242424 | 字・「次にやること」の札・字幕帯・受け渡し口の星・型D の × | | MUTED | #555555 | 補足の字・目盛りの字 | | FAINT | #888888 | 卓の枠と番号など、目立たせないもの | | RULE | #e6e6e6 | 罫線・グリッド・地図の狭い道だけの所 | | BAND | #ececec | 範囲の帯（パネルの今見ている所） | | MAP_WALL | #c8c8c8 | 地図の通れない所 | ## 立体の色（最優先・この意味にしか使わない） Unity の録画の立体と同じ色。ほかの意味に使わない。 | 名前 | 色 | 意味 | |---|---|---| | GUEST | #e8c520 | お客さん（黄） | | STAFF | #2a55c8 | スタッフ（青）。スタッフが出る画面（録画・パネル）でだけ使う | | ROBOT | #ffffff | ロボット（白）。白い面では INK の縁を付ける。色の説明の丸だけ #f2f2f2 | ## 役割の色：青＝その画面の主役 色は場面ごとではなく役割で決める。新しい種類の図でも、何が主役かを決めれば色が決まる。 | 名前 | 色 | 役割 | |---|---|---| | MAIN | #2f6fdf | その画面の主役（一番見てほしいもの）の線・点・枠。例：グラフの Unity の線、地図の待機点 | | MAIN_SOFT | #e8f0ff | 主役の面（地図の待機点の中など） | | QUIET | #9a9a9a | 比べる相手・基準（サイトの試算の点線など）・記録だけ・取りやめ | - 1つの画面の中で、青に2つの意味を持たせない。青が何かは、凡例か線の横の名前で必ず書く - 例外：スタッフが出る画面（Unity の録画・パネル付き動画）では、青はスタッフ（STAFF）。その画面では主役に青を使わず、太さや INK で示す - 主役でないものに青を使わない。地図のスタッフの持ち場は灰の三角にする ## 意味の色（意味を固定） | 名前 | 色 | 意味 | |---|---|---| | BAD | #d85a30 | 悪くなった・詰まり・待ち・止まり・助けが要る | | GOOD | #1d9e75 | 良くなった・合格 | - 黄はお客さんだけ。地図の塗りにも使わない ## 報告動画の札とグラフ - 札の色は4つだけ：`good`（良くなった）・`bad`（悪くなった・残った問題）・`quiet`（記録だけ・取りやめ・別の場で）・`next`（次にやること・良し悪しのないもの。INK）。ほかの名前は止まる。札には青を使わない（線の青と混ざるため） - 同じものに付ける札は、良し悪しで色を決める（店の番号や台数で決めない） - グラフの線：主役（ふつうは Unity）は MAIN の実線、比べる相手（サイトの試算）は QUIET の点線。悪い値だけを示す線に BAD を使ってよい - 縦の目盛りは 0 から、きりのいい数（1・2・2.5・5 ×10ⁿ の刻み）で 4〜5 本 - 古い spec の `acc`・`good`（線）は `unity`、`acc`（札）は `next` として読む ## 斜線と塗り（1年のページ /one-year と同じ書き方） - 主役（今・後）は塗る。比べる相手（前・基準・試算）は、主役と同じ色の細かい斜線で描く：線2px・4px おき・右上がり（CSS は `repeating-linear-gradient(-45deg, 色 0 2px, transparent 2px 4px)`、SVG は縦の線の pattern に `patternTransform="rotate(45)"`。`45deg` は右下がりになるので使わない） - 同じ模様（斜線どうし）の帯や面を隣り合わせに並べない。隣り合う所は、片方を薄い塗りにするか、間を白く空ける - 同じ色の中で「斜線＝比べる相手、塗り＝主役」と分ける。灰は、記録だけ・取りやめ・試していないものに使う - 太い斜線（7px おきなど）や縦線の模様は使わない ## 角丸：入れ物は丸く、データは四角 - 角丸にするのは入れ物と押すものだけ：カード（図の外側）と中の箱（説明の欄・数字の欄・図の下地）は 8px、ボタン・札は 4px。角丸の値はこの2つだけ - データを表すものは角丸にしない：棒・横帯・割合の帯・斜線や塗りの面・線グラフの線と軸・目盛り線・しきい値の線・地図の壁や卓や待機点の四角。棒や帯は端の位置が値なので、丸めると値が読みにくくなる - 線グラフの線の端は四角（butt）、曲がり角は丸（round）。点は丸（円は角丸の対象外） - 外側の黒い枠線は使わない。カードは白い面（SHEET）で、ページの地（PAPER）から浮かせる。中の区切りは RULE の細い線か、PAPER の面にする ## 線の太さ：数字ではなく、図の中の強さの順番で決める - 線は絵と一緒に縮む（SVG の non-scaling-stroke は使わない）。スマホでは細くなり、細かいデータが詰まって見えない - 図の中の強さの順番：目盛り・区切り ＜ 軸 ≦ データの線 ＜ 選んだ物の囲み・強調。この順番が逆になっている所（強く見せたい線が弱い）だけを直す - 同じ役割の線は、1つの図の中で同じ太さにする - 細い線のほうがよいときは細くしてよい（点の多い線グラフ・細かい模様・地図の細部）。全部の図で太さの数字をそろえることはしない（2026-11-08 見本で、そろえた後のほうが重く見えた） ## 地図（散布図） - 背景 PAPER、通れる所 SHEET、狭い道だけ RULE、通れない所 MAP_WALL - 待機点が主役：MAIN_SOFT の四角に MAIN の破線、字も MAIN - 詰まりの円は BAD（半透明・INK の細い縁）、型D は INK の × - 受け渡し口の前は INK の星。卓は FAINT。スタッフの持ち場は FAINT の三角 ## 更新履歴 - 2026-11-08：線の太さの決まりを足した。数字でそろえず、図の中の強さの順番（目盛り・区切り＜軸≦データ＜選んだ物・強調）で決め、逆になっている所だけ直す（エイイチ「細い線の方がいいときはある」） - 2026-11-08：新設（Noto Sans＋Inter、サイトの下地、立体の色、意味の色） - 2026-11-08：斜線と塗り（1年のページの書き方）と、角丸の決まり（入れ物は丸く、データは四角）を足した（エイイチ了承）。記事の図解にも同じ決まりを使う - 2026-11-08：青を「その画面の主役」の役割に戻した。スタッフ専用にすると、グラフの Unity の線と地図の待機点が見えにくくなったため（エイイチ「青は見えやすかった」）。場面ごとに意味を決めると新しい図で使えなくなるので、役割で決める形にした - 2026-11-08：斜線の向きを「右上がり」と書き、同じ模様を隣に並べない決まりを足した（エイイチの指示。LOG468 の図解を右下がりで作ったため） ``` ### KIOXIA の service_sim/status_videos/tools/style.py（色と字の値・字を分けて描く関数） ```python """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__)) # ---- 下地（サイトの Base.astro と同じ）---- PAPER = "#f7f7f7" # 背景 SHEET = "#ffffff" # 白い面 INK = "#242424" # 字・Unity の線・「次にやること」の札・字幕帯 MUTED = "#555555" # 補足の字 FAINT = "#888888" # 目盛り・卓の枠など、目立たせない線と字 RULE = "#e6e6e6" # 罫線・グリッド BAND = "#ececec" # 範囲の帯（パネルの「今見ている所」など） MAP_WALL = "#c8c8c8" # 地図の通れない所（狭い道だけの所は RULE、通れる所は SHEET） # ---- 立体の色（Unity の録画と同じ。最優先。この3つの意味にしか使わない）---- GUEST = "#e8c520" # お客さん＝黄 STAFF = "#2a55c8" # スタッフ＝青 ROBOT = "#ffffff" # ロボット＝白（白い面に置くときは INK の縁を付ける） ROBOT_SWATCH = "#f2f2f2" # 色の説明の丸だけ（白だと背景に溶けるため） # ---- 役割の色 ---- # 青＝その画面の主役（一番見てほしいもの）。何が主役かは図ごとに決め、凡例か線の横の名前で必ず書く。 # ただしスタッフが出る画面（録画・パネル）では青はスタッフ。その画面では主役に青を使わない。1つの画面で青に2つの意味を持たせない MAIN = "#2f6fdf" # 主役の線・点・枠 MAIN_SOFT = "#e8f0ff" # 主役の面（地図の待機点など） # ---- 意味の色（意味を固定）---- BAD = "#d85a30" # 悪い・詰まり・待ち・止まり・助けが要る GOOD = "#1d9e75" # 良くなった・合格 QUIET = "#9a9a9a" # 比べる相手・基準（サイトの試算の点線など）・記録だけ・取りやめ # 報告動画の札：意味の名前 → 色。ここにない名前は使わない TAG = {"good": GOOD, "bad": BAD, "quiet": QUIET, "next": INK} # グラフの線：主役（ふつうは Unity）は MAIN の実線、比べる相手（サイトの試算）は QUIET の点線 SERIES = {"unity": MAIN, "main": MAIN, "site": QUIET, "bad": BAD} # 古い spec の名前の読み替え（acc は青だった。良し悪しのない札・次にやることなので next にする） TAG_ALIAS = {"acc": "next"} SERIES_ALIAS = {"acc": "unity", "good": "unity"} # ---- 字 ---- INTER = os.path.join(HERE, "fonts", "Inter-Regular.ttf") INTER_B = os.path.join(HERE, "fonts", "Inter-Bold.ttf") _NOTO_R = ["/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc", os.path.expanduser("~/Library/Fonts/NotoSansCJKjp-Regular.otf"), os.path.expanduser("~/Library/Fonts/NotoSansCJK-Regular.ttc"), "/Library/Fonts/NotoSansCJKjp-Regular.otf"] _NOTO_B = ["/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc", os.path.expanduser("~/Library/Fonts/NotoSansCJKjp-Bold.otf"), os.path.expanduser("~/Library/Fonts/NotoSansCJK-Bold.ttc"), "/Library/Fonts/NotoSansCJKjp-Bold.otf"] def _first(paths, what): for p in paths: if os.path.exists(p): return p raise SystemExit("字が見つからない（%s）。Noto Sans CJK JP を入れてから作る: %s" % (what, paths)) NOTO = _first(_NOTO_R, "Noto Sans CJK JP Regular") NOTO_B = _first(_NOTO_B, "Noto Sans CJK JP Bold") for _p in (INTER, INTER_B): if not os.path.exists(_p): raise SystemExit("字が見つからない: %s" % _p) CSS_FONT = "'Inter','Noto Sans CJK JP','Noto Sans JP',sans-serif" # Inter は英数字と半角の記号だけ（unicode-range）。①・→ などは Noto で描き、Pillow の is_latin と同じ分け方にする _RANGE = "unicode-range:U+0000-00D6,U+00D8-024F" CSS_FACE = ("@font-face{font-family:'Inter';font-weight:400;src:url('file://%s');%s}" "@font-face{font-family:'Inter';font-weight:700;src:url('file://%s');%s}") % (INTER, _RANGE, INTER_B, _RANGE) def is_latin(ch): """英数字と半角の記号は Inter。それ以外（かな・漢字・全角の記号・①など）は Noto""" return ord(ch) < 0x250 and ch != "×" # ---- Pillow：1つの文字列を Inter と Noto に分けて描く ---- _cache = {} def _font(size, bold, latin): from PIL import ImageFont k = (size, bold, latin) if k not in _cache: path = (INTER_B if bold else INTER) if latin else (NOTO_B if bold else NOTO) _cache[k] = ImageFont.truetype(path, size, index=0) return _cache[k] def _runs(s): out = [] for ch in s: lat = is_latin(ch) if out and out[-1][0] == lat: out[-1][1] += ch else: out.append([lat, ch]) return out def text_width(s, size, bold=False): return sum(_font(size, bold, lat).getlength(t) for lat, t in _runs(s)) def text(d, xy, s, size, fill, bold=False, anchor="la"): """d.text の代わり。anchor は横 l/m/r と縦 a/m/s（Pillow と同じ書き方）。高さは Noto の字で決める""" x, y = xy w = text_width(s, size, bold) h, v = anchor[0], anchor[1] x = x - (w / 2 if h == "m" else w if h == "r" else 0) asc, desc = _font(size, bold, False).getmetrics() base = y + (asc if v == "a" else (asc - desc) / 2 if v == "m" else 0) for lat, t in _runs(s): f = _font(size, bold, lat) d.text((x, base), t, font=f, fill=fill, anchor="ls") x += f.getlength(t) # ---- matplotlib ---- def mpl_setup(): import matplotlib from matplotlib import font_manager as fm for p in (INTER, INTER_B, NOTO, NOTO_B): fm.fontManager.addfont(p) jp = fm.FontProperties(fname=NOTO).get_name() matplotlib.rcParams["font.family"] = ["Inter", jp] # 英数字は Inter、無い字は Noto（matplotlib 3.6 以降） matplotlib.rcParams["text.color"] = INK matplotlib.rcParams["axes.labelcolor"] = INK matplotlib.rcParams["axes.edgecolor"] = FAINT matplotlib.rcParams["xtick.color"] = MUTED matplotlib.rcParams["ytick.color"] = MUTED matplotlib.rcParams["figure.facecolor"] = PAPER matplotlib.rcParams["savefig.facecolor"] = PAPER ``` ### KIOXIA の service_sim/status_videos/tools/make_jam_map.py（詰まりの地図を決まった形で描く） ```python #!/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 回）" # EP.csv … agg*.py が作る ep_