「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モデルを設定します。
- 設定画面（⌘ + , または Ctrl + ,）を開く
- 「Models」タブを選択
- Claude（Anthropic）またはGPT-4を選択
- APIキーを入力（Cursor Proプランなら不要）
おすすめはClaudeです。日本語の理解力が高く、Web制作のコード品質も安定しています。
ステップ3: プロジェクトフォルダを作成
デスクトップやドキュメントに新しいフォルダを作り、Cursorで開きます。これで準備完了です。
📚 もっと詳しく知りたい方へ
Cursorの操作画面や具体的な使い方は、動画で見るのが一番わかりやすいです。以下のリソースがおすすめです。
- 📖 Cursor公式ドキュメント — 機能の全体像がわかる
- 🎬 YouTube「Cursor Web制作 使い方」で検索 — 画面操作が動画でわかる
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: セクションごとに作る
一度に全ページを作ろうとせず、セクションごとに指示を出すと精度が上がります。
- まずヘッダーを作る
- 次にヒーローセクション
- サービス紹介セクション
- …という順番で組み上げる
コツ4: .cursorrules を設定する
プロジェクトのルートに .cursorrules ファイルを置くと、AIの動作をカスタマイズできます。例えば：
- 「セマンティックHTMLを使うこと」
- 「CSSはBEM記法で書くこと」
- 「レスポンシブはモバイルファーストで」
このファイルがあると、毎回同じ指示をしなくても一貫したコードが生成されます。
Cursorの基本操作・ショートカット一覧
Cursorを使いこなすために覚えておきたい基本操作とショートカットキーをまとめます。
| 操作 | Mac | Windows | 用途 |
|---|---|---|---|
| AIチャット | ⌘ + L | Ctrl + L | AIに質問・相談する |
| Composer | ⌘ + I | Ctrl + I | AIにコードを書かせる（メイン機能） |
| インライン編集 | ⌘ + K | Ctrl + K | 選択したコードをAIに修正させる |
| ファイル検索 | ⌘ + P | Ctrl + P | プロジェクト内のファイルを素早く開く |
| コマンドパレット | ⌘ + Shift + P | Ctrl + Shift + P | 全コマンドにアクセス |
| ターミナル | ⌘ + ` | Ctrl + ` | コマンドライン操作 |
最も使う機能はComposer（⌘ + I）です。「こういうサイトを作って」「このセクションのデザインを変えて」といった指示をここに入力します。AIチャット（⌘ + L）は、コードの意味を質問したり、エラーの原因を聞いたりするときに使います。
Cursorのブラウザプレビュー機能
Cursorには作成中のWebページをエディタ内でプレビューできるブラウザ機能があります。プレビューを見ながら「この部分の色を変えて」「余白を広くして」と視覚的にフィードバックできるため、デザインの微調整が格段に楽になります。
WordPressサイトをCursorで制作・カスタマイズする方法
静的なHTMLサイトだけでなく、WordPressのテーマ制作・カスタマイズにもCursorは有効です。実際にこのサイト（antoir.jp）もCursorで制作しています。
WordPressテーマをCursorで編集する手順
- ローカル環境を構築 — Docker等でWordPressのローカル環境を用意
- テーマフォルダをCursorで開く —
wp-content/themes/your-theme/を開く - AIに指示してカスタマイズ — 「トップページにヒーローセクションを追加して」等
- ブラウザで確認 — localhost でリアルタイムに変更を確認
WordPressテーマはPHP・HTML・CSS・JavaScriptが混在しますが、CursorのAIはすべての言語を理解しています。「functions.phpにカスタム投稿タイプを追加して」「SCSSでレスポンシブなグリッドを作って」といった指示も問題なく処理できます。
WordPress × Cursor の活用例
- 既存テーマのデザインカスタマイズ
- カスタム投稿タイプやタクソノミーの追加
- お問い合わせフォームのスタイリング
- 料金シミュレーターなどのインタラクティブ機能の実装
- SEO対策用の構造化データ（JSON-LD）の追加
アントワではすべての制作に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コーディング教室のページをご覧ください。
よくある質問
Q. Cursorは無料で使える？
Hobbyプラン（無料）があり、基本機能は使えます。Proプランは月額$20で、より多くのAIモデルが利用可能です。2025年6月からクレジット制に変更されており、利用するAIモデルによって消費量が異なります。
Q. プログラミング経験がなくても大丈夫？
大丈夫です。Cursorでは日本語で指示を出すだけでコードが生成されます。HTML/CSSの構文を覚える必要はありません。ただし「どんなサイトを作りたいか」を言語化する力は必要です。バイブコーディングのやり方も合わせて読むと理解が深まります。
Q. Cursorで作ったサイトは商用利用できる？
はい、Cursorで生成したコードの商用利用に制限はありません。バイブコーディングでの副業にも問題なく使えます。ただし、使用する画像やフォントのライセンスは別途確認が必要です。
Q. AI駆動開発のデメリットは？
AIが生成したコードには品質のばらつきやセキュリティリスクが含まれる可能性があります。必ず人間がレビューする体制が重要です。詳しくはAI駆動開発のメリット・デメリットで解説しています。
Q. 他のAIエディタ（Copilot・Claude Code）との違いは？
GitHub CopilotはVS Code拡張としてコード補完に特化、Claude Codeはターミナル型のCLIツール、Cursorはエディタ全体がAI統合されたGUI型です。初心者が最も学習コストを抑えて始められるのはCursorで、2026年時点では情報量も最も豊富です。詳しくはClaude Codeとは？も参考にしてください。
作ったサイトを公開するには
Cursorで作成したサイトをインターネットに公開するには、レンタルサーバーが必要です。WordPressサイトならエックスサーバー
やConoHa WING
が定番で、WordPress簡単インストール機能もついているのですぐに始められます。
静的なHTML/CSSサイト（CursorでそのままLP等を作った場合）なら、Vercel・Netlify等の無料ホスティングでも公開可能です。費用を抑えたい方はこちらも検討してみてください。
Cursorを使ったWeb制作を依頼したい方へ
アントワでは、Cursorを用いたバイブコーディングによる高速Web制作・受託開発を提供しています。従来比で30〜60%のコスト削減、納期を1/2〜1/3に短縮した実績があります。社内でのCursor導入支援、教室形式でのトレーニングもご相談ください。
関連記事
- Cursor インストール・初期設定完全ガイド｜Windows/Mac対応
- .cursorrulesの書き方ガイド｜Cursor AI駆動開発の精度を上げる設定術
- MCPサーバー連携でCursorを3倍活かす実務Tips
- バイブコーディングのやり方 完全入門｜2026年版
- AI駆動開発の失敗事例とデメリット回避策
- Claude Codeとは？使い方・料金・Cursorとの違いを解説
まとめ
Cursorを使えば、プログラミング未経験でもWebサイトを制作できる時代になりました。大切なのは「コードを書けるか」ではなく、「何を作りたいかを明確に伝えられるか」です。
まずはCursorをインストールして、簡単なLPを1つ作ってみてください。きっと「こんなに簡単にできるのか」と驚くはずです。
