【非エンジニア向け】Cursorでバイブコーディング ウェブサイトを作成しよう

「バイブコーディングに興味はあるけど、何から始めたらいいか分からない…」そんな状態で時間だけが過ぎてしまっていませんか？実はそれ、とてももったいないことです。

AIの進化は想像以上に速く、今から始めなければライバルがどんどん増えて、後から参入するのが難しくなってしまいます。

最初は時間がかかりますが、習得できれば大きな武器になります。

この記事を最後まで読めば、あなたも今すぐバイブコーディングを始められますよ。

【結論】まずはCursorでウェブサイトを作ろう

バイブコーディングを体験するには、Cursorで自分のウェブサイト（ポートフォリオ）を作ることをおすすめします。

バイブコーディングの開発環境の比較

	代表的なツール	特徴	初心者向け
AIエディタ	Cursor Windsurf など	AIが搭載されているエディタ	ダウンロードしてすぐ使える
CLI	Gemini CLI Claude Code など	コマンドラインで実行できるAI	コマンドラインというのが初心者向けではない？
ソースコードエディタ	Visual Studio Code (Github Copilot)	ソースコードエディタでAIが使える	AIエディタに比べて初期設定が若干難しい？

Cursorでのウェブサイト制作とは

AIにコーディングしてもらう制作方法

Cursor「○○のサイトを作って」と指示をすると、すぐに使える状態でサイトが作成されます。

ChatGPTなどの生成AIでもコードの出力はしますが、それを自分でコピペしてウェブサイトを作る必要があります。

	コードの生成	全体を把握してアシスト	サイトの作成
ChatGPTなど従来の生成AI
バイブコーディング

デザインのスキルは不要

作りたいサイトのイメージをテキストで伝えるだけで良いです。

たとえば「おしゃれな」「ビジネスに使える」でも大丈夫ですよ。

ざっくりとしたイメージをかたちにしてくれるのがバイブコーディングの凄さです。

コーディングのスキルも不要

コードは全てAIが出力します。

たとえば、アニメーションをするような表現を実現するには、ある程度のコーディングスキルが必要です。

バイブコーディングであればコーディングのスキルがなくても実現できます。

Cursor（バイブコーディング）のデメリット

凝ったデザインにするには時間がかかる

ざっくりとした指示でもウェブサイトは作れますが、それはAIが良い感じにしてくれているだけです。

たとえば、明確なデザインイメージがある場合、明確に伝えないと伝わりませんし、意図を汲んでくれるわけではありません。

デザインの知識が不足している状態で、指示を明確に出すのはなかなか大変ですよね。

AIが暴走するときがある

AIと何度もやり取りをしていると、前提条件を忘れたり、間違ったりと、おかしな出力をすることがあります。

たとえば、依頼した修正以外の箇所も勝手に書き換わることも起こります。

避けることは難しいため、元に戻せるように、こまめにバックアップを取ることをおすすめします。

時間をかけても完成できないこともある

的確な指示ができなかったり、AIが間違ったりと、上手くいかないこともありますよね。

たとえば、そういった時には最初からやり直すことも必要です。

AIは毎回同じ出力をするわけではないので、もう一度ゼロから始めることで、良い結果につながる可能性があります。

Cursor（バイブコーディング）のメリット

ポートフォリオやLPを作って問い合わせ数を倍にできる

SNSやクラウドソーシングサイトのプロフィールだけではなく、オリジナルでリッチなサイトを持つことで差別化ができます。

たとえば、文字情報だけでなく、画像や図解を使うことで伝わりやすくなりますし、説得力も増しますよね。

外注しなくてもバイブコーディングで作成できます。

提案時にデモやモックを用意して成約率を上げる

提案時にデモなどでイメージを伝えれば、この人に依頼して大丈夫そうだと安心感を与えることができますよね。

クライアントのペルソナを指定すれば、AIがそれに合わせたデザインにしてくれます。

バイブコーディングは最適な方法です。

デザインができなくてもサイト制作を受注できる

自分のLPを作ることができたら、それを応用できますよね。

AIであればサイトに掲載する文章も生成できますので、ライターも兼ねることができます。

あなたの本来の職種と掛け合わせて、オリジナルな提案をしましょう。

Cursorでバイブコーディングの始め方

インストール方法

ポートフォリオを作ろう

Cursorの精度を良くする方法

明確に指示をする

生成AIを使うときとも同じですよね。

依頼事項を簡潔かつ明確に伝えることで精度が上がります。

指示内容を「私はフリーのシステムエンジニアです。営業ツールのためのポートフォリオをHTMLで作成してください。専門はウェブアプリでLaravelが得意です。落ち着いたデザインにしてください。」にしました。

先ほどとは違いシステムエンジニアに適した内容になりました。

これを見て異なっている点などを修正します。

デザインは前の方が良かったでのでデザインの指示の仕方は変更します。

こまめにバックアップをとる

バイブコーディングではAIがファイルを修正していくため前の状態に戻すのが難しいです。

たとえば「前の状態に戻して」としてもそうなる保証はありません。

そのため自分でバックアップをする必要があります。

フォルダごとコピーしても良いですし、Gitのようなバージョン管理のツールを使っても良いです。

上手くいかない場合は他のAIも使ってみよう

思うような結果にならないときや、Cursorへの具体的な依頼内容が思いつかないときは、Cursorへの指示をChatGPTに作ってもらうこともできます。

たとえばこのようにChatGPTに指示します。

Cursorの仕様書をマークダウンで作成してください。
要件はシステムエンジニアのポートフォリオをHTMLで作成する。
用途は営業ツールとして利用
専門はウェブアプリ（Laravelが得意）
落ち着いたデザインを希望

このように出力されます。

仕様書.mdのようなファイル名でCursorの作業フォルダに保存してください。

Cursorでは「仕様書.mdに沿ってHTMLを作成してください」とすればOKです。

詳細はChatGPTがまとめてくれていますので、必要に応じて変更すれば良いですよ。

Cursorの他の使い方

アプリケーションを作成する

バイブコーディングではウェブサイトだけではなくウェブアプリケーションも開発できます。

たとえば「TODO管理アプリを作って」「カレンダー共有アプリを作って」も可能ですよ。

アプリケーションはテスト必要だったりと開発工程が多いので、バイブコーディングに慣れてきてからチャレンジしましょう。

テキストのライティングツールとして使う

CursorはAIエディタです。

エディタですので、サイトやアプリだけでなく通常の文章を取り扱っても良いですよ。

ChatGPTで文章を作っても、他のファイル等にコピーする必要がありますが、Cursorはエディタですのでそのままテキストファイルとして扱えます。

それに、AIの出力結果をCursor上で自分で修正しても良いので、AIでのライティングがとてもやりやすいのです。

よくある質問

Cursorは無料のままで使えますか

無料のまま利用できます。

ただし、制限があります。（Cursor Tab（自動補完）が2,000回まで、プレミアムモデルの無料枠が50回／月）

どれくらいで消費するかはケースバイケースなので、無料枠では厳しくなってきたら有料にすれば大丈夫です。

AIエディタは他に何がありますか？

WindsurfやVoid Editorなどがあります。

日本語の情報量が1番充実しているのがCursorですので今回紹介しました。

まとめ