「コードが書けなくても、AI と対話すれば自社サービスを作れる」── そんな話は 2024 年頃から聞くようになりましたが、実際にやってみると何が起きるのか、正直なところはまだあまり共有されていない印象です。
この記事では、i-Style の代表(コードは書けないタイプ)が、Claude Code をメインに使って 1 週間のうちに SaaS プロダクトの MVP を動かすところまでたどり着いた ときの記録を Day 別でご紹介します。うまくいった瞬間も、詰まった瞬間も、なるべくそのまま残しました。
この記事を読むとわかること
- check_circleVibe Coding という言葉の実体と、実務レベルで何ができるのか
- check_circle非エンジニアが 1 週間で MVP まで作った Day 別の動き方
- check_circleノンプログラマーが特に詰まりやすい 3 つのポイント
- check_circle翌週以降の「運用にのせる」ための現実的な注意点
そもそも Vibe Coding とは
Vibe Coding は、AI コーディングツール(Claude Code など)と対話しながら、頭の中にある機能イメージをそのまま動くプロダクトに落としていく開発スタイルのことを指します。厳密なコード文法を書かなくても、「こういう画面で、こういう操作ができて、こういうデータを保存したい」と伝えると、AI が実装コードを提案してくれます。
従来の「ノーコード」との違いは、実際のソースコードが生成される 点です。ブラックボックスにならず、後から専門エンジニアが引き取って育てていくこともできます。
1 週間の実記録
題材は、のちに Chatta になる AI FAQ チャットボットの MVP です。目標は「URL を入力すると AI が FAQ を生成し、それをチャットで返す」ところまで。
| Day | できたこと | 詰まったこと |
|---|---|---|
| Day 1 | 技術スタック決定、Next.js プロジェクトの雛形立ち上げ | 「そもそも何で作るべきか」の言語化 |
| Day 2 | ログイン/サインアップ機能、DB スキーマ設計 | 認証プロバイダとの接続設定 |
| Day 3 | URL クロール + AI が FAQ 生成する中核ロジック | API キーの取り回しと、プロンプト設計 |
| Day 4 | チャット UI、管理画面の下地 | フロントエンドのスタイリング詳細調整 |
| Day 5 | 埋め込みウィジェット、RAG 検索 | Shadow DOM 周りのハマりどころ |
| Day 6 | ステージング環境へのデプロイ、E2E テスト | 環境変数の管理・本番切替 |
| Day 7 | MVP 完成、社内デモ | (そこそこ安定して動いた) |
体感としては、Day 3 までは「驚くほどスムーズ」、Day 4〜5 で「これはちゃんと設計しないと破綻するな」と感じ始め、Day 6〜7 で「ちゃんと動くプロダクトってこういう地味な作業の積み重ねなんだな」と実感する流れでした。
ノンプログラマーが詰まりやすい 3 ポイント
1 週間やってみて、特に「ここは AI 任せだと詰まる」と感じた箇所を 3 つ整理します。
① 設計判断
「認証はどのサービスを使うか」「DB は何を選ぶか」といった設計判断は、AI に投げても複数の選択肢を並べてくれるだけで、最終的には人間が決める必要があります。ここを丸投げすると、後から整合性が取れなくなります。
② デバッグの「読み方」
エラーメッセージを AI に貼り付ければ大抵は解決できます。ただ、エラーが「どこで起きているか」を AI に伝えるには、最低限のアーキテクチャ理解が必要です。「このファイルを変更したらこの画面が壊れる」という関係性が見えていないと、トンチンカンな修正提案をそのまま適用してしまうことになります。
③ 運用(デプロイ・監視・ログ)
プロダクトを「動かす」のと「運用する」のは別物です。本番デプロイ、エラーログ監視、バックアップ、セキュリティアップデート ── このあたりは、AI の提案をそのまま採用して動かすのは危険です。ここはやはり、専門知識を持つパートナーに早めに相談することをおすすめします。
非エンジニアが最初の 1 週間を過ごすコツ 5 つ
やってみてわかった、非エンジニアが Vibe Coding を始めるときの実用的なコツを 5 つ整理します。
- check_circle1 機能ずつ作る: 全部を一気に依頼するとコンテキストが膨らんで破綻する。1 機能動いたら次、の順序を守る
- check_circleコードは読めなくてもコミットは分ける: 動いている状態をこまめに保存。戻れる地点を常に持つ
- check_circle「何がわかっていないか」を AI に正直に伝える: 「そもそもここの用語の意味が分かってません」と言っていい。AI は前提を説明してくれる
- check_circle自分の言葉で仕様を書き出す: コードは AI が書くが、「何を作りたいか」は人間が決める。メモで構わないので言語化する
- check_circle運用フェーズは専門家と組む: MVP までは 1 人で作れるが、本番運用は餅は餅屋。フリーランスパートナーを早めに探しておく
1 週間の取り組みから見えた、非エンジニアの可能性
今回の取り組みを通して、i-Style 内でも意識が変わった部分をいくつか共有します。
- check_circle「こういうの作れる人いないかな」から「まず自分たちで試しに作ってみよう」に空気が変わった
- check_circle仕様書ではなく「動くもの」でチーム内の議論ができるようになり、パートナーとの会話も速くなった
- check_circle専任エンジニアを迎える前段として、「何を作りたいか」を練る時間にチームでじっくり向き合えるようになった
特に地方の中小企業にとっては、専門人材の採用難を AI が一部埋めてくれる という感覚は、今後の事業づくりを変えるインパクトがあると感じています。
まとめ
- check_circle非エンジニアでも 1 週間で MVP までは作れる時代になっている
- check_circleただし「設計判断」「アーキテクチャ理解」「運用」の 3 点は人間の判断が必要
- check_circle最初の 1 週間の動き方がわかっていれば、採用戦略・開発投資戦略が大きく変わる
AI と一緒にプロダクトを作る体験を
本記事の題材となった Chatta は、i-Style の代表が 1 週間で MVP を作り、その後に現場の知見を重ねて正式リリースしたサービスです。「AI と組んで動かせる」の実例として、ぜひ触ってみてください。社内で AI コーディングを本気で回したい方のご相談も歓迎です。
お問い合わせページには、Chatta で作成した「i-Style サポートデスク」bot が実際に動いています。機能のデモとしてもぜひお試しください。
まずはチャットボットで相談できます
記事の内容について「自社の場合はどう考えればいいか」を軽く確認したい方は、i-Styleサポートデスクbotもご利用ください。問い合わせ前の整理や、AI活用・Web活用の最初の相談窓口としてお使いいただけます。
i-Styleサポートデスクbotで相談する arrow_forward