CursorでWebサイトを制作する方法｜AI駆動開発の実践ガイド

「AIを使えばWebサイトが作れるらしい」と聞いたものの、具体的にどうやればいいかわからない。そんな方に向けて、AIコードエディタ「Cursor」を使ったWeb制作の実践手順を解説します。

この記事では、アントワがすべてのWeb制作プロジェクトで実際に使っている方法をそのまま公開します。プログラミング経験がなくても大丈夫です。

Cursorとは？Web制作者が今すぐ使うべき理由

Cursorは、AIが搭載されたコードエディタです。見た目はVisual Studio Code（VS Code）とほぼ同じですが、大きな違いが一つあります。日本語で「こういうサイトを作って」と指示するだけで、AIがコードを書いてくれるという点です。

従来のWeb制作では、HTML・CSS・JavaScriptの知識が必須でした。しかしCursorを使えば、デザインのイメージを言葉で伝えるだけでコードが生成されます。これがいま注目されている「バイブコーディング」という開発スタイルです。

Cursorを使うメリット

• 制作時間が1/3〜1/5に短縮 — 手作業でコードを書く工程をAIが代替
• プログラミング未経験でも始められる — 日本語の指示でOK
• プロの品質が出せる — AIが生成するコードはベストプラクティスに沿っている
• 修正も会話で — 「ここの色を青にして」「余白をもっと広くして」と言えば反映される

アントワでは、LP制作からSaaS開発まで、すべてのプロジェクトにCursorを使ったAI駆動開発を取り入れています。このサイト（antoir.jp）自体も、Cursorで制作しています。

Cursorのインストールと初期設定（5分で完了）

ステップ1: ダウンロード

Cursor公式サイトにアクセスし、お使いのOS（Mac / Windows / Linux）に合ったバージョンをダウンロードします。インストールは通常のアプリと同じです。

ステップ2: AIモデルの設定

Cursorを起動したら、まずAIモデルを設定します。

1. 設定画面（⌘ + , または Ctrl + ,）を開く
2. 「Models」タブを選択
3. Claude（Anthropic）またはGPT-4を選択
4. APIキーを入力（Cursor Proプランなら不要）

おすすめはClaudeです。日本語の理解力が高く、Web制作のコード品質も安定しています。

ステップ3: プロジェクトフォルダを作成

デスクトップやドキュメントに新しいフォルダを作り、Cursorで開きます。これで準備完了です。

CursorでLP（ランディングページ）を実際に作る手順

ここからが本番です。実際にCursorを使ってLPを作ってみましょう。

手順1: HTMLファイルを作成する

Cursorの画面で index.html という名前のファイルを新規作成します。

手順2: AIに指示を出す

Cursorの「Composer」機能（⌘ + I）を開き、以下のように日本語で指示します。

ヨガスタジオのLPを作ってください。以下の構成でお願いします。
・ヒーローセクション（キャッチコピー + 体験レッスンのCTAボタン）
・3つの特徴（初心者歓迎、少人数制、駅近）
・料金プラン（月4回 8,000円、通い放題 15,000円）
・インストラクター紹介
・お問い合わせフォーム
・フッター

デザインはモダンでシンプルに。色はパステルグリーンを基調に。レスポンシブ対応で。

これだけで、AIがHTML + CSSのコードを一気に生成します。

手順3: プレビューで確認する

生成された index.html をブラウザで開くと、LPが表示されます。たったの数分で、レスポンシブ対応のLPが完成します。

手順4: 修正を会話で行う

「ヒーローの背景画像を追加して」「CTAボタンをもっと目立つ色にして」「料金プランにおすすめバッジをつけて」——こんなふうに追加の指示をするだけで、AIが修正してくれます。

これがバイブコーディングです。コードを書くのではなく、イメージを伝えてAIに作らせる。

Cursorを使ったWeb制作のコツ（プロンプトの書き方）

アントワが実際のプロジェクトで使っているプロンプトのコツを公開します。

コツ1: 具体的に指示する

❌「かっこいいサイトを作って」
✅「白を基調にした、余白を広く取ったミニマルなコーポレートサイト。メインカラーは#4F6DF5（インディゴブルー）。フォントはNoto Sans JP。」

色、フォント、レイアウトは具体的に伝えるほど、イメージ通りの結果になります。

コツ2: 参考サイトのURLを渡す

「〇〇のサイトのようなデザインにして」と参考URLを伝えると、そのテイストに寄せたデザインを生成してくれます。

コツ3: セクションごとに作る

一度に全ページを作ろうとせず、セクションごとに指示を出すと精度が上がります。

1. まずヘッダーを作る
2. 次にヒーローセクション
3. サービス紹介セクション
4. …という順番で組み上げる

コツ4: .cursorrules を設定する

プロジェクトのルートに .cursorrules ファイルを置くと、AIの動作をカスタマイズできます。例えば：

• 「セマンティックHTMLを使うこと」
• 「CSSはBEM記法で書くこと」
• 「レスポンシブはモバイルファーストで」

このファイルがあると、毎回同じ指示をしなくても一貫したコードが生成されます。

アントワではすべての制作にCursorを使っている

アントワは「AI駆動開発を実践・推奨する制作会社」です。LP制作、コーポレートサイト、Webアプリ、SaaS開発——すべてのプロジェクトでCursorを中心としたAI駆動開発を行っています。

その結果：

• 制作コスト30〜60%削減を実現
• 納期は従来の半分に短縮
• 品質は人間がレビュー・管理するのでプロの水準を維持

「AIで作ったサイトって品質が心配…」という声もありますが、AIが書いたコードをプロのエンジニアがレビューし、品質を担保する体制を取っています。AIはあくまでツール。最終的な品質は人間が責任を持ちます。

Web制作・アプリ開発のご相談は、お問い合わせフォームからお気軽にどうぞ。概算費用は見積もりシミュレーターで30秒で確認できます。

もっと本格的に学びたい方へ

「自分でもCursorを使ってWeb制作をしたい」「本格的にバイブコーディングを身につけたい」という方には、Viveコーディング教室がおすすめです。

プログラミング経験ゼロから、最短1日でホームページを完成させることができます。Cursorの使い方はもちろん、プロンプトの書き方、デザインの基礎、公開までの手順をすべて学べます。

• 体験ワークショップ（90分 / ¥5,000）— まずはAIでLP1枚を作ってみる
• 入門コース（1日 / ¥39,800）— 1日でマイホームページを完成させる
• マスターコース（4週間 / ¥148,000）— LP・ECサイト・Webアプリ基礎まで

詳細はViveコーディング教室のページをご覧ください。

まとめ

Cursorを使えば、プログラミング未経験でもWebサイトを制作できる時代になりました。大切なのは「コードを書けるか」ではなく、「何を作りたいかを明確に伝えられるか」です。

まずはCursorをインストールして、簡単なLPを1つ作ってみてください。きっと「こんなに簡単にできるのか」と驚くはずです。