AIエージェント向けプロンプト
以下をそのままコピーして使用できます。design-base.md のパスは環境に合わせて変更してください。
このリポジトリ内のフロントエンド（frontend/）のデザインをアップデートしたいです。
【制約】
- CastMatrix の API や管理画面から出力されるコンテンツ（system_content、ニュース本文、CMS 固定ページの HTML 等）は改変しない
- Astro テンプレート・コンポーネント・Tailwind 設定など、テンプレート側のみ変更する
- 既存のルーティング・API 連携・認証フローは壊さない
【参考資料】
- design-base.md（同梱のデザイン参考ドキュメント）を読み、レイアウト構造・セクション構成・カラーパレット・コンポーネント設計を把握する
【やること】
- 現状のフロントエンド実装を確認したうえで、design-base.md に記載のデザインパターンを可能な範囲で反映する
- 特に: 白基調カラー、Cabin + ゴシックのバイリンガル見出し、2カラムセクション（68:30）、セラピストカードの variant 出し分け、ヘッダーの予約導線
【成果物】
- 変更したファイル一覧と、design-base.md のどのセクションをどう反映したかの簡潔な説明
ダミー店舗情報（表示例）
デザイン検討用の架空データです。実装時にそのまま使う必要はありません。
| 項目 |
ダミー値 |
| 店舗名 |
Refle Salon（リフレサロン） |
| エリア表記 |
○○駅前 |
| 電話番号 |
000-0000-0000 |
| 営業時間 |
11:00 - 03:00 |
| 予約 |
完全予約制 |
| キャスト名（例） |
あかり(28)、みさき(32) 等 |
1. ページ全体のレイアウト構造
基本構造
| 項目 |
内容 |
| 全体レイアウト |
シングルカラム主体（中央寄せ・最大幅 1392px） |
| ネストレイアウト |
一部セクションで 2カラム（約 68% : 30%） |
| コンテンツ幅 |
max-width: 1392px / min-width: 920px（PC） |
| レスポンシブ |
1420px 以下で2カラム比率を % ベースに切替 |
| 背景色 |
白（#fff）ベース |
ページ階層
#container
├── header（固定ナビ + メインヘッダー）
├── nav.c-menu（ハンバーガーメニュー・モバイル用）
├── #wrap
│ ├── .big-banner
│ ├── .swiper-container.topslide（ヒーロースライダー）
│ └── #content
│ ├── .top_inner
│ │ ├── #topschedule（本日の出勤）
│ │ ├── #news_pickup（2カラム）
│ │ │ ├── #topnews（新着情報）
│ │ │ └── #pickup（ピックアップ）
│ │ └── nav.middle_menu（ショートカットナビ）
│ └── .content_bottom（2カラム）
│ ├── #cast（セラピスト一覧）
│ └── #side（インフォメーション）
│ └── .banner_area（バナー群）
├── #pagetop
└── footer
レイアウト模式図
┌─────────────────────────────────────────────────────┐
│ HEADER（ロゴ / TEL / 営業時間 / グローバルナビ） │
├─────────────────────────────────────────────────────┤
│ HERO SLIDER（フル幅スライド） │
├─────────────────────────────────────────────────────┤
│ TODAYS SCHEDULE（6列グリッド・カード） │
├──────────────────────────────┬──────────────────────┤
│ TOPICS 新着情報（約68%） │ PICK UP（約30%） │
├──────────────────────────────┴──────────────────────┤
│ MIDDLE MENU（4項目・アイコン付き横並び） │
├──────────────────────────────┬──────────────────────┤
│ THERAPIST 一覧（4列・約68%） │ INFORMATION（約30%） │
├──────────────────────────────┴──────────────────────┤
│ BANNER AREA（横並びバナー） │
├─────────────────────────────────────────────────────┤
│ FOOTER（SNS / ナビ / 著作権） │
└─────────────────────────────────────────────────────┘
2. セクション一覧（上から順）
2-1. ヘッダー
役割: ブランド認知・連絡先・全ページ共通ナビ
| 要素 |
配置・内容 |
| 固定ナビ |
スクロール時に固定。ロゴ + TEL + 営業時間 + ハンバーガーボタン |
| メインヘッダー |
ロゴ（左）、店舗情報（右） |
| 店舗情報 |
「完全予約制」バッジ + 電話番号 + 営業時間 |
| グローバルナビ |
10項目横並び。英語ラベル（大）+ 日本語ラベル（小）の2段表示 |
ナビゲーション項目（10件・パターン）:
| EN |
JP |
| TOP |
トップ |
| NEWS |
新着情報 |
| SYSTEM |
料金システム |
| THERAPIST |
セラピスト一覧 |
| SCHEDULE |
出勤情報 |
| EVENT |
イベント |
| RECRUIT |
求人情報 |
| ACCESS |
アクセス |
| RANKING |
ランキング |
| CONTACT |
お問い合わせ |
2-2. ヒーロースライダー
役割: ファーストビューの訴求
| 要素 |
内容 |
| スライド画像 |
中央配置、クリックでリンク遷移可 |
| ページネーション |
下部・横長バレット（27×4px、角丸なし） |
| 実装参考 |
Swiper.js |
2-3. 本日の出勤（#topschedule）
役割: 当日出勤の一覧・予約導線（最重要セクション）
| 要素 |
内容 |
| 見出し |
TODAYS SCHEDULE + 本日の出勤 |
| 日付バッジ |
中央・角丸ピル型（例: 06/06(土)）・下向き矢印装飾 |
| グリッド |
6列 flexbox（width: calc(100% / 6 - 10px)） |
| カード |
全体がプロフィールページへのリンク |
カード内要素:
┌─────────────────┐
│ [写真] │
├─────────────────┤
│ 名前(年齢) │
│ 身長○○cm │
│ 12:00 - 18:00 │
├─────────────────┤
│ [タグ][タグ]... │ ← 最大4つ
└─────────────────┘
2-4. 新着情報 + ピックアップ — 2カラム（68:30）
左: TOPICS 新着情報（約68%）
| 要素 |
内容 |
| 見出し |
TOPICS + 新着情報 |
| 記事 |
タイトル + 更新日 + 本文（画像・テキスト） |
| スクロール |
max-height: 603px + overflow: auto |
右: PICK UP ピックアップ（約30%）
| 要素 |
内容 |
| 見出し |
PICK UP + ピックアップ |
| カード |
1名・大型。名前(年齢) + 身長のみ |
2-5. ミドルメニュー
役割: 主要4ページへのショートカット
| 要素 |
内容 |
| レイアウト |
4項目横並び |
| 各項目 |
アイコン + 英日2段テキスト + 右矢印 |
| リンク先例 |
SYSTEM / SCHEDULE / RECRUIT / EVENT |
2-6. セラピスト一覧 + インフォメーション — 2カラム（68:30）
左: THERAPIST 一覧（約68%）
| 要素 |
内容 |
| 見出し |
THERAPIST + セラピスト一覧 |
| グリッド |
4列（width: calc((100% - 40px) / 4)） |
| カード |
写真 + 名前(年齢) + 身長 + タグ4つ（出勤時間なし） |
右: INFORMATION（約30%）
| 要素 |
内容 |
| 見出し |
INFORMATION + インフォメーション |
| 内容 |
画像バナーを縦積み |
2-7. バナーエリア
役割: 相互リンク・訴求バナー
| 要素 |
内容 |
| レイアウト |
中央寄せ・インラインブロック横並び |
| サイズ例 |
88×31 / 200×40 混在 |
2-8. フッター
| 要素 |
内容 |
| SNS |
LINE 公式（アイコン色 #f896ad） |
| フッターナビ |
10項目・日本語のみ横並び |
| 禁止文言 |
無断転載禁止 |
| コピーライト |
Copyright(C) {店舗名}. All Rights Reserved. |
2-9. 共通UI
| 要素 |
内容 |
| ページトップ |
右下固定「>」ボタン |
| ハンバーガー |
3本線 → オーバーレイナビ（モバイル） |
3. 共通コンポーネント: セラピストカード（.c-panel）
| パーツ |
クラス名 |
説明 |
| カード外枠 |
.c-panel |
白背景・角丸5px・padding |
| 写真 |
.c-panel__image |
プロフィールへリンク |
| 名前 |
.c-panel__name |
名前(年齢) |
| 身長 |
.c-panel__size |
身長○○cm |
| 出勤時間 |
.c-panel__time |
出勤セクションのみ |
| タグ |
.c-panel__tag |
特徴タグ・最大4件 |
CastMatrix 実装時の variant 出し分け（推奨）:
| variant |
表示項目 |
schedule |
写真 + 名前(年齢) + 身長 + 出勤時間 + タグ |
pickup |
写真 + 名前(年齢) + 身長 |
list |
写真 + 名前(年齢) + 身長 + タグ（時間なし） |
4. デザイン・UIの特徴
カラー・タイポグラフィ
| 項目 |
値 |
| 背景 |
#fff |
| 本文テキスト |
#3c3c3c |
| アクセント |
#9c8e5c（ゴールド系） |
| 英字見出しフォント |
Cabin（Google Fonts） |
| 日本語 |
ゴシック系（Noto Sans JP 等） |
| 見出し |
英字30px + 日本語14px の2段構成 |
インタラクション
| 項目 |
内容 |
| スクロールアニメ |
fadeInUp（WOW.js 等） |
| スライダー |
Swiper.js |
| 固定ヘッダー |
スクロール時に sticky / fixed |
UXパターン
| 項目 |
内容 |
| バイリンガルラベル |
ナビ・見出しで EN + JP 併記 |
| 予約導線 |
ヘッダーに電話・営業時間・完全予約制を常時表示 |
| 情報密度 |
出勤（多）→ ピックアップ（中）→ 一覧（標準）で段階的に変化 |
| 2カラム |
メイン（左・広）+ サイド（右・狭）の 68:30 |
5. グリッドまとめ
| セクション |
カラム数 |
備考 |
| 本日の出勤 |
6列 |
出勤時間あり |
| 新着 + ピックアップ |
2列（68:30） |
左:記事 / 右:1名 |
| ミドルメニュー |
4列 |
アイコン+テキスト |
| セラピスト一覧 |
4列 |
出勤時間なし |
| インフォメーション |
1列（サイド） |
バナー縦積み |
6. CastMatrix への実装チェックリスト
- セクション見出しを「英字（Cabin・大）+ 日本語（小）」の2段にする
- セラピストカードを共通コンポーネント化し variant で出し分ける
- 2カラムセクションは
68% : 30%（gap: 2%）を基準にする
- 出勤セクションは6列グリッドを優先表示する
- カラーパレット: 白 +
#3c3c3c + #9c8e5c
- コンテナ最大幅
1392px、ヘッダーは sticky
- API 由来の HTML コンテンツ（料金表等）は
prose でラップして表示する
免責
本資料は第三者サイトのレイアウト・UI パターンをデザイン参考として抽象化したものです。実在の店舗・個人・キャンペーン・連絡先への言及は意図的に含めていません。再配布・カスタマイズ用途に限定してご利用ください。