FigmaデザインをClaude Code(CLI)でバイブコーディングする検証②
前回、Claude CodeのMacアプリ（GUI）＋Sonnet4.6モデルでバイブコーディングの検証をしました。
今回は、ターミナルでClaude CodeのCLI＋Opus4.6モデルを使ってスピードアップを検証しました。
結論から言うと、意外なことに、GUI＋Sonnet4.6も、CLI＋Opus4.6も、スピードは変わりませんでした。もしかすると、単なるコーディングレベルでは簡単すぎるタスクだったのかもしれませんが。
用意したもの
デザイン：Figmaデザイン（ページごとにPCとMOBILEを用意）
ターミナル：Claude Code CLI（チームプラン）
モデル：Opus4.6
スキルをインストール
ターミナルからClaudeをインストールした後、以下スキルをインストールして再起動します。
以下スキルをインストールして再起動
https://github.com/boost-jp/ai-toolkit.gitスキルを発動
① FigmaデザインのURLと一緒にスキルを発動します。
/figma-to-code
https://www.figma.com/design/{fileKey}/...実装計画が出てきました。
⏺ User approved Claude's plan
YS COLLECTION EC サイト実装計画
Context
Figma デザイン（EC-SITE TEMPLATE DESIGN）から「YS COLLECTION」ECサイトを新規構築する。
白シャツブランドのECサイトで、HOME / LIST / DETAIL / LEGAL の4ページ構成、PC/Mobile
レスポンシブ対応。
Figma URL:
https://www.figma.com/design/{fileKey}/...
1. デザイン概要
カラースキーム
- 背景: #ffffff
- テキスト: #222222
- サブテキスト: #6a7282
- プレースホルダー: rgba(34,34,34,0.5)
- カード背景: #f9fafb
- ボーダー: #222222 (1px)
タイポグラフィ
- フォント: Georgia（全体）、Tinos + Noto Sans JP（一部）
- h1: 36px/40px (LIST, LEGAL), 60px/60px (HOME hero)
- h2: 30px/36px (HOME), 24px/32px (DETAIL関連商品)
- h3: 18px/27px bold (footer), 20px/28px (newsletter), 14px/20px (商品名)
- body: 14px/20px, 14px/22.75px (商品説明)
- button: 16px/24px
- logo: 24px/32px tracking 1.2px
ページ構成
┌────────┬────────────┬────────────────┐
│ ページ │ PC node-id │ Mobile node-id │
├────────┼────────────┼────────────────┤
│ HOME │ 1:2 │ 1:510 │
├────────┼────────────┼────────────────┤
│ LIST │ 1:1071 │ 1:763 │
├────────┼────────────┼────────────────┤
│ DETAIL │ 1:1381 │ 1:1593 │
├────────┼────────────┼────────────────┤
│ LEGAL │ 1:1899 │ 1:1803 │
└────────┴────────────┴────────────────┘
2. コンポーネント構造
Layout（共通レイアウト）
├── Header（新規）
│ ├── MenuButton（新規）
│ │ └── MenuIcon（新規）
│ ├── Logo（新規） - "YS" テキストリンク
│ └── HeaderActions（新規）
│ ├── SearchIcon（新規）
│ ├── UserIcon（新規）
│ └── ShoppingCartIcon（新規）
├── Main（ページごと）
│ ├── HomePage（新規）
│ │ ├── HeroSection（新規） - メイン画像 + "YS COLLECTION" オーバーレイ
│ │ └── ProductGrid（新規） - 4列グリッド、20商品表示
│ │ └── ProductCard（新規） - 画像 + 商品名 + 価格
│ ├── ListPage（新規）
│ │ ├── Breadcrumb（新規） - パンくずナビ
│ │ ├── PageTitle（新規）
│ │ ├── FilterSortBar（新規） - 絞り込み + 並べ替えボタン
│ │ │ ├── SlidersHorizontalIcon（新規）
│ │ │ └── ArrowUpDownIcon（新規）
│ │ └── ProductGrid（既存活用）
│ │ └── ProductCard（既存活用）
│ ├── DetailPage（新規）
│ │ ├── Breadcrumb（既存活用）
│ │ ├── ProductImages（新規） - 縦並び3枚の商品画像
│ │ ├── ProductInfo（新規）
│ │ │ ├── 商品名・価格
│ │ │ ├── SizeSelector（新規） - XS/S/M/L/XL ボタン
│ │ │ ├── ColorSelector（新規） - ホワイト/オフホワイト ボタン
│ │ │ ├── AddToCartButton（新規）
│ │ │ └── ProductDescription（新規）
│ │ └── RelatedProducts（新規） - 横スクロールカルーセル
│ │ └── ProductCard（既存活用）
│ └── LegalPage（新規）
│ ├── Breadcrumb（既存活用）
│ ├── PageTitle（既存活用）
│ └── LegalContent（新規） - 特定商取引法テキスト
└── Footer（新規）
├── FooterLinks（新規） - 4カラム（ショップ/サポート/会社情報/フォロー）
├── NewsletterForm（新規） - メール登録フォーム
└── Copyright（新規）
3. 技術スタック
- フレームワーク: Next.js 15 (App Router)
- 言語: TypeScript
- スタイリング: Tailwind CSS v4
- アイコン: lucide-react（Menu, Search, User, ShoppingCart, ChevronRight, SlidersHorizontal,
ArrowUpDown）
- フォント: Google Fonts（Tinos + Noto Sans JP）
4. ディレクトリ構成
ys-collection_opus46_aitoolkit/
├── app/
│ ├── layout.tsx # 共通レイアウト（Header + Footer）
│ ├── page.tsx # HOME
│ ├── products/
│ │ ├── page.tsx # LIST（商品一覧）
│ │ └── [id]/
│ │ └── page.tsx # DETAIL（商品詳細）
│ ├── legal/
│ │ └── page.tsx # LEGAL
│ ├── globals.css # Tailwind + カスタムスタイル
│ └── components/
│ └── pages/
│ ├── HomePage.tsx
│ ├── ListPage.tsx
│ ├── DetailPage.tsx
│ └── LegalPage.tsx
├── components/
│ ├── ui/
│ │ ├── Header.tsx
│ │ ├── Footer.tsx
│ │ ├── Breadcrumb.tsx
│ │ ├── ProductCard.tsx
│ │ ├── ProductGrid.tsx
│ │ ├── SizeSelector.tsx
│ │ ├── ColorSelector.tsx
│ │ ├── NewsletterForm.tsx
│ │ └── FilterSortBar.tsx
│ └── icons/ # lucide-react を使うため不要
├── lib/
│ └── products.ts # 商品データ（モック）
├── public/
│ └── images/ # 商品画像プレースホルダー
├── tailwind.config.ts
├── next.config.ts
├── tsconfig.json
├── package.json
└── postcss.config.mjs
5. 実装手順
Phase 1: プロジェクト初期化
1. Next.js プロジェクト作成（npx create-next-app@latest）
2. Tailwind CSS, lucide-react インストール
3. Google Fonts 設定（Tinos + Noto Sans JP）
4. tailwind.config.ts にカスタムカラー・タイポグラフィトークン定義
Phase 2: 共通コンポーネント実装
1. components/ui/Header.tsx - ハンバーガーメニュー / ロゴ / アクション
2. components/ui/Footer.tsx - 4カラムリンク / ニュースレター / コピーライト
3. components/ui/Breadcrumb.tsx - パンくずナビ
4. components/ui/ProductCard.tsx - 商品カード
5. components/ui/ProductGrid.tsx - 商品グリッド
6. app/layout.tsx - 共通レイアウト
Phase 3: ページ実装
1. app/page.tsx - HOME（ヒーロー + 商品一覧）
2. app/products/page.tsx - LIST（フィルター + グリッド）
3. app/products/[id]/page.tsx - DETAIL（画像 + 商品情報 + 関連商品）
4. app/legal/page.tsx - LEGAL（特商法テキスト）
Phase 4: レスポンシブ対応
- Mobile: 2列グリッド（HOME/LIST）、1列レイアウト（DETAIL）
- Header/Footer のモバイル対応
- Breakpoint: md: (768px) を基準にPC/Mobile切り替え
Phase 5: モックデータ・画像
1. lib/products.ts に商品データ（24商品分）
2. プレースホルダー画像の配置
6. 検証方法
1. npm run dev で開発サーバー起動
2. 各ページの表示確認（/, /products, /products/1, /legal）
3. レスポンシブ確認（ブラウザのDevToolsでモバイル表示）
4. Figma スクリーンショットとの目視比較実装計画を承認します。
Phase 1: プロジェクト初期化
⏺ Write(app/globals.css)
⏺ Write(lib/products.ts)
⏺ Write(public/images/placeholder.svg)
⏺ Now let me create the UI components and pages in parallel.
⏺ Write(components/ui/Header.tsx)
⏺ Write(components/ui/Footer.tsx)
⏺ Write(components/ui/NewsletterForm.tsx)
⏺ Write(components/ui/Breadcrumb.tsx)
⏺ Write(components/ui/ProductCard.tsx)
⏺ Write(components/ui/ProductGrid.tsx)
⏺ Write(components/ui/FilterSortBar.tsx)
⏺ Write(components/ui/SizeSelector.tsx)
⏺ Write(components/ui/ColorSelector.tsx)
⏺ Now let me create the layout and all pages.
⏺ Write(app/layout.tsx)
⏺ Write(app/products/page.tsx)
⏺ Write(app/products/[id]/page.tsx)
⏺ Write(app/legal/page.tsx)
⏺ Write(app/page.tsx)
⏺ Now let me check the next.config.ts for image configuration and build.
⏺ Let me run the build to check for errors.
⏺ ビルド成功です。全ページが正しくコンパイルされました。
⏺ 開発サーバーが起動しました。実装完了です。
実装サマリー
作成ファイル一覧
共通コンポーネント (components/ui/)
- Header.tsx - ロゴ (YS) + メニュー/検索/ユーザー/カートアイコン
- Footer.tsx - 4カラムリンク + ニュースレター + コピーライト
- NewsletterForm.tsx - メール登録フォーム
- Breadcrumb.tsx - パンくずナビゲーション
- ProductCard.tsx - 商品カード（画像+名前+価格）
- ProductGrid.tsx - 2列(Mobile)/4列(PC)グリッド
- FilterSortBar.tsx - 絞り込み/並べ替えボタン
- SizeSelector.tsx - サイズ選択（XS〜XL）
- ColorSelector.tsx - カラー選択
ページ
- app/page.tsx - HOME（ヒーロー + 商品一覧20件）
- app/products/page.tsx - LIST（パンくず + フィルター + 全24商品）
- app/products/[id]/page.tsx - DETAIL（商品画像3枚 + 情報 + 関連商品）
- app/legal/page.tsx - LEGAL（特定商取引法に基づく表記）
データ・設定
- lib/products.ts - モック商品データ24件 + ヘルパー関数
- app/globals.css - Tailwind CSS + カスタムテーマ（カラー・フォント）
確認方法
- http://localhost:3000 - HOME
- http://localhost:3000/products - 商品一覧
- http://localhost:3000/products/1 - 商品詳細
- http://localhost:3000/legal - 特商法ページブラウザで確認した後、修正を依頼します。
⏺ 3つの改善を並行して進めます。
⏺ まず Figma から画像アセットを取得します。
⏺ Figma のアセット URL からヒーロー画像と商品画像をダウンロードします。
⏺ Figma から画像アセットをダウンロードします。デザインコンテキストから取得した URL を使います。
⏺ 画像が正常にダウンロードされました。次に、商品データの画像パスを更新し、ハンバーガーメニュー、フィル
ター/ソートを実装します。
⏺ Write(lib/products.ts)
⏺ Write(components/ui/Header.tsx)
⏺ Write(components/ui/FilterSortBar.tsx)
⏺ Write(app/products/page.tsx)
⏺ Now update the HOME page and DETAIL page to use real images.
⏺ Update(app/page.tsx)
⏺ Update(app/products/[id]/page.tsx)
⏺ Now let me build to verify everything compiles correctly.
⏺ ビルド成功。開発サーバーを起動して確認します。
⏺ すべての実装が完了しました。
実装内容まとめ
1. ハンバーガーメニュー (components/ui/Header.tsx)
- ハンバーガーアイコンクリックで左からスライドインするメニュー
- メニュー開閉時にアイコンが Menu ⇔ X に切り替わる
- オーバーレイクリックでメニューを閉じる
- メニューリンク: ホーム / 商品一覧 / 新着 / セール / お問い合わせ / 特定商取引法
- CSS transition によるスムーズなアニメーション
2. フィルター・ソート (components/ui/FilterSortBar.tsx + app/products/page.tsx)
- 絞り込み: すべて / クラシック / カジュアル / フォーマル の4カテゴリ
- 並べ替え: デフォルト / 価格安い順 / 価格高い順 / 名前順
- ドロップダウン方式 (外側クリックで閉じる)
- アクティブ状態のボタンが反転表示 (黒背景 + 白文字)
- 該当商品がない場合の空状態表示
3. Figma 画像の実装
- ヒーロー画像 (/images/hero.jpg) - HOME ページ背景
- 商品画像 (/images/product-1.jpg, /images/product-2.jpg) - カード用
- 商品詳細画像 (/images/detail-1.jpg 〜 detail-3.jpg) - 3枚の詳細写真
確認URL
- http://localhost:3000 - HOME (ヒーロー画像 + 商品一覧)
- http://localhost:3000/products - 商品一覧 (フィルター・ソート付き)
- http://localhost:3000/products/1 - 商品詳細 (Figma 画像3枚)
- http://localhost:3000/legal - 特商法ページデザインにないページも同じスタイルで作成してもらいます。
⏺ 6ページを作成します。
⏺ Write(app/cart/page.tsx)
⏺ Write(app/contact/page.tsx)
⏺ Write(app/shipping/page.tsx)
⏺ Write(app/returns/page.tsx)
⏺ Write(app/company/page.tsx)
⏺ Write(app/privacy/page.tsx)
⏺ Now update the Footer and Header links to point to the new pages.
⏺ Update(components/ui/Footer.tsx)
⏺ Update(components/ui/Header.tsx)
⏺ 全12ルートがビルド成功しました。
⏺ 6ページすべて作成完了です。
追加ページ一覧
┌────────────────┬────────┬────────────────────────────────────────────────────────────────────┐
│ ページ │ URL │ 内容 │
├────────────────┼────────┼────────────────────────────────────────────────────────────────────┤
│ カート │ /cart │ 商品一覧（数量変更・削除）、注文サマリー（小計・送料・合計）、購入 │
│ │ │ 手続きボタン │
├────────────────┼────────┼────────────────────────────────────────────────────────────────────┤
│ お問い合わせ │ /conta │ フォーム（名前・メール・注文番号・種別・内容）、送信完了メッセージ │
│ │ ct │ │
├────────────────┼────────┼────────────────────────────────────────────────────────────────────┤
│ 配送について │ /shipp │ 送料テーブル、お届け日数テーブル、時間帯指定、注意事項 │
│ │ ing │ │
├────────────────┼────────┼────────────────────────────────────────────────────────────────────┤
│ 返品・交換 │ /retur │ 条件テーブル、送料負担テーブル、手順（4ステップ）、受付不可条件 │
│ │ ns │ │
├────────────────┼────────┼────────────────────────────────────────────────────────────────────┤
│ 会社概要 │ /compa │ 企業理念、会社情報テーブル（9項目）、アクセス │
│ │ ny │ │
├────────────────┼────────┼────────────────────────────────────────────────────────────────────┤
│ プライバシーポ │ /priva │ 全9条（定義・収集・利用目的・第三者提供・管理・Cookie・開示訂正削 │
│ リシー │ cy │ 除・変更・問い合わせ先） │
└────────────────┴────────┴────────────────────────────────────────────────────────────────────┘
リンク更新
- Header ハンバーガーメニュー: 全ページへのリンクを追加
- Footer: サポート欄・会社情報欄のリンクを実ページに接続
- Header カートアイコン: /cart にリンク全部で実装に何分かかりましたか？（計算させます）
⏺ 正確な経過時間は計測していませんが、会話のタイムスタンプから推測すると:
- Phase 1 (プロジェクト初期化 + 共通コンポーネント + 4ページ): 最初のフォルダ作成からビルド成功まで
- Phase 2 (ハンバーガーメニュー + フィルター/ソート + Figma画像ダウンロード): 追加実装
- Phase 3 (追加6ページ + リンク接続): カート〜プライバシーポリシー
合計で 約20〜25分程度 だったと思います。
作成した成果物:
- 10ページ (HOME / LIST / DETAIL / LEGAL / Cart / Contact / Shipping / Returns / Company / Privacy)
- 9つの共通UIコンポーネント (Header / Footer / Breadcrumb / ProductCard / ProductGrid /
FilterSortBar / SizeSelector / ColorSelector / NewsletterForm)
- Figmaから取得した実画像5枚
- モックデータ24商品分結論：意外なことに、GUI＋Sonnet4.6も、CLI＋Opus4.6も、スピードは変わりませんでした。もしかすると、単なるコーディングレベルでは簡単すぎるタスクだったのかもしれませんが。
