Cursor（カーソル）でWebページ作成を自動化する3ステップ【初心者向け】
A
AI Friends
1時間前・6分で読める
❤️ 0
🔖 0
⚡ 0
プログラミング初心者でも、AI の力を借りれば簡単に Web ページが作れる時代になりました。Cursor（カーソル）は AI が組み込まれたコードエディタで、自然な日本語で指示するだけでコードを自動生成してくれます。
この記事でわかること
従来のコードエディタでは、HTML や CSS の書き方を一から覚える必要がありました。Cursor を使えば、「青いボタンを作って」と日本語で伝えるだけで、AI が適切なコードを自動生成してくれます。2026年4月にリリースされた Cursor 3.0 では、複数の AI エージェントを同時に動かせる機能や、ブラウザ上で直接デザインを指定できる Design Mode が追加されました。VSCode（人気のあるコードエディタ）をベースにしているため、操作感も親しみやすく、プログラミング経験がゼロの方でも安心して使えます。無料の Hobby プランでも基本機能が使えるため、まずは試してみる価値があります。
まず Cursor の公式サイトにアクセスして、アカウントを作成します。メールアドレスまたは GitHub アカウントでサインアップできます。サインアップが完了したら、Windows・Mac・Linux 用のインストーラーをダウンロードして実行してください。インストールが終わると、Cursor が自動的に起動します。初回起動時には簡単なチュートリアルが表示されますが、スキップしても問題ありません。画面左側にフォルダアイコンがあるので、クリックして「新しいフォルダを開く」を選択し、作業用のフォルダを作成します。ここでは「my-first-web」という名前のフォルダを作ってみましょう。無料の Hobby プランでは月間の AI リクエスト数に制限がありますが、初心者の練習には十分です。
フォルダを開いたら、新しいファイルを作成します。画面左のフォルダ名を右クリックして「新しいファイル」を選び、「index.html」という名前で保存してください。ファイルが開いたら、キーボードの「Ctrl + K」（Mac の場合は「Cmd + K」）を押すと、AI とのチャット画面が表示されます。ここに「シンプルな自己紹介ページを作って。タイトルと青いボタンを含めてください」と日本語で入力してみましょう。数秒待つと、Cursor が HTML と CSS を含む完全なコードを提案してくれます。提案されたコードの左側に「Accept」（受け入れる）ボタンが表示されるので、クリックするとコードがエディタに挿入されます。コードが挿入されたら、ファイルを保存します。
作成した HTML ファイルをブラウザで開いて、実際の見た目を確認します。エクスプローラー（Windows）や Finder（Mac）で、先ほど作った「my-first-web」フォルダを開き、「index.html」をダブルクリックしてください。ブラウザが起動して、あなたの Web ページが表示されます。タイトルと青いボタンが表示されていれば成功です。もし思った通りのデザインでない場合は、Cursor に戻って「Ctrl + K」を押し、「ボタンをもっと大きくして」や「背景色を白にして」など、追加の指示を出すことができます。Cursor は既存のコードを理解した上で修正案を提示してくれるため、何度でも調整可能です。リアルタイムでプレビューしながら調整すると、より効率的に作業できます。
初心者がよくつまずくのは、AI の提案を受け入れる前に編集してしまうケースです。Cursor では、まず提案を「Accept」で受け入れてから手動で調整する流れが基本です。また、日本語の指示が曖昧すぎると、AI が意図通りのコードを生成できないことがあります。「赤くて大きいボタン」のように、具体的な色やサイズを指定すると精度が上がります。もう一つの落とし穴は、エラーメッセージを無視してしまうことです。Cursor には Auto-Debug 機能があり、エラー箇所を自動で検出して修正案を出してくれます。エラーが出たら、チャット画面でそのまま「このエラーを直して」と伝えれば、AI が解決策を提示してくれます。無料プランでは月間リクエスト数に上限があるため、複雑な要求は一度にまとめて伝えると効率的です。
基本操作に慣れたら、Composer 機能を試してみましょう。これは複数のファイルを一度に編集できる機能で、「index.html と style.css を分けて作成して」と指示すると、AI が適切にファイルを分割してくれます。また、Cursor 3.0 で追加された Agent Tabs 機能を使えば、複数のチャットを同時に開いて、異なる作業を並行して進められます。たとえば、一つのタブでデザインの相談をしながら、別のタブでエラー修正を依頼することも可能です。さらに高度な使い方として、Cursor Marketplace からプラグインをインストールすると、特定のフレームワーク（React や Vue など）に特化したコード生成ができるようになります。Pro プラン（月20ドル）にアップグレードすれば、リクエスト数の制限が大幅に緩和され、より大規模なプロジェクトにも対応できます。
Cursor を使えば、プログラミング初心者でも簡単に Web ページを作成できます。重要なポイントをおさらいしましょう。
2026年の最新バージョンでは、AI エージェントの並行実行や Design Mode など、さらに便利な機能が追加されています。まずは簡単な自己紹介ページから始めて、AI とのコーディングを体験してみてください。
この記事は AI Friends からのクロスポストです。
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
まだコメントはありません
