ASADASHI
紙工作のノートPCと打ち上げロケットで表現されたWebアプリ作成・公開のミニチュアジオラマ
バイブコーディング2026.06.06·読了 2·難易度: やさしい

ChatGPTでWebアプリを作って公開できるようになった

紙工作のノートPCと打ち上げロケットで表現されたWebアプリ作成・公開のミニチュアジオラマ

朝の出汁版(通勤2分)

  • ポイント1: OpenAIのChatGPTに、Webアプリをその場で作成・公開できる機能が追加された。コードを別途用意しなくても、会話だけでアプリが完成する。
  • ポイント2: 使う側として知っておくべきは、これがいわゆる「バイブコーディング」の入口として最も敷居が低い選択肢になったという点。エディタやホスティングサービスの知識がなくても、ChatGPTの画面だけで完結する。
  • ポイント3: 触りたい人は、ChatGPTのチャット画面から「〇〇を表示するWebアプリを作って公開して」と話しかけるところから始めてみるとよい。

出汁の素(深読みモード)

これって結局どういうこと?

OpenAIが、ChatGPTの画面上でWebアプリを作成・公開できる機能を追加した。これまで「AIにコードを書いてもらう」には、生成されたコードをエディタに貼り付け、ホスティングサービスを使って公開するという一手間が必要だった。今回の機能追加により、ChatGPTとの会話だけでアプリの作成から公開URLの発行までが完結するようになった。OpenAI CEOのSam Altmanも自身のXアカウントで「子供の頃にこれがあれば」とHyperCard(80年代のAppleの開発ツール)を引き合いに出して投稿しており、ノーコード開発の原点回帰的な動きとして位置付けている。要は「アプリを作る」という行為の入口が、ChatGPTを使える人全員に開放されたということだ。

なぜこのタイミングで重要?

注目したいのは、これが「バイブコーディング」と呼ばれる流れの中で最も摩擦の低い選択肢になった点だ。バイブコーディングとは、コードの細部を把握せずにAIとの対話だけでソフトウェアを作る手法で、ここ1〜2年で急速に実践者が増えている。コードを書かずにサイトが動く時代へでも紹介したように、この流れは確実に加速している。

これまでの選択肢を整理すると、BoltやLovableといった専用のバイブコーディングツールは機能豊富な一方でサービスの乗り換えコストが存在し、GitHub CopilotやCursor系のツールはある程度の開発知識を前提としていた。ChatGPTはすでに日常的に使っている人が多く、「同じ画面でそのままアプリが作れる」という心理的な閾値の低さは他ツールと一線を画す。

また、公開されたWebアプリはURLが発行される形式だと発表されており、作ったものをすぐに他者と共有できる点も実用性を高めている。自分用のツールを作って渡す、簡易なフォームやダッシュボードを即席で用意するといった使い方が現実的な射程に入ってくる。4分で案件管理システムを作る時代が来たで触れたような「個人が業務ツールを自作する」シナリオが、さらに一歩手前に来た感覚がある。

具体的に始めるなら

まず試すなら:ChatGPTに話しかけるだけでいい

ChatGPTのチャット画面(chat.openai.com)を開き、「〇〇を表示するWebアプリを作って公開して」と入力することから始められる。たとえば「タスクを入力して優先度をつけられるシンプルなToDoアプリを作って公開して」のような指示が実用的な出発点になる。無料プランでも試せる範囲がある可能性が高いが、機能の可用性はプランによって異なるため、まず自分のアカウントで表示されるオプションを確認するとよい。

作るものを決めるヒント

何を作るか迷う場合は、「自分が毎週手作業でやっていること」を起点に考えると具体的になりやすい。たとえば以下のようなものはChatGPTで作成・公開できる範囲に収まりやすいとされている。

  • 入力フォーム+結果表示(簡易計算ツール、チェックリストなど)
  • テキストや画像を並べるシンプルなポートフォリオページ
  • 特定の条件で情報を絞り込むフィルタービュー

発展:作ったものをどう使うか

発行されたURLは第三者と共有できるため、チームへの共有・クライアントへのデモ・SNSでのシェアといった用途に直結する。「自分だけが使うツール」として内部で回すだけでなく、「誰かに見せる成果物」として即座に持ち出せる点が実用上の強みだ。

さらに発展させたい場合は、ChatGPTで作ったアプリの構造を確認し、それをCursorやVS Codeに持ち込んでカスタマイズするという流れが現実的なステップアップになる。「ChatGPTで原型を作り、コードエディタで磨く」というハイブリッドなアプローチが、コードが少し読める人には特に有効だ。

よくある疑問

Q. 無料で使えますか? OpenAIの公式発表時点では、詳細な料金体系は順次案内される形になっている。ChatGPTの無料プランでも基本的な機能は試せることが多いが、公開URL発行や高度なアプリ生成が有料プラン限定になる可能性がある。まず自分のアカウントでどのオプションが表示されるかを確認するのが最短の判断方法だ。

Q. 作ったアプリは本番運用に耐えますか? ChatGPTで生成・公開されるWebアプリは、現時点ではプロトタイプや個人利用レベルを想定した位置付けとみるのが妥当だ。大規模なユーザーアクセス、決済処理、外部APIとの複雑な連携などは対象外になることが多い。「まず動くものを作って見せる」「自分専用のツールを素早く用意する」用途には適しているが、サービスとして外部公開する場合は別途インフラ構成を検討する必要がある。

Q. 日本語での操作・生成は問題ないですか? ChatGPT自体が日本語に対応しているため、日本語で指示を出してWebアプリを作る基本的な流れに問題はないとされている。ただし、生成されるUIのテキストや配置が英語ベースになることがある。「UIの文字はすべて日本語にして」と明示的に指示を加えると意図した結果に近づきやすい。

もう一歩踏み込みたい人へ

技術的な背景として、ChatGPTが生成するWebアプリはReactベースのコードとして出力されている可能性が高く、発行されたURLはOpenAIのホスティング基盤上で動作する形式だと推測される。この構造を理解しておくと、生成されたコードを取り出してカスタマイズしたり、別のホスティングサービス(Vercel、Netlifyなど)に移植したりする際の判断がしやすくなる。

フロントエンドをAIと組み合わせてさらに発展させたい場合、注目しておくべきリポジトリとしてCopilotKitがある。スター数3.2万超のこのプロジェクトは「AIエージェントのためのフロントエンドスタック」を標榜しており、ReactまたはAngularのアプリにAIコパイロット機能を組み込むための実装基盤を提供している。ChatGPTで作ったアプリの「次の一手」としてAI機能を埋め込みたい場合の参照先として有効だ。

また、AIに記憶を持たせる文脈ではMemPalaceが参考になる。スター数5.3万を超えるオープンソースのAIメモリシステムで、ユーザーの行動や設定を跨いで記憶させる仕組みを構築できる。ChatGPTで作ったツールに「前回の入力を覚えておく」機能を加えたい場合の実装参考として押さえておきたい。AIを1000体並列起動、Claude Codeが自走するでも触れたように、AIの自律性が高まる中で「記憶」の設計は今後のキーポイントになる。

元になったツイート

参照ソース