よくある操作

各画面で共通する操作の使い方をまとめます。

ヘッダー

位置	内容
左	skinsense 管理コンソール ロゴ。クリックでダッシュボードへ
中央	プロジェクト名（例: AI肌診断デモ ⌄）。クリックで所属プロジェクト切替
右	アカウントアイコン（クリックで「アカウント設定 / お問い合わせ / ログアウト」など）

上部ナビゲーション（横タブ）でセクション切替：

ダッシュボード / 診断ユーザー / 商品 / フィードバック / カウンセリング / ルール / リリース / プロジェクト

サブナビゲーション

商品・診断ユーザー・リリース・プロジェクト など、複数ページを持つセクションでは、コンテンツ左に サブナビゲーション が表示されます（例: 商品 → 一覧 / 一括登録 / 商品カテゴリ）。

検索バー

• 各一覧画面上部の検索バーで部分一致検索（特定列で完全一致のものもあります）
• バー左のフィルタアイコンで、より詳細な条件を追加可能

フィルタ（プルダウン）

検索バーの隣にあるプルダウンで、リリース使用中 / 商品あり / 必須 / 型 などのファセット絞り込みが可能。

ページネーション

形式	該当画面
ページ番号送り (ConsolePager)	商品 / フィードバック / カウンセリング / ルール / リリース / カテゴリ 等
「次の◯件を読み込む」	診断ユーザー一覧
1ページあたりの表示数 プルダウン	各一覧の下部で 10 / 25 / 50 等を切替

アクション列 (...)

一覧の右端にある三点アイコン。クリックで以下のメニューが開きます。

メニュー	よくある用途
詳細をみる	詳細画面へ遷移
編集する	編集画面へ遷移
複製する	内容コピーで新規作成
削除する	削除確認ダイアログを開く
IDをコピーする	商品IDなどをクリップボードへ

削除確認ダイアログ

影響範囲が広い削除（カテゴリ削除など）は、確認ダイアログで再確認を求めます。

パターン	確認方法
商品・フィードバック・カウンセリング・ルール削除	「削除する」ボタンの押下
カテゴリ削除（紐付き商品あり）	警告メッセージ → 「それでも削除する」

Esc または キャンセル ボタンで閉じられます。

「+ 新規登録」ボタン

各一覧画面の右上にあります。クリックで新規作成画面へ遷移します。

保存とエラー表示

各編集画面は React Hook Form + Zod スキーマ で動作しています。

• 入力値に問題があると、フィールド直下に赤字でエラー表示
• 保存成功時は画面右下にスナックバー通知
• 保存失敗時は赤いスナックバーで原因を通知

プレビュー

フィードバック編集や動作検証では、画面右側に 表示プレビュー / スマホ型シミュレータ が表示され、入力中の見た目を確認できます。

プロジェクト切替

ヘッダー中央のプロジェクト名をクリックすると、所属するプロジェクト一覧から切り替えられます。

操作中は切り替えない

プロジェクト切替で表示中のデータがすべて差し替わります。 フォーム入力中の場合は保存または破棄を確定させてから切り替えてください。

ダーク / ライトモード

ブラウザ / OS のテーマ設定に追従します（コンソール本体はライト基調）。

ショートカット

キー	動作
Esc	ダイアログを閉じる
Cmd / Ctrl + S	（ブラウザ標準）ページ保存。フォームの保存ではない ので注意

トラブル時

• 画面が真っ白 → ブラウザのコンソール（Cmd + Opt + I）でエラーメッセージを確認
• 401 / 認証エラー → 一度ログアウトして再ログイン
• 改善しない場合 → お問い合わせ からスクリーンショット付きでご連絡ください