コーディングを知らなくてもAIでWebサービスを作る方法 - 第1部

Name: コーディングを知らなくてもAIでWebサービスを作る方法 - 第1部
Author: KnowAI Team

著者: KnowAI Team·2026年3月31日 (火)

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

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

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

list目次expand_more

1. AIコーディングツールとは？
① Cursor
② Claude Code
③ Google Antigravity
2. 自分が作りたいアプリのために必ず必要なもの
2-1. AI開発の要はコーディングではなく「企画」
2-2. 良い企画に欠かせない5つの要素
3. AIコーディングツールをもっとスマートにする2つの秘訣
① MCP — AIに「手」を与えるもの
② Skill — AIに「マニュアル」を渡すもの
4. 作ったアプリをテストする
① ローカルテストが必要な理由
② どうやるの？
③ テスト時に確認すべきこと
5. 作ったアプリをインターネットに公開する
① GitHub — コード保管庫
② Vercel — 最も簡単なデプロイ
③ Cloudflare — 速くて安全なデプロイ
④ Railway — より複雑な処理が必要なとき
6. 今日のまとめ

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

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

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

区分	特徴	代表サービス
バイブコーディングツール	シンプルなサービスに適しており、作れる範囲が限られる → コーディング知識がほぼ不要	Lovable, Bolt, Replit
AIコーディングIDE (統合開発環境)	自由度が高く複雑な商用サービスまで構築可能 → ある程度のコーディング知識が必要	Cursor, Claude Code, Google Antigravity

バイブコーディングツールは学びやすい反面、作りたい機能が複雑になると限界に直面しやすいです。個人利用や趣味で作る場合は十分ですが、本格的なサービスを作る予定なら、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項目は必ず押さえておきましょう。

誰が使うアプリか？ — ターゲットユーザー
どんな機能が必要か？ — 機能リスト
どんな雰囲気にすべきか？ — デザイン方向性
どんな画面が必要か？ — ページ構成
どんな技術が適切か？ — 上記に合った技術選定

これらをドキュメントにまとめて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のようなアドレスにアクセスするとすぐに確認できます。

NOTE

npm run devの意味
簡単に言えば「自分のパソコンでアプリを起動するコマンド」。
このコマンドを実行すると、自分のパソコンが一時的にサーバーの役割を果たしてアプリが動き始めます。
ブラウザにlocalhost:3000を入力すると――まるでインターネットアドレスのように――自分が作ったアプリの画面がすぐに表示されます。
ただし、このアドレスは自分のパソコンからしか開けず、他の人には見えません。

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

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

WARNING

エラーが出ても慌てないで！
画面に表示されたエラーメッセージまたは画面キャプチャなどを貼り付けると、AIが原因を見つけて修正してくれます。

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クレジット無料提供
💡 特徴: サーバーのデプロイが簡単で、様々なプログラミング言語をサポートしています。

NOTE

GitHubは単なる保管庫ではありません。
コードを保存するたびに、変更の履歴が自動で記録されます。
AIに修正してもらったら何かおかしくなった、というときも、GitHubでいつでも以前の状態に戻すことができます。まるでドキュメントの「変更履歴」のように、「ちゃんと動いていたあの時点」にいつでも巻き戻せる――これがGitHubを使う大きな理由のひとつです。
最初はGitHub＋Vercelの組み合わせだけで十分です。サービスが大きくなったタイミングでCloudflareやRailwayを追加しても、まったく遅くはありません。

6. 今日のまとめ

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

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

ステップ	やること	使うツール
1ステップ · アイデア何を作るか？	サービスアイデアの具体化	メモ帳, Notion
2ステップ · 企画どう作るか？	AIと一緒に企画文書を作成（ターゲット・機能・デザイン・画面・技術）	ChatGPT, Gemini
3ステップ · 開発 AIにどう指示するか？	企画文書を渡してコーディング指示 + MCP・Skill活用	Claude Code, Antigravity
4ステップ · テスト正しく動いているか？	ローカル環境でチェックリスト確認後、修正指示	Webブラウザ
5ステップ · デプロイ世界に公開する準備ができたか？	GitHubに上げてVercelでインターネット公開	GitHub, Vercel