# 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 の図解を右下がりで作ったため）