Surf Lab vol.36 / 2026.6.7

AIで迷子にならないための
全体地図

アプリの裏側を知ると、AIで作れるものが見えてくる

AIで迷子にならないための全体地図を示すタイトル用の図
今日のゴール

まずアプリの基本から

AIなしで見る、AIで作った実例を見る、AIを地図に乗せるという今日の流れ

先に普通のアプリの地図を作り、その上にAIを置いて見る。

今日の見方

まず、全体の地図を決める

あなたと端末、端末の中、インターネット、クラウドサービス、データセンターとAIモデルの全体地図

この地図では、クラウドサービスと、その実体が動くデータセンターを分けて見る。

画面

画面は入口

画面は仕組み全体の入口で、裏側に通信、処理、保存があることを示す図

見えている画面だけでなく、その裏で通信・処理・保存が動いている。

画面操作

ボタンは、お願いごとの入口

予約したい、探したい、伝えたい、残したいというお願いごとの例を番号なしで並べた図

これは順番ではなく、画面から出せるお願いごとの例。

お願いの流れ

飛行機予約で見る

予約するボタンを押したあと、送る、処理する、保存して返すまでの番号付きフロー図

行き先・日付を入れると、空席確認、予約保存、完了画面までが順番に動く。

通信

お願いが通る道

手元の端末からサービス側へお願いが通り、結果が戻る通信の道を示す図

手元のスマホやPCから、サービス側へリクエストが送られる。

処理

サービス側の処理

サーバー側で調べる、作る、返す処理が動くことを示す図

サーバー側で、空き状況を調べたり、予約や表示用の結果を作ったりする。

保存

データの保存先

手元にあるファイルや写真と、サービス側にある予約情報、カレンダー予定、チャット履歴を比較した図

どこに残るかは、使っているサービスと仕組みによって変わる。

結果が戻る

結果が戻る

予約完了、登録しました、検索結果などの処理結果が画面に戻る図

私たちには「予約完了」「登録しました」「検索結果」として見える。

Part 2

アプリの動き方の種類

同じアプリでも、手元だけで動くものと、サービス側と協力するものがある。

アプリの種類

アプリの種類

手元だけ、手元プラスサービス、ブラウザで使うアプリの3分類
手元だけ

手元だけで動くアプリ

電卓、カメラ、メモの一部など、ネットがなくても動くものがある。

手元+サービス

手元とサービス側が協力するアプリ

画面は手元にある。でも中身の多くは、向こう側のサービスとつながっている。

ブラウザで使う

ブラウザで使うサービス

ブラウザは入口。実際の処理や保存はサービス側が担うことが多い。

ここまでのまとめ

ここまでは、まだAIの話ではない

画面だけで判断せず、通信・処理・保存に分ける。この地図の上に、あとでAIを置く。

Part 3

AIで作った実例

小さな自動化と、実務で使うシステムを見比べる。

ここから実例

次に見る2つは、AIで作ったもの

私のChrome拡張と阿部さんの駐車場予約システムという、AIで作った2つの実例を並べた図

AIで作れた、で終わらせず、作ったものがさっきの地図のどこで動くかを見る。

小さな実例

私のChrome拡張

Yahoo乗換案内から、Googleカレンダー登録へ。表示された情報を読み、登録リンクを作って開く。

なかった頃の課題

手作業の予定登録

コピー、予定作成、詳細欄への貼り付け、確認を毎回手で行っていた。

手作業からワンクリックへ

1回の操作にまとめる

Yahoo乗換案内の検索結果をコピーしてGoogleカレンダーに予定を作る手作業を、Chrome拡張でワンクリック化する図
小さな自動化

ワンクリック化

ここでデモ Yahoo乗換案内 → Googleカレンダー登録

拡張自体が保存・管理するのではなく、カレンダーへ渡しやすい形に変換している。

小さな自動化で考えること

小さな自動化

小さな自動化で、誰が使うか、どこで動くか、どこに残るかを考える図

自分だけが使う道具なら、まずは手元中心で始めやすい。

実務の実例

阿部さんの駐車場予約システム

ParkTec East Japan の駐車場予約サービス画面

ITの専門家ではない歯科医師が、AIと対話しながら作った仕組み。
https://www.parktec-ej.com/

実務システム

関係者とデータが増える

駐車場予約システムを利用者、予約サービス、現地、管理者、予約データで分解した図
実務システムで考えること

実務システムの考え方

実務システムで、誰が使うか、どのデータを保存するか、誰が確認できるかを考える図

複数人が使う仕組みでは、データ保存と確認方法まで含めて考える。

2つの実例の違い

規模の違い

小さな変換ツールと実務システムの規模の違いを比較した図

同じAI活用でも、誰が使うか、どこで動くか、どこに残るかで考える範囲が変わる。

Part 4

AIを地図に乗せる

AIは使うときだけでなく、作るときにも入ってくる。

AIを地図に乗せる

作るときのAI

AIと一緒に作るときの相談、コード提案、手元のファイル、手元で動かす、公開して使う流れ

AIは答えを返すだけではなく、コードやファイルを作る過程にも入ってくる。最後は人が確認し、どこで動かすかを決める。

ここでAIを入れる

では、AIはどこで動いているのか

画面で入力し、通信を通ってクラウドサービス内のデータセンターでAIモデルが動き、結果が戻る図

AIモデルはデータセンター側のサーバーやGPU上で動く。画面から送った入力は通信で渡され、結果が戻ってくる。

AIモデル

AIの計算場所

今日のまとめ

今日の話を、1枚の地図に戻す

アプリとネットの地図に、Chrome拡張、駐車場予約システム、AIモデルを重ねた今日のまとめ図

アプリとネットの地図に、作ったものとAIが動く場所を重ねて見る。

今回と次回

今回の話から、次回の話へ

今回の必要なものを作る話から、次回の日々の業務フローに入れる話への橋渡し

AIの使い方全体を2つに分けるのではなく、今回の話から次回の話へつなげるための見方。

次回予告

次はAIエージェント

AIエージェントが確認、整理、下書き、報告を繰り返し支え、人が確認する業務フロー図

確認・整理・下書き・報告を、日々の仕事の流れの中でどう支えてもらうかを見る。