まず「作る対象」を分類する
A-01で見たとおり、概念理解の最初の一歩は、何の部品でできているかという構成要素を捉えることでした。その第一歩として、この講義ではこれから作る対象そのものを分類します。作りたいものが何なのかを役割で言い分けられないと、その先の部品の話にも進めません。ここでまず、四つの型を押さえておきます。
このスライドのポイント
- A-01で見たとおり、概念理解の第一歩は構成要素を捉えること
- その最初の一歩として、これから作る対象そのものを分類する
- 作りたいものを役割で言い分けられないと、部品の話にも進めない
四つの定義
まず定義から確認します。Webサイトは、閲覧が中心の、静的な情報提供です。Webアプリは、利用者の入力や操作に応じて、処理と保存を行うものです。SaaSは、そのWebアプリを、継続課金などの形で複数の利用者へ提供する事業のかたちを指します。そしてAPIは、画面を持たず、プログラム同士がデータをやり取りするための接続口です。
このスライドのポイント
- Webサイト = 閲覧が中心の、静的な情報提供
- Webアプリ = 利用者の入力・操作に応じて処理と保存を行う
- SaaS = Webアプリを継続課金などで複数の利用者へ提供する事業のかたち
- API = 画面を持たず、プログラム同士がデータをやり取りする接続口
知らないと何に失敗するか
この違いを知らないと何に失敗するか。たとえばAIへ「サイトを作って」と頼むと、閲覧するだけの静的なページが返ってくることがあります。ところが本当に欲しかったのは、入力を受け取って保存するWebアプリだった、というずれが起こります。頼むものと欲しいものが食い違えば、その後の設計も、必要になる部品も、費用の見積りも変わってしまいます。
このスライドのポイント
- AIへ「サイトを作って」と頼むと、閲覧だけの静的ページが返ることがある
- 本当は入力と保存のあるWebアプリが欲しかった、というずれが起きる
- 頼むものと欲しいものがずれると、設計も必要な部品も見積りも変わる
四つを一本の軸に並べる
四つを一本の軸の上に並べてみます。左から、閲覧のみのWebサイト、操作のあるWebアプリ、事業として継続提供するSaaS、そして画面を持たず接続するAPIです。左へ行くほど見て終わり、右へ行くほど他と繋がって動く、と捉えると位置関係がつかめます。ただし注意したいのは、これらが一直線の上位互換として並ぶわけではない点です。SaaSは提供のかたち、APIは接続の口で、そもそも役割の軸が違います。
このスライドのポイント
- 左から: Webサイト（閲覧のみ）→ Webアプリ（操作あり）→ SaaS（事業として継続）→ API（画面なしで接続）
- 左へ行くほど見て終わり、右へ行くほど他と繋がって動く
- 一直線の上位互換ではなく、役割の軸が違う点に注意
同じ飲食店で見分ける
同じ飲食店を題材に、四つを見分けてみます。お店のメニューを紹介するだけのページは、閲覧が中心なのでWebサイトです。日時や人数を入力して送る予約フォームは、入力と保存があるのでWebアプリです。その予約の仕組みを、多くの店舗へ月額などで提供する予約管理サービスにすれば、それはSaaSです。そして、受け付けた予約情報をLINEの通知へ渡す接続部分が、APIにあたります。同じ題材でも、役割が変われば呼び名も変わります。
このスライドのポイント
- メニュー紹介ページ = Webサイト（閲覧が中心）
- 予約フォーム = Webアプリ（入力と保存がある）
- 多店舗向けの予約管理サービス = SaaS（継続して複数へ提供）
- 予約情報をLINE通知へ渡す接続 = API（画面を持たない）
技術サンプル: 四つの関係を構成図で見る
ここで、四つの関係を一枚の構成図として見てみます。サンプルの種別は図で、ブラウザからWebアプリへ、WebアプリからAPIへ、APIから外部サービスへと繋がる並びです。読み方の一つ目は、APIには画面がないという点です。二つ目は、SaaSはこの図のどこかに足す新しい部品ではなく、Webアプリを提供するかたちの呼び名だという点です。迷ったらAIに、「私が作りたいものはWebサイト・Webアプリ・SaaS・APIのどれに当たりますか。理由も教えてください」と聞いてみてください。
混同しやすい組
混同しやすいのは、WebアプリとSaaSです。Webアプリは技術としてのかたち、SaaSは提供としてのかたちで、見ている面が違います。同じ予約アプリでも、社内の人だけが使うなら、ふつうSaaSとは呼びません。複数の利用者へ継続的に提供して、初めてSaaSになります。補助として、WebサイトとWebアプリの違いも押さえます。こちらは、入力に応じた処理と保存があるかどうかが分かれ目です。
このスライドのポイント
- WebアプリとSaaS = 技術のかたち vs 提供のかたち（見ている面が違う）
- 同じ予約アプリでも、社内の人だけが使うならふつうSaaSとは呼ばない
- 補助: WebサイトとWebアプリ = 入力に応じた処理と保存があるかどうか
バイブコーディングでの確認点
AIへ依頼する前に、確認しておく点があります。作りたいものについて、閲覧するだけなのか、入力と保存があるのか、誰に提供するのか、他のシステムと繋ぐのか。この四点を先に言葉にしてから伝えると、返ってくるものが大きくぶれません。逆に、この四点が自分でも曖昧なままだと、A-01で見たとおり、AIの出力の正誤を判断する足場を持てないまま進むことになります。
このスライドのポイント
- AIへ依頼する前に、次の四点を言葉にして伝える
- ①閲覧だけか ②入力・保存があるか ③誰に提供するか ④他システムと繋ぐか
- この四点が自分でも曖昧だと、出力の正誤を判断する足場を持てない
一問一答とまとめ
最後に一問一答です。予約フォームの付いた店舗ページは、四つのどれでしょうか。（間）答えは、Webアプリです。入力を受け取って保存する処理があるからです。三十秒でまとめます。Webサイトは閲覧、Webアプリは操作と保存、SaaSは提供のかたち、APIは接続の口。この役割の軸で四つを分けられれば十分です。次回は、このWebアプリの中身を開けて、どんな部品でできているかを分解していきます。関連資料は、「SaaS要素分解図鑑100」「AI業務アプリ事例100選」「Webアプリ構成図入門」です。
このスライドのポイント
- 一問一答: 予約フォーム付きの店舗ページは四つのどれ？ → Webアプリ（入力と保存があるため）
- 30秒まとめ: Webサイト=閲覧／Webアプリ=操作と保存／SaaS=提供のかたち／API=接続の口
- 次回: Webアプリの中身を部品に分解する
- 関連資料: 「SaaS要素分解図鑑100」「AI業務アプリ事例100選」「Webアプリ構成図入門」
