Claude Codeで作るデモサイト③ ── ハンドメイドEC「La Mano」
デモサイト第3弾は、ハンドメイド雑貨ブランド 「La Mano」 のECサイト。カート機能・お気に入り機能・カテゴリフィルタ・AI商品説明文ライターを実装した、Claude Codeの実力を最大限に示すデモサイトです。
🎨 デザイン：温かみのある生成りカラー
背景は #FDFAF7（生成りホワイト）、プライマリカラーは #8B5E3C（テラコッタブラウン）。フォントは見出しに Fraunces（セリフ体）、本文に Lato を採用し、ハンドメイドブランドらしい温もりを表現しています。
🛍️ EC機能一覧
| 機能 | 実装内容 |
|---|---|
| 商品一覧 | 4カラムグリッド・カテゴリフィルタ・ホバーズームエフェクト |
| カート | 右からスライドインするサイドバーカート・数量変更・合計金額表示 |
| お気に入り | ハートアイコンのトグル（ローカルストレージ永続化） |
| カテゴリフィルタ | アクセサリー／キャンドル／テキスタイル の3カテゴリ |
| AI文章生成 | 素材・カラー・ターゲットを入力→商品タイトル＋説明文＋ハッシュタグを自動生成 |
🛒 スライドインカートUI
「カートへ」ボタンを押すと右からスライドインするサイドバーカートが表示。商品の数量変更・削除・合計金額の計算が動的に行われます。React版では Context API でグローバル状態管理します。
🤖 AI商品説明文ライター（セラー向けツール）
このデモで最も商談で刺さる機能が AI Product Copywriter。
カテゴリ・素材・カラー・ターゲット（例：「30代女性・ギフト需要」）を入力して「生成する」ボタンを押すだけで：
- 📌 商品タイトル（SEO最適化済み）
- 📝 短い説明文（50字）──一覧ページ向け
- 📄 詳細説明文（150字）──商品ページ向け
- #️⃣ ハッシュタグ5個──SNS投稿向け
各項目にコピーボタンがついており、生成した文章をそのまま minne・Creema・BASE などに貼り付けられます。
💡 このデモが刺さるシーン
ハンドメイド作家・セラー向けのシステム提案や、ECサイト構築案件の商談で、このデモサイトを見せながら 「AI文章生成で毎回の商品説明作成が劇的に楽になります」 と提案できます。Pharmapia が提供する AI × Web開発のソリューションを体験いただける最高の実例です。
3本のデモサイトシリーズ（カフェLP・ポートフォリオ・ハンドメイドEC）はいずれも Claude Code を活用して短時間で制作しています。Web制作・AI機能実装のご相談は Pharmapia まで。
Powered by Pharmapia & Claude Code
📋 Claude Code への実際の指示プロンプト（抜粋）
以下が実際に Claude Code に入力したプロンプトの一部です。このまま貼り付けるだけで動くように設計しています。
以下の仕様でハンドメイド雑貨のECサイトをReact(Vite)で作成してください。
状態管理はContext APIを使用します（Redux不要）。
【デザイン】
- カラー: BG #FDFAF7, Primary #8B5E3C, Accent #D4956A
- フォント: Fraunces（見出し）, Lato（本文）
【CartContext.jsx】
- addToCart / removeFromCart / updateQuantity / clearCart
- カート合計金額の計算
- Navbarのカートアイコンにバッジで件数表示
【AiCopywriter.jsx（AI商品説明生成）】
- 入力: カテゴリ選択 / 素材テキスト / カラーテキスト / ターゲット
- 「生成する」ボタン → Anthropic API呼び出し
- 出力: 商品タイトル・短い説明（50字）・詳細説明（150字）・ハッシュタグ5個
- 各項目にコピーボタン付きポイントは「プロジェクト構成・デザイン・セクション・AI実装」を一度に渡すこと。分割して指示すると都度コンテキストが切れるため、仕様をまとめて一気に投げるのが効率的です。
PHARMAPIA
ECサイト構築・AI機能の導入について
まずは無料でご相談ください。
まずはお気軽にご相談ください。
通常2営業日以内にご返答します。
費用・納期・制作範囲など、どんな小さなご質問でも歓迎です
