screenshot-annotate — スクショに日本語の使い方ガイドを重ねる
これは何 / なぜ要るか
英語のツール画面（SaaS、クラウドの管理画面、開発ツールなど）は、どのボタンが何をするのか
初見だと分からない。そこで、既に撮ってあるスクショに「番号付きの赤枠」を要素へ重ね、
下に「番号→日本語の意味」の凡例パネルを描いて、1枚で使い方が分かるガイド画像にする。
方式は「手元の静止画に後から描き込む」だけ（ブラウザを開いて撮り直さない）。Pillow で
描くので、対象がログイン必須の画面でもスクショさえあれば作れる。
ゴール: 枠が要素にちゃんと重なっていて、凡例が平易な日本語のガイド画像を1枚出す。
手順
1. 元画像の実寸を確認する（最重要の前提）
座標は「元画像の実ピクセル」で指定する。Retina など高解像度ディスプレイのスクショは
見た目の2倍の解像度があることが多く、そこを間違えると枠が全部ズレる。まず実寸を出す:
python3 -c "from PIL import Image; print(Image.open('/abs/path/shot.png').size)"
2. 注釈する要素を選ぶ（詰め込みすぎない）
- 1枚の赤枠は最大7個まで。多いとガイドが読めない。「相手が押す所」「英語で迷う所」に絞る。
- ただ眺めるだけの領域（結果表示など）には付けない。
3. 座標を決めてスクリプトの設定を書く
scripts/annotate.py を対象ごとにコピーして使う（元は汚さない）。先頭の設定だけ書き換える:
SRC / OUT: 入力画像と出力先（絶対パス）。出力は入力と同じフォルダに置く
（渡された画像の近くに出すのが親切。勝手に別の場所へ散らさない）。BOXES: {番号: (x1, y1, x2, y2)}。要素に重ねる枠。座標は実ピクセル。
最初は「画面のこの辺り」を分数で見当付け → 実寸を掛けて数値化すると速い
（例: 横 0.8 の位置 = 幅×0.8）。GUIDE: (番号, 見出し, 説明) の並び。英語表示 → 日本語の意味＋一言。説明は \n で2行まで。PANEL: 凡例パネルの左上と幅 (x, y, width)。空きスペースか、重要でない領域に置く
（一覧の例示行の上など。大事な情報は隠さない）。MOSAIC: 実データ（顧客名・住所・ID など）を隠したい範囲。社外に出す画像や、実データが
写り込む画面では必ず使う。迷ったら隠す。- フォントは macOS / Windows / Linux の代表的な日本語フォントを自動で探す。見つからない
場合は
FONT_BOLD_CANDIDATES / FONT_REG_CANDIDATES に手元の日本語フォントのパスを足す。
言葉づかいは平易に。専門語には「用語（＝一言のやさしい言い換え）」を添える。体言止めより
「〜する」の動詞文にすると読みやすい。
4. 描画して必ず目で確認する（このスキルの肝）
python3 annotate.py
出力画像を開いて、赤枠が1つ残らず狙った要素に重なっているか確認する。推定座標は
ほぼズレるので、BOXES を直して出し直す。ここを飛ばすと「枠が要素を指していない」
使えないガイドになる。番号バッジと凡例の番号が対応しているかも見る。
つまずきポイント
- 枠が全部ズレる → 実寸の取り違え（手順1）。表示ピクセルではなく実ピクセルで指定する。
- 文字が豆腐（□）になる → 日本語フォントが見つかっていない。スクリプト先頭の
フォント候補リストに手元の日本語フォントのパスを足す。
- ごちゃごちゃで読めない → 枠が多すぎ。7個までに絞り、凡例は1項目1〜2行に。
- 実データが写っている →
MOSAIC で隠す。社外共有・顧客データは特に。
具体例（管理画面を注釈した設定のイメージ）
BOXES = {
1: (40, 180, 320, 240), # 左メニューの対象項目
2: (1200, 60, 1420, 120), # 右上の新規作成ボタン
}
GUIDE = [
(1, "Datasets（データ一覧）", "登録したデータの一覧。\nここから中身を確認できる"),
(2, "Create（新規作成）", "新しい項目を作るボタン。\nまずここから始める"),
]
PANEL = (400, 900, 1000)