【デモサイト①】カフェLP「Roast & Rest」── Claude CodeでAI搭載LPを3時間で作る方法

Claude Codeで作るデモサイト① ── カフェLP「Roast & Rest」

Pharmapia のデモサイト制作第一弾は、自家焙煎コーヒーショップのランディングページ「Roast & Rest」です。HTML / CSS / Vanilla JS のみのシンプルな静的LPながら、Claude Code を使えばわずか数時間で本格的なサイトが完成することを体験できます。

🎨 デザイン概要

カラースキームは「深煎りブラウン（#3B1F0A）」をメインに、「キャラメル（#D4A96A）」をアクセントとした温かみのある配色。フォントは見出しに Playfair Display、本文に Noto Sans JP を採用し、上品でリッチなカフェブランドを演出しています。

カフェLPヒーローセクション — ▲ Hero セクション：全幅背景画像＋オーバーレイ＋キャッチコピー。スクロールアニメーションも実装。

📋 ページ構成（7セクション）

Hero ── 全幅背景画像・キャッチコピー・CTAボタン2つ
About ── カフェのストーリー・2枚グリッド写真
Menu ── タブ切替（ドリンク／フード／スイーツ）× カード6品
AI Chat ── Anthropic API を使ったおすすめチャットbot
Gallery ── CSS Masonry グリッド写真ギャラリー
Access ── Google Maps 埋め込み＋営業時間テーブル
Footer ── SNSリンク・Pharmapia クレジット

AboutセクションのUI — ▲ About セクション：左にテキスト、右に2枚グリッドの写真レイアウト。

🍽️ メニューセクション：タブ切替UI

ドリンク・フード・スイーツの3カテゴリをワンクリックで切り替えられるタブUIを実装。カードにはホバーでエレベーション効果が入り、視覚的な動きでユーザーの興味を引きます。

メニューセクションのタブUI — ▲ Menu セクション：カテゴリタブ切替＋カードグリッド。画像はUnsplashを直接参照。

🤖 AI Baristaチャット（Anthropic API連携）

このLPの最大の見どころが AI Barista チャット。ユーザーが「仕事疲れで甘いものが飲みたい」などと入力すると、Anthropic の claude-sonnet モデルがメニューからぴったりの一杯を提案します。

モデル：claude-sonnet-4-20250514
システムプロンプトでメニュー情報を渡し、自然な日本語で回答
APIキーは環境変数（.env）で管理し、本番では非公開

AIバリスタチャットUI — ▲ AI Chat セクション：気分を入力するとおすすめメニューをAIが提案。

🖼️ Masonry ギャラリー

CSSの columns プロパティのみで実装したMasonryグリッド。JavaScriptライブラリ不要で軽量に実現しています。

💡 Claude Codeでの作り方

仕様書のClaudeへのプロンプトをそのままコピーして入力するだけで、index.html / style.css / script.js の3ファイルを一気に生成できます。Pharmapia ではこの「Claude Code × デモサイト」のアプローチを活用して、クライアントへの提案活動を行っています。

次回は P2：フリーランサーポートフォリオサイト（React + Tailwind） をご紹介します。

Powered by Pharmapia & Claude Code

📋 Claude Code への実際の指示プロンプト（抜粋）

以下が実際に Claude Code に入力したプロンプトの一部です。このまま貼り付けるだけで動くように設計しています。

以下の仕様でカフェのランディングページを作成してください。

【プロジェクト構成】
cafe-lp/
├── index.html
├── style.css
├── script.js
└── .env.example

【デザイン】
- カラー: Primary #3B1F0A, Accent #D4A96A, BG #FAF6F1
- フォント: Playfair Display（見出し）, Noto Sans JP（本文）
- Google Fontsからインポート
- モバイルファースト、ブレークポイント768px/1200px
- スクロールフェードイン（IntersectionObserver API）

【セクション】
1. Hero: 全幅BG画像(Unsplash URL使用)、キャッチコピー、CTA×2
2. About: 2カラム（テキスト＋画像）
3. Menu: タブ切替（ドリンク/フード/スイーツ）×カード6枚
4. AI Chat: Anthropic APIを使ったおすすめチャット
5. Gallery: CSS Masonryグリッド×6枚
6. Access: Google Maps embed + 営業時間テーブル
7. Footer: SNSリンク、クレジット

【AI Chat実装】
- Model: claude-sonnet-4-20250514
- APIキーは process.env.ANTHROPIC_API_KEY から読む
- fetch()でPOST、レスポンスをチャットUIに表示
- ローディングスピナーを実装

ポイントは「プロジェクト構成・デザイン・セクション・AI実装」を一度に渡すこと。分割して指示すると都度コンテキストが切れるため、仕様をまとめて一気に投げるのが効率的です。

PHARMAPIA