Cursor×Claude 3.5 Sonnetで2時間LP制作：中小企業のWeb制作を加速する実践ガイド

中小企業のWeb担当者なら誰もが経験する課題があります。新サービスのローンチ前に「とりあえずLPが必要」、広告キャンペーン前に「テスト用のランディングページが欲しい」。しかし外注すれば2週間と数十万円、社内で作ろうにもデザイナーやエンジニアのリソースが限られている——このジレンマは、ビジネススピードが求められる現代において深刻な課題です。

今回紹介するのは、AIエディタ「Cursor」とClaude 3.5 Sonnetモデルを活用し、**プロンプト1つでLPを2時間で完成させる**実践手法です。この手法は単なる時短テクニックではなく、Web制作のワークフロー自体を根本から変える可能性を秘めています。

Cursorとは何か

Cursorは、AIを統合した次世代コードエディタです。従来のVS Codeのような操作感を保ちながら、自然言語での指示によってHTML/CSS/JavaScript、さらにはNext.jsやReactといったモダンフレームワークのコードを生成できます。

重要なのは、単なるコード補完ツールではないという点です。Cursorは：

2時間でLP完成までのワークフロー

実際の制作フローは驚くほどシンプルです：

1. **要件定義プロンプト**（15分）：「20代女性向けオーガニックコスメのLP。ヒーローセクション、商品特徴3点、お客様の声、CTA配置」のような自然言語での指示

2. **初期生成**（5分）：Cursorが完全なHTML/CSS/JSファイルを生成

3. **イテレーション**（60分）：「ヒーローのフォントサイズを大きく」「CTAボタンの色を#FF6B6Bに」などの微調整を繰り返す

4. **レスポンシブ対応確認**（30分）：モバイル表示の調整

5. **最終調整・デプロイ準備**（10分）

従来の制作では各工程に専門知識が必要でしたが、Cursorでは**対話を通じて技術的な壁を取り除く**ことができます。

従来のノーコードツールとの決定的な違い

WixやSTUDIOといったノーコードツールとCursorを比較すると、本質的な違いが見えてきます。

**ノーコードツール**は、あらかじめ用意されたテンプレートとUIコンポーネントの組み合わせです。直感的で初心者フレンドリーですが、デザインの自由度には限界があり、複雑なインタラクションやカスタマイズには対応できません。また、プラットフォームへの依存が避けられず、将来的な移行コストも考慮が必要です。

一方、**Cursor**は実際のコード（HTML/CSS/JS）を生成します。これは：

ChatGPT/GitHub Copilotとの比較分析

同じAI支援ツールでも、用途と効率性は大きく異なります。

**ChatGPT**はコードスニペットの生成には優れていますが、エディタとの統合がないため、コピー&ペーストの手間が発生します。また、プロジェクト全体のコンテキストを保持できないため、複数ファイルにまたがる一貫性のある開発には不向きです。

**GitHub Copilot**はリアルタイムのコード補完に特化しており、既存コードの延長線上での開発には強力ですが、「ゼロからWebページを作る」といったプロジェクト単位の生成には適していません。

Cursorは、**プロジェクト全体を理解しながら、対話的に完成品まで導く**点で独自のポジションを確立しています。特にClaude 3.5 Sonnetモデルは、長文コンテキストの理解に優れ、複雑な要件でも一貫性のある出力が可能です。

メリットと注意すべき限界

**明確なメリット**：

**注意すべき限界**：

最適な適用シーン

この手法が特に威力を発揮するのは：

1. **MVPの検証フェーズ**：市場テスト用の簡易LP作成

2. **広告キャンペーン用LP**：短期間で複数パターンを作成してA/Bテスト

3. **社内プレゼン用モックアップ**：企画提案時のビジュアル資料

4. **イベント告知ページ**：期間限定で必要な簡易サイト

5. **学習・プロトタイピング**：Web制作の学習や新技術の検証

逆に、以下のケースでは従来の手法との併用や、専門家への依頼が推奨されます：

アクション1：まずは無料枠で体験する

Cursorは無料プランでも十分に試せます。まずは公式サイトからダウンロードし、簡単なプロジェクトで感覚をつかみましょう。

**具体的な手順**：

1. Cursor公式サイトからエディタをダウンロード

2. 新規プロジェクトを作成

3. Cmd+K（Mac）またはCtrl+K（Windows）でAIチャットを起動

4. 「シンプルな自己紹介ページを作って。名前、職業、SNSリンクを含めて」と入力

5. 生成されたコードをプレビューで確認

この5分間の体験だけで、AIコーディングの可能性を実感できます。

アクション2：Claude 3.5 Sonnet APIキーを設定する

Cursorの真価を引き出すには、Claude 3.5 SonnetのAPIキー設定が推奨されます。

**設定方法**：

1. Anthropic Consoleでアカウント作成（無料枠あり）

2. APIキーを生成（初回$5分の無料クレジットが付与されることが多い）

3. Cursorの設定（Settings > Models）でAPIキーを入力

4. モデル選択で「Claude 3.5 Sonnet」を指定

Claude 3.5 Sonnetは、GPT-4と比較してコード生成の精度が高く、特に日本語プロンプトへの対応が優れています。

アクション3：「要件定義プロンプト」のテンプレートを作る

効率的なLP制作には、再利用可能なプロンプトテンプレートが有効です。

**推奨テンプレート構造**：

【目的】[LP/コーポレートサイト/ECページ等]
【ターゲット】[年齢層、性別、興味関心]
【構成要素】
- ヒーローセクション：[キャッチコピー案]
- 特徴セクション：[3〜5個の訴求点]
- 社会的証明：[お客様の声/実績数値]
- CTA：[行動喚起の内容]
【デザイン方向性】[モダン/クラシック/ミニマル等]
【カラー】[メインカラー、アクセントカラー]
【技術要件】[レスポンシブ必須/アニメーション希望等]

このテンプレートを埋めてCursorに渡すだけで、一貫性のある高品質なLPが生成されます。初回は30分かかっても、2回目以降は要件入力だけで済むため、大幅な時短になります。

CursorとClaude 3.5 Sonnetの組み合わせは、Web制作の「専門家の独占領域」という壁を確実に低くしています。これは単なるツールの進化ではなく、**誰がWebコンテンツを作れるか**という根本的な問いへの答えが変わりつつあることを意味します。

中小企業のWeb担当者、フリーランスのマーケター、スタートアップの創業者——技術的バックグラウンドがなくても、アイデアとビジョンがあれば形にできる時代が到来しています。

もちろん、プロのデザイナーやエンジニアの価値がなくなるわけではありません。むしろ彼らは、細部の洗練や複雑なシステム設計といった、より高度な領域に専念できるようになります。AIは「代替」ではなく「拡張」のツールなのです。

2時間でLPを作れる環境は、既にあなたの手の届くところにあります。まずは小さく始めて、その可能性を体感してみてください。

この情報は @yutaka8484 さんの投稿を参考にしています。