Step 5: Claude Design 投入プロンプト

自家焙煎カフェ「静香焙煎所（Shizuka Roastery）」の高品質なワンページLPをHTML/CSSで作成してください。下記の指示を厳密に守ってください。

---

## 店舗概要

- 屋号: 静香焙煎所（Shizuka Roastery）
- 所在地: 東京都杉並区高円寺南3丁目（架空）
- 最寄り: JR中央線 高円寺駅 南口 徒歩7分
- 営業時間: 火〜金 08:00–17:00 / 土日 08:00–18:00 / 月曜定休
- コンセプト: 「静かな朝に、自家焙煎を。」
- 業態: 自家焙煎コーヒーの店内提供 + 豆の販売

---

## ビジュアル方向性

### 配色（必ず以下のHEXを使うこと）

```
--color-bg:         #F7F2EA   /* ページ全体の地色: 生成り・和紙調 */
--color-bg-dark:    #1C1714   /* 暗めのセクション背景: 焙煎釜の中を想起 */
--color-text:       #2C1F14   /* メインテキスト: 深いエスプレッソブラウン */
--color-text-muted: #7A6555   /* サブテキスト・キャプション */
--color-accent:     #B07D4A   /* アクセント: 真鍮・中煎り豆の色 */
--color-accent-dark:#7A5330   /* アクセントの濃いバリアント */
--color-border:     #DDD0C0   /* ボーダー: ごく薄いベージュ */
--color-white:      #FDFAF6   /* カード背景・軽いコントラスト用 */
```

### タイポグラフィ

Google Fontsのみ使用（外部依存はこれのみ許可）:

```html
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600;800&family=Noto+Sans+JP:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet">
```

- 大見出し（キャッチコピー・セクションタイトル）: `Shippori Mincho B1` weight 800
- 英語サブタイトル・装飾文字: `Cormorant Garamond` italic weight 300
- 本文・UI テキスト: `Noto Sans JP` weight 300〜400

フォントサイズスケール:
```
--fs-hero:    clamp(3.5rem, 7vw, 7rem)    /* ヒーローキャッチコピー */
--fs-h2:      clamp(1.8rem, 3vw, 2.8rem)  /* セクションタイトル */
--fs-h3:      clamp(1.2rem, 2vw, 1.6rem)  /* カードタイトル */
--fs-body:    1rem                         /* 本文 */
--fs-small:   0.875rem                     /* キャプション・注記 */
```

### 余白・スペーシング

```
--space-section:  clamp(6rem, 12vw, 10rem)  /* セクション間の縦余白 */
--space-inner:    clamp(1.5rem, 4vw, 3rem)  /* セクション内の要素間隔 */
--max-width:      1160px                    /* コンテンツ最大幅 */
--gutter:         clamp(1.5rem, 5vw, 4rem)  /* 左右の外側余白 */
```

### デザイントーン

- 余白を恐れない。隙間こそがこのサイトの「静けさ」を表現する。
- 明度を上げすぎない。全体がやや暗くリッチに見えるよう、背景は純白を使わない。
- ラインと点線を活用する（テーブル・セパレーター）が、主役にしない。
- 装飾的な要素を最小化。画像とタイポグラフィだけで世界観を作る。
- テキストの縦書き（CSS writing-mode: vertical-rl）を1〜2箇所アクセントに使ってよい（セクションの左端ラベル等）。

---

## セクション構成とレイアウト指示

### [HEADER] ナビゲーション

- 固定ヘッダー（sticky top）
- 背景: `rgba(247,242,234,0.96)` + backdrop-filter: blur(8px)
- ロゴ: 「静香焙煎所」Shippori Mincho B1 / 1.4rem / color: --color-text
- ロゴの下に「Shizuka Roastery」を Cormorant Garamond italic / 0.85rem / color: --color-text-muted
- ナビリンク: Noto Sans JP / 0.8rem / letter-spacing: 0.12em（右寄せ）
  - 項目: こだわり / メニュー / 空間 / アクセス / お問い合わせ
- スマホ: ハンバーガーメニュー（JavaScriptで開閉）

### [SECTION 1] ヒーロー

- 使用画像: `hero.jpg`（全幅背景）
- テキストは画像の上にオーバーレイ
- 画像の上に `linear-gradient(to right, rgba(28,23,20,0.75) 0%, rgba(28,23,20,0.3) 60%, transparent 100%)` を重ねる
- レイアウト: 左寄せ・テキストは画面左40%に収まる・上下中央
- キャッチコピー（大見出し）:
  ```
  静かな朝に、
  自家焙煎を。
  ```
  スタイル: Shippori Mincho B1 / --fs-hero / color: #FDFAF6 / line-height: 1.3 / 改行して2行表示
- サブコピー（キャッチコピー下）:
  ```
  高円寺の路地裏で、豆と向き合い続けて7年。
  ```
  スタイル: Noto Sans JP weight 300 / 1.05rem / color: rgba(253,250,246,0.8) / letter-spacing: 0.05em
- CTAボタン（サブコピー下 余白2.5rem）:
  - プライマリ: 「豆を見に来る」- 背景 --color-accent / 文字 #FDFAF6 / padding: 0.9rem 2.4rem / no border-radius（角丸なし）
  - セカンダリ: 「今月の豆を見る」- 背景 transparent / 文字 #FDFAF6 / border: 1px solid rgba(253,250,246,0.5) / 同サイズ
- 最下部: 小さな下矢印アニメーション（緩やかなバウンス、SVGの細い矢印）

### [SECTION 2] About（店主の言葉）

- 背景: --color-bg（生成り）
- レイアウト: PC は 2カラム（左: テキスト / 右: 縦長画像）。テキスト:画像 = 55:45
- 使用画像: `about-hands.jpg`（右カラム・縦長・高さ500px程度）
  - 画像の右端を少しページ端まで伸ばす（フルブリード風）
- 左カラム上部:
  - 英語デコレーション: 「About」Cormorant Garamond italic / 0.9rem / color: --color-accent / letter-spacing: 0.2em
  - セクションタイトル: 「静香焙煎所について」Shippori Mincho B1 / --fs-h2
- 本文テキスト（そのまま掲載）:
  ```
  コーヒーを焙煎するようになって、初めて「素材の声を聞く」という感覚がわかった気がします。

  広告の仕事をしていたころ、デザインの仕事は「ゼロからつくる」だと思っていました。でも焙煎をはじめてから、それは違うと気づきました。素材がすでに持っているものを、消さずに引き出す。それが本当の仕事なんだと。

  静香焙煎所では、深煎りも浅煎りも「その豆が一番おいしくなる温度」を探すことから始めます。同じエチオピアの豆でも、農園が違えばプロファイルを変える。正解は豆の中にあって、こちらが押しつけるものじゃない。

  静かな朝にコーヒーを淹れる時間を、少しでも豊かにできれば。そのためだけにやっています。

  店主　田端　渉
  ```
  スタイル: Noto Sans JP weight 300 / 1rem / line-height: 2.0 / color: --color-text
  「店主　田端　渉」は右寄せ or 下線なしで下に少し余白をとる
- スマホ: 画像が先（上）、テキストが下

### [SECTION 3] こだわり（3カラムカード）

- 背景: --color-bg-dark（暗い背景でリッチに見せる）
- セクションタイトル: 英語ラベル「Our Philosophy」Cormorant Garamond italic → その下「焙煎への姿勢」Shippori Mincho B1
  - 両者ともに color: #FDFAF6（暗背景なので）
- 3カラムのカード（PC: 横3列 / タブレット: 1行2列+1 / SP: 縦積み）
- 各カードの構成:
  - カード背景: rgba(255,255,255,0.04)（ごく薄い白）+ border: 1px solid rgba(255,255,255,0.1)
  - 上部: アクセントカラーの細いライン（高さ2px / 幅40px / color: --color-accent）
  - 数字: 「01」「02」「03」Cormorant Garamond / 3rem / color: --color-accent / opacity: 0.6
  - 見出し: Shippori Mincho B1 / 1.2rem / color: #FDFAF6
  - 本文: Noto Sans JP weight 300 / 0.9rem / color: rgba(253,250,246,0.7) / line-height: 1.9

  カード1 タイトル「豆の「出自」を全部見せる」:
  ```
  農園名、生産者名、標高、精製法——購入できる豆すべてに、その豆が来た道のりを書いています。エチオピアの誰かが手摘みして、乾燥させて、日本まで運んだ豆。そこには「コーヒー」以上の話があります。
  ```

  カード2 タイトル「焙煎プロファイルは豆ごとに作る」:
  ```
  「深煎り」「浅煎り」という言葉は使っても、同じレシピで全部焼くことはしません。産地・品種・精製法が変われば、火の入れ方も変わります。味の基準は「その豆本来の良さが出ているか」、ただそれだけです。
  ```

  カード3 タイトル「焙煎後72時間以内に提供する」:
  ```
  焙煎したての豆は、炭酸ガスが多くて実はまだ飲み頃ではありません。72時間ほどエイジングさせてから店頭に並べています。「焙煎したて」より「飲み頃になってから」を優先する。そういう店です。
  ```

### [SECTION 4] メニュー・豆

- 背景: --color-white
- セクションタイトル: 「Menu & Beans」（Cormorant Garamond）→「今月のメニューと豆」（Shippori Mincho B1）
- 2つのタブ or シンプルな2ブロック構成（タブ推奨・JavaScriptで切替）:

**タブA: 今月の豆**
  - 使用画像: `beans-closeup.jpg`（セクション上部・全幅帯 / max-height: 280px / object-fit: cover / position: center）
  - テーブル形式（横スクロール対応）:
    ```
    イルガチェフェ G1 | エチオピア・イルガチェフェ | ウォッシュト | 浅煎り | ¥1,200
    ゲイシャ ナチュラル | パナマ・ボケテ | ナチュラル | 中浅煎り | ¥2,400
    ブルボン ウォッシュト | ルワンダ・ムゲゼ農園 | ウォッシュト | 中煎り | ¥980
    スマトラ マンデリン | インドネシア・リントン | スマトラ式 | 深煎り | ¥850
    静香ブレンド | — | — | 中深煎り | ¥750（100g）
    ```
  - テーブルの罫線: `--color-border` のみ。背景はシマシマにしない。
  - 注記: 「今月の豆は入荷状況により変わります。詳しくは店頭またはお問い合わせフォームにてご確認ください。」Noto Sans JP weight 300 / 0.8rem / color: --color-text-muted

**タブB: ドリンクメニュー**
  - 使用画像: `menu-drip.jpg`（同じく上部帯画像）
  - カード型リスト（PC: 2列 / SP: 1列）:
    ```
    ハンドドリップ コーヒー / 今月の豆からお選びください / ¥650〜
    カフェ・オ・レ / 静香ブレンド × 低温殺菌牛乳 / ¥750
    エスプレッソ / 深めに仕上げた静香ブレンドで / ¥550
    水出しコーヒー / 8時間かけて抽出、すっきりとした甘み / ¥700
    本日のドリップ / 田端が今一番飲んでほしい豆 / ¥700
    ```
  - 各カード: 名前（Shippori Mincho B1 1rem）/ 説明（Noto Sans JP 0.8rem muted）/ 価格（Cormorant Garamond 1.2rem accent color）

### [SECTION 5] 空間

- 背景: --color-bg-dark
- 使用画像: `space-interior.jpg`（PC: 全幅 / 高さ 60vh / object-fit: cover）
- 画像の上に `linear-gradient(to bottom, rgba(28,23,20,0.0) 40%, rgba(28,23,20,0.85) 100%)` を重ねる
- 画像下端（グラデーション濃い部分）にテキストを重ねる:
  - セクションラベル: 「Space」Cormorant Garamond italic / 0.85rem / color: --color-accent
  - タイトル: 「静けさのある空間を。」Shippori Mincho B1 / clamp(1.8rem, 3vw, 2.4rem) / color: #FDFAF6
  - 本文（画像下・背景 --color-bg-dark 上に続く）:
    ```
    元鉄工所のビル、1階。
    むき出しのコンクリートの壁に、古材の棚。
    真鍮の照明が、焙煎機の銀色を浮かび上がらせる。

    音楽は流さない。
    聞こえるのは、焙煎機の回る音と、豆がはじける音だけ。

    席は12席。カウンター6席、テーブル2卓。
    混んでいる日でも、静かです。
    ```
    スタイル: Noto Sans JP weight 300 / 1rem / line-height: 2.2 / color: rgba(253,250,246,0.85) / text-align: center / max-width: 600px / margin: 0 auto

### [SECTION 6] 営業時間・アクセス

- 背景: --color-bg（生成り）
- 2カラム（PC: 左=営業時間 / 右=アクセス地図プレースホルダー）
- セクションタイトル: 「Hours & Access」→「営業時間・アクセス」

**左カラム（営業時間）**:
```
火〜金    08:00 – 17:00
土・日    08:00 – 18:00
月曜      定休日
```
スタイル: 日付部分は Shippori Mincho B1 / 時間部分は Cormorant Garamond / 各行に細い境界線

**右カラム（アクセス）**:
- GoogleMap埋め込みの代わりに、薄い背景色（--color-border）の静的な長方形ブロック（高さ 240px）に「Map Placeholder」と中央に表示
- 住所情報:
  ```
  東京都杉並区高円寺南3丁目
  JR中央線 高円寺駅 南口より徒歩7分
  ```
- 案内文:
  ```
  駅南口を出て、ルック商店街を抜けた先の路地を左へ。
  「焙煎中」の木の看板が目印です。
  駐車場はありません。お近くのコインパーキングをご利用ください。
  ```

### [SECTION 7] お問い合わせ・豆の購入

- 背景: --color-bg-dark（暗め）
- セクションタイトル: 「Contact」→「お豆の購入・お問い合わせ」 / 色: #FDFAF6
- リード文:
  ```
  店頭でお買い求めいただけるほか、豆のみ郵送にも対応しています（200g〜）。
  ギフト包装のご相談、焙煎会・ワークショップのお問い合わせもお気軽にどうぞ。
  ```
  スタイル: Noto Sans JP weight 300 / color: rgba(253,250,246,0.8)

**フォーム**（max-width: 560px / margin: 0 auto）:
フォームの見た目:
- input/select/textarea の背景: rgba(255,255,255,0.06) / border: 1px solid rgba(255,255,255,0.2) / color: #FDFAF6 / padding: 0.9rem 1.2rem / border-radius: 0（角丸なし）
- placeholder color: rgba(253,250,246,0.4)
- focus: border-color: --color-accent / outline: none

フォーム項目:
```
label: お名前（必須）
  input type="text" name="name" required placeholder="田端　渉"

label: メールアドレス（必須）
  input type="email" name="email" required placeholder="your@email.com"

label: お問い合わせ種別
  select: 豆の購入について / ギフトについて / ワークショップについて / その他

label: メッセージ（任意）
  textarea rows="4" maxlength="200" placeholder="ご質問・ご要望をどうぞ"
```

送信ボタン:
```
「送信する」 background: --color-accent / color: #FDFAF6 / 全幅 / padding: 1rem / border: none / border-radius: 0 / font-family: Noto Sans JP / letter-spacing: 0.1em / font-size: 0.95rem
```

注記（フォーム下）:
```
いただいたお問い合わせには、2営業日以内にご返信いたします。土日はご返信が遅れる場合があります。
```
スタイル: 0.8rem / color: rgba(253,250,246,0.5)

**スパム対策**: honeypot input（type="text" style="display:none" name="website"）を必ず追加。

### [FOOTER]

- 背景: #0F0C0A（最も暗いほぼ黒）
- ロゴ: 「静香焙煎所」白 / 「Shizuka Roastery, Koenji Tokyo」Cormorant Garamond / アクセントカラー
- 横一線にナビリンク（小さく）
- コピーライト:
  ```
  © 2026 Shizuka Roastery. All rights reserved.
  ```
- **必須注記（コンプライアンス）**:
  ```
  ※本サイトはサンプル制作物です。掲載画像はAI生成によるイメージです。
  Image: AI generated
  ```
  スタイル: Noto Sans JP / 0.75rem / color: rgba(255,255,255,0.35)

---

## アニメーション・インタラクション方針

以下のみ実装（過剰なアニメーション禁止・Intersection Observer使用）:
1. **スクロールフェードイン**: セクションが画面内に入ったとき `opacity: 0 → 1` + `translateY(24px → 0)` / duration: 0.6s / easing: ease-out / `prefers-reduced-motion` に対応
2. **ヘッダー背景**: スクロール量に応じて背景blur/opacity を強化
3. **CTA ホバー**: ボタン背景色の滑らかな遷移（0.3s ease）
4. **ハンバーガーメニュー**: スマホでの開閉（transform: rotate で X に変形）
5. **タブ切替（メニューセクション）**: フェードで切替（0.3s）
6. **ヒーロー下矢印**: 緩やかな bounce アニメーション（CSS keyframes）

**禁止**: parallax スクロール（Lighthouse スコア低下）、自動カルーセル、ページロード時のスプラッシュ

---

## 技術要件

- **出力形式**: 単一 index.html ファイル（CSS・JS をすべてインライン埋め込み）
- **レスポンシブ**: スマホファースト / ブレークポイント: 768px / 1024px / 1200px
- **対象解像度**: 320px 〜 1440px+（max-width でコントロール）
- **外部依存**: Google Fonts のみ（CDN: fonts.googleapis.com）
- **JavaScript**: Vanilla JS のみ（フレームワーク・ライブラリ不要）
- **Lighthouse 目標スコア**: Performance 90+ / Accessibility 95+ / Best Practices 90+ / SEO 95+
- **画像**: `<img>` タグに必ず `loading="lazy"` と `alt` 属性を付ける（ヒーローのみ `loading="eager"`）
- **フォント**: `font-display: swap` を使用する

### OGP メタタグ（head に必須）
```html
<meta property="og:title" content="静香焙煎所 | 高円寺の自家焙煎コーヒー">
<meta property="og:description" content="静かな朝に、自家焙煎を。高円寺の路地裏で、豆と向き合い続けて7年。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://shizuka-roastery-koenji.pages.dev">
<meta property="og:image" content="https://shizuka-roastery-koenji.pages.dev/images/hero.jpg">
<meta name="twitter:card" content="summary_large_image">
```

### 構造化データ（schema.org / CafeOrCoffeeShop）
```json
{
  "@context": "https://schema.org",
  "@type": "CafeOrCoffeeShop",
  "name": "静香焙煎所",
  "alternateName": "Shizuka Roastery",
  "description": "静かな朝に、自家焙煎を。高円寺の路地裏で豆と向き合い続ける自家焙煎コーヒーの店。",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "高円寺南3丁目",
    "addressLocality": "杉並区",
    "addressRegion": "東京都",
    "postalCode": "166-0003",
    "addressCountry": "JP"
  },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Tuesday","Wednesday","Thursday","Friday"], "opens": "08:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Saturday","Sunday"], "opens": "08:00", "closes": "18:00" }
  ],
  "servesCuisine": "Coffee",
  "menu": "https://shizuka-roastery-koenji.pages.dev/#menu",
  "url": "https://shizuka-roastery-koenji.pages.dev"
}
```

### 必須コンプライアンス要素
フッターに以下の文言を必ず含めること（省略・変更禁止）:
```
※本サイトはサンプル制作物です。掲載画像はAI生成によるイメージです。
Image: AI generated
```

---

## 画像配置まとめ

| ファイル名 | 使用セクション | 配置方法 |
|----------|-------------|---------|
| hero.jpg | ヒーロー | CSS background または `<img>` / object-fit: cover / 全幅全高 |
| about-hands.jpg | About | 右カラム縦長 / object-fit: cover |
| feature-roast.jpg | こだわりセクション（カード内 or 上部帯） | セクション上部帯 / 高さ200px |
| feature-profile.jpg | こだわりカード2 or 3の背景 | カード内 / object-fit: cover / 暗めオーバーレイ |
| space-interior.jpg | 空間セクション | 全幅帯 / 60vh / object-fit: cover |
| menu-drip.jpg | メニュー タブB上部 | 帯画像 / 高さ240px |
| beans-closeup.jpg | メニュー タブA上部 | 帯画像 / 高さ240px |

---

以上の指示に従い、プロダクション品質の単一 index.html を生成してください。
コードは省略せず、完全なファイルとして出力してください。