【完全実践】FigmaデザインカンプからClaude CodeだけでLPを実装する全手順！指示書の書き方からアニメーション調整・設定自動化まで徹底解説

ターミナル（CLI）から直接ファイル操作やコマンド実行を行えるAnthropicの自律型コーディングエージェント「Claude Code」。

エディタの補助ツールにとどまらず、ターミナル上で自律的にファイルを読み書きし、テストを実行し、エラーを自己修復しながらプロジェクトを構築していくその能力は、従来のAIアシスタントの枠を完全に超えています。

しかし、実際のWeb制作現場で導入しようとすると、以下のような壁に直面するケースが後を絶ちません。

「Figmaのデザインカンプを渡しても、細部の余白やレイアウトが崩れてしまう」
「AIにいきなり作らせたら、意図しないライブラリを勝手にインストールされてコードが破綻した」
「『もっとフワッと動かして』といった曖昧なアニメーションのニュアンスがうまく伝わらない」
「毎回コマンド実行の承認（Enterキー）を押すのが面倒で作業が進まない」

結論から言えば、Claude Codeで高品質なLP（ランディングページ）を実装するには、「指示書（instruction.md）によるルール定義」「Plan Mode（計画モード）の徹底」「Figmaのセレクション連携」「設定ファイルによる自動実行の許可」という4つのポイントを押さえることが不可欠です。

本記事では、デザインカンプからClaude Codeだけで商用クオリティのLPを作り上げるための実践ワークフロー、必須コマンド、アニメーション調整の言語化テクニック、実務で役立つ設定カスタマイズまで徹底解説します！

1. Claude Codeとは？従来のAIエディタ（Cursor等）との決定的な違い
2. 開発前の必須準備：セットアップと便利なコマンド一覧
1. セットアップ手順
2. これだけは覚えておきたい必須操作・コマンド
3. 【大原則】いきなりコードを書かせない！Plan Modeと指示ファイルの活用
1. ① instruction.md でプロジェクトの掟（レギュレーション）を決める
2. ② Shift + Tab で「Plan Mode」に切り替えて計画を立てる
4. Figmaデザインカンプを破綻なく渡す連携テクニック
1. ファイル全体を一気に渡してはいけない理由
2. セクション単位で「局所的」に渡すのがプロの鉄則
5. 承認の手間を省く！settings.json による自動実行設定
6. 「なんかもっとこう……」を回避する！アニメーションの言語化術
1. アンチパターン（伝わらない指示）
2. ベストプラクティス（物理的・構造的な指示）
7. 実務で役立つおすすめ運用フローまとめ
8. まとめ：AIが「実装」を担い、人間が「意思決定」を担う時代へ

1. Claude Codeとは？従来のAIエディタ（Cursor等）との決定的な違い

Claude Codeは、VS CodeなどのGUIエディタ内で動く拡張機能とは異なり、「ターミナル上で直接動作する自律型エージェント」です。

比較項目	従来のAI支援ツール（Copilot / 拡張機能）	Claude Code（自律型CLIエージェント）
動作環境	エディタ内のサイドパネル・インライン補完	OSのターミナル（CLI環境）
ファイル操作	開いているファイルや明示的に指定したファイルのみ	プロジェクト内の全ファイルを自律的に検索・読み書き
コマンド実行	ユーザーが手動でターミナルに貼り付けて実行	`npm run build` や `git` コマンドを自律的に実行
エラー修正	エラーメッセージをチャット欄にコピペして相談	ビルドエラーのログを自分で検知し、勝手にコードを修正

「このデザインに合わせてコンポーネントを組んで、ビルドが通るまで修正して」と指示するだけで、ファイルの作成からTypeScriptの型チェック、ビルド確認までを一気通貫で完結してくれるのが最大の強みです。

2. 開発前の必須準備：セットアップと便利なコマンド一覧

Claude Codeを立ち上げる手順と、日常の開発で頻繁に使う重要コマンドを押さえておきましょう。

セットアップ手順

ターミナルでClaude Codeをインストールします。
LP制作を行いたいプロジェクトのルートディレクトリに移動します。
claude コマンドを実行してセッションを開始します。

# 作業ディレクトリに移動して起動
cd my-lp-project
claude

これだけは覚えておきたい必須操作・コマンド

コマンド / キー操作	機能と使いどころ
Shift + Tab	Plan Mode（計画モード）の切り替え。実装前にAIと手順をすり合わせる最重要機能。
`/rewind`	直前の会話やコード実装をロールバック（取り消し）。実装が迷走した際に必須。
`/fork`	現在の文脈を引き継いで新しいセッションを開始。コンテキスト汚染を防ぐ。
`/compact`	長くなった会話履歴を圧縮。トークン消費を抑え、AIの物忘れを防ぐ。
`/exit`	Claude Codeを安全に終了して通常のターミナルに戻る。

3. 【大原則】いきなりコードを書かせない！Plan Modeと指示ファイルの活用

Claude Codeで最もやってはいけないアンチパターンが、起動直後に「このLP作って！」と丸投げすることです。AIが独自の判断で仕様を補完して暴走し、後戻りできないコードが生成されてしまいます。

① instruction.md でプロジェクトの掟（レギュレーション）を決める

プロジェクトのルートディレクトリに指示書ファイル（例：instruction.md や CLAUDE.md）を作成し、技術スタックやコーディングルールを明文化しておきます。

# プロジェクト概要: コーポレートサービス紹介LP

## 1. 技術スタック
- フレームワーク: Next.js (App Router) / React
- スタイリング: Tailwind CSS
- アイコン: Lucide React
- アニメーション: Framer Motion

## 2. ディレクトリ構成
- `src/components/sections/` : 各セクション（Hero, Features, Pricing等）
- `src/components/ui/` : ボタンやカードなどの再利用パーツ

## 3. コーディングルール
- セマンティックなHTMLタグ（header, main, section, footer）を厳守すること。
- モバイルファーストでレスポンシブを組むこと。
- カラーやフォントサイズはTailwindの設定値（またはCSS変数）に準拠すること。
- 日本語テキストをハードコードせず、定数ファイル（`src/constants/`）に分離すること。

これをあらかじめ配置しておくことで、Claude Codeは自律的にこのルールを読み込み、チームのレギュレーションに沿ったコードを一貫して出力するようになります。

② Shift + Tab で「Plan Mode」に切り替えて計画を立てる

コードを書かせる前に、キーボードの Shift + Tab を押して「Plan Mode」へ移行します。

Plan Modeでは、Claude Codeは即座にファイルを編集せず、まず「どのような手順でコンポーネントを分割し、どの順序で実装を進めるか」という詳細な行動計画（プラン）を提示してくれます。人間がその計画を確認し、「その方針でOK」「先にヘッダーから作って」と承認・修正を行ってから本実装に入ることで、認識のズレをゼロに抑えることができます。

4. Figmaデザインカンプを破綻なく渡す連携テクニック

デザインカンプの情報をClaude Codeに渡す際、最も推奨されるアプローチは**「Figmaのセレクションベース連携（MCP / クリップボード連携）」**です。

ファイル全体を一気に渡してはいけない理由

Figmaのファイル全体をそのまま読み込ませると、アートボード外のメモ、別パターンのボツ案、コンポーネント定義など膨大なメタデータが混ざり込み、AIのコンテキスト（情報許容量）を一瞬で圧迫してしまいます。情報過多になったAIは、重要なマージン指定やフォントサイズの数値を読み落としやすくなります。

セクション単位で「局所的」に渡すのがプロの鉄則

実装は必ず「ファーストビュー（Hero）」「特徴（Features）」「料金（Pricing）」といったセクション単位で進めます。

Figma上で対象のフレーム（例：Heroセクション）だけを選択する。
セレクション情報（またはデザインデータ）をClaude Codeに渡す。
「このセクションのHTML/CSSを、指示書のルールに従って実装して」とプロンプトを投げる。

対象を絞り込んで渡すことで、AIは余計なノイズに惑わされず、ピクセル単位の余白（padding/gap）やタイポグラフィの設定を極めて正確に再現できるようになります。

5. 承認の手間を省く！settings.json による自動実行設定

Claude Codeは安全設計のため、ターミナルでコマンドを実行するたびに「このコマンドを実行してもよいですか？ (y/n)」とユーザーの承認を求めてきます。

セキュリティ上は安心ですが、LP実装のようにファイルの新規作成やビルド確認を何十回も繰り返す作業では、キーボードのEnterを押し続けるだけの不毛な時間が発生してしまいます。

作業ディレクトリ内に .claude/settings.json を作成し、信頼できる安全なコマンドをあらかじめ自動許可（ホワイトリスト登録）しておくことで、開発スピードが劇的に向上します。

{
  "permissions": {
    "allowCommands": [
      "npm run build",
      "npm run lint",
      "npx prettier --write .",
      "ls",
      "git status"
    ]
  }
}

これにより、Claude Codeはコードを書き換えた後、自律的にビルドとリンターを走らせ、エラーが出なければそのまま次のセクションへ進むという「完全ハンズフリー」の爆速開発が可能になります。

6. 「なんかもっとこう……」を回避する！アニメーションの言語化術

LP制作の終盤で最も人間のフィードバックが必要になるのが、マイクロインタラクションやスクロールアニメーションの質感調整です。感覚的な指示を避けて、AIに的確に意図を伝えるためのプロンプト例を紹介します。

アンチパターン（伝わらない指示）

×「ボタンをもっといい感じにフワッと動かして」
×「背景のアニメーションをなんかエモい感じにして」

ベストプラクティス（物理的・構造的な指示）

◯「Heroセクションのボタンにマウスホバーした際、以下のFramer Motionアニメーションを適用してください。
- 拡大率: scale(1.03)
- 上方向への移動: translateY(-2px)
- イージング: cubic-bezier(0.16, 1, 0.3, 1)
- アニメーション時間: 0.25秒
- シャドウ: 0 10px 25px -5px rgba(0, 0, 0, 0.1) に変化」

レイヤーの多重構造を指示する場合も、以下のように「役割」を分解して伝えます。

◯「背景のパーティクル演出を2層構造にリファクタリングしてください。
1. 手前レイヤー: 不透明度100%、移動速度が速く、シャープに表示
2. 奥レイヤー: 不透明度40%、blur(4px)でぼかし、移動速度を手前の半分にする
視差効果（パララックス）によって奥行き感が強調されるように調整してください。」

物理的なパラメータ（移動量、透明度、ぼかし、時間、イージング）を指定することで、AIは迷うことなくプロクオリティのアニメーションコードを出力してくれます。

7. 実務で役立つおすすめ運用フローまとめ

デザインカンプから高品質なLPを最速で納品するための黄金サイクルです。

指示書の作成：instruction.md に技術選定、ディレクトリ構成、命名規則を記述する。
設定の最適化：.claude/settings.json でビルドコマンド等の自動実行を許可する。
Plan Modeで計画立案：Shift + Tab で実装手順とコンポーネント構造をAIとすり合わせる。
Figmaセレクション連携：セクション単位でパーツを渡し、1つずつ実装とテストを繰り返す。
ビルドとリファクタリング：npm run build でエラーがないことを確認し、冗長なコードを整理する。

8. まとめ：AIが「実装」を担い、人間が「意思決定」を担う時代へ

Claude Codeの登場によって、デザインカンプからHTML/CSS/TypeScriptをゼロから手作業でコーディングする時間は大幅に短縮されつつあります。

しかし、どれだけAIが進化したとしても、「どのような世界観を表現するか」「どんな意図でデザインが作られているか」「ユーザーにどんな体験を届けたいか」を判断し、AIを正しくディレクションできるのは人間だけです。

プログラミングスキルに加え、「AIへの言語化能力」と「デザインの意図を読み解く力」を磨き、次世代のハイスピードなWeb制作を実現していきましょう！

(Visited 1 times, 1 visits today)