1. 画面全体
■ 全体レイアウト（ワイヤーフレーム）
🌀 castbox
⚙ フィルタ
クライアント ▾
対象月 ▾
氏名 ▾
稼働場所 ▾
リセット
↻ 更新
⇩ Download
件数
309
総稼働数
268
生産
1.15
稼働カレンダー件数 / 生産
6週×7日 ヒートマップ
獲得件数と生産稼働 / 件数 / 生産
人別 横棒グラフ
稼働場所
案件別 横棒グラフ
獲得元件 / %
キャリア別 ドーナツ
コメント
日付 / 氏名 / 内容
1.1 表示条件
- スプラッシュ画面（初回 + 更新ボタン押下）: 5秒以上の最低表示
- データ準備前（
cache.ready === false）: 各パネルに「読み込み中」スピナー
2. ヘッダー
| 要素 | 実装 | 挙動 |
|---|---|---|
| ロゴ SVG | 40×40 | 静的（アニメなし / ID衝突防止でIDなし） |
| ロゴ文字 | castbox / Comfortaa / #fff | 静的 |
フィルタトグル .btn-filter-toggle | instant_mix + "フィルタ" / height:36px | クリックでフィルタバー開閉 / オーバーレイ開時は opacity:0 でフェードアウト |
ハンバーガーメニュー .btn-menu | 3本線 / 36×36px / base.css共通 | クリックでマイページオーバーレイ開閉 / 開時はX形にCSSアニメーション |
- 背景色:
#807e7c - パディング:
6px 20px（デスクトップ） /10px 16px + env(safe-area-inset-top)（モバイル） - 高さ: デスクトップ52px / モバイル60px（CSS変数
--header-hで管理） - 親要素
.top-stackがposition: sticky; top: 0; z-index: 50
3. フィルタバー
3.1 構造
| 行 | フィールド | 型 | 選択肢 |
|---|---|---|---|
| 1 | クライアント | <select> | (すべて) / Softbank / docomo / KDDI |
| 1 | 対象月 | <select> | /api/filters の months（降順） |
| 2 | 氏名 | <select> | /api/filters の names（稼働数降順） |
| 2 | 稼働場所 | <select> | /api/filters の locations |
| 3 | [ リセット ] | ghost ボタン | すべてのフィルタを初期値に戻す |
| 4 | 更新日時 | テキスト | updated_at を YYYY/MM/DD HH:mm 表示 |
| 4 | [↻ 更新] | primary | manualRefresh() → splash再生 |
| 4 | [⇩ Download] | primary | captureScreenshot() → PNG保存 |
3.2 挙動
- 初期状態:
collapsed（非表示） - 開く: ヘッダーの「フィルタ」タップ →
classList.remove('collapsed')+ 背景遮光 - 閉じる: 欄外タップ
- クライアント・対象月の変更時は
selectedDate=null（カレンダー単日選択解除）
4. KPIカード
| カード | ID | ソース | 表記 |
|---|---|---|---|
| 件数 | kpi-count | summary.total_count | 整数 |
| 総稼働数 | kpi-working | summary.total_working | 整数 |
| 生産 | kpi-avg | summary.avg_per_work | 小数第2位 |
- 横並び3カラム（モバイルは1カラム）
- 数値はカウントアップアニメ（ease-out cubic / 約600ms）
- 単日選択時は該当日のKPIに置換
5. 稼働カレンダー
| 要素 | 仕様 |
|---|---|
| グリッド | 6週×7日 / 日曜始まり |
| 表示指標 | 件数 / 生産（切替 cal-metric-count / cal-metric-seisan） |
| セル | 日付・指標値・ヒートマップ色 |
| クリック | 当該日で単日絞り込み（selectedDate 設定 → 全パネル再取得） |
| 凡例 | 月ラベル #calendar-month-label |
6. 稼働場所ランキング
| 要素 | 仕様 |
|---|---|
| ソース | summary.by_location |
| 表示 | 件数降順 横棒グラフ |
| ラベル | 場所名 / 件数 / 稼働数 / 生産（件数÷稼働数） |
| スクロール | .scroll-area 縦スクロール |
7. 獲得件数と生産（人別）
| 要素 | 仕様 |
|---|---|
| ソース | summary.by_person |
| 並替 | 稼働数 / 件数 / 生産（sort-working / sort-count / sort-seisan） |
| 表示 | 横棒グラフ（名前 + 指標値） |
| 初期 | 件数降順 |
8. 獲得元ドーナツ
| 要素 | 仕様 |
|---|---|
| ソース | /api/by_carrier の carriers |
| カテゴリ | SB / YM / docomo / au / ahamo / POVO / UQ / 楽天 / その他 |
| 表示切替 | 件数 / パーセント（toggle-count / toggle-percent） |
| 中央ラベル | 合計件数 or 100% |
| 凡例 | #carrier-legend にキャリア名+値 |
| アニメ | splash退出後に再トリガー |
9. コメント
| 要素 | 仕様 |
|---|---|
| ソース | summary.comments（備考非空・フィルタ適用後） |
| 並び | 日付降順 |
| 列 | 日付 / 氏名 / 内容 |
| スクロール | .scroll-area |
10. Splash画面
castbox
loading....
10.1 Phase一覧
| Phase | 時間 | 挙動 |
|---|---|---|
phase-loading | データ待機中（最低5秒保証） | グレーロゴの2.4sループ + loading....ふわふわ |
phase-settle | 1.4s + breathe 2.8s | カラー化 + 軽い呼吸 + castbox 文字 floatIn |
phase-exit | 約600ms | ロゴ縮小退場 + 文字逆順フェードアウト |
phase-hidden | — | opacity: 0; pointer-events: none |
10.2 制約
- データAPIは
phase-loading中のみ発火（裏で走る） - 最低5秒経過 & データ準備完了の両方を満たしたら
settleへ - 直接
updateDashboard()を呼ばずrunSplashSequence(loadWork, minLoadingMs)経由 - ヘッダーロゴとSVG IDが衝突するため、ヘッダー側は
#logo-c等のID削除済み
10.3 フォント
- ファミリ: Comfortaa（Variable, 300-700）
- 配置:
ui/assets/fonts/Comfortaa-VariableFont_wght.ttf @font-faceでローカル読込 /font-display: swap
11. 配色パレット
| 用途 | カラー |
|---|---|
| ヘッダー背景 | #807e7c |
| 本文背景 | #f0f0f0 |
| 本文文字 | #222 |
| プライマリ（splash文字・アクセント・マイページ） | #37359A |
| Splash背景 | #fff |
| theme-color (meta / PWA) | #37359A |
| Lv.4（上位10%未満） | #37359a |
| Lv.3（上位30%未満） | #6c69b4 |
| Lv.2（上位60%未満） | #c4c3d7 |
| Lv.1（上位60%以上） | #e8e8e8 |
12. マイページオーバーレイ（T-22 / T-24）
| 要素 | 仕様 |
|---|---|
| 表示形式 | position: fixed; top: var(--header-h); でヘッダー直下に全画面展開 |
| 開閉アニメ | translateY(10px) → (0) + opacity 0→1（0.2s cubic-bezier） |
| 閉じ方 | ハンバーガー再タップ / ESCキー |
| プロフィール | 社名 / ユーザーネーム / ユーザーID（メールアドレス） / Firestore読み書き |
| 編集切替 | フェードアウト150ms → フェードイン200ms |
| ログイン履歴 | 最終ログイン / 初回登録 / 直近10件（Firestore サブコレクション） |
| ログイン方法 | メール/パスワード + Google連携（linkWithPopup / unlinkProvider） |
| 法的情報 | /terms / /privacy リンク |
| ログアウト | signOut + localStorage削除 + /login リダイレクト |
| データ先行取得 | dashboard 初回ロード時に onAuthStateChanged で先行取得 → 即時表示 |
13. PWA対応（T-23）
| ファイル | 仕様 |
|---|---|
assets/castbox_icon_180.png | apple-touch-icon / 白背景 + ロゴ（Pillow生成） |
assets/castbox_icon_192.png | manifest icons[0] |
assets/castbox_icon_512.png | manifest icons[1] |
assets/manifest.webmanifest | name: CastBox / display: standalone / theme_color: #37359A |
12. タイポグラフィ
| 用途 | フォント | サイズ | ウェイト |
|---|---|---|---|
| body | system sans | 13px | 400 |
| ロゴ文字 | Comfortaa | 20px(ヘッダ) / 36px(splash) | 700 |
| KPI数値 | system sans | 大（カード内最大） | 700 |
| アイコン | Material Symbols Outlined | 18px | 400 |
13. インタラクション仕様
| トリガー | 動作 |
|---|---|
| フィルタ選択変更 | applyFilters() → 全パネル再取得（splash無し） |
| カレンダーセルtap | selectedDate 設定 → 全パネル再取得 |
| 更新ボタン押下 | manualRefresh() → POST /api/refresh → splash再生 → 再取得 |
| Download押下 | html2canvas でキャプチャ → PNG保存 |
| Pull-to-refresh (mobile) | 最上部で下フリック → manualRefresh() |
| フィルタ外タップ | フィルタバー閉じる |
14. レスポンシブ
| ブレークポイント | 変化 |
|---|---|
| 〜640px | グリッド1カラム化 / KPI縦積み / フィルタ縦並び |
| 641〜1024px | 2カラム維持 |
| 1025px〜 | メインは2カラム・コメントは全幅 |
15. エラーハンドリング
| ケース | UI表示 |
|---|---|
| API 503（データ準備中） | splash継続 + status-bar に「データ準備中...」 |
| API 400（month形式エラー） | status-barに「月の形式が不正」 |
| フィルタ取得失敗 | 該当selectは すべて のみ |
| fetch例外 | コンソールエラー + status-bar |
16. 要素ID早見表
| ID | 用途 |
|---|---|
filter-bar | フィルタバー本体 |
filter-backdrop | 遮光レイヤー |
filter-career / filter-month / filter-name / filter-location | 各select |
btn-filter-toggle / btn-refresh / btn-capture | ボタン |
updated-at | 更新日時表示 |
kpi-count / kpi-working / kpi-avg | KPI |
calendar-container / calendar-month-label | カレンダー |
cal-metric-count / cal-metric-seisan | カレンダー指標切替 |
person-ranking / location-ranking | ランキング |
sort-working / sort-count / sort-seisan | 人別並替 |
carrier-chart / carrier-legend / carrier-chart-wrap | ドーナツ |
toggle-count / toggle-percent | ドーナツ切替 |
comment-area | コメント一覧 |
status-bar | ステータス表示 |
logo-c / logo-line-1..3 / logo-man | splashアニメ対象SVG（ヘッダーは削除済み） |