Admin Layout

管理画面のページレイアウト・ナビゲーション構造・情報設計の判断基準を提供する。 新しいページを作るとき、既存ページを改修するとき、このスキルでレイアウトを決め、 具体的なTailwindクラスは melta-ui スキルを参照する。 --- ## Utility Copy基準 — 管理画面のコピーライティング 管理画面・ダッシュボード・業務UIでは**マーケティングコピーを使わない**。 ユーティリティコピー（操作語）で統一する。 ### 原則 - **オリエンテーション・ステータス・アクション**を優先。ムード・約束・ブランドボイスは不要 - ヒーローセクションは管理画面には**不要**。KPI・チャート・フィルター・テーブルから始める - セクション見出しは「そのエリアが何か」「ユーザーが何をできるか」を示す ### 良い例 vs 悪い例 | 管理画面で使わない（マーケ語） | 管理画面で使う（ユーティリティ語） | |---|---| | 「売上を最大化しましょう」 | 「今月の売上」 | | 「あなたのビジネスを次のレベルへ」 | 「KPIサマリー」 | | 「スマートな顧客管理を始めよう」 | 「顧客一覧」 | | 「チームの力を引き出す」 | 「キャスト管理」 | | 「データドリブンな意思決定を」 | 「来店推移（過去30日）」 | ### セクション見出しの書き方 - 良い: 「選択中のKPI」「プラン状況」「検索指標」「トップセグメント」「最終同期: 5分前」 - 悪い: 「あなたのインサイトを発見」「ビジネスの健康状態」「成長のチャンス」 ### リトマステスト > 管理画面の見出し・ラベル・数値だけをスキャンして、 > オペレーターがページの内容を**即座に**理解できるか？ > できなければ、コピーが抽象的すぎる。書き直す。 > **出典**: OpenAI "Designing Delightful Frontends with GPT-5.4" (2026-03-20) > "Utility Copy For Product UI" セクションをNIGHTOS管理画面向けにローカライズ。 --- ## トリガー ページ新規作成、レイアウト設計、ナビゲーション構造、画面構成、ページ種別選択、 管理画面設計、ダッシュボード設計、テーブル設計、レスポンシブ設計 --- ## スキル連携 ``` admin-layout（このスキル: 構造を決める） ↓ ui-design-guide（デザイン方針・原則） ↓ melta-ui（具体的なTailwindクラス） ``` --- ## 1. ページ種別とレイアウトテンプレート 新しいページを作るとき、まずこの7パターンから選択する。 ### Pattern 1: Index（一覧） **用途**: リソースの一覧表示。検索・フィルタ・ソート・一括操作。 **幅**: fullWidth（max-w-7xl を解除し画面幅いっぱい） ``` ┌─────────────────────────────────────────────┐ │ PageHeader: タイトル(複数形) + [追加]ボタン(右) │ ├─────────────────────────────────────────────┤ │ FilterBar: 検索 + フィルタ + ソート + タブ │ ├─────────────────────────────────────────────┤ │ Table: チェックボックス + データ行 + 操作列 │ ├─────────────────────────────────────────────┤ │ Pagination │ └─────────────────────────────────────────────┘ ``` **適用例**: 顧客一覧、来店ボード、監査ログ、サポート一覧 ### Pattern 2: Detail（詳細） **用途**: 単一リソースの詳細表示。主情報 + 補助情報。

インストール

購入後にターミナルで実行してください。

正規購入者にはインストールコマンド再実行で最新版が配信されます。

評価とレビュー