CursorやGitHub Copilotでコードを書きながら仕上げる
v0やBolt.newで大枠ができたら、より細かい部分を自分でコントロールしたくなる場面が出てきます。そこで頼りになるのが、AIがコードの続きを提案してくれるCursorやGitHub Copilotです。
「AI搭載のコードエディタ」という選択肢
CursorやGitHub Copilotは、これまで紹介してきたv0やBolt.newとは少し性格の異なるツールです。サイト全体をゼロから自動生成するというよりは、既にあるコードを開きながら、AIが「次に書きたいコード」を予測して提案してくれる、いわば優秀な相棒のような存在です。Cursorは専用のコードエディタそのものにAIが組み込まれた形、GitHub Copilotは既存の人気エディタ（Visual Studio Codeなど）に後から追加する拡張機能という形で提供されています。
この段階まで来ると「本格的にコードと向き合う」フェーズに入ります。v0やBolt.newで生成したコードをダウンロードし、CursorやCopilotの支援を受けながら、細かいバグの修正や、独自の機能追加、デザインの微調整を進めていくイメージです。AIが提案するコードをそのまま採用することもできますし、提案を参考にしながら自分なりに書き換えることもできます。プログラミング未経験の方にとってはハードルが上がる工程ですが、AIのサポートによって、以前に比べればそのハードルはかなり下がっています。
この20ステップの構成でいうと、STEP11〜13は「本格的に自由度の高いサイトを作りたい人向けのコース」という位置づけです。もしここまで読んで「自分にはちょっと難しそうだ」と感じた場合は、無理にこのルートを進む必要はありません。STEP8〜10で紹介したビルダー型に戻る、あるいは次のSTEP14で紹介するWordPress×AIの組み合わせを検討するのも十分に賢い選択です。
できること
特に便利なのが、「このコードは何をしているのか説明して」とAIに聞ける点です。v0やBolt.newが生成したコードの意味が分からなくても、CursorやCopilotに解説してもらいながら理解を深めていくことができます。
実践のステップ
CursorまたはVS Code＋Copilotを導入する
Cursorは専用アプリとしてインストール、Copilotは既存のVS Codeに拡張機能として追加します。どちらも個人利用なら無料枠や試用期間があります。
前STEPで生成したコードを読み込む
v0やBolt.newからダウンロードしたコード一式をエディタで開きます。
AIに質問しながら修正を進める
「このボタンの色を変えたい」「この部分でエラーが出る」など、疑問点をそのままAIに投げかけながら少しずつ修正していきます。
動作確認をこまめに行う
一度に大きく変更せず、少し直しては確認する、を繰り返すことで、問題が起きたときの原因特定がしやすくなります。
メリット・デメリット
メリットは、コードレベルでの細かい調整が自在にできることと、AIのサポートによって独学の壁がかなり低くなっていることです。デメリットは、それでも一定のプログラミングの基礎知識や、エラーメッセージを読み解く根気が必要になる点です。この工程は、20ステップの中でも最も学習コストが高い部分だと理解した上で、無理せず自分のペースで取り組むことをおすすめします。
気をつけたいポイント
- AIの提案を全て鵜呑みにせず、動作確認をしながら少しずつ進めましょう。
- 分からないエラーが出たときは、エラーメッセージをそのままAIに貼り付けて質問すると解決の糸口が見つかりやすいです。
- この工程が難しいと感じたら、無理をせずビルダー型やWordPress×AIに切り替える判断も大切です。
まとめ
ここまでのSTEP11〜13で、コーディング型の一連の流れを見てきました。次のSTEP14では、日本国内で特に導入実績の多いWordPressとAIを組み合わせる方法を紹介します。