# 業種テンプレート: 飲食店(実装検証済み)

「炭火とだし 灯」という仮名の居酒屋サイトで実装・動作確認済み。共通前提(`SKILL.md` の「4. 共通実装ルール」— カラー変数名・lucideアイコン・placehold.coプレースホルダー・detailsアコーディオン・action="#"フォーム等)を適用する。

## 1. サイト構成

```
/               トップ
├── /menu       メニュー(ランチ/ディナー/ドリンク/コース)
├── /about      お店のこだわり・店主紹介
├── /interior   店内・席のご案内(個室/カウンター)
├── /party      宴会・貸切のご案内
├── /news       お知らせ(営業時間変更・季節メニュー)
├── /access     アクセス・営業時間
└── /contact    予約(電話+WEB予約リンク)
```

## 2. トップページ セクション構成(実装用)

1. **ヒーロー** `id="hero"` — 全幅1カラム。看板料理の写真を全面背景(暗めのオーバーレイ40%)+中央寄せテキスト。h1(店名+ひとことコンセプト)、サブコピー、CTAボタン2つ(WEB予約=塗り/電話=アウトライン)、営業時間・定休日の小表示。SPは文字サイズ縮小、ボタン縦積み。
2. **こだわり(共感→世界観)** `id="concept"` — 2カラム(左:料理・仕込み写真、右:テキスト)。h2、本文2段落、店主名キャプション。SP縦積み(写真上)。
3. **看板メニュー** `id="menu"` — 3カラムカード(写真大きめ+料理名+価格+ひとこと)。全メニューへのリンクボタン。PC3カラム→SPは横スワイプカルーセル(CSSスクロールスナップ)。
4. **選ばれる理由** `id="strengths"` — 3カラムアイコンカード。SP1カラム。
5. **店内・お席** `id="interior"` — 写真グリッド2×2(カウンター/テーブル/個室/外観)+キャプション、席数・個室情報の補足。SP2列維持(正方形サムネイル)。
6. **宴会・貸切** `id="party"` — 1カラム、サブ背景色の帯セクション。対応内容リスト(人数/コース料金/飲み放題)。サブページ(/party)にはよくあるご質問を `<details>/<summary>` のアコーディオンで追加する(JS不使用)。
7. **お客様の声** `id="voice"` — 3カラム引用カード。SP横スワイプカルーセル。
8. **お知らせ** `id="news"` — 日付+タイトルのリスト型(最新3件)、一覧リンク。
9. **アクセス** `id="access"` — 2カラム(左:地図、右:住所・営業時間表・電話・駐車場情報)。SP縦積み。
10. **CTA(予約)** `id="cta"` — 全幅ダーク背景+白文字。CTAボタン2つ(WEB予約/電話 tel:リンク)。SPはボタン縦積み・全幅。

## 3. 各セクションのコピー全文(記入例)

**#hero**
- h1:「今日がんばった人の、ごほうびめし。」
- サブ:炭火焼きと、毎朝ひく本枯節のだし。仕事帰りの一杯から、大切な人との食事まで。
- CTA1:WEB予約はこちら / CTA2:電話で予約する
- 営業時間表示:17:00〜23:00(L.O.22:15)/定休日:日曜

**#concept**
- h2:「手間のかかることを、店の味にする。」
- 本文1:だしは毎朝、本枯節から。野菜は市場で店主が目で見て選んだものだけ。炭は火力の強い紀州備長炭を使っています。
- 本文2:派手さはありませんが、「またあれが食べたい」と思い出してもらえる一皿を、今日も仕込んでいます。
- キャプション:店主名(和食歴の年数)

**#interior**
- h2:「お席のご案内」
- 補足:全席数(カウンター○席/テーブル○席/掘りごたつ個室○席)。個室の連結可否・最大人数。

**#party**
- h2:「宴会・貸切承ります」
- 本文:歓送迎会・忘新年会・法事のお席まで。ご予算とシーンに合わせてコースをご用意します。
- リスト:宴会コース価格(品数)/飲み放題価格(時間)/貸切対応人数

**#cta**
- h2:「本日のお席、まだ間に合います。」
- 本文:当日のご予約はお電話が確実です。おひとり様も、カウンターでお待ちしています。

**/contact 予約フォーム(action="#")**
- 項目:お名前(必須)/電話番号(必須)/ご来店日(必須)/ご来店時間(必須)/人数(必須)/ご要望・アレルギー等(任意)
- 送信先は未定のため `action="#"` で構造のみ実装し、「送信先は未設定です。実運用時は予約管理システムまたはメール送信先を設定してください。」等の注記を添える

## 4. 構造化データ(JSON)

```json
{
  "signature_menu": [
    {"image": "menu-1.png", "name": "料理名", "price": "1,480円", "comment": "ひとこと"}
  ],
  "strengths": [
    {"icon": "flame", "title": "強みタイトル", "description": "説明文"}
  ],
  "interior": [
    {"image": "interior-1.png", "caption": "カウンター○席(おひとり様歓迎)"}
  ],
  "voices": [
    {"attribute": "40代・男性(常連)", "text": "お客様の声本文"}
  ],
  "news": [
    {"date": "2026-07-01", "title": "お知らせタイトル"}
  ]
}
```

`strengths[].icon` の値はlucideのアイコン名をそのまま使う(`flame` / `droplets` / `users` / `shopping-basket` 等)。実装時は `<i class="icon" data-lucide="値" width="48" height="48"></i>` に差し込む。

## 5. 業種特有の信頼要素

- 料理写真の質がすべて(信頼要素=シズル感)。プレースホルダー段階でも `alt` に湯気・断面・照り等の撮影意図を具体的に書く。実写風の仮画像に切り替える際もこのalt文をそのままプロンプトに転用できる
- 店主の経歴(修業年数・出身店)→ #conceptキャプション+/about
- 食べログ/Googleマップの評価が高ければ #voice に外部リンクバッジ
- 営業時間・定休日はヒーロー/アクセス/フッターの3箇所に表示(飲食は営業中か否かが最重要情報)
- Instagramアイコンをヘッダーとフッターに常設(飲食はSNS導線必須)

## 6. 配色・トーン

CSSカスタムプロパティは `--color-base` / `--color-text` / `--color-accent` / `--color-sub` の4つに統一する(`SKILL.md` 共通ルール1)。

- `--color-base`: #1C1A17(墨色・ダーク基調)
- `--color-text`: #F2EDE4(生成り)
- `--color-accent`: #C8842E(炭火・琥珀のオレンジ)→ CTA・価格表示
- `--color-sub`: #2A2622(セクション交互のダークブラウン。placehold.coのプレースホルダー背景色にもこの値を使う)
- 和文:見出し Noto Serif JP(500)+本文 Noto Sans JP(300/400)
- カフェ・洋食など明るい業態に振る場合は反転可: `--color-base` #FAF7F2 / `--color-text` #3A3330 / `--color-accent` #C0652F / `--color-sub` は`--color-base`よりわずかに濃いオフホワイトに調整

## 実装で分かったこと(横展開のための補足)

- **Google Mapsの埋め込みはAPIキー不要。** `https://www.google.com/maps?q=<キーワード>&output=embed` を iframe の src に入れるだけで動く。実住所が未定のテンプレート検証段階では最寄り駅名などで代用してよい。
- **placehold.coのプレースホルダーは `https://placehold.co/{width}x{height}/{ベース16進}/{テキスト16進}` の形式で、業種の配色をそのまま使うと違和感がない。** ヒーロー・宴会シーンなど横長画像は `1536x1024`、商品・内観・人物写真など正方形寄りは `600x600`、二カラムセクションの画像は `600x400` が扱いやすい。CSSの `aspect-ratio` と `object-fit: cover` で吸収する前提。
- **実写風の仮画像が必要な場合のみgpt-image-2に切り替える。** プロンプトは「共通の前置き(BASE_STYLE)+個別描写」の2段構成にすると質が安定する。前置きに「プロが撮った料理・内観写真、暖色系の照明、シズル感、テキスト/ロゴなし」を入れ、個別描写で料理名・質感・湯気などを具体的に指示する。
- **アイコンはlucideの標準アイコン名がそのまま使えることが多い。** 炭火焼き系なら `flame`、だし・水分系なら `droplets`、席・人数系なら `users`、仕入れ・買い物系なら `shopping-basket` など、業種の概念とアイコン名が素直に対応する場合が多いので探しやすい。
- **FAQは `<details>/<summary>` で十分。** 開閉アイコンは `summary::after` の擬似要素と `[open]` セレクタでの回転だけで実装でき、JSは不要。
- **予約・問い合わせフォームは `action="#"` のまま構造だけ作り、送信先未定であることをフォーム直下に注記する。** 存在しない送信先URLをでっち上げない。
- **セリフ・コピーの店名・電話番号・住所はテンプレート検証段階では仮でよいが、必ず「仮データである」ことをユーザーに明示する。** 実案件化する際に全ページ・全箇所を一括置換する運用にする。
