# 業種テンプレート: 美容室・ヘアサロン

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

## 1. サイト構成

```
/               トップ
├── /menu       メニュー・料金(カット/カラー/パーマ/トリートメント)
├── /stylist    スタイリスト紹介(経歴・得意分野・資格)
├── /gallery    スタイルギャラリー(ビフォーアフター・スタイル写真)
├── /salon      店内のご紹介(内装・こだわりの設備)
├── /news       お知らせ(キャンペーン・休業案内)
├── /access     アクセス・営業時間
└── /reserve    ご予約(電話+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="stylist"` — 3カラムカード(顔写真+名前+役職+得意分野タグ)。詳細ページへのリンク。SP横スワイプカルーセル。
6. **スタイルギャラリー** `id="gallery"` — 写真グリッド(ビフォーアフターまたはスタイル写真)。全ギャラリーへのリンクボタン。SPは横スワイプカルーセル。
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:電話で予約する
- 営業時間表示:10:00〜19:00(最終受付18:00)/定休日:火曜

**#concept**
- h2:「聞くことから、美しさは始まる。」
- 本文1:なりたいイメージだけでなく、普段のスタイリングの悩みやライフスタイルまで丁寧にヒアリング。無理なく続けられるスタイルをご提案します。
- 本文2:薬剤は髪と頭皮への負担が少ないものを厳選。トリートメントも一人ひとりの髪質に合わせて調合しています。
- キャプション:代表スタイリスト名(美容師歴の年数)

**#strengths**
- カウンセリング重視(平均20分の丁寧なヒアリング)
- 髪と頭皮にやさしい薬剤・オーガニックトリートメント
- 経験豊富なスタイリスト在籍(得意分野で指名可能)

**#stylist**
- h2:「あなたを担当するスタイリスト」
- 補足:得意分野(縮毛矯正/カラー/メンズカット等)をタグで表示。指名予約が可能な旨を明記。

**#gallery**
- h2:「スタイルギャラリー」
- 本文:カット・カラー・パーマの施術事例を掲載。同じ髪型でも質感や長さで印象が変わります。

**#cta**
- h2:「まずはお気軽にご相談ください。」
- 本文:カウンセリングだけのご相談も歓迎です。ご希望のスタイリストがいる場合はご予約時にお申し付けください。

**/reserve 予約フォーム(action="#")**
- 項目:お名前(必須)/電話番号(必須)/ご希望日(必須)/ご希望時間(必須)/メニュー(必須・セレクト)/ご希望スタイリスト(任意)/その他ご要望(任意)
- 送信先は未定のため `action="#"` で構造のみ実装し、「送信先は未設定です。実運用時は予約管理システム(サロンボード等)またはメール送信先を設定してください。」等の注記を添える

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

```json
{
  "signature_menu": [
    {"image": "menu-cut.png", "name": "カット", "price": "5,500円〜", "comment": "丁寧なカウンセリング付き"}
  ],
  "strengths": [
    {"icon": "sparkles", "title": "強みタイトル", "description": "説明文"}
  ],
  "stylists": [
    {"image": "stylist-1.png", "name": "スタイリスト名", "role": "トップスタイリスト", "tags": ["縮毛矯正", "ショートスタイル"]}
  ],
  "gallery": [
    {"image": "gallery-1.png", "caption": "外ハネミディアム"}
  ],
  "voices": [
    {"attribute": "30代・女性", "text": "お客様の声本文"}
  ],
  "news": [
    {"date": "2026-07-01", "title": "お知らせタイトル"}
  ]
}
```

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

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

- スタイリストの経歴・資格・得意分野の明示(指名予約のしやすさに直結)
- ビフォーアフター/スタイル写真の質と量(信頼要素=技術力の証明)
- カウンセリングの丁寧さ(初回来店の不安を解消する最大要素)
- 薬剤・トリートメントへのこだわり(髪・頭皮への安全性訴求)
- WEB予約のしやすさ(24時間予約可能な旨、予約システム連携)
- 口コミ・Googleマップの評価
- 清潔感のある店内写真(内装・セット面・シャンプー台)
- Instagramアイコンをヘッダーとフッターに常設(美容室はSNSでのスタイル発信が集客の要)

## 6. 配色・トーン

CSSカスタムプロパティは `--color-base` / `--color-text` / `--color-accent` / `--color-sub` の4つに統一する(`SKILL.md` 共通ルール1)。美容室は飲食店と異なり、清潔感・上質感を出すため明るいライトトーンを基本とする。

- `--color-base`: #FAF6F2(温かみのあるオフホワイト)
- `--color-text`: #3B332C(ダークブラウン、黒に近づけすぎない)
- `--color-accent`: #B98860(テラコッタ寄りのゴールドブラウン)→ CTA・価格表示
- `--color-sub`: #F0E6DD(セクション交互の淡いベージュ。placehold.coのプレースホルダー背景色にもこの値を使う)
- 和文:見出し Noto Serif JP(500)+本文 Noto Sans JP(300/400)
- ライトトーンのため、`.btn--solid` の文字色・フッター/CTA最終セクションの背景色・地図iframeのフィルター(invert)は飲食店テンプレートのダーク前提の値をそのまま流用せず、明るい配色に合わせて個別調整が必要(実装補足を参照)
- カジュアル・ポップなメンズ美容室に振る場合の配色分岐: `--color-base` #FFFFFF / `--color-accent` #2F6F5E(深緑)や #1F4E79(ネイビー)系にすると清潔感+都会的な印象になる

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

- **ライトトーンの美容室サイトでは、飲食店テンプレート(ダーク基調)のCSSをそのまま変数だけ差し替えると破綻する箇所がある。** 具体的には `.btn--solid` の `color: #1C1A17`(ダーク文字固定)、`.site-footer` / `.cta-final` の `background: #0F0E0C`(常時ダーク固定)、`.access-map iframe` の `filter: invert(90%)`(ダーク地図用)。ライトトーンでは `.btn--solid` の文字色を `#FFFFFF` に、地図フィルターは無効化(またはごく軽いgrayscaleのみ)にする。フッター/最終CTAは濃色帯のままでも「差し色として機能する」ため、そのまま流用してよい。
- **スタイリスト・お客様の人物写真をAI生成する場合、プロンプトに「日本人、自然な笑顔、清潔感のあるヘアサロンの制服、正面〜斜め45度のポートレート、スタジオ風の柔らかい照明」等を明記すると破綻が少ない。** 顔のアップよりバストアップ〜胸から上の構図の方が違和感が出にくい。
- **ビフォーアフター画像は「同一人物の変化」をAI生成で正確に再現するのは難しいため、ギャラリーは個別の完成スタイル写真(後ろ姿・横顔中心)で構成する方が破綻しにくい。** ビフォーアフター訴求が必須の実案件では、実写真への差し替え前提であることをユーザーに明示する。
- その他(Google Maps埋め込み・placehold.coの形式・FAQのdetails実装・予約フォームのaction="#"運用)は `references/restaurant.md` の実装補足と共通。
