デザイン・カスタマイズ
デザイン概要・レイアウトカスタマイズ
このドキュメントでできること
- 現状のレイアウト構造を理解する
- ブランドカラー・フォントを変更する
- ナビゲーションの項目を変更する
- 大きくレイアウトを変更するパターンを知る
現状のレイアウト構造
モバイル（スマートフォン）
┌────────────────────────────┐ ← 固定ヘッダー（スクロールしても追従）
│ ロゴ / 店舗名 ☎ 住所 │
│ [≡] │ ← ハンバーガーボタン
├────────────────────────────┤
│ ▼ メニュー（タップで開閉）│ ← 展開時のみ表示
├────────────────────────────┤
│ │
│ メインコンテンツ │
│ │
└────────────────────────────┘
[LINE] ← 右下フローティング
PC（768px 以上）
┌────────────────────────────┐
│ ロゴ / 店舗名 ☎ 住所 │ ← ヘッダー（固定なし）
├────────────────────────────┤
│ トップ│出勤表│在籍│ランク…│ ← 横並びナビゲーション
├────────────────────────────┤
│ │
│ メインコンテンツ（最大 │
│ 1152px / max-w-6xl） │
│ │
└────────────────────────────┘
主要ファイルと担当箇所
| 変更したい箇所 | 対象ファイル |
|---|---|
| ブランドカラー・フォント | frontend/tailwind.config.mjs |
| ヘッダー（ロゴ・電話番号エリア） | frontend/src/components/SiteHeader.astro |
| ナビゲーション項目 | frontend/src/lib/site-nav.ts |
| ナビゲーションのデザイン | frontend/src/components/SiteNav.astro |
| 全ページ共通（body・フォント・LINE ボタン） | frontend/src/layouts/BaseLayout.astro |
| キャストカード | frontend/src/components/CastCard.astro |
| トップページ | frontend/src/pages/home.astro |
| キャスト一覧 | frontend/src/pages/casts/index.astro |
| キャスト詳細 | frontend/src/pages/casts/[id].astro |
ブランドカラーの変更
frontend/tailwind.config.mjs を開いてください。
// frontend/tailwind.config.mjs
export default {
theme: {
extend: {
colors: {
brand: '#c8a96e', // ← メインカラー（ゴールド系）
'brand-dark': '#b8975a', // ← ホバー時の濃い色
},
},
},
}
brand を好みの色に変えると、ナビゲーションのアクティブ色・NEW バッジ・LINE ボタン以外のブランド箇所がすべて変わります。
カラー変更の例
| テーマ | brand |
brand-dark |
|---|---|---|
| ゴールド（デフォルト） | #c8a96e |
#b8975a |
| ピンク系 | #e8829a |
#d06882 |
| 紫系 | #9b59b6 |
#7d3c98 |
| 黒系ラグジュアリー | #1a1a2e |
#0f0f1a |
フォントの変更
フォントは2箇所を変更します。
1. BaseLayout.astro — Google Fonts の読み込み
<!-- frontend/src/layouts/BaseLayout.astro -->
<!-- 変更前 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet" />
<!-- 変更後の例（游ゴシック + 見出し用セリフ体） -->
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&display=swap" rel="stylesheet" />
2. tailwind.config.mjs — フォントファミリーの指定
fontFamily: {
// 変更前
sans: ['Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif'],
// 変更後の例
sans: ['Shippori Mincho', 'Hiragino Mincho ProN', 'serif'],
},
ナビゲーション項目の変更
frontend/src/lib/site-nav.ts を編集します。
// frontend/src/lib/site-nav.ts
export const SITE_NAV = [
{ href: '/home', label: 'トップ' },
{ href: '/schedule', label: '出勤表' },
{ href: '/casts', label: '在籍一覧' },
{ href: '/ranking', label: 'ランキング' },
{ href: '/system', label: '料金・案内' },
{ href: '/coupon', label: 'クーポン' },
]
- 項目を追加する: 配列に
{ href: '/pages/access', label: 'アクセス' }を追加（/pages/スラッグはフリーページ） - 項目を削除する: 該当行を削除
- ラベルを変える:
labelの文字列を変更 - 順番を変える: 配列の並び順がそのままナビの順番
ページ背景色の変更
frontend/src/layouts/BaseLayout.astro の <body> タグを変更します。
<!-- 変更前（薄いグレー） -->
<body class="bg-gray-50 font-sans text-gray-900 min-h-dvh flex flex-col">
<!-- 変更後の例（白） -->
<body class="bg-white font-sans text-gray-900 min-h-dvh flex flex-col">
<!-- 変更後の例（黒・ダーク系テーマ） -->
<body class="bg-gray-950 font-sans text-gray-100 min-h-dvh flex flex-col">
キャストカードの列数変更
キャスト一覧ページ（frontend/src/pages/casts/index.astro）の grid-cols-3 を変えます。
<!-- 変更前（3列） -->
<div class="grid grid-cols-3 gap-2">
<!-- 2列にする -->
<div class="grid grid-cols-2 gap-3">
<!-- 4列にする（カードが小さくなります） -->
<div class="grid grid-cols-4 gap-2">
<!-- スマホ2列・PC4列のレスポンシブ -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
大きなレイアウト変更パターン
パターン A: 全幅ヒーロー画像トップページ
トップページ（home.astro）に大きなビジュアルを追加する例。
<!-- home.astro の先頭に追加 -->
<div class="relative w-full h-[60vw] max-h-[420px] overflow-hidden">
<img
src="/hero.jpg"
alt="店舗イメージ"
class="w-full h-full object-cover object-center"
/>
<!-- 半透明オーバーレイとキャッチコピー -->
<div class="absolute inset-0 bg-black/40 flex flex-col items-center justify-center text-white text-center px-4">
<p class="text-2xl font-bold tracking-widest mb-2">最高の時間をあなたに</p>
<a href="/casts" class="mt-4 px-6 py-2 border border-white rounded-full text-sm hover:bg-white hover:text-black transition-colors">
在籍キャストを見る
</a>
</div>
</div>
パターン B: PC 2カラムレイアウト（サイドバーあり）
デスクトップでメインコンテンツとサイドバーを横並びにする例。
<!-- home.astro の全体を <div class="md:flex ..."> で囲む -->
<div class="md:flex md:gap-6 md:px-4 md:max-w-6xl md:mx-auto md:py-4">
<!-- メインエリア -->
<div class="md:flex-1 min-w-0">
<!-- 既存のキャストグリッドなど -->
</div>
<!-- サイドバー（PC のみ表示） -->
<aside class="hidden md:block md:w-64 shrink-0 space-y-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="font-bold text-sm mb-2">営業時間</h2>
<p class="text-sm text-gray-600">{shop.business_hours}</p>
</div>
<div class="bg-white rounded-lg shadow p-4">
<h2 class="font-bold text-sm mb-2">お知らせ</h2>
<!-- news リスト -->
</div>
</aside>
</div>
パターン C: ダーク系テーマ（黒背景）
全体をダークテーマにする最小変更セット。
1. BaseLayout.astro の body を変更
<body class="bg-gray-950 font-sans text-gray-100 min-h-dvh flex flex-col">
2. SiteHeader.astro のヘッダー背景を変更
<!-- 変更前 -->
<header class="bg-white border-b border-gray-200">
<!-- 変更後 -->
<header class="bg-gray-900 border-b border-gray-700">
3. SiteNav.astro のナビ背景を変更
<!-- PC nav 変更前 -->
<nav class="hidden md:block bg-gray-100 border-b border-gray-200">
<!-- PC nav 変更後 -->
<nav class="hidden md:block bg-gray-800 border-b border-gray-700">
4. CastCard.astro のカード背景を変更
<!-- 変更前 -->
<a href={`/casts/${id}`} class="block bg-white rounded-lg ...">
<!-- 変更後 -->
<a href={`/casts/${id}`} class="block bg-gray-800 rounded-lg ...">
AI エージェントでデザインを一括適用する
個別のカスタマイズではなく、サンプルデザインをベースにフロントエンド全体を一度に作り直したい場合は、同梱の デザイン参考ファイル を使って AI エージェントに指示できます。サンプルデザインはデモサイトに適用のデザインです。
サンプルデザインファイル
docs/08-design/design-base.md
このファイルには以下が含まれています：
| 内容 | 詳細 |
|---|---|
| AI エージェント向けプロンプト | そのままコピーして使えるワンショット指示文 |
| ページ全体のレイアウト構造 | セクション配置・2カラム比率・グリッド列数 |
| セクション別 UI 仕様 | ヘッダー・ヒーロー・出勤表・ピックアップ等の詳細 |
| セラピストカード variant | schedule / pickup / list の出し分け仕様 |
| カラー・タイポグラフィ | 白基調・Cabin 英字見出し・ゴールド系アクセント |
| CastMatrix 実装チェックリスト | テンプレート側を変更する際の確認点 |
使い方
docs/08-design/design-base.mdを開く- 冒頭の「AIエージェント向けプロンプト」セクションにあるプロンプトをコピーする
- Claude Code（またはお使いの AI エージェント）に貼り付けて実行する
# プロンプト例（design-base.md 冒頭に掲載）
このリポジトリ内のフロントエンド（frontend/）のデザインをアップデートしたいです。
【参考資料】docs/08-design/design-base.md を読み...（以下略）