AIで0からWebサービスを作って公開する

ここまでのOmochiX Learnでは、AI、ChatGPT、Claude、プロンプト、GitHub、Vercel、ターミナルなどの基本を学んできました。

ここからは、実際にAIと一緒に1つのWebサービスを作り、インターネット上へ公開するところまで進めます。

アイデア
↓
仕様を決める
↓
AIと開発
↓
ローカルで確認
↓
GitHubへ保存
↓
VercelでPreview
↓
確認
↓
本番公開

今回の目的は、難しいサービスを作ることではありません。

「0から作る → 動かす → 公開する」という開発全体の流れを一度経験することがゴールです。

今回作るもの

最初のWebサービスとして、シンプルなAIアイデア整理ツールを作る想定で進めます。

ユーザーがテーマを入力すると、入力内容をカードとして整理できる簡単なWebアプリです。

• タイトルを入力できる
• アイデアを書ける
• 「追加」ボタンでカードを作れる
• 追加した内容を画面に表示できる
• スマートフォンでも見やすい

最初はログインや決済、Databaseなどは使いません。

まず小さく完成させて、公開まで進めます。

最初のMVP

入力
+
追加
+
表示
+
デザイン
+
公開

なぜ最初は小さく作る？

AIを使えば、大きなサービスも短時間で作り始めることができます。

しかし初心者が最初から、

• ログイン
• 決済
• Database
• メール送信
• 管理画面
• AI API

などを全部入れると、問題が起きたときに原因が分からなくなります。

小さく作る
↓
公開する
↓
動くことを確認
↓
1つずつ機能追加

今回の開発全体像

① 作るものを決める
↓
② AIに仕様を整理してもらう
↓
③ 開発環境を作る
↓
④ AIに実装してもらう
↓
⑤ localhostで確認
↓
⑥ Gitで変更を管理
↓
⑦ GitHubへPush
↓
⑧ VercelでPreview
↓
⑨ スマホ・PC確認
↓
⑩ Productionへ公開

この流れは、今後もっと大きなサービスを作るときにも基本的に変わりません。

STEP 1：作りたいものを1文で決める

いきなりAIにコードを書かせる前に、まず何を作るのかを1文で説明できる状態にします。

今回なら、

入力したアイデアをカードとして整理できる
シンプルなWebアプリを作る。

これだけで十分です。

最初から細かい仕様書を自分で作る必要はありません。

STEP 2：AIに要件を整理してもらう

作りたいものをChatGPTやClaudeへ伝えて、必要な機能を整理してもらいます。

Web開発初心者です。

次のWebアプリを作りたいです。

目的:
入力したアイデアをカードとして整理できる
シンプルなWebアプリを作る。

最初のMVPに必要な機能を整理してください。

条件:
・ログインなし
・Databaseなし
・決済なし
・スマートフォン対応
・できるだけシンプルにする

まだコードは書かないでください。

次を整理してください。

1. 必要な画面
2. 必要な機能
3. 使用する技術
4. ファイル構成の考え方
5. 開発手順
6. 完成条件

ここでは「まだコードを書かない」と指定するのがポイントです。

企画
↓
設計
↓
確認
↓
実装

という順番で進めます。

STEP 3：必要な開発環境を確認する

今回のようなWebアプリを作る場合、AIからNext.jsなどの開発環境を提案されることがあります。

使用する技術が分からなければ、その理由も聞きましょう。

今回のアプリを作るために
初心者でも扱いやすい技術構成を提案してください。

それぞれ、
なぜ必要なのかも説明してください。

できるだけ構成を増やしすぎないでください。

大切なのは、AIが提案した技術を何でも追加しないことです。

最初はシンプルな構成を優先します。

STEP 4：ターミナルで作業場所を決める

プロジェクトを作る前に、どこへ保存するか決めます。

たとえばDocumentsへ移動するなら、

cd ~/Documents

現在地を確認します。

pwd

中身も確認します。

ls

ターミナル操作が不安な場合は、先にこちらを確認してください。

ターミナルと開発環境の基本を見る →

STEP 5：プロジェクトを作る

実際の作成コマンドは、使用する技術やその時点の推奨方法によって変わる可能性があります。

そのため、AIに現在の公式手順を確認させてから進める方法もあります。

現在の推奨方法で
新しいNext.jsプロジェクトを作りたいです。

公式ドキュメントの現在の手順を前提に、
初心者向けにコマンドを案内してください。

プロジェクト名:
idea-board

実行前に、
各コマンドが何をするか説明してください。

STEP 6：プロジェクトへ移動する

プロジェクトが作成されたら、そのフォルダへ移動します。

cd idea-board

現在地を確認します。

pwd
ls

この「正しいプロジェクトにいるか確認する」習慣は、AI開発でも重要です。

STEP 7：最初にGitの状態を確認する

git status

Gitが設定されている場合、現在の状態が表示されます。

AIへ実装を任せる前にも、

作業前に現在の状態を確認してください。

・現在のディレクトリ
・Git Branch
・git status
・プロジェクト構成

まだ変更しないでください。

と確認させておくと安全です。

STEP 8：AIに最初の画面を作ってもらう

ここから実装へ進みます。

次のWebアプリのMVPを実装してください。

目的:
アイデアを入力して、
カードとして一覧表示できるWebアプリ。

必要な機能:
・タイトル入力
・アイデア本文入力
・追加ボタン
・追加した内容をカード表示

デザイン:
・シンプル
・余白を広めに
・スマートフォン対応
・読みやすい
・過度なアニメーション不要

条件:
・Databaseは使わない
・ログインなし
・不要なライブラリを追加しない
・関係ないファイルを変更しない
・既存設定を必要以上に変更しない

実装前に、
変更予定ファイルと実装方針を報告してください。

いきなり「全部作って」ではなく、必要な機能と制約を明確にします。

STEP 9：ローカルで起動する

実装が終わったら、開発サーバーを起動します。

使用しているプロジェクトによって異なりますが、JavaScript系の開発では、たとえば次のようなコマンドがあります。

npm run dev

ターミナルにローカルURLが表示されたら、ブラウザで開きます。

http://localhost:3000

ここで初めて、AIが作った画面を実際に確認します。

STEP 10：実際に操作する

画面が表示されただけで完成ではありません。

実際に触って確認します。

□ タイトルを入力できる

□ アイデアを入力できる

□ 追加ボタンが動く

□ カードが表示される

□ 複数追加できる

□ 空欄時の動作がおかしくない

□ スマホ幅でも崩れない

気になる部分があれば、具体的にAIへ伝えます。

現在の機能は動いています。

次の部分だけ改善してください。

・入力欄の余白を広げる
・追加ボタンを見つけやすくする
・カード同士の間隔を広げる
・スマートフォンでは1列表示

機能ロジックは変更しないでください。

STEP 11：AIに自己チェックさせる

人が画面を見るだけでなく、AI側にも実装を確認させます。

現在の実装をレビューしてください。

確認:
・要件を満たしているか
・不要なコードがないか
・明らかなバグがないか
・モバイル対応
・アクセシビリティ上の基本的な問題
・不要な依存関係
・秘密情報の混入

まだコード変更はしないでください。

問題点だけ報告してください。

問題があれば確認してから修正します。

STEP 12：変更内容をGitで確認する

git status
git diff

ここでAIがどのファイルを変更したのか確認します。

AIにもまとめてもらえます。

現在のgit diffを確認してください。

次を報告してください。

・変更ファイル一覧
・各ファイルを変更した理由
・不要な変更がないか
・要件外の変更がないか
・秘密情報が含まれていないか

STEP 13：公開前チェックを実行する

プロジェクトに用意されているチェック方法を確認します。

このプロジェクトで
公開前に実行すべきチェックを確認してください。

package.jsonなどを調査して、

・lint
・型チェック
・build
・テスト

で利用可能なものを報告してください。

その後、必要なチェックを実行します。

STEP 14：Commitする

問題がなければ、変更をGitの履歴として保存します。

Commit前に、もう一度状態を確認します。

git status

Commitメッセージは、何をしたのか分かる内容にします。

feat: add idea board MVP

Git操作に不安がある場合は、先にGitHubの基本を確認してください。

GitHubの基本を見る →

STEP 15：GitHubにRepositoryを作る

次に、コードをGitHubへ保存します。

ローカル
↓
Git
↓
GitHub Repository

GitHubでRepositoryを作成し、ローカルプロジェクトと接続します。

表示される案内や現在のGit状態によって必要なコマンドが変わる場合があるため、不安ならAIへ確認させます。

現在のGit状態を確認して、
このプロジェクトを新しいGitHub Repositoryへ
安全にPushする手順を説明してください。

まだ実行せず、
必要なコマンドと意味を先に説明してください。

STEP 16：秘密情報が入っていないか確認する

GitHubへPushする前に、秘密情報が含まれていないか確認します。

• APIキー
• パスワード
• Database URL
• 秘密鍵
• Webhook Secret

今回のシンプルなアプリでは基本的に不要ですが、今後の開発では重要になります。

STEP 17：GitHubへPushする

準備ができたらGitHubへコードをPushします。

ローカルのコード
↓
Push
↓
GitHub

GitHubのRepositoryをブラウザで開き、コードが表示されているか確認します。

STEP 18：VercelとGitHubを接続する

次に、GitHubに保存したWebアプリをVercelで公開します。

GitHub
↓
Vercel
↓
Build
↓
公開URL

VercelでGitHub Repositoryを選択し、プロジェクトとしてImportします。

詳しい基本はこちらで確認できます。

Vercelの基本を見る →

STEP 19：Previewで確認する

Vercelでデプロイが成功すると、Webから確認できるURLが発行されます。

実際に開いて確認します。

□ ページが開く

□ 入力できる

□ 追加ボタンが動く

□ カードが表示される

□ スマホで崩れない

□ エラーが出ていない

localhostで動いていても、公開環境では問題が出ることがあります。

そのため、公開されたURLでも必ず操作します。

STEP 20：スマートフォンでも確認する

公開URLをスマートフォンから開いて確認します。

• 文字が小さすぎないか
• 横スクロールが出ていないか
• 入力欄が使いやすいか
• ボタンが押しやすいか
• カードが画面からはみ出していないか

PCだけでは見つからない問題もあります。

STEP 21：問題があれば小さく修正する

公開後に問題を見つけたら、一気に作り直しません。

問題を1つ選ぶ
↓
原因を調査
↓
小さく修正
↓
ローカル確認
↓
Git diff
↓
Push
↓
Preview確認

このサイクルを繰り返します。

ここまでで何ができた？

たとえ機能がシンプルでも、ここまで進めば重要な開発工程を一通り経験しています。

• 企画
• 要件整理
• AIとの設計
• コード実装
• ローカル確認
• Git
• GitHub
• Build
• Deploy
• Preview
• 本番確認

AI開発で詰まったときの質問テンプレート

Web開発初心者です。

現在、
［やろうとしていること］
を進めています。

現在の状態:
［今どうなっているか］

期待する状態:
［どうなってほしいか］

実際の状態:
［何が起きているか］

エラー:
［エラーがあれば貼る］

まず原因を調査してください。

まだコードは変更しないでください。

次を報告してください。

・原因候補
・確認する場所
・修正方法
・変更予定ファイル
・リスク

AIに全部任せない

AIがコードを書けても、次の部分は人が確認します。

AI

コード作成
調査
修正案
説明
テスト補助

人

目的を決める
変更を確認
実際に操作
公開判断
最終責任

特に本番公開・Database・認証・決済などへ進むほど、確認の重要性は高くなります。

AIと安全に開発する方法を見る →

完成したら終わりではない

Webサービスは、公開してから改善できます。

公開
↓
使う
↓
問題を見つける
↓
改善
↓
再公開

今回のアプリなら、次のような機能を後から追加できます。

• カード削除
• 編集
• 並び替え
• 検索
• Database保存
• ログイン
• AIによるアイデア生成

一度に全部入れず、1機能ずつ追加していきます。

公開までの流れを覚えよう

アイデア
↓
AIと仕様整理
↓
プロジェクト作成
↓
AIと実装
↓
localhost
↓
テスト
↓
git status
↓
git diff
↓
Commit
↓
GitHub
↓
Vercel
↓
Preview
↓
スマホ確認
↓
公開

この流れを1回経験すれば、次のサービスでも同じ考え方を使えます。

次に学ぶ

Webサービスを公開できたら、次はDatabaseを追加して、入力したデータを保存できるWebアプリへ進みます。

Webサービスを公開
↓
Databaseを追加
↓
データを保存
↓
本格的なWebアプリへ

WebアプリにDatabaseを追加する →