補足資料 ── ツールの解剖図

あのツールは、
どこで動いていたのか

── LLMアプリをクラウド（Cloudflare）でホストする構成図

AI活用コーチング 補足資料 2026-08-18 講師：柴田建太郎

第1回で作った 🍓 いちごの種カウンターと、その改造版の 🔬 神経節細胞チェッカー。どちらも、スマホで URL を開いて、合言葉を入れて、写真を選ぶだけで動きました。スマホには何もインストールしていないのに、です。

では、プログラムの本体はどこにあって、誰が動かしているのか。この資料はその「解剖図」です。第2回の資料（LLMのしくみ）が「頭脳の中身」の話だったのに対し、こちらは「体のつくり」の話。Phase 3（第9〜12回）で自分の手でこの構成を作るときの地図にもなります。

CHAPTER 1

登場人物は3人だけ ── 全体の構成図

あのツールの裏側には、たった3人の登場人物しかいません。①あなたのスマホ（ブラウザ）、②Cloudflare という会社のコンピュータ、③Claude（AI本体）のいるAnthropic社のコンピュータ。まず全体図を見てください。

あなたのスマホ （ブラウザ＝画面係） ・ページを表示する ・写真と合言葉を送る ・結果を表示する 本体もAIもここには 入っていない Cloudflare のサーバー （クラウド＝受付係） 小さな受付プログラム ・合言葉を確認する ・指示文を添えてAIへ中継 🔑 金庫（シークレット） AIを使うための鍵はここだけ 24時間・無人で待機している Anthropic の サーバー （AI本体＝頭脳） ・Claude（LLM）が 　ここで動いている ・画像をトークンにして 　読む（第2回・第5章） 写真＋合言葉 結果（JSON） 写真＋指示文＋🔑 判定結果 ← ここはふつうのインターネット通信（暗号化）→
図1｜ツール全体の構成図。スマホは「画面係」、Cloudflare は「受付係」、AI本体は Anthropic のサーバーにいる

大事なポイントは2つあります。1つめ。AIはあなたのスマホの中にはいません。スマホがやっているのは、画面を出して、写真を送って、返ってきた答えを表示することだけ。頭脳は遠くのサーバーにあって、インターネット越しに「借りて」います。

2つめ。スマホとAIは直接つながっていません。あいだに必ず Cloudflare 上の「受付プログラム」を挟んでいます。これはサボりではなく意図的な設計で、理由は第3章で説明します。

医師のためのアナロジー ── 病院の構造とそっくり 患者さんは読影医に直接会いに行きませんよね。窓口（ブラウザ）で受け付けて、受付（Cloudflare）が保険証を確認し、依頼状を添えて検査・読影（AI本体）に回す。報告書は逆ルートで窓口まで戻ってくる。あのツールは、この病院の構造をそのままインターネット上に作ったものです。
補足 ── 「クラウド」とは Cloudflare のような会社は、世界中にコンピュータ（サーバー）を大量に置いていて、その一部を私たちに貸してくれます。自前でコンピュータを買って24時間動かす代わりに、借り物の上でプログラムを動かす ── これが「クラウド」です。今回借りたのは、サーバーまるごとではなく「小さなプログラムひとつ分の席」だけ。Cloudflare ではこの仕組みを Worker（ワーカー）と呼んでいます。
CHAPTER 2

写真を送ってから答えが返るまでの6ステップ

いちごの写真を選んで「数える」を押した瞬間から、画面に結果が出るまで。裏側では次の6ステップが、だいたい20〜30秒で流れています。

  1. スマホURL を開く。Cloudflare がページ（画面の設計図）を送ってくるので、ブラウザがそれを表示する。
  2. スマホあなたが写真を選び、合言葉を入れてボタンを押す。写真は暗号化されて Cloudflare へ送られる。
  3. 受付受付プログラムが合言葉をチェック。違っていたら門前払い（AIまで届かない）。写真の形式やサイズもここで確認する。
  4. 受付合格なら、金庫から🔑鍵を出し、あらかじめ書いておいた指示文（プロンプト）を写真に添えて、Claude に転送する。
  5. AI本体Claude が画像をトークンに変換して読み（第2回・第5章の種明かし）、答えを決まった書式（JSON）で返す。「種の数：23、確信度：中、メモ：右下はボケていて…」のような形。
  6. 受付スマホ受付が答えをブラウザに返し、ブラウザが人間向けの画面に整えて表示する。

気づいてほしいのは、このうちAIが関わるのはステップ5だけだということです。残りの5つは、昔ながらの「ふつうのプログラム」の仕事。第2回で答えた「AIでツールを作るとは、確率的な推論をプログラムの部品として使うこと」の意味が、この図では文字どおり見えます ── 段取り全体はプログラムが仕切り、その中の1ステップだけをAIという部品が担当しているのです。

補足 ── JSON（ジェイソン）という書式 AIの返事を「自由な文章」で受け取ると、プログラム側で扱いづらい。そこで受付は Claude に「種の数・確信度・メモの3項目を、この書式で埋めて返して」と指定しています。検査結果が自由作文ではなく決まった書式のレポートで返ってくるのと同じ理屈です。書式の名前を JSON といいます。名前は覚えなくて大丈夫。
CHAPTER 3

なぜ間に「受付」を挟むのか ── 鍵（APIキー）の話

スマホから直接 Claude に写真を送れば、Cloudflare は要らないように見えます。なぜわざわざ受付を挟むのか。答えは「鍵」にあります。

DEFINITION API（エーピーアイ）＝プログラム同士がやり取りするための「窓口」。Claude にも API があり、そこに写真と指示文を送ると判定が返ってくる。
APIキー＝その窓口を使うための鍵。利用料の請求先と紐づいているので、実質クレジットカードのようなもの。

Claude の API は有料です（使った分だけ課金）。つまり APIキーを手に入れた人は、柴田のお財布でAIを使い放題にできる。もしこの鍵をブラウザ側のプログラムに埋め込んだら、ページを開いた人は誰でも中身を覗いて鍵を抜き取れます。ブラウザに届いたものは、原理的にすべて利用者から見えるからです。

❌ ダメな構成：鍵をブラウザに置く スマホの中に 🔑 鍵入りページ AI ページを開いた人は誰でも 中身から鍵を抜き取れる → 柴田の財布でAI使い放題に ✅ 今回の構成：鍵は受付の金庫に スマホ 合言葉のみ 受付 🔑 金庫 AI 鍵はブラウザに一切送られない。 受付が金庫から出して代理で使う → 覗かれても盗まれない
図2｜APIキー（鍵）の置き場所。ブラウザに届いたものは全部見えるので、鍵はサーバー側の金庫にだけ置く

だから今回の構成では、鍵は Cloudflare の金庫（シークレットという保管機能）にだけ入れてあり、ブラウザには一度も送られません。あなたのスマホが知っているのは合言葉だけ。受付が合言葉を確認してから、金庫の鍵を代理で使ってAIに問い合わせる、という流れです。

受付にはもう1つ大事な仕事があります。AIへの指示文（プロンプト）とモデルの指定を、受付側で固定してあることです。ブラウザから受け取るのは写真と合言葉だけで、「AIへの命令」は一切受け取らない。だからこのツールは、合言葉を知っている人でも「いちごの種を数える係」としてしか使えず、何でも答える汎用AI窓口として乗っ取ることはできません。

医師のためのアナロジー ── 処方箋の印鑑を待合室に置かない APIキーをブラウザに置くのは、医師の印鑑を待合室のテーブルに置いておくようなものです。印鑑（鍵）は診察室の中（サーバー側）にだけ置き、窓口では診察券（合言葉）を確認する ── 権限のあるものを人目に触れる場所に出さない、という感覚はそのまま通用します。
RULE ── 鉄則の再確認 構成図を見るとわかるとおり、アップロードした写真は Cloudflare と Anthropic のサーバーまで実際に送られています。通信は暗号化されていますが、「手元の外に出る」ことに変わりはありません。だから初日からの鉄則 ──患者さんの個人情報が写ったものは絶対に送らない── は、この構成である限りずっと有効です。デモは必ずサンプル画像・合成データで。
CHAPTER 4

2つのツールは「同じ体・違う指示文」

ここで種明かしをもう1つ。🍓種カウンターと🔬神経節細胞チェッカー、見た目も用途も別物ですが、実はプログラムの本体はほぼ丸ごと同じです。中身を並べて比べると、違いは驚くほど少ない。

🍓 いちごの種カウンター 🔬 神経節細胞チェッカー
構成図（第1章） 完全に同じ（スマホ → 受付 → AI）
受付プログラム ほぼ同じ（合言葉チェック・中継の段取りは共通）
AIモデル 同じ（Claude のマルチモーダルLLM）
指示文（プロンプト） 「いちごの表面の種（痩果）を数えて。見えている範囲だけ。推測で足さない」 「HE染色の腸管組織像として観察し、神経節細胞を探して数えて。Auerbach神経叢・Meissner神経叢に注目」
返事の書式（JSON） 種の数・確信度・メモ 細胞の有無・概数・所見・確信度・各細胞の位置（枠）

つまり、2つめのツールを作る作業の実態は「プログラムを書き直す」ではなく、指示文と返事の書式を差し替えることでした。ツールの性格を決めていたのは、コードよりもむしろ日本語の指示文だったのです。

これは第2回の「あびこ先生の疑問に答える」の続きでもあります。AI以前のプログラムでは、判定のルールをすべてコードで書く必要がありました。いまは判定そのものはAIという部品に日本語で依頼し、プログラムはその前後の段取り（受付・鍵・書式）だけを受け持つ。この分業こそが「AIでツールを作る」の正体です。

補足 ── ただし精度は別問題 指示文の差し替えだけで「それらしく」動くのがマルチモーダルLLMのすごさですが、第2回・第6章で話したとおり、数え落としや誤検出はあります。本気で精度を出すなら専用の画像認識モデルを育てるルートになる ── その話はこの構成図の外側にある、次の段階です。
CHAPTER 5

お金と手間の話 ── なぜこの構成が楽なのか

最後に現実的な話を2つ。

お金。この構成の費用は「受付の家賃」と「AIの利用料」に分かれます。受付（Cloudflare）は、このくらいの規模なら無料枠で収まります。AI（Claude API）は使った分だけの課金で、判定1回あたり数円。第2回の「学習と推論」で話した「推論は1回ごとには安い」の、これが実例です。つまり月に数十回使う程度なら、コーヒー1杯分もかかりません。

手間。もし自前のパソコンでこれを動かすなら、パソコンを24時間点けっぱなしにして、外から安全につなぐ仕掛けも自分で作ることになります。クラウドに置けば、電源も故障も混雑も向こうの会社が面倒を見てくれて、こちらはURL を1つ相手に送るだけで共有できる。第1回のツールをあの日のうちにあなたのスマホで使えたのは、この構成のおかげです。

医師のためのアナロジー ── 院内検査と外注検査 自前のサーバー運用は「院内に検査機器を置く」のに似ています。機器代も保守も人手も自分持ち。クラウドは「検査センターへの外注」で、検体（リクエスト）を送れば結果が返り、費用は件数分だけ。小さく始めるなら外注が圧倒的に楽、という判断も医療と同じです。
SUMMARY ── この資料の要点 ① ツールは3人組 ──画面係（ブラウザ）・受付係（Cloudflare）・頭脳（Claude API）。
② AIは手元になく、APIという窓口越しに借りている。AIが働くのは6ステップ中の1つだけ。
③ 鍵（APIキー）はお金と直結。だからブラウザに渡さず、受付の金庫にだけ置く。
④ 2つのツールの違いはほぼ日本語の指示文だけ。段取りはプログラム、判定はAI、という分業。
APPENDIX

用語ミニ辞典

暗記は不要です。今後の回で出てきたときに、ここに戻って引いてください。

サーバーネットワーク越しの頼まれごとに24時間応え続けるコンピュータ。「給仕する人（server）」が語源。
クラウドよその会社のサーバーを借りて使う仕組み。自前で機械を持たずに済む。
Cloudflare / Worker今回借りたクラウドの会社と、その上で動かしている小さな受付プログラムの呼び名。
APIプログラム同士がやり取りする窓口。Claude のAPIに写真を送ると判定が返る。
APIキーAPIを使うための鍵。請求先と紐づくため、クレジットカード並みに扱いに注意する。
シークレットサーバー側にだけ置ける金庫。APIキーや合言葉の正解はここに保管する。
プロンプトAIへの指示文。今回のツールでは受付プログラムの中に固定で書き込んである。
JSONプログラムが読みやすい、決まった書式のデータの書き方。AIの返事をこの書式で受け取っている。
デプロイ手元で作ったプログラムをサーバーに配置して、世界から使える状態にすること。