ノーコードAI Web開発：ツール選びと初リリース（第1部）

最近「バイブコーディング」という言葉を耳にしたことはありますか？
AIに話しかけるだけで、Webサイトやアプリをサクッとつくってくれるというものですよね。

「自分もやってみようかな」と思いつつ、いざ始めようとすると覚えることが多すぎて、なかなか踏み出せないという方も多いのではないでしょうか。最初はうまくいくように見えても、AIに丸投げしていると、どこかで必ず壁にぶつかります。

この記事では、コーディングをまったく知らないけれどAIを活用して自分だけのサービスをつくりたい方に向けて、全体の流れと押さえておくべきツールを整理しました。

1. AIコーディングツールとは？

AIコーディングツールとは、コードを直接入力する代わりに、AIに作りたいものを言葉で説明するとAIが代わりにコードを書いてくれるツールです。

大きく2種類に分けられます。ただし、これは便宜上の分類であり、各サービスが急速に進化するなかで、その境界は徐々に曖昧になっています。

バイブコーディングツールは学びやすい反面、作りたい機能が複雑になると限界に直面しやすいです。個人利用や趣味で作る場合は十分ですが、本格的なサービスを作る予定なら、AIコーディングIDEであるCursor、Claude Code、Google Antigravityなどのツールを活用してみてください。

① Cursor

AIコーディングツールの「元祖」と言えるサービスです。
Gemini、Claude、GPT、Grokなど様々なAIモデルを接続して使えるのが大きな魅力です。最も広く使われているため、日本語の学習資料も豊富です。
無料で体験できますが機能が非常に制限されているため、本格的に活用するには最低でもProプラン（月$20）が必要です。

🌐 公式サイト: https://cursor.com

② Claude Code

Claudeで有名なAnthropicが作ったAIコーディングツールです。
現在、開発者の間で最も注目されているツールでもあります。3つのツールの中で価格が最も高く使い方もやや難しいですが、その分パフォーマンスが際立っています。
Proプラン（月$20）から利用できますが、本格的に活用するにはMax 5xプラン（月$100）がおすすめです。

🌐 公式サイト: https://claude.com/product/claude-code

③ Google Antigravity

最近リリースされたGoogleのAIコーディングツールです。
CursorとClaude Codeの長所をうまく組み合わせたツールで、Googleサービスとの連携がスムーズなのが特徴です。現在コスパ面で最も優れているという評価を受けており、Geminiサブスクリプションプランでそのまま使えるため、すでにGoogle AIを使っている方に特におすすめです。

🌐 公式サイト: https://antigravity.google/

---

2. 自分が作りたいアプリのために必ず必要なもの

AIコーディングツールに、普段AIと会話するような感覚で入力してみましょう。

​「タスクを管理するシンプルなアプリをつくって。項目の追加・完了チェック・削除ができるようにして」​

数分で実際に動くアプリが出来上がります。驚きですよね。
でも、ここでひとつ必ず押さえておきたい大切なポイントがあります。

2-1. AI開発の要はコーディングではなく「企画」

どんなに腕の良い工務店でも、設計図もなく「いい家を一軒建てて」とだけ言われても、思い通りの家は建ちません。何階建てか、部屋は何室か、誰が住むのか、予算はいくらか――そうした企画と設計がそろってはじめて、職人はきちんとした建物を建てられます。

AIコーディングも同じです。

AIは私たちが何を望んでいるかを自分では判断できません。しかも、指示されていない部分は勝手に推測して補完しようとする傾向があります。
だからこそ、明確な指示――つまりしっかりした企画が、成果物の品質を大きく左右するのです。

2-2. 良い企画に欠かせない5つの要素

AIに的確な指示を出すには、まず自分がつくりたいものを明確に整理することが大切です。
企画は詳細であるほど良い結果につながりますが、最低でも以下の5項目は必ず押さえておきましょう。

1. 誰が使うアプリか？​ — ターゲットユーザー

2. どんな機能が必要か？​ — 機能リスト

3. どんな雰囲気にすべきか？​ — デザイン方向性

4. どんな画面が必要か？​ — ページ構成

5. どんな技術が適切か？​ — 上記に合った技術選定

これらをドキュメントにまとめてAIに渡すと、はるかに正確で一貫性のある成果物が得られます。

逆に、準備なしで「とりあえずつくって」と始めてしまうと、AIが独自に推測して進めるため、最初はうまくいくように見えても、後の修正に何倍もの時間がかかることになります。

コーディング前の企画文書にかける時間と手間が大きいほど、実際の開発時間は短くなります。​

もちろん、この文書を最初から一人で仕上げる必要はありません。
つくりたいものをAIに説明してドラフトを作成し、読みながら修正・加筆していけば、コーディングの知識がなくても十分に質の高い企画書が完成します。

特に「5. どんな技術が適しているか？」については、1〜4を先にまとめてからAIに提案してもらうのがおすすめです。

---

3. AIコーディングツールをもっとスマートにする2つの秘訣

AIコーディングツール自体も十分強力ですが、次の2つを活用することで、さらに賢く使いこなせるようになります。

① MCP — AIに「手」を与えるもの

AIコーディングツールはコードを上手に書いてくれますが、基本的に学習済みの知識の範囲内でしか動作しません。問題は、AIの知識が必ずしも最新ではないという点です。開発で使うツールや技術は常にアップデートされているため、AIが古いバージョンを前提にコードを書いてしまい、エラーが発生することも少なくありません。

MCP（Model Context Protocol）を連携すると、AIが外部サービスや最新ドキュメントに直接アクセスして、より精度の高いコードを書けるようになります。一言でいえば、AIと外部サービスをつなぐパイプのような役割を果たすものです。

用途によって様々なMCPがありますが、代表的な3つを紹介します。

• Context7 MCP — AIが自分のプロジェクトで使っている技術の最新公式ドキュメントを直接読んでコードを書いてくれます。

• shadcn/ui MCP — ボタン、入力欄、ポップアップといった画面要素のデザインガイドをAIが直接参照して、​ページごとにデザインがバラバラにならず一貫して作ってくれます。

• Notion MCP — AIがNotionからページを直接読んだり新しい内容を書いたりできます。例えば、​企画文書をNotionに整理しておくと、AIがコーディング中でもその内容を直接参照したり更新したりできます。

② Skill — AIに「マニュアル」を渡すもの

AIに同じ作業を頼んでも、毎回仕上がりがバラバラだった……という経験はありませんか？

「ログインページをつくって」とお願いしたら、昨日はすっきりしたデザインで仕上がったのに、今日は全然違うスタイルになっていた。これは、AIが会話をリセットするたびに前回のルールを覚えていないからです。

Skillは、まさにこの問題を解決するための仕組みです。「このプロジェクトでは常にこのルールに従うこと」という基準を文書化しておくと、​AIは毎回その基準どおりに、安定したクオリティで作業してくれます。​

具体的にはこんなイメージです：

• 「新しいページは必ずNoto Sansフォントを使い、背景色はクリームにすること」

• 「エラーが発生した場合は、このフォーマットでユーザーにメッセージを表示すること」

• 「コードファイルは必ずこのフォルダ構成で整理すること」

簡単に言えば、AIに「業務マニュアル」を渡すようなイメージです。人間でもマニュアルがあってこそ一貫した仕事ができるように、AIも同じなのです。

Skillの詳細は以下の記事を参考にしてください：
単なる「プロンプト」はもう古い！自分だけの「スキル」を作ろう

---

4. 作ったアプリをテストする

AIがコードを生成したら、インターネットで公開する前に自分のパソコンで動作確認をしましょう。これを「ローカル環境でのテスト」と呼びます。

① ローカルテストが必要な理由

• インターネットに公開した後でエラーを見つけると、すでにユーザーが不便を経験して二度と戻ってこなくなるかもしれません。

• ローカルで先に確認すれば、修正 → 確認 → 修正を素早く繰り返すことができます。

• インターネットへの配信は時間がかかりますが、ローカルテストはすぐに結果を確認できます。

② どうやるの？

AIコーディングIDEで作ったプロジェクトは通常、ターミナル（コマンドを入力する黒い画面）からコマンド一行で起動できます。AIに「ローカルサーバーを立ち上げて」と頼むこともできますが、セキュリティの都合で直接実行できないケースもあります。そのときはAIに手順を聞きながら試してみましょう。

npm run dev

このコマンドを入力するとパソコンでアプリが起動し、ブラウザでlocalhost:3000のようなアドレスにアクセスするとすぐに確認できます。

③ テスト時に確認すべきこと

最初は「何から確認すればいいの？」と迷うこともあると思います。
以下のチェックリストを上から順にたどってみてください。

• すべてのページが正常に表示されるか？

• ボタン、フォーム、リンクが正しく動作するか？

• 入力したデータが保存されて読み込まれるか？

• 間違った値を入力してもアプリが止まらないか？

• モバイル画面でもレイアウトが崩れないか？

• 画像とアイコンが正常に表示されるか？

• 戻るボタンが期待通りに動作するか？

• ページの読み込み速度が遅すぎないか？

• フォントの種類とサイズがすべてのページで統一されているか？

• エラーメッセージが表示されていないか？

---

5. 作ったアプリをインターネットに公開する

AIコーディングツールで作ったアプリは、最初は自分のパソコン上でしか動きません。

デプロイ（Deploy）とは、そのアプリをインターネットに公開して、誰でもアクセスできる状態にすることを指します。
デプロイを手軽にできるサービスはたくさんありますが、代表的なものを見ていきましょう。

① GitHub — コード保管庫

自分が書いたコードを保存・管理するためのサービスです。
Google Driveが書類を保存するように、GitHubはコードを保管する場所です。後ほど紹介するデプロイサービスの多くはGitHub上のコードを読み込んで公開する仕組みになっているため、まずGitHubアカウントを作成してコードをアップロードするところからスタートします。

• 🌐 公式サイト: https://github.com

• 💰 料金: 無料

• 💡 特徴: AIコーディングIDEがGitHub連携をサポートしているので、AIに「GitHubに上げて」と言えばOKです。

② Vercel — 最も簡単なデプロイ

コードをアップロードするだけでサーバー設定不要、すぐにインターネットでアクセスできるウェブサイトにしてくれるサービスです。操作もシンプルで、BoltやLovableで作ったアプリでは、ツール内にVercelへのデプロイボタンが用意されているケースも多くあります。

• 🌐 公式サイト: https://vercel.com

• 💰 料金: 無料プランで個人プロジェクトに十分

• 💡 特徴: GitHubと連携すると、コードを修正するたびに自動で再デプロイされます。ドメインの接続も簡単です。

③ Cloudflare — 速くて安全なデプロイ

自分のサイトを世界中どこからでも速く読み込めるようにし、セキュリティを含む様々な機能を提供します。実際に多くの大企業でも使われているサービスです。

• 🌐 公式サイト: https://cloudflare.com

• 💰 料金: 無料プランで基本機能が利用可能

• 💡 特徴: 世界中にサーバーを持っているため、複数の国のユーザーに速くサービスを提供したい場合に最適です。

④ Railway — より複雑な処理が必要なとき

アプリがシンプルな画面表示を超えて、​データを保存したり複雑な処理が必要な場合に別途サーバーを運営できるサービスです。

• 🌐 公式サイト: https://railway.app

• 💰 料金: 月$5クレジット無料提供

• 💡 特徴: サーバーのデプロイが簡単で、様々なプログラミング言語をサポートしています。

---

6. 今日のまとめ

AI時代に求められるのは、​何をつくるかを自分で考えることとそれをAIに的確に伝えることの2つです。わからないからといって何でもAIに丸投げするのではなく、一つひとつ確かめながら習得していきましょう。最終的な判断は、常に自分自身で。

今回紹介した流れをまとめると、こうなります。