デザインカンプからClaude CodeだけでLPを実装する方法

デザインカンプからLP実装へ、新しいアプローチ

かつてWebサイトを作成するには、コーディングスキルが必須でしました。デザイナーとエンジニアの分業体制が当たり前だった時代も、もう過去です。

Claude Codeの登場によって、状況は劇的に変わりました。Figmaで作成したデザインカンプを見ながら、AIとの対話だけで本格的なランディングページを実装できる時代がやってきたのです。

重要なのは「やみくもに実装させない」こと。むしろ計画と準備の段階こそが、成功の鍵になります。このガイドでは、デザインカンプから実装完了まで、段階的かつ効率的に進めるための実践的アプローチをお伝えします。

準備フェーズ — Plan Modeで設計を言語化する

Claude Codeで最も多い失敗パターンは「いきなり実装に入る」ことです。特にAuto-Accept Modeを使っていると、AIが勝手に進めてしまい、あなたの意図と異なる補完が入る可能性があります。

重要なのは Plan Mode の活用 です。

Plan Modeでは、Claude Codeが最初に「実装計画」を提示してくれます。これはあなたが承認する前の段階。ここで以下をチェックしましょう：

技術スタックの選択（Next.js？Astro？HTML+CSS？）
ディレクトリ構成の妥当性
コンポーネント分割の粒度
スタイリング方式（Tailwind CSS？CSS Modules？）

具体的な手順：

Plan Modeをオンにした状態で、プロジェクト概要を説明するプロンプトを送ります。

# Claude Code Plan Mode での指示例

私はFigmaで作成した SaaS向けランディングページのデザインカンプを持っています。
実装予定：
- ヘッダー（ナビゲーション付き）
- ヒーロー セクション（背景動画付き）
- 機能紹介（3列グリッド）
- 料金表（3プラン）
- よくある質問（アコーディオン）
- フッター

技術スタック：Next.js 16（App Router）+ Tailwind CSS
ターゲット：モバイル・タブレット・デスクトップ対応

実装計画を立ててもらえますか？各セクションごとの実装順序と、ファイル構成を教えてください。

このように事前に計画を立てることで、後から「やっぱり構成を変えたい」という手戻りを最小化できます。

CLAUDE.mdの設計 — プロジェクトの「設計書」を書く

実装開始前に、プロジェクトのルールを1つのMarkdownファイルにまとめましょう。これが CLAUDE.md です。

CLAUDE.mdに記載すべき内容：

# LP実装ガイド
 
## プロジェクト概要
SaaS向けランディングページ実装プロジェクト
 
## 技術スタック
- フレームワーク: Next.js 16 (App Router)
- スタイリング: Tailwind CSS v3
- フォント: Google Fonts（Sora, Roboto）
- アニメーション: CSS Animations（可能ならFramer Motionは不要）
- ホスティング: Vercel
 
## ディレクトリ構成

app/ ├── page.tsx # メインページ ├── layout.tsx # グローバルレイアウト └── globals.css # グローバルスタイル

components/ ├── Header.tsx # ヘッダー ├── Hero.tsx # ヒーロー ├── Features.tsx # 機能紹介 ├── Pricing.tsx # 料金表 ├── FAQ.tsx # よくある質問 └── Footer.tsx # フッター

public/ ├── images/ # 画像ファイル └── videos/ # 動画ファイル


## 命名規則
- コンポーネント: PascalCase（Header.tsx）
- CSSクラス: kebab-case（hero-section）
- 状態管理: camelCase（isMenuOpen）

## カラーパレット
- Primary: #3B82F6（青）
- Secondary: #8B5CF6（紫）
- Background: #FFFFFF
- Text: #1F2937（濃いグレー）

## レスポンシブブレークポイント
- モバイル: 0px 〜 640px
- タブレット: 641px 〜 1024px
- デスクトップ: 1025px 〜

## 重要な実装ルール
- 内部リンクは相対パスで記述
- 画像は Next.js Image コンポーネントを使う
- フォントは layout.tsx で一括読み込み
- ダークモード対応は未定（ライトモードのみ）

このファイルをClaude Codeと共有することで、AIが一貫した品質で実装を進められます。毎回「このプロジェクトのルールはこれです」と説明する手間が減るのです。

セクション分割で実装精度を上げる

LP全体を一気に実装させてはいけません。セクション単位に分割して、段階的に進めることが精度向上の秘訣です。

推奨される実装順序：

Header（ナビゲーション） → 全ページ共通の基盤
Hero → 最も視認性が高いセクション
Features → メインコンテンツ
Pricing → コンバージョン要素
FAQ → ユーザーの疑問解決
Footer → 法的情報・リンク集
グローバルスタイル調整 → 統一感の確保

各セクションを実装する際は、デザインカンプの該当部分を 明確に指示 しましょう。

# セクション別実装指示の例

## Headerの実装

デザインカンプのページトップを見てください。
以下の要素を含む Header コンポーネントを作成してください：

1. ロゴ（テキスト "SAAS"）
2. ナビゲーションメニュー（Features, Pricing, Contact）
3. CTA ボタン（"Get Started"）

要件：
- デスクトップ: 横並び表示
- モバイル: ハンバーガーメニュー
- 固定ヘッダー（スクロール時も画面上部に表示）
- 背景: 白、ボーダー下部: 浅いグレー

color.primary を使用してください。

このように具体的かつ制限的な指示をすることで、実装のぶれが少なくなります。

デザインカンプとの差分を詰める

実装が完了した後、デザインカンプと見比べて差分を確認します。ここで重要なのは 「なぜ違うのか」を理解すること です。

一般的な差分ポイント：

色の濃淡 → RGB値を正確に指定していたか
フォントサイズ → デザインカンプ通りのサイズか
余白（パディング・マージン） → 「スペーシング」を統一ルールに従わせたか
行間（line-height） → テキストが詰まりすぎていないか
ボタンのサイズ → クリッカブル領域が十分か（最小 44×44px）

差分を見つけたら、Claude Codeに修正を依頼する際は、具体的に指摘しましょう。

# 差分修正の例

Header のロゴ部分で差異を確認しました。

デザインカンプ:
- フォント: Sora Bold, 24px
- 色: #1F2937
- ロゴ下のボーダー: 薄いグレー, 1px

現在の実装:
- フォントサイズが18pxになっている
- ボーダーカラーが濃すぎる

修正してください。

このような「比較指示」により、AIも修正ポイントを理解しやすくなります。

画像と動画の最適化

デザインカンプに含まれる画像や動画は、そのままでは使えません。最適化が必要です。

画像の準備：

形式: WebP推奨（Figmaから PNGエクスポート → WebPに変換）
解像度: デスクトップ表示用は最大1200px幅
ファイルサイズ: 1枚あたり100KB以下

# ImageMagick を使った WebP 変換例
convert hero.png -quality 80 hero.webp
 
# 複数画像の一括変換
for file in *.png; do
  convert "$file" -quality 80 "${file%.png}.webp"
done

動画の準備：

形式: MP4（H.264コーデック）
解像度: 1920×1080 or 1280×720
ファイルサイズ: 5MB以下（初期読み込みで差し支えない程度）
オートプレイ設定: muted属性必須（ほとんどのブラウザで音声なし再生が必須）

Claude Codeに依頼する際は、画像・動画ファイルの配置パスを明記しましょう。

// Next.js での Image コンポーネント使用例
import Image from 'next/image';
 
export default function Hero() {
  return (
    <section className="hero-section">
      <Image
        src="/images/hero-bg.webp"
        alt="SaaS platform overview"
        width={1200}
        height={600}
        priority
      />
    </section>
  );
}

全体を振り返ってと次のステップ

デザインカンプからClaude Codeを使ってLPを実装する道のりは、思ったより近いものです。重要なのは以下の3点です：

事前計画を丁寧に → Plan Modeで設計を確認し、CLAUDE.mdで統一ルールを記述
セクション分割で実装 → 全体ではなく部分ごとに、段階的に進める
差分を確実に詰める → 最後に目視確認と修正を繰り返す

これらのアプローチを守れば、コーディング未経験でも品質の高いLPが完成します。

次のステップとしては、より詳細な品質向上テクニックを学ぶことをお勧めします。レスポンシブ対応、アニメーション実装、パフォーマンス最適化など、プロレベルのLP実装へ進むための技術があります。

さあ、デザインカンプを開いて、Claude Codeとの対話を始めましょう。あなたのビジョンが、確実にコードへ姿を変える瞬間を体験してください。