更新: 2026-08-30
役割: 設定・パネル・全体 chrome の設計判断の正本。Canvas first（PRODUCT_NOTE.md §2）を前提に、誰向けのどんな慣れで組むかを固定する。
到達点: 初めてでも「なんとなくやったらできちゃった、これ簡単じゃん」。
ZoneBoard は 戦術の管理画面ではなく、配信者向けクリエイターツールである。
ピッチがステージ。UI は OBS / Canva / Figma / CapCut / YouTube Studio に慣れた人が、説明書なしで手が動く型に寄せる。
| 層 | 想定 | UI の基準にする慣れ |
|---|---|---|
| 主 | 解説 YouTuber / VTuber / アナリスト（デジタルネイティブ） | OBS、Canva、CapCut、Figma、YouTube Studio、Discord、X |
| 副 | 部活監督（スマホ・タブレットは慣れている） | タップで動く・ラベルが読める。ホットキー不要 |
| 置かない | 業務 SaaS 管理者、Reddit 密度、コーチングソフト 2000年代 UI | 設定項目の縦一覧・用語だらけのフォーム |
スポーツ知識は キャンバス上の語彙（背番号・スタメン・CK・ハーフ）に使う。
chrome（枠の UI）はスポーツ用語で埋めない。 配信ソフトの語彙を優先する。
| スポーツ語（キャンバス／局面） | 配信者語（chrome） |
|---|---|
| スタメン・背番号・利き足 | シーン・ボード・配信モード・書き出し |
| コーナー・ファイナルサード | ズーム・フォーカス（任意） |
| ホーム／アウェイ色 | 自分のロゴ・チーム色 |
- ボードを開く
- 駒をドラッグする
- 「あ、動いた。これで説明できる」
ここまでで ツール切替・名簿・設定を一切触らなくてよい。
それ以外は全部「あとから気づく加速装置」。
| 段 | できること | UI の出し方 |
|---|---|---|
| 0 · 触るだけ | 駒移動・ボール吸着 | キャンバスのみ。説明不要 |
| 1 · なんとなく | 矢印・局面・名簿貼り付け | 見えるが短いラベル。押したら動く |
| 2 · 使いこなす | ホットキー・画角・ロゴ・Export | 設定・ショートカット。探せるが強制しない |
ウィザード・オンボーディングツアー・機能ロックは やらない（上級者を遅くする）。
- 軽い・速い・自分の色が出る（VTuber / 解説者のブランド）
- 重厚な「戦術分析スイート」感は出さない
- 失敗しても怖いダイアログを連発しない（破壊操作だけ確認）
実装のコピーではなく、メンタルモデルの借用。
| 参照 | 借りるもの | ZoneBoard での対応 |
|---|---|---|
| OBS Studio | Studio / 配信の切替、シーン一覧、配信中は余計なパネルを消す | 編集モード ↔ 配信モード（B / Esc）。局面＝シーン |
| Figma / FigJam | キャンバス中心、ツールは端のレール、選択時だけプロパティ | ツールレールをキャンバス近傍へ。駒プロパティは選択時のみ |
| Canva | アイコン＋短いラベル、左パネルは「素材／ページ」、書き出しは別フロー | パネルは試合の素材（名簿・局面）。Export は設定側 |
| ピッチ見た目のミニチュア（コーチアプリの Lines / Pitch view） | 選ぶ前に結果が見える設定 | 試合タブのフル／ハーフ（横向きグリフ）。5レーンは文字セグメント（なし／レーン）。ツールレールは言葉のまま |
| CapCut / Premiere | タイムライン的な「コマ」感覚、プリセット書き出し | 局面チップ。SNS プリセット名はプラットフォーム語（正方形・ストーリー等） |
| YouTube Studio | 設定はモーダル／別面。本番画面を汚さない | 設定＝自分の環境。試合ごとではない |
| Apple Sports / ESPN app | ホーム／アウェイの色分けセグメント、試合カード | 名簿・色の Home / Away セグメント |
| Discord（JP 配信者） | 左ナビ＋メイン、ダークでも読めるコントラスト | パネル幅固定・階層は浅く（最大2段） |
| TacticsLista 等（反面教師） | ツールバーが厚くピッチが小さい | 絶対に踏まない |
日本語圏の配信者は Reddit 型の情報密度に慣れていない。余白はキャンバスに使い、パネル内は詰めてよいが、項目の階層は浅く。
いまの問題: 右ドロワーに「試合・局面・名簿・画角・競技・ツール・駒」が全部縦積み → 管理画面化し、初見で「どこから触ればいいか」が消える。
┌─────────────────────────────────────────────────────────┐
│ Top bar（編集時のみ） 試合名 / 局面名 · パネル · 設定 · 配信 │
├──────────────────────────────┬──────────────────────────┤
│ │ Side panel（試合の作業台） │
│ CANVAS │ · ボード / 局面 │
│ （主役・常に最大） │ · 名簿 / スタメン │
│ │ · 競技・ピッチ（試合設定） │
│ Tool rail（キャンバス縁） │ ※ツールはここから出すな │
│ 選択時: 簡易プロパティ │ │
└──────────────────────────────┴──────────────────────────┘
Settings modal（自分の環境・書き出し・言語）
| 領域 | 置くもの | 置かないもの |
|---|---|---|
| Canvas | ピッチ・駒・描画・ロゴ透かし | 長いフォーム |
| Tool rail | 選択 / 駒 / ボール / 線種 / ゾーン / ペン / テキスト、UNDO | 名簿・競技変更 |
| Side panel | この試合の作業: ボード、局面、名簿、スタメン、競技・ベンチ・駒サイズ | 言語、ロゴ、Export、選択色 |
| Settings | 自分の環境: ロゴ、選択色、言語、PNG 書き出し、危険なリセット | 毎試合いじる名簿 |
| Broadcast chrome | 局面切替・ツール名ピル・解除のみ | パネル・設定 |
| パネル（試合） | 設定（自分） | |
|---|---|---|
| 頻度 | 試合ごと・配信前 | 最初に一度、たまに |
| 閉じる | 配信モードで消える | モーダル。配信中は開かない想定 |
| 例 | 名簿貼る、局面増やす、ハーフ表示 | ロゴ上げる、言語、IG 用書き出し |
| メンタルモデル | 「今日の試合の机」 | 「チャンネルの設定」 |
ルール: 迷ったら「配信のたびに触るか？」→ Yes ならパネル、No なら設定。
縦スクロール一枚はやめ、問いごとに分ける。常時3タブを並べない。 トークン・フェーズ・キットの置き場の正本は STUDIO.md。
| タブ | 問い | 中身 |
|---|---|---|
| 局面 (Scenes) | いま何を見せるか | チップ、ラベル、半面（非表示）、画角（カメラ） |
| 名簿 (Roster) | 誰がどの色でいるか | Home/Away、キット、貼り付け、スタメン、配置 |
| 試合 (Match) | 何の試合か、スコアは、ピッチの切り方は | ボード、試合名、クラブ名、バナー、得点、フル／ハーフ・レーン（ボード単位） |
並びは Scenes | Roster | Match で固定。既定の面は局面。名簿・試合のフルフォームは「準備」。配信中はパネルを出さない。
ツール類はパネルから 完全に外す（Tool rail へ）。
フル／ハーフと 5レーンは試合（ボード）単位。局面では持たない。
ユーザーは局面を次々めくる人であり、局面ごとにピッチの物理を組み替える人ではない。配信は OBS の1ソース、解説は1本の見せ方。
| 層 | 例 | 置き場 | 理由 |
|---|---|---|---|
| ピッチの切り方 | フル／ハーフ、pitchFlipped、5レーン |
BoardDocument · 試合タブ |
ワールドとキャプチャ比（aspectFor）が変わる。局面スイッチで縦横比が跳ねると OBS が壊れる。レーンは番組の図法 |
| 見せ場 | ハーフ非表示、画角ズーム、左右入替 | Scene · 局面タブ |
同じ芝の上で駒・線・カメラだけ変わる。CK→カウンターはここ |
言葉の衝突（直すなら UI コピー。データは動かさない）:
- 試合の「ハーフ」＝ピッチを半分にする（ワールドが変わる）
- 局面の「ハーフ非表示」＝同じフルピッチの片側を隠す
レーンはアイコン2枚にしない（0レーン／5レーンでピッチが二重になる）。1ピッチ1アイコン。 ハーフは横向きフル＋未使用左を濃いゴースト。セグメントは なし / レーン（EN: Off / Lanes）。ラベルは「5レーン」。
同じ横ピッチ＋ファインダー（クロップ枠）のミニチュア。 試合タブのフル／ハーフとは別物（あちらはワールド、こちらはカメラ）。実装: ViewportPresetGrid · cameraNormRect。
| テキストグリッドの問題 | アイコンが勝つ理由 |
|---|---|
| 「CK配置・左（ハーフ付近まで）」がボタンに段落 | 差は どこを切り取るか。空間記憶は絵の方が速い |
| 8枚が全部同じ形の長文ボタン | 差がクロップ枠1本なら、72px でも比較できる |
制約:
- 横向きのみ。 ボードカメラと回転させない
- レーン線は描かない。主役は枠
- Short ラベル＋フルは
title/aria-label - ツールレールは言葉のまま
- Pro 名前付きテンプレは名前ボタンのまま（アイコングリッドを肥やさない）
- 駒・ボール・ロゴ位置は ドラッグが正。数値入力は補助
- ボール吸着は「重ねて離す」だけで完結（説明はパネルに一行ヒントで足りる）
- 駒カードは 欲しいときだけ（トリプルクリック / 右クリック）。ダブルクリックは移動と衝突しやすいので使わない。単クリックは移動のみ
- カードに載せる項目（v1）: 背番号 · 名前 · 利き足のみ。向き UI は出さない（
Rは任意加速）
駒カードに載せない（PL 百科・雑誌の仕事）:
| 載せない | 理由 |
|---|---|
| 本名／登録名の二重、生年月日 | 識別は背番号＋任意の表示名で足りる |
| 国籍・代表歴・キャップ | 選手 DB 化。スクレイピング禁止と矛盾 |
| 体重、前所属、加入年、シーズン成績 | 戦術ボードのジョブ外。配信中に見ない |
| プレースタイル長文・長所解説 | ライター原稿の領域 |
身長はセットプレー解説で欲しくなることがあるが v1 は載せない（必要なら Later で任意カラム）。空欄だらけのカードにしない。
- ボタンは押した瞬間にキャンバスが変わる（「適用」二段は名簿インポートなど不可避なときだけ）
- アクティブ状態は 塗りつぶし or 強いボーダー（いまの
.activeは維持してよい） - 成功トーストは最小限。失敗だけ短く
- ボード削除・全クリア・競技変更（配置リセット）→ 確認
- 局面追加・UNDO・ツール切替 → 確認しない
- 指で駒、ピンチズーム、2本指パン（既存方針）
- パネルのタップターゲット 最小 44px 相当
- ホットキーは PC の加速。タッチ UI にホットキー表示を強制しない（小さく「任意」）
表示は「あると速い人向け」。パネルに巨大なショートカット表を置かない。
設定の末尾か ? オーバーレイ程度。既存: B 配信、[ ] 局面、V/1/2/3 ツール、Ctrl+Z。
| 項目 | 方針 |
|---|---|
| ベース | 明るいニュートラル（#fafafa / 白パネル）。配信はピッチ色が主役 |
| アクセント | ツール全部を虹色にしない（Figma / Canva / OBS も chrome はニュートラル＋ active 一色が基本） |
| 意味色 | キャンバス上の意味と 同じトークンだけレールに出す（TOOL_COLORS / LINE_COLORS） |
ツールレールの色の決め方（業界に「11色の公式」はない）:
| 層 | 方針 | ZoneBoard |
|---|---|---|
| chrome | 白・灰。ピッチと競合しない | レール背景は白半透明 |
| 常時ヒント | 意味があるツールだけ色 | 左ボーダーに意味色 |
| active | そのツールの意味色で塗り | 黒一色 active はやめる |
| 無意味な装飾色 | 付けない | 選択・ペン・テキストはニュートラル灰 |
| ツール | 色 | 根拠 |
|---|---|---|
| ホーム / アウェイ | #e74c3c / #3498db |
駒色と同じ（スポーツアプリ定番） |
| ボール | 琥珀 #d97706 |
駒でも線でもない「物」 |
| パス / ラン / ドリブル | 青 / 緑 / 橙 | 線の描画色と一致（ボールの動き・走・保持） |
| ゾーン | スカイ | ゾーン塗りと同じ |
| 選択・ペン・テキスト | ニュートラル灰 | 意味色を持たない操作 |
| 角丸 | 8–12px（Canva / 現代モバイルに馴染む）。業務アプリの 2px にしない | |
| 影 | パネル・モーダルに薄い影のみ。キャンバスに装飾影を足さない | |
| フォント | システム UI ゴシックのまま（JP/EN）。ディスプレイ書体でブランド主張しない |
- Top bar: 低く（〜48px）。試合名はインライン編集（既存）
- Side panel: 幅 280–320px。それ以上広げない（Canvas first）
- Tool rail: アイコン＋短い語（「パス」「ラン」）。アイコンのみは JP で誤解しやすいので 語を残す
- Settings: セクション見出しは短く。 purplish な「管理コンソール」レイアウトにしない
色とセグメントで一瞬で分かるようにする（スポーツアプリの型）。
- セグメント:
ホーム | アウェイ - 名簿テキストエリアの左ボーダーやドットをチーム色に
OBS のシーンリスト／CapCut のクリップに寄せる。
- 縦に長い
<button>リストより、番号付きチップ or コンパクト行 - 現在局面は塗りつぶし
- 配信モードの
[]と同じメンタルモデルを編集時も維持
| やる | やらない |
|---|---|
| 動詞が短い（「貼る」「配置」「書き出し」） | 「インポートを実行してください」 |
| プラットフォーム語（ストーリー、正方形） | 内部 ID（ig45）をユーザに見せる |
| 一行ヒントは「困ったときだけ」 | 各セクションに説明文を三段 |
| 空状態は次の一手（「背番号を1行ずつ」） | 空の枠だけ |
英語 UI も同じ階層・同じ短さ（ja/en 対称）。
推奨セクション順（上＝よく使う）:
- ロゴ（透かし） — 配信者のアイデンティティ。一番上
- 書き出し — プリセットは「投稿用（縦）」「配信キャプチャ（横）」の二群に分けて見せると迷いが減る
- 見た目 — 選択色（キャンバス上の UI 色）
- 言語
- リセット — 危険操作は一番下・視覚的に分離
「Center / BR / TL」は 図解付きの四隅ピッカー（タップで位置）にすると学習ゼロに近づく。
優先度順。指針に対する実装差分。
| # | 現状 | 指針 | 手 |
|---|---|---|---|
| 1 | ツールがドロワー内 | Tool rail をキャンバス縁へ | 済 ToolRail |
| 2 | ドロワーが単一縦スクロール | 試合 / 局面 / 名簿のタブ | 済 既定タブ＝局面 |
| 3 | 設定に試合作業が混在しうる構造 | 設定＝自分、パネル＝試合 | 済 ロゴ→書き出し→見た目→言語→リセット |
| 4 | 駒プロパティがパネル最下部 | 選択時のみキャンバス近傍 | 済 PieceInspector |
| 5 | 画角プリセットがボタンだらけ | 局面タブ内の折りたたみ＋ファインダー・アイコン | 済 ViewportPresetGrid（2026-08-30） |
| 6 | 名簿が Home/Away 縦長重複 | セグメント切替で一画面 | 済 |
| 7 | Top bar「パネル」「設定」が並列で役割不明 | アイコン＋語。設定は歯車で十分 | 済 |
| 8 | ヒント文が多い | 各タブ1行まで | 済 |
デジタルネイティブの配信者に渡して、説明なしで:
- 30 秒以内に駒を動かせる
- パネルを開かなくても「使える」と感じる
- ロゴを載せたいとき、設定に一発で辿れる
- 配信モードで「あ、画面がきれいになった」と感じる
- 「どこに何があるか」を聞かれない（聞かれたら IA 失敗）
- 自ドメイン上のコミュニティ／マーケット UI（流通は外）
- ボード内スコア・Webcam・アバター
- 初回強制チュートリアル
- アイコンのみのツール（JP）
- パネル幅を広げてピッチを削る「高機能アピール」
- スポーツ extranet 風の濃い緑・金の装飾フレーム
- Canvas / 配信モード正本:
PRODUCT_NOTE.md§2 - 機能仕様:
SPEC.md - 競技スコープ:
SPORTS_SCOPE.md - 書き出し:
SOCIAL_OUTPUT.md（あれば） - OBS:
OBS.md