テーマ
UI Design: 管理画面
機能は requirements.md、技術は design.md 参照。デザイントークンの基本は home/ui-design.md を参照する。
管理画面はサイト本体と異なり、機能性・操作性を優先する。装飾は最小限とし、運営者が短時間で目的の操作を完了できることを重視する。
デザインコンセプト
- キーワード: Clean, Functional, Efficient
- 印象: 業務向けの落ち着いた管理ツール。ユーザー向けサイトの装飾を引き継がず、シンプルで識別しやすい
- 配色: ニュートラルな白・グレー・ゴールド(アクセント)。ユーザー向けサイトとは明確に区別
- タイポグラフィ: 本文は
Jost(ユーザー向けと共通)、見出しもsans-serifで統一(Cormorant Garamondは使わない)
デザイントークン
カラーパレット(管理画面専用)
| トークン | 役割 |
|---|---|
| 背景 | #F9FAFB(gray-50 相当) |
| カード背景 | #FFFFFF |
| 主テキスト | #1F2937(gray-800 相当) |
| 副次テキスト | #6B7280(gray-500 相当) |
| ボーダー | #E5E7EB(gray-200 相当) |
| 主要アクション(プライマリボタン) | var(--gold) をアクセントとして使用 |
| 危険アクション(削除ボタン) | #DC2626(red-600 相当) |
| 成功フィードバック | #10B981(emerald-500 相当) |
| エラー | #EF4444(red-500 相当) |
サイト本体のゴールド/ローズゴールドの装飾は管理画面では使わず、業務ツールらしい中立的な配色を中心とする。var(--gold) は主要アクションのみに限定して使う。
スペーシング・レイアウト
- 標準スペーシング: 4px ベースの Tailwind スケール
- カード余白:
p-6 - セクション間:
mb-8 - 一覧テーブルの行高さ:
h-16 - フォームフィールド間:
space-y-4
タイポグラフィ
| 用途 | フォント | サイズ | weight |
|---|---|---|---|
| 画面見出し | Jost | 1.5rem | 600 |
| セクション見出し | Jost | 1.25rem | 500 |
| 本文 | Jost | 1rem | 400 |
| ラベル | Jost | 0.875rem | 500 |
| 補助テキスト | Jost | 0.875rem | 400 |
レイアウト
共通レイアウト
┌─────────────────────────────────────────────┐
│ AdminNavbar │
│ - ロゴ "Miss World Japan 管理画面" │
│ - ナビ: 候補者一覧 / サイトを表示 / ログアウト│
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ メインコンテンツ │
│ - 各画面の中身 │
└─────────────────────────────────────────────┘- 最大幅:
max-w-6xl mx-auto px-6 - ナビバー高さ: 60px、固定表示
AdminNavbar
| 項目 | 仕様 |
|---|---|
| 配置 | 画面上部、固定 |
| 背景 | 白 + 下ボーダー |
| ロゴ | 左寄せ、テキストのみ |
| ナビリンク | 右寄せ、横並び |
| 「サイトを表示」 | 一般ユーザー向けトップ(/)へのリンク。新規タブで開く想定 |
| 「ログアウト」 | クリックでセッション終了、ログイン画面へリダイレクト |
画面別仕様
ログイン画面 (/admin/login)
┌────────────────────────────┐
│ │
│ [タイトル] │
│ "管理画面ログイン" │
│ │
│ ┌──────────────────────┐ │
│ │ メールアドレス │ │
│ │ [ ] │ │
│ │ │ │
│ │ パスワード │ │
│ │ [ ] │ │
│ │ │ │
│ │ [ ログイン ] │ │
│ └──────────────────────┘ │
│ │
└────────────────────────────┘- 中央配置、最大幅
max-w-md - フォームカード: 白背景 + ボーダー + わずかな影
- 入力フィールド: 標準的なスタイル
- ログインボタン: ゴールド背景 + 白文字
- エラー時: 赤色のエラーメッセージをフォーム上部に表示
候補者一覧 (/admin/candidates)
┌─────────────────────────────────────────────┐
│ 候補者一覧 [+ 新規候補者登録] │
├─────────────────────────────────────────────┤
│ サムネイル | 名前 | 出身地 | 票数 | 画像数 | │
├─────────────────────────────────────────────┤
│ [img] | アリサ| 東京 | 124 | 3 | │
│ | | | | | │
│ | | | | [編集] [削除] │
├─────────────────────────────────────────────┤
│ [img] | サキ | 大阪 | 98 | 5 | │
│ | | | | | │
│ | | | | [編集] [削除] │
└─────────────────────────────────────────────┘- ヘッダー: 画面タイトル + 右側に「新規候補者登録」ボタン(プライマリ)
- テーブル: シンプルなテーブルレイアウト
- サムネイル: 60x80px(
/api/images/[id]?v=...) - アクション: 「編集」(リンクスタイル) + 「削除」(危険色、確認ダイアログ表示)
- 投票がある候補者の削除ボタンは無効化(
disabled+ ツールチップで理由表示)
候補者新規登録 / 編集 (/admin/candidates/new, /admin/candidates/[id]/edit)
┌──────────────────────────────────────┐
│ ← 一覧に戻る │
│ │
│ 候補者編集 (もしくは「新規候補者登録」) │
├──────────────────────────────────────┤
│ │
│ 基本情報 │
│ ┌──────────────────────────────────┐ │
│ │ 表示名 * │ │
│ │ [ ] │ │
│ │ │ │
│ │ 出身地 年齢 身長 │ │
│ │ [ ] [ ] [ ] cm │ │
│ │ │ │
│ │ 職業 │ │
│ │ [ ] │ │
│ └──────────────────────────────────┘ │
│ │
│ プロフィール │
│ ┌──────────────────────────────────┐ │
│ │ 趣味・特技 (カンマ区切りで入力) │ │
│ │ [ ] │ │
│ │ │ │
│ │ 資格・大会実績 (同上) │ │
│ │ [ ] │ │
│ │ │ │
│ │ 座右の銘 │ │
│ │ [ ] │ │
│ │ │ │
│ │ 夢 │ │
│ │ [ ] │ │
│ │ │ │
│ │ PRメッセージ │ │
│ │ [ ] │ │
│ │ [ ] │ │
│ │ [ ] │ │
│ └──────────────────────────────────┘ │
│ │
│ 表示順 │
│ ┌──────────────────────────────────┐ │
│ │ 表示順 │ │
│ │ [ ] │ │
│ └──────────────────────────────────┘ │
│ │
│ 候補者画像 (編集画面のみ表示) │
│ ┌──────────────────────────────────┐ │
│ │ [img1] [img2] [img3] [+ 追加] │ │
│ │ メイン │ │
│ │ [削除][差替] │ │
│ └──────────────────────────────────┘ │
│ │
│ [キャンセル] [保存] │
└──────────────────────────────────────┘フィールド仕様
| フィールド | 入力タイプ | 必須 | 備考 |
|---|---|---|---|
| 表示名 | text | ✓ | 最大100文字 |
| 出身地 | text | – | – |
| 年齢 | number | – | 0以上 |
| 身長 | number | – | 0以上 |
| 職業 | text | – | – |
| 趣味・特技 | text(カンマ区切り) | – | 配列に変換して保存 |
| 資格・大会実績 | text(カンマ区切り) | – | 配列に変換して保存 |
| 座右の銘 | text | – | – |
| 夢 | text | – | – |
| PRメッセージ | textarea | – | 改行を許容、行数自動拡張 |
| 表示順 | number | – | デフォルト 0 |
- 入力欄: 高さ
h-10(textareaはh-32)、ボーダー、フォーカス時にゴールドアクセント - ラベル: 入力欄の上、太字
- バリデーションエラー: 該当フィールドの下に赤色テキスト
- 必須マーク: ラベルに
*を付与
画像アップロード部(編集画面のみ)
┌────────────────────────────────────────────┐
│ 候補者画像 │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ img │ │ img │ │ img │ │ + 追加│ │
│ │ 1 │ │ 2 │ │ 3 │ │ │ │
│ │メイン│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │
│ │[D][R]│ │[D][R]│ │[D][R]│ │ │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ ドラッグして並び順を変更できます │
└────────────────────────────────────────────┘- 画像カード: 縦長 100x133px(3:4比率)
- ドラッグ&ドロップで順序変更可能(
@dnd-kit/coreを使用) - メイン画像(
order: 0)には「メイン」ラベル - 各画像にアクション: D=削除、R=差し替え
- 「+ 追加」枠: クリックでファイル選択ダイアログ
- ドラッグ中はカードが半透明 + シャドウ
- 順序変更後は自動的に Server Action
reorderCandidateImagesを呼ぶ
注: 新規登録画面では先に候補者本体を作成してから画像を追加する2段階フロー(画像は Candidate ID が必要なため)
アクションボタン
- フォーム下部に「キャンセル」(セカンダリ) と「保存」(プライマリ、ゴールド背景)
- 保存中は「保存」ボタンを disabled + スピナー表示
画像差し替えダイアログ
┌──────────────────────────────┐
│ 画像を差し替え [X]│
├──────────────────────────────┤
│ │
│ 現在の画像 │
│ [現在のサムネイル] │
│ │
│ 新しい画像を選択 │
│ [ ファイルを選択 ] │
│ │
│ プレビュー │
│ [新しい画像のプレビュー] │
│ │
│ [キャンセル] [差し替える] │
└──────────────────────────────┘削除確認ダイアログ
┌──────────────────────────────┐
│ 候補者を削除 │
├──────────────────────────────┤
│ │
│ 「アリサ」を削除します。 │
│ この操作は取り消せません。 │
│ │
│ [キャンセル] [削除] │
└──────────────────────────────┘- 削除ボタン: 危険色(
#DC2626) - 確認後、Server Action 実行
アニメーション
最小限とする。具体的には:
- ページ遷移: アニメーションなし(即時表示で良い)
- ボタンホバー: わずかな色変化(150ms)
- ローディング: スピナー(回転)
- Toast通知: フェードイン/アウト(300ms)、右上から表示
- ダイアログ: フェードイン + 軽いスケール(200ms)
業務向けツールなので過剰な動きを避ける。
レスポンシブ対応
管理画面の主な使用環境はPC・タブレット。スマホでは表示を簡略化する。
モバイル(< 768px)
- ナビバーをハンバーガーメニュー化
- テーブル: 重要な列のみ表示(サムネイル + 名前 + アクション)、他はカード形式に
- フォーム: フィールドは縦積み、レイアウトを単純化
- 画像アップロード: 並び替えはドラッグの代わりに上下ボタン
タブレット〜PC(>= 768px)
- 標準レイアウトを使用
アクセシビリティ
- 全フィールドに
<label>を関連付け - 必須項目は
aria-required="true"+ 視覚的な* - エラーは
aria-invalid="true"+aria-describedbyでメッセージと関連付け - 削除ダイアログはモーダルとして適切に実装(フォーカストラップ、Escで閉じる)
- ボタンは
<button>要素を使用、リンクは<a>を使用 - 色だけに頼らない(エラー表示にはアイコンも併用)
関連ドキュメント
requirements.md— 機能要件design.md— 技術設計../home/ui-design.md— ユーザー向けサイトの基本デザイントークン(参考)