1. メインナビ
ホーム、カレンダー、会員、売上、分析、連絡、サイト、店舗設定、設定、ログ、機能管理を横断する最上位ナビ。
admin のデザイントークンと共有コンポーネントの唯一の正本(single source of truth) (開発者向け・noindex)。
新しい UI を作る前にここを見て既存部品を再利用すること。色は必ずトークンを参照し、hex 直書きは禁止。
実画面の正本 CSS は admin.css (:root と .a-* / .sales-* / .msum-* / .featurev2-* クラス)。
構成は有名デザインシステム (Atlassian / Shopify Polaris / IBM Carbon / Material 3) の章立てに倣い、
トークン → 部品 → 使用ガイドラインの3層 + 状態/アクセシビリティ/ブレークポイントで整理している。
ここで選んだデザインは、実行を押した時点でこのカタログ内の同種UIに一括反映されます。実画面へ反映する前の安全なデザイン検証用です。
実行すると、この周辺のボタン/カード/表/フォーム/バッジも選択デザインへ変わります。
| UI | 状態 | 操作 |
|---|---|---|
| 会員一覧 | 表示 | 詳細 |
| 予約 | 確認 | 編集 |
v1の統一化後に検討できるUI案。選択状態は保存され、採用候補として残せます。
色、文字、最大幅、ページ遷移をサイト全体で管理し、Inspectorで要素ごとのサイズ/位置/余白/装飾を調整する。Site Styles / Inspector
高度なCSS Grid、重なりにくいStack、レスポンシブContainerで構造を作る。Advanced Grid / Stack / Containers
デスクトップから下位ブレークポイントへ継承し、必要な箇所だけ上書き。共通セクションは一度作って複数ページへ同期する。Breakpoints / Global Sections
ページをセクションとブロックで組み、複製/保存/並べ替え/テンプレート変更で構成する。Squarespace sections / Shopify sections
変数、グローバルスタイル、コンポーネント、Properties、Variantsで、自由度と一貫性を両立する。Webflow checklist / Framer scale
左に構造ツリー、中央にプレビュー、右に設定。テンプレート、マーケット、保存/Undo/Redo、モバイルプレビューを持つ。Theme editor
v1の管理画面で実際に使うUIを、役割ごとにまとめた選択表。ページ単位ではなく、同じ役目のUIを同じカテゴリに集めています。 ここでA/B/C/Dを選び、以後の画面調整は選ばれた型に寄せます。
ホーム、カレンダー、会員、売上、分析、連絡、サイト、店舗設定、設定、ログ、機能管理を横断する最上位ナビ。
ロゴ、通知、ログイン名、ログアウトを置く領域。全セクションで常時同じ位置に出す。
売上、分析、サイト、店舗設定など、1ページ内でビューを切り替えるUI。
ページ全体の情報配分。ホーム、会員、売上、設定で共通の型を使い分ける。
情報の区切り方。押せるものと表示だけのものを見た目で混同させない。
主操作、補助操作、破壊操作、行内操作を明確に分ける。
入力、設定、会員情報編集の型。保存タイミングもここで統一する。
会員一覧、予約一覧、売上、ログ、設定テーブルの見せ方。
数字を目立たせる領域。ボタンやカードと混同しない。
編集、確認、詳細閲覧、一時作業の出し方。
状態を伝えるUI。色だけに依存せず、短い言葉を必ず添える。
写真、基本情報、契約、カルテ、履歴をどう配分するか。
テンプレート、配信、履歴、本文プレビューの作業UI。
v1に出すもの、v2以降まで隠すもの、権限で見せるものを扱うUI。
カレンダー、会員、一覧系の検索・フィルタ・解除・適用中条件。
予約、勤怠、枠ブロック、週移動、当日表示、一覧切替。
一覧テーブル、列設定ポップ、ソート、横スクロール、行内操作。
CSV入出力、JSONバックアップ、取込プレビュー、危険操作隔離。
保存バー、自動保存、破棄、操作ログの取消。
予約変更、削除、繰り返し、勤怠追加、担当選択、時間プリセット。
請求作成、支払済み化、無効化、リンクコピー、チケット販売/付与/調整。
お知らせ、問い合わせ、固定ページ、公開状態、本文編集、保存/削除。
会員写真、写真アップロード、ギャラリー、拡大表示、再読み込み/削除。
受付画面、セルフチェックイン、QRカメラ、電話番号キーパッド、結果表示。
操作ログ、取込ログ、Google同期結果、監査ログ、取消可能ログ。
ロール別表示、owner限定、v2以降非表示、v1対象外の扱い。
基準は docs/ADMIN_V1_PAGES.md、照合元は admin-nav.html / reservation-admin.html / management.html / reception.html / src/reservation-admin/*.js。
v1ページに出るUIをページ別に列挙し、上の選択カテゴリへ対応付ける。
#body 体組成、#blog 日報。#revenue-section 売上集計、#ai-settings-section AI設定。#dashboard#schedule / #waitlist-section#customers#plans / #invoice-section / #ticket-section / #purchase-section#mail / #notification-section / #broadcast-section / #step-mail-section / #sms-section / #sender-section / #broadcast-history-section#reports / #report-stats-section / #utilization-section / #cancel-analysis-section / #visit-analysis-section / #arpu-section / #sync-log-section / #trial-conversion-section / #shift-section / #staff-performance-section#site / #announcements / #contacts / #pages（実装枠: #announcements-section / #contacts-section / #static-pages-section）#store / #menus-plans / #menu-section / #plan-section / #cancel-reason-section / #trainers / #trainer-section / #trainer-dualrole-section / #hours / #business-hours-section / #booking / #booking-reception / #booking-rules-section / #form-fields-section#settings / #store-info-section / #payment-section / #user-section / #permission-section / #integrations-section / #login-policy-section / #audit-log-section / #backup-section#logs / #logs-operation-section / #logs-sync-section#feature-flags / #feature-flags-sectionreception.html| 範囲 | v1画面/機能 | 実装で出るUI要素 | 対応カテゴリ |
|---|---|---|---|
| 共通 | admin shell | ロゴ、グローバルナビ、現在地、通知ベル/件数、通知モーダル、ログイン名、ログアウト、権限別表示。 | |
| 共通 | ログイン/認証 | ログインカード、ID/パスワード入力、送信ボタン、エラー表示、ローカルログイン注記。 | |
| 共通 | 保存/未保存 | 保存バー、保存する、破棄、保存済み/失敗、操作ログから取消。 | |
| ホーム | #dashboard | 管理サマリー、今日の予定、通知カード、KPI、クイックアクション、カードリンク。 | |
| カレンダー | #schedule | 予約/勤怠フィルタ、検索、絞り込み解除、前後移動、週表示、カレンダー/リスト切替、当日強調。 | |
| カレンダー | 無料体験/会員予約/勤怠/待機 | 予約一覧、体験一覧、列設定、CSV、勤怠追加、勤怠削除、キャンセル待ちリスト。 | |
| カレンダー | 予約・勤怠ダイアログ | 予約編集、予約削除、繰り返し予約確認、勤怠種別、時間プリセット、担当選択、確認ダイアログ。 | |
| 会員 | #customers 一覧 | 検索、在籍/グループ/性別/日付フィルタ、メール未登録、詳細検索、五十音ジャンプ、会員表、CSV取込/出力。 | |
| 会員 | 一覧メンテナンス | 新規追加、その他メニュー、自動ステータス判定、重複候補、エラー会員整理、CSV取込モーダル。 | |
| 会員 | 会員詳細 | 履歴書ヘッダー、写真、氏名/かな/性別/年代/入会日、keystats、連絡先、契約、流入、運用メモ。 | |
| 会員 | カルテ/履歴 | カルテ入力、体重/体脂肪率/筋肉量、プログラム、所感、カルテ履歴、来店・予約履歴、空状態。 | |
| 会員 | 写真/チケット/legacy非表示 | 写真アップロード、写真一覧、ライトボックス、削除、チケット残数、未使用招待/QR系は本番UIに出さない。 | |
| 売上 | #plans 請求 | 売上サマリー、請求作成、CSV出力、請求表、支払済み化、無効化、支払リンクコピー。 | |
| 売上 | チケット/購入記録 | チケット販売、手動付与、調整、販売/付与テーブル、購入記録フォーム、削除。 | |
| 連絡 | #mail テンプレート | 連絡サマリー、メールタブ、テンプレ追加、テンプレ一覧、件名/本文編集、差込トークン、プレビュー。 | |
| 連絡 | 配信/履歴/設定 | 一斉配信、ステップメール、SMS、差出人設定、期間プリセット、送信記録、送信履歴テーブル。 | |
| 分析 | #reports | 分析サマリー、レポートタブ、インサイトカード、予約集計、稼働率、キャンセル、来店、客単価、体験→入会率。 | |
| 分析 | 同期/シフト/スタッフ | 同期ログ表、シフト月移動、シフト計画パネル、スタッフ別実績表。 | |
| サイト | #site お知らせ | サイトサマリー、サイトタブ、お知らせ一覧、編集フォーム、公開期間、期間プリセット、削除。 | |
| サイト | 問い合わせ/固定ページ | 問い合わせ受信、ステータス変更、削除、固定ページ編集、保存、削除、追加。 | |
| 店舗設定 | メニュー/プラン/理由 | 店舗設定サマリー、設定グループ、メニュー追加、プラン追加、キャンセル理由追加、各マスタ表、削除。 | |
| 店舗設定 | スタッフ/営業時間/予約 | トレーナー追加/編集、兼務表、営業時間グリッド、休業日追加、予約受付トグル、予約ルール、フォーム項目。 | |
| 設定 | 店舗情報/決済 | 店舗情報フォーム、決済プロバイダカード、有効化、サンドボックス、保存、接続テスト、Webhookコピー、結果表示。 | |
| 設定 | アカウント/権限/ログイン | アカウント追加/編集/削除、権限マトリクス、ログインポリシー、owner/admin限定表示。 | |
| 設定 | 外部連携/監査/バックアップ | Google取込、結果表示、トレーナーID再紐付け、監査ログ、JSON書き出し/取込、隠しファイル入力。 | |
| ログ | #logs | 操作ログリスト、取消、取込ログテーブル、同期結果、空状態/エラー状態。 | |
| 機能管理 | #feature-flags | リリースモード切替、機能トグル、v1/v2/v3バッジ、owner限定、デザインカタログiframe。 | |
| 受付 | reception.html | 日付/時計/鮮度、検索、更新、本日サマリー、来店リスト、セルフモード、QRカメラ、電話番号キーパッド、結果表示。 | |
| 共通状態 | 空/エラー/読取専用 | 空状態、フォームエラー、バッジ、読み取り専用、disabled、権限外非表示、danger操作。 | |
| 対象外 | v2以降 | 体組成、日報、売上集計、AI設定、v2/v3 feature catalog配下の未ナビ機能はv1カタログの採用対象外。 |
照合メモ: v1実装ID 509件 / data属性123種 / UI操作系data属性105種を抽出。各行は個別IDをそのまま羅列せず、同じ役割のUIとして統合している。
色相パレットではなく「どの UI 要素に使うか」の役割で選ぶ。背景/面/罫線/テキスト/状態色/フォーカスに分かれる。
| 意味 | admin (--a-*) | HP (styles.css) | 状態 |
|---|---|---|---|
| 基調黒 | --a-ink #111 | --black #111111 | 実質同値 |
| 本文 | --a-text #1c1c1c | --ink #1b1b1b | 微差 |
| 罫線 | --a-line #cfcfcf | --line #cfcfcf | ✅ 統一済み |
| 強調(黄) | --a-accent #ffe36e | --yellow #ffe36e | ✅ 統一済み |
| 赤系 | --a-danger #c92a2a | --red #ff4b58 / --error #c5392e | admin 独自 (意味別) |
注: HP の --accent は赤 (#ff4b58)、admin の --a-accent は黄。名前は同じでも意味が違うので相互流用しないこと。
余白はこの離散スケールから選ぶ (アドホックな px を書かない)。狭い画面では段を1つ飛ばして詰めてよい。
px値を :root に集約。2カラム→1カラムの畳み込みはこの値を @media に使う。
| トークン | px | 用途 |
|---|---|---|
--a-bp-sm | 600px | スマホ。横並びを縦積みへ。 |
--a-bp-md | 900px | タブレット。2カラム(連絡/サイト/売上等の左サマリー)→1カラムの境界。 |
--a-bp-lg | 1101px | PC。左索引2カラムが立つ境界 (styles.css の既存 @media と一致)。 |
キーボードで Tab すると :focus-visible の黄リングが出る (マウスclickでは出ない)。hover=軽く暗く / active=さらに暗く。
| バリアント | 役割 | 使う場面 |
|---|---|---|
.a-btn-primary 黄ベタ | 押せる主操作 | 新規追加 / 編集 / すべて見る / CSV出力。その画面の主アクション。 |
.a-btn 白地+黒枠 | 標準操作 | 主アクション以外の通常ボタン。黄と並べる時のサブ。 |
.a-btn-ghost 白地+薄罫線 | 補助/控えめ | 「…その他」トグル等、主アクションより目立たせたくないもの。 |
.a-btn-danger 赤枠 | 破壊的 | 削除 / 停止 / 取消不可の操作。これだけ赤。 |
純粋な下線タブ。非選択=文字のみ / hover=文字が濃く+淡い下線 / 選択中=黒文字+太い黄下線 (「黄ライン=今ここ」)。 売上 / 分析 / 店舗設定 / 設定 / 連絡 / サイト の全ページがこの1部品で統一されている。
売上/分析ページのように KPI がそのページの主役の時に使う (前月比デルタ/ゲージ/アラート付き)。高さは詰める。
今月
ホーム/連絡/サイト/店舗/設定の左サマリー列はこれ。枠線なし・薄い区切り線のみで「表示」であってボタンに見せない。注意値だけ .msum-item-live の黄左罫線で強調。
surface 面 + line 罫線 + radius。標準のカード。
空状態 (.a-empty) は「データが無い」ことを淡く示す。本来は次の行動 (追加ボタン等) への誘導文を添えると親切 (Polaris/Atlassian の Empty state 流儀)。
状態を色+短いラベルで示す。表のセル内でも上下左右センター。
入力欄は内容に見合う幅に (画面いっぱいに間延びさせない)。Tab でフォーカスすると黄リング。必須/エラーは --a-danger で示す。
:focus-visible で黄リング (--a-focus / --a-focus-ring)。リングを outline:none で消さない。--a-text(#1c1c1c) を白地で使えば十分。黄背景(--a-accent)の上の文字は必ず --a-accent-ink(#5b4300) を使う (白文字は黄の上でコントラスト不足)。.a-btn-xs は行内の補助用に留める。<th>、画像は alt、フォームは <label> と関連付ける。| やめたもの | 見た目 | 理由 | 今の正解 |
|---|---|---|---|
| 黒ベタボタン | 編集 | 押せるボタンに見えない | 黄ベタ .a-btn-primary |
| 丸ピル/角タブの混在 | テンプレート | ボタンかタブか中途半端 | 純粋な下線タブ .sales-v2-tabs |
| 枠付きKPI | 送信ログ 0件 |
ghostボタンに見える | 枠なし+区切り線 .msum-item |
| 浮いた追加ボタンバー | カード右上に固まる | 対応する表から離れて宙に浮く | 各セクション見出し横へ移設 |
| 間延びした均等列幅 | 全列を均等に引き伸ばし | 無駄に広く密度が低い | 内容幅 + 空いた横に2カラム |
| 重複したKPI帯 | 上部帯+サイドで同じ数字 | 同じ数字が2箇所で冗長 | 左サマリーへ集約 (two-tier) |
出典: 章立ては Atlassian Design System / Shopify Polaris / IBM Carbon / Material Design 3 の公式ドキュメントを参照 (2026-06 deep-research で検証)。
ALIVE の実装に合わせて取捨選択している。トークン・部品の正本は常に admin.css。