1. はじめに
一般的な開発者の目線で見ると、どこか見覚えがあるはずです。新しいバズワードであるChatGPT Appがあり、API があり、SDK があり、他にもいくつかの略語がある。「要するに AI モデルを叩くための別のやり方」だと感じるかもしれません。
問題は、明確な全体像がないと、まったく異なるものを混同し始めてしまうことです。古いChatGPTプラグイン、Assistants API、Custom GPTs、そして新しいChatGPT Appsです。その結果、「今夜 UI でポチポチするだけで」Custom GPTのように作れると期待していたのに、結局はMCPサーバーを立て、Next.jsウィジェットを書き、Storeを考えざるを得なくなる――ということが起きます。逆に、本当はCustom GPTか単純な API ラッパーで十分なのに、やたら複雑なバックエンドを書いてしまう人もいます。
そこでまず、新しい「ChatGPT App」が何であるのか(そして丁寧に棚卸しする)、何でないのかから始めましょう。
LLM 連携の短い「歴史的」進化
定義に入る前に、アプローチの進化を見るのが有益です。単に新語を暗記するのではなく、ChatGPTの中に App という考え方がどこから生まれたのかを理解できます。
最初は古典的な「API ラッパー」の形でした。自分のウェブアプリやボットを立ち上げ、バックエンドのどこかでOpenAI APIを叩く。プロンプトを渡し、テキストの応答を受け取り、ユーザーに表示する。UI、認可、課金など、すべてのロジックはあなた側にありました。製品としてのChatGPTはここには登場しません。
次に現れたのがChatGPT Pluginsです。これは外部サービスをChatGPTのインターフェースそのものに組み込む最初の試みでした。プラグインはOpenAPIで記述され、ChatGPTがそのエンドポイントを呼び出せる一方、あなたはJSONで応答し、モデルがそれをテキストでユーザーに伝える――という形でした。専用の UI はなく、チャットでモデルが表示できるのは最大でもMarkdown程度。今ではこの仕組みはレガシーと見なされています。
その後に来たのがCustom GPTs(MyGPTs)です。コード不要で「自分のChatGPT」を作るコンストラクタで、プロンプトを設定し、ファイルを接続し、時にはHTTP-API へのCustom Actionsをつなげます。すべてがChatGPTの UI の中で動きますが、UI は厳格に標準化され、連携はActionsの範囲に制限されます。
そして最後に、質的な飛躍として登場したのが最新のChatGPT Appsです。ここではリッチな UI(チャット内のウィジェット)、データやバックエンドロジックと通信する標準プロトコル(MCP)、そしてエコシステム内での独立した位置づけ(Dev Mode、Store、パーミッション、組み込み決済など)が揃います。
この講座の執筆時点で、Google Play には4百万のアプリ、Apple AppStore には2百万のアプリがありました。一方、ChatGPTにはわずか5つ。5百万ではなく、たった5(!)アプリです。しかもChatGPTには週あたり800百万のアクティブユーザーがいます。トップ100アプリに入って数百万円〜数千万円(状況により)の収益を狙うのが、これほど容易だったことはかつてありません。
興味が湧いてきたなら、核心に踏み込みましょう。新しいChatGPT Appとは何なのでしょうか?
2. ChatGPT App の簡潔な定義
ネット上にはいくつかマーケ的な説明がありますが、ここはエンジニア向けなので実務者の言葉で翻訳します。
ChatGPT Appとは、ChatGPTの内部で起動し、独自の UI ウィジェットを持つウェブアプリケーションです。アプリはChatGPTにツール(関数)とデータのセットを提供し、アプリカタログ(App Store)に登録されます。アプリは会話 UI(チャット)とグラフィカルな UI、バックエンドロジックを組み合わせ、MCPのような標準化されたプロトコルでChatGPTプラットフォームとやり取りします。
そして、これが何をもたらすか:
第一に、「ChatGPT のインターフェース内で起動する」こと。ユーザーはhttps://chatgpt.com/やモバイルアプリから離れません。あなたのアプリの UI はウィジェットとしてそのインターフェースに組み込まれ、チャットの流れの中に直接表示されます。
第二に、「独自の UI ウィジェットを持つ」こと。チャットにモデルが出力する単なるテキストではありません。カード、リスト、フォーム、地図、プレーヤーなど、React コンポーネントをレンダリングできます。技術的には、Next.jsで動く通常のアプリで、サンドボックス内で実行され、ChatGPTとは window.openai およびApps SDKを通じて通信します。
第三に、「ChatGPT にツール(関数)とデータのセットを提供する」こと。あなたはバックエンドにMCPサーバーを立て、そこでアプリのMCPツールを登録します。つまり、あなたのサービスが実行できるアクション(カタログ検索、予約、データ分析、レポート生成など)を記述します。ChatGPTはこれらのツールをJSON Schemaで定義された関数として認識し、必要に応じて呼び出せます。
第四に、「アプリカタログに登録される」こと。アプリには名前、アイコン、説明、カテゴリ、パーミッション、バージョン、マネタイズがあります。これは「その場しのぎのスクリプト」ではなく、ChatGPTエコシステムにおける本格的な App です。
非常に重要な発想の転換点:あなたは「自分で全部さばくボット」を書くのではありません。あなたは(UI + ツールという)インターフェースと能力を記述し、ChatGPTがそれらをいつ使い、どう対話に織り込むかを自律的に判断します。シナリオ全体を完全に制御するのは不可能で、あなたに与えられる制御は部分的です。
このアプローチには大きなメリットがあります。ChatGPTがユーザーに自発的にあなたのアプリのインストールを提案し、さらにいつ起動するかも自ら決めてくれること。つまり、アプリの広告費は$0です。あなたのアプリが 100万インストールされてもコストは$0。少なくとも、先行者でいられるうちは。
ChatGPTアプリを2025年に立ち上げるのは、ビットコインを$1で買うようなものです。選ぶのはあなたです。
3. ChatGPT App の構成要素: UI、ツール、コンテキスト
混乱を避けるために、このコースを通して繰り返し登場するアプリの3つの大きなコンポーネントに分解しておきましょう。
第一のコンポーネントはUI レイヤーです。通常はReact/Next.jsとApps SDKで書かれたあなたのウィジェットです。これはChatGPT内でレンダリングされ、ギフトの一覧、予約フォーム、グラフ、その他さまざまなビジュアル要素を表示します。これはサンドボックス内に存在し、共通 DOM を壊せず、勝手にインターネットへアクセスできず、限られたウィンドウ内で動作します。
第二のコンポーネントはツール、リソース、プロンプトです。プロトコルレベルでは、MCPサーバー上に capabilities として定義されます。すなわちtools(アクション)、resources(データ)、prompts(テンプレート)。ツールは JSON スキーマで記述され、モデルはそれらを関数として認識し、適切なときに呼び出せます。次のモジュールで callTool が実際にどう起こるのかを詳しく見ますが、今は「ツールは現実世界におけるあなたの App の手と目」であると覚えておけば十分です。
第三のコンポーネントは利用コンテキストです。これはモデルとユーザーのためにあなたの App を説明するすべて――システムプロンプト、ツールの説明、パーミッション、ターゲット、Storeのカテゴリなどです。これらのメタデータによって、GPT がいつ App を提案するか、どのリクエストを関連と見なすか、どのアクションを許可するかが決まります。
後ほど学習用アプリGiftGeniusを分解するときに、これら3つのレイヤーを実際に目にします。ギフトカードと質問ウィザードを備えた UI ウィジェット、選定と注文処理のためのMCP/バックエンド側のツール、そしてコンテキスト――システム指示、説明、パーミッション、Storeのカテゴリです。
4. 「アプリ」としての ChatGPT を比較する
全体像とアプリの解剖ができたところで、一歩引いて近縁の仕組みと比較しましょう。これにより、Apps、プラグイン、Assistants API、単なるOpenAI APIを頭の中でしっかり分離できます。以下は、それぞれを区別して保つのに役立つ表です。
| エンティティ | UI が存在する場所 | トークン費用の支払い者 | 主なユースケース | 2025年時点のステータス |
|---|---|---|---|---|
| ChatGPT App | ChatGPT 内(ウィジェット) | ChatGPT のユーザー | 複雑なシナリオ、GPT 内の SaaS、コマース | 主要フォーカス |
| Legacy Plugins | ChatGPT 内(テキスト) | ChatGPT のユーザー | シンプルな API 呼び出し、自前の UI なし | 廃止済み |
| Assistants API | あなたのサイト / あなたのプロダクト | 開発者であるあなた | 外部エージェント、あなたのプロダクト内の AI 機能 | 現役だが別物 |
| OpenAI API | UI なし、JSON のみ | 開発者であるあなた | あらゆるタスク向けのモデル基本アクセス | ベースレイヤー |
| Custom GPTs | ChatGPT 内(標準チャット) | ChatGPT のユーザー | No‑code/low‑code での振る舞い設定 | 入門レベル |
公式ドキュメントでも強調される良い類比があります。Assistants APIは「GPT の頭脳をあなたのプロダクトに組み込む」ことであり、ChatGPT Appはその逆、「あなたのプロダクトをChatGPTのインターフェースの中に持ち込む」ことです。
5. ChatGPT App が「ではない」もの
ここでよくある誤解を押さえましょう。これを誤ると、App を別の何かとして設計してしまいます。
ChatGPT App ≠ 単なる Next.js のサイト
フロントエンド開発者が直感的に抱きがちなイメージは、「もうひとつの SPA。ルート/の代わりに ChatGPT の変なウィンドウがあるだけ」。部分的には正しいのですが、致命的な違いがあります。あなたは自分のドメイン上に住んで UI 全体を制御するのではなく、ChatGPTから UI の小さな区画を間借りしているにすぎません。ナビゲーションを書き換えたり、全体を覆うバナーを勝手に載せたり、環境を「ハック」することはできません。
この講座では、ウィジェットをフルサイトではなく隔離されたコンポーネントとして扱います。ネットワーク、DOM、リソースに厳しい制約があり、重い処理はすべてバックエンド/MCPに逃がします。サンドボックスの詳細はこのレベルの最後の講義で扱いますが、ここでは「ここはもうひとつの Next.js ホスティングではない」と覚えておけば十分です。
イメージしやすいようにコード例を示します。以下はあなたの Next.js アプリでの典型的な「OpenAI への API ラッパー」です。これは ChatGPT App ではありません。
// app/api/chat/route.ts — あなたのサイトの通常のバックエンド。App ではない
import OpenAI from "openai";
import { NextRequest, NextResponse } from "next/server";
const client = new OpenAI();
export async function POST(req: NextRequest) {
const { message } = await req.json();
const response = await client.responses.create({
model: "gpt-5.2",
input: [{ role: "user", content: [{ type: "text", text: message }] }],
});
return NextResponse.json({ reply: response.output[0].content[0].text });
}
このアプリのユーザーはあなたのバックエンドと会話しており、ChatGPTとは直接話していません。UI とセッションのロジックはすべてあなたの責務です。これは自社プロダクト内の AI 機能には最適ですが、ChatGPT App ではありません。
ChatGPT App ≠ 旧来の ChatGPT Plugin
「プラグイン」という言葉は2023年の博物館行きで、古い仕組みを指すときのみに使いましょう。プラグインはChatGPTにOpenAPI仕様に従ってあなたの HTTP エンドポイントを呼び出させるものでしたが、リッチな UI を構築することはできませんでした。最大でもチャットにMarkdownを表示できる程度です。
新しい Apps はプラグインと異なり、React ウィジェットをレンダリングでき、MCPで動作し、パーミッションがあり、金融シナリオに参加できます。したがって「プラグイン 2.0」と捉えるのは単純化が過ぎ、UI とツールを設計し始めたとたんに無理が露呈します。
ChatGPT App ≠ Assistants API
Assistants APIは別の課題を解決します。あなたのプロダクト(ウェブサイト、モバイルアプリ、社内ツール)に GPT ベースの賢いアシスタントを提供する方法です。そこではすべてが「あなた側」にあり、UI をあなたが制御し、GPT は API を介して会話するバックエンドサービスです。
ChatGPT Appの場合は逆です。UI と主要なユーザー体験はChatGPTに属し、あなたはそこに「同居」させてもらいます。ユーザーはあなたのドメインを見ません。ChatGPT内の App 名とアイコンを見て、トークンも通常は自身のChatGPTサブスクリプションで支払います。
要するに、Assistants APIは「あなたのプロダクトの中に GPT」、ChatGPT Appは「ChatGPT の中にあなたのプロダクト」です。
ChatGPT App ≠ 単なる Custom GPT
Custom GPTsは高速スタートに最適なツールです。プロンプトを組み、ファイルを少し付ければ「マイ・アシスタント」ができます。しかし UI は標準でウィジェットはなく、Custom Actionsによる連携も限定的。完全なApps SDKやMCPレベルはありません。
ChatGPT Appはすでにプロコードの領域です。ウィジェット(多くはNext.js)を書き、MCPサーバーを立て、認証、パーミッション、決済を整えます。柔軟性は大きく上がりますが、セキュリティ、UX、アプリ登録時の審査など、責任もより大きくなります。
ビジネスへの実戦的な提案としては、Custom GPTを高速なマーケティングの入口(GPT Store の簡易アシスタント)として使いながら、本格的なシナリオと将来のマネタイズに向けてApps SDKで本物の App を並行開発するのがよいでしょう。
ChatGPT App ≠ 「ただのボット」
最後に心理的に重要な点。ChatGPT Appは「またひとつのチャットボット」ではありません。これはライフサイクルを持つプロダクトです。Dev Mode、審査、バージョン、制約、アナリティクス、決済シナリオがあります。「デモ用のボット」くらいに考えると、必要工数を過小評価し、実際のローンチに失敗し、せっかくのチャンスを逃すことになります。
6. ChatGPT アプリのタイプ
あなたが何を作っているのかを理解するには、ChatGPT Appsに対する大まかな類型が役立ちます。本講座では4つの主要フォーカスを扱い、短い英語ラベルを使います。UI-heavy、tool-first、commerce-oriented、data/analyticsです。
- 1つ目はUI‑heavyまたは UI‑first なアプリ。価値の中心はビジュアルなインターフェースです。ウィザード、コンフィグレーター、複雑なフォーム、キャンバスなど。例:多数のパラメータでの保険選定、デザインのコンフィグ、データの可視化。
- 2つ目はTool‑firstなアプリ。主役は UI ではなくツールです。App はモデルに強力な機能群を提供し、ユーザー体験の多くは ChatGPT 自身がテキスト説明や最小限の UI を挿入して形作ります。例:GPT に社内ナレッジベースへのアクセスを与える App。モデルがいつどう検索し、どう結果を説明するかを自律的に決めます。
- 3つ目はCommerce‑orientedなアプリ。重心は販売・サブスクリプション・予約です。App はAgentic Commerce Protocol(ACP)と統合され、購入、カート、Instant Checkout、ユーザー紐付けを扱えます。
- 4つ目はData/analyticsなアプリ。データソース接続と分析にフォーカスします。レポート、BI ダッシュボード、ログやメトリクスの分析、アップロードファイルの処理など。
同じアイデアでも複数スタイルで実装できます。例えば、ギフトの選定は純粋なTool‑first(モデルが説明を組み立て、App はアイデア一覧の JSON だけ返す)にも、UI‑heavy(豊富なフィルタ、商品カード、比較を備えたウィジェット)にもなり得ます。
7. 本講座の学習プロジェクト: GiftGenius
講座全体をひとつの「一貫した」アプリに結びつけて進めます。進行に合わせて自分たちのアプリ、GiftGenius――ChatGPT を通じたギフト選定と購入手続きのアプリ――を作っていきます。常にこのアプリに立ち戻りながら進めます。
類型の観点では、GiftGeniusは第一にcommerce‑orientedな App で、部分的にUI‑heavyの要素を備えます。ユーザーが ChatGPT に「IT 友だちへのギフトが欲しい。予算は50〜70ドル」と書くと、モデルはGiftGeniusを使うべきだと判断し、質問ウィジェット、ギフトの候補、そして最終的にはACPによる注文手続きまでを提供します。
この時点から TypeScript の言葉で考え始めるために、今後も使い回す最小のドメインモデルをざっくり定義しておきます。
// gift-types.ts — GiftGenius の簡易ドメインモデル
export type GiftIdea = {
id: string;
title: string;
priceUsd: number;
tags: string[]; // 贈られる人の興味
occasion: string; // 用途/シーン: birthday, wedding など
};
現時点では、どの SDK にも結びつかない単なる型です。しかし講座が進むにつれて、このようなドメインモデルがMCPのツール、UI ウィジェット、さらにはコマース層へと染み出していく様子が見えてきます。
8. ユーザーは対話の中で ChatGPT App をどう見るか
「ユーザーフロー」の詳細は第3講で扱いますが、UI がなぜ必要か、App がどうやって対話に現れるのかを理解するために、ここで全体像だけ押さえておきましょう。
ユーザーはいつも通りChatGPT と会話します。メッセージを書き、質問し、依頼します。ChatGPT は各ターンで「どうするか」を判断します。自分で答えるか、ツールを呼ぶか、あなたの App のウィジェットを表示/更新するか、文脈に関連するときに App の利用を提案するか――といった具合です。
例えばユーザーが「結婚記念日のギフトが必要。予算は100ドルまで。夫はボードゲームが好き」と書いたとします。モデルは、GiftGeniusという、こうした条件でギフト選定できる App があることを認識します。そこでモデルは次の2通りの道を選べます。
- まずユーザーにGiftGeniusの利用を提案し、「App GiftGenius を使って候補を出せます。起動しますか?」のように尋ねる。
- すぐに App のツールを呼び、すでに入力が埋まった状態のウィジェットを表示して、候補一覧を見せる。
これはすべて、あなたが直接 if user_said_gift then call_app() と命令しているわけではありません。あなたは App の能力を記述し、モデルはそれを使い方ごと学びます。だからこそ、明確な説明、制限、よく練られた UX が重要です。そうでないと、GPT は App を乱用したり、逆にまったく呼ばなかったりします。
イメージとしては次のようなダイアグラムで捉えられます。
flowchart TD U[ChatGPT のユーザー] -->|メッセージ| G[GPT モデル] G -->|判断: App を使うか?| A[あなたの ChatGPT App] A -->|ウィジェット| W[チャット内の UI] A -->|tools/MCP| B[あなたの backend / MCP] B --> A --> G --> U
GPT がどのように App を呼ぶかの意思決定をするのかは、ツールと system‑prompt の章で詳しく扱います。ただし今の時点でも「これは協調であり、命令的な制御ではない」と理解しておくのが有益です。
9. ミニ演習: あなたの App アイデア
抽象論で終わらせないために、今のうちに自分の App のアイデアをひとつ考えてみましょう。今後GiftGeniusと並走して、頭の中で育てていく題材です。
あなたの App が ChatGPT の中で「何をするのか」を一文で表現してみてください。例:「開発者がタスクの複雑さを見積もり、サブタスクに分解するのを支援する App」や「天気と予算を考慮して旅行ルートを提案する App」など。
続いて、正直に2つの問いに答えます。第一に、類型ではUI‑heavy、tool‑first、commerce‑oriented、data/analyticsのどれに近いか。第二に、それは本当にChatGPT Appなのか、実は自社サイト上のボットやもうひとつのCustom GPTにすぎないのか。もし必要なのが「バックエンドでOpenAI APIを少し便利に叩くこと」だけなら、フル機能の App は要らないかもしれません。
こうした小さな検討が、間違ったプロダクトに数か月を費やすのを防いでくれます。
10. ChatGPT App の典型的な誤解
誤り №1: 何でもかんでも「プラグイン」と呼ぶ。
プラグインの仕組みは2023年の歴史的段階です。新世代の統合は、Apps SDK + MCP 上の Apps です。「プラグイン」という語に執着すると、UI、サンドボックス、Store、プロダクトライフサイクル全体の重要性を見誤ります。本講座で「プラグイン」は旧来システムのみを指し、App は常に新世代のアプリを意味します。
誤り №2: GPT を完全にコントロールできると期待する。
「App を書けば、モデルは自分の言うとおり厳密に動くはず」と考えて来る方がいます。ChatGPTのエコシステムはそうではありません。あなたは能力と意図を記述し、モデルはいつツールを呼ぶか、いつウィジェットを見せるか、いつテキストで答えるかを自律的に決めます。厳密なシナリオの SPA として設計しようとすると、痛い目を見ます。
誤り №3: ChatGPT App と Assistants API を混同する。
よくあるのが「自社プロダクト内のボット」を欲しているのに、惰性でApps SDKを見てしまうケースです。実はAssistants APIを使う方が簡単で筋が良いのに、ChatGPT 内のウィジェットに労力を費やしてしまう。正しい見分け方は簡単です。ユーザーがあなたのサイト/アプリに来るならAssistants API、あなたが ChatGPT に行きたいならChatGPT Appです。
誤り №4: サンドボックスを無視して「もうひとつのフロントエンド」と見なす。
Apps SDKを通常のNext.jsフロントのように使い、サンドボックスの制約(限定的なネットワーク/DOM/リソース)を無視すると、「自分のサイトのように動かない」とすぐに壁に当たります。ウィジェットは隔離コンポーネントであり、重い統合やシークレットの保管はバックエンド/MCPに逃がす――これを事前に受け入れることが重要です。
誤り №5: Custom GPT を過大評価し、Apps SDK(またはその逆)を過小評価する。
Custom GPTsと Apps は二者択一ではなく、成熟度の異なるレイヤーです。多くの場合、両方を使うのが正解です。Custom GPT は高速な入口とマーケ、App はリッチな UI とコマースを備えた本格プロダクト。Custom GPTにApps SDKレベルの能力を期待したり、逆にApps SDKを Custom GPT で足りる場面に持ち込んだりすると、自分の首を絞めるだけです。
GO TO FULL VERSION