本文へ移動

「画面だけの試作」と「動くコード」|AIで作ったアプリの本番化は、どう違うか

AIで作った試作は、画面だけのものと、動くコードがあるものとで本番化の進め方が変わります。自分の試作がどちらかを見分ける目安と、それぞれの進め方を説明します。

公開日 更新日

AIで作った試作は、「画面だけ」でも「動くコードがある」ものでも、本番化できます。違うのは出発点です。画面だけなら、画面を完成イメージ(仕様)として、本番の土台から作ります。コードがあるなら、中身を読んで、活かせる部分は活かします。

自分の試作は、どちらか

AIで作った試作は、大きく2つの状態に分かれます。私たちは、どちらの相談も受けています。

  • 画面だけの試作: 画面は見られるが、ログインやデータの保存など、裏側の仕組みはない。
  • 動くコードがある試作: 画面の裏で、ある程度のコードが動いている。

見分ける目安は、「作った人のPC以外でも動くか」です。作った人のPCの中だけで動いているなら、コードはあっても、公開できる形にはなっていません。

私たちが見てきた範囲では、相談に来られる試作の多くは画面だけです。ただ、動くコードがある場合の相談も、もちろんあります。

画面だけの試作の場合

画面は、完成イメージとして使えます。「こういう画面で、こう動いてほしい」が最初から見えているので、要件のずれが起きにくくなります。

そのうえで、画面の裏側を作ります。認証、データベース、インフラ、セキュリティ、監視、バックアップ、テストです。画面は出発点で、本番の土台は新しく組み立てるイメージです。

動くコードがある試作の場合

コードがある場合は、まず中身を読みます。そのうえで、活かせる部分は活かし、足りない備えを足していきます。

一般に、コードを活かすかどうかは、次のような観点で考えます。

  • 構成を、作った本人以外にも説明できるか
  • 秘密情報や権限の扱いなど、本番に必要な備えを足せる作りか
  • 足すより、作り直したほうが早く確実な部分はないか
  • どこに公開するか(次の節)

どれも、コードを読んではじめて分かることです。外から見ただけで「活かせる」「作り直す」と決めることはできません。だから、最初の一歩は、試作の構成と機能を把握することになります。

どこに公開するかで、活かせる範囲が変わる

活かすか作り直すかを決めるうえで、私たちが重視しているのが、どこに公開するかです。

最近は、AIで作ったアプリをすぐに公開できる環境が増えました。Vercel や Netlify、Cloudflare のように、コードを置くだけで公開まで進められるサービスがあります。データベースや認証には Supabase や Firebase がよく使われます。AIでアプリを作るツールの中には、こうしたサービスとつながっていて、作った画面をそのまま公開できるものもあります。

もちろん、個人情報を扱わない趣味のアプリなら、そのまま公開して問題ないことも多いです。私たちも、その手軽さに驚きながら、便利に使っています。ここで考えたいのは、社外の人が使うアプリや、お客様のデータを扱うアプリを本番にする場合です。

試作は、作った環境に合わせた書き方になっていることが多くあります。そのため、本番も同じ環境で動かすなら、活かせる部分が多くなります。逆に、AWS や GCP などの別の環境に置く場合や、会社の決まりでオンプレミス(自社のサーバー)に置く場合、扱うデータの性質から構成を変える場合などは、作り直す部分が増えます。

どこに公開するかは、費用や運用のしやすさ、扱うデータ、社内の決まりで決まります。試作を作った環境のまま本番にするのがよいとは限りません。公開先を先に決めると、活かす範囲も決めやすくなります。

どちらの場合も、試作は捨てなくていい

画面だけでも、動くコードがあっても、試作は無駄にはなりません。完成イメージを最初から共有できることが、本番開発のよい出発点になるからです。

事例: 画面のコードを活かして、本番の土台を肉付けした

ある業務システムの例です。

最初の状態。 お客様が Claude Code で画面を作っていて、少し動くコードもありました。ただ、ご本人の PC でしか動かない状態でした。ログインの仕組みも、安定して動かす基盤も、バックアップもありませんでした。

活かすか、作り直すか。 画面はできていて、完成イメージも共有できていました。そこで、画面のコードは活かすことにしました。

肉付けしたもの。 画面のコードはそのままに、本番に足りないものを足していきました。

  • 認証(ログインと、使える人の管理)
  • データベース(データをきちんと保存する場所)
  • インフラ(PC の外で、安定して動き続ける基盤)
  • バックアップ
  • 既存のシステムとの連携

連携の部分は、少し補足します。既存のシステムからデータを取ってくる処理は、試作の段階でもできていました。ただ、その処理が途中で失敗したらどうするのか。処理は正常に終わったのに、取ってきたデータのほうがおかしかったらどうするのか。そこまでは考えられていませんでした。うまくいく場合の処理だけがあって、うまくいかない場合の処理が無い。本番に向けて、ここも整えました。

結果。 業務システムとして公開しました。公開後は、お客様ご自身で運用されています。私たちの経験では、要件定義からやり取りを始めると数か月かかる規模の開発でした。それを、1か月ほどで本番化できました。最初から完成イメージを共有できたことが大きかったと考えています。

判断基準は共通です

画面だけでもコードがあっても、公開前に確かめる4つの点は同じです。誰が使うか、どんなデータを扱うかで、確かめる深さを決めます。詳しくは、親記事のAIで作ったアプリを本番化するにはをご覧ください。

wizgeek にできること

自分の試作がどちらか分からなくても、ご相談ください。試作の構成と機能を把握し、認証・データベース・インフラ・セキュリティ・監視のうち何が足りないかを整理して、構成案をお渡しします(本番化の診断:5万円〜、税別)。構成案をもとに、お客様側で実装していただくこともできます。

よくある質問

画面だけの試作でも、本番化の相談はできますか?
できます。画面だけの試作は、完成イメージ(仕様)として使えます。そのイメージをもとに、認証・データベース・インフラなど本番の土台を作ります。
動くコードがあれば、そのまま本番で使えますか?
動くことと、本番で使えることは別です。コードがある場合は、まず中身を読み、活かせる部分は活かしながら、足りない備えを足します。
自分の試作がどちらか分からないときは、どうすればよいですか?
そのままご相談ください。ツールは問いません。まず構成と機能を把握するところから始めます。

関連する実績

関連する課題ページ

バイブコーディング・AIで作ったアプリを、本番で使えるようにしたい

最近は、生成AIにコードを書かせて(バイブコーディング)画面や試作(プロトタイプ)を作ってから相談してくださる方が増えています。完成イメージを最初から共有できるので、開発は速く進みます。ただ、多くは画面だけの試作です。そこに認証、データベース、インフラ、セキュリティ、監視、バックアップ、テストを整え、本番運用に耐える形にして公開・運用します。

課題別ページを見る

AIで作った試作の話から、始めませんか。

画面だけの試作でも、動いているアプリでも構いません。まず診断で、本番に必要なものを洗い出します。