この教材で分かること
- ✓Webサービスは「4つの部品」でできている、という頭の地図
- ✓Claude Artifactで「作れるもの」と「作れないもの」の境界線
- ✓Artifactの試作品を、公開できる本物のサービスに育てる道すじ
- ✓個人が¥0〜少額で始めるための、現実的な道具の選び方
まず結論：Webサービスは「4つの部品」でできている
むずかしそうに見えるWebサービスも、分解するとたった4つの役割に整理できます。CABU-Rも、あなたが毎日使っているアプリも、この4つの組み合わせです。この4つを頭に入れておくと、これから何を作るときも「今どこを触っているのか」が迷子になりません。
- ① フロントエンド（画面）
- ブラウザに表示される見た目とボタン。ユーザーが直接さわる部分。HTML・CSS・JavaScriptで作る。
- ② バックエンド（頭脳）
- 画面の裏で動く処理。「ボタンが押されたら計算する」「AIに問い合わせる」など、判断や作業を担当する。
- ③ データベース（倉庫）
- 情報をためて、あとで取り出す場所。会員リスト・投稿・記録など、消えたら困るものを保管する。
- ④ ホスティング（配信）
- 作ったものをインターネットに置いて、URLで誰でも開けるようにすること。
どんなWebサービスも 画面・頭脳・倉庫・配信 の4役の組み合わせ。「今どの部品を作っているか」を意識すれば、複雑なものも迷子になりません。
実例で見る：この4部品が「CABU-R的なアプリ」ではこう並ぶ
抽象的な話を、みなさんが見慣れているアプリの形に当てはめてみます。テーマは株でなくても、「データを集めて → 加工して → 見やすく見せる」タイプのサービスはぜんぶ同じ骨格です。たとえば「レシピ検索」「家計簿」「地域のイベント一覧」でも構造は一緒です。
| 部品 | 役割 | 「データを集めて見せる」系サービスでの例 |
|---|---|---|
| ① 画面 | 見た目・操作 | 検索窓、絞り込みボタン、結果の一覧、グラフやカード表示 |
| ② 頭脳 | 処理・判断 | 「条件に合うものを探す」「AIに要約させる」「並び替える」 |
| ③ 倉庫 | データ保管 | 集めた情報をためたファイル／データベース（毎日更新される） |
| ④ 配信 | 公開 | URLを配って、登録した人だけ／みんなが開けるようにする |
昔はこの4つを全部プログラマーが手で書きました。今は 「②頭脳」の中にAI（ClaudeやGrokなどのAI）を1個置くだけで、「要約する」「分類する」「文章を作る」といった“賢い処理”が数行で手に入ります。ここが、個人でも本格的なサービスを作れるようになった一番の理由です。
- API（エーピーアイ）
- 外部のサービスに「これお願い」と頼むための"受付窓口"。たとえば
AIのAPIにお願いすれば要約が返り、地図のAPIにお願いすれば地図が返ってくる。自分でゼロから作らず、できあいの力を借りる仕組み。
ClaudeのArtifactで「作れるもの」
Artifact（アーティファクト）は、Claudeとの会話の中で その場で動く画面を作って、すぐ確認できる 機能です。「こんな計算ツールが欲しい」と話しかければ、右側に本物のツールが現れて、その場でクリックして試せます。これは、さきほどの4部品でいうと 「①画面」＋「②頭脳の軽い部分」を、環境構築ゼロで作れる場所です。
Artifactが得意なこと
- 1画面で完結する道具：計算機、見積りツール、診断チャート、単位変換、タイマー、クイズ
- 入力 → その場で結果：フォームに打ち込むと答えやグラフが出る、みたいなもの
- 資料・見せ物：説明ページ、ミニゲーム、図解、ダッシュボードの"見た目"
- 試作品（プロトタイプ）：「本番を作る前に、動きと見た目を先に確かめる」用途に最強
Artifactは 「試作品を一瞬で形にする作業台」。ここでアイデアを"動くもの"にして、良ければ本物へ育てる──この順番が、遠回りに見えていちばん速い。
最初から完璧な本番サービスを目指さないでください。まずArtifactで「小さくても動くもの」を1個。動くものを触ると、次に何が必要かが自分で見えてきます。この教材のゴールも、そこです。
Artifactの「限界」──ここから先は本物のサービスの領域
Artifactはとても便利ですが、"作業台"であって"お店"ではありません。4部品のうち「③倉庫」と「④配信」を、本格的には持てないのが限界の正体です。以下は、Artifactだけでは越えられない壁です。
| やりたいこと | Artifactだけ | なぜ / どうなる |
|---|---|---|
| データを永久に保存 | 苦手 | 閉じると消えるのが基本。会員データや投稿を「みんなで共有してためる」倉庫は持てない |
| 他の人とデータ共有 | 苦手 | あなたが作った画面を他の人が開いても、入力内容は各自バラバラ。全員で同じ最新データを見るのは不向き |
| 独自ドメインで公開 | 不可 | myservice.com のような自分のURLでは出せない（共有リンクはClaude内） |
| 会員登録・ログイン | 不可 | 「登録した人だけ使える」「課金する」といった仕組みは載せられない |
| 裏で定期的に自動実行 | 不可 | 「毎朝データを取り込む」「夜中に集計する」ような"人がいなくても動き続ける処理"は持てない |
| 秘密のカギの保管 | 苦手 | APIキー等の秘密情報は画面に書くと見えてしまう。本番は"頭脳の裏側"に隠す必要がある |
「Artifactで動いた＝もう完成」ではありません。Artifactは1人が今その場で使う試作品まで。「大勢が・いつでも・データをためながら使う」段階に行くと、③倉庫と④配信を別に用意した"本物のサービス"に組み替える必要があります。それが次の章です。
本物のWebサービスへ発展させると「できるようになること」
Artifactの試作品を土台に、③倉庫と④配信を足していくと、一気に世界が広がります。CABU-Rが"毎日勝手に更新されて、登録者だけが使える"のは、まさにこの発展をしているからです。
発展すると手に入る力
- ためる：ユーザーの入力・記録・投稿を保存して、次に来たときも残っている
- みんなで使う：全員が同じ最新データを見る／お互いの投稿が見える
- 自分のURL：
あなたの名前.comで、堂々と公開できる - 会員・課金：ログイン、プラン、決済（お金をいただく）を載せられる
- 自動で動き続ける：あなたが寝ていても、毎朝データ更新・毎晩集計・通知送信
- AIを安全に組み込む：秘密のカギを裏に隠したまま、AIの賢さを全ユーザーに提供
道具の地図：どの段階で、何を使う？
「結局、何を使えばいいの？」に答える早見表です。全部を覚える必要はありません。今の段階に対応する行だけ見てください。個人が¥0〜少額で始められる、代表的な選択肢を挙げています。
| 段階 | やること | 代表的な道具（例） | 費用感 |
|---|---|---|---|
| 試作 | 動きと見た目を確かめる | Claude Artifact | ほぼ¥0 |
| ①画面 | 本番の見た目を書く | HTML / CSS / JavaScript | ¥0 |
| ②頭脳 | 裏の処理を書く | Node.js・Python など＋AIのAPI | ¥0〜 |
| ③倉庫 | データをためる | SQLite（手軽）／ クラウドDB | ¥0〜 |
| ④配信 | URLで公開する | Cloudflare Pages・Tunnel／各種ホスティング | ¥0〜少額 |
| 会員・課金 | ログイン・決済 | 認証サービス／決済サービス／自社の登録フォーム | 売上に応じ |
「流行っているから」で道具を選ばないこと。まず"何を作るか"を決めて、それに必要な部品だけ足す。当スクールでは配信は原則Cloudflare系、集客・メールは指定ツールを使います（迷ったら講師に確認を）。
- ノーコード / ローコード
- コードをほとんど書かず、部品を組み合わせてWebサービスを作れる道具（例：フォーム作成、簡易DB、自動化ツール）。「まず世に出して反応を見たい」ときは、これで③倉庫④配信をまとめて済ませ、あとから本格化する手もある。
作る順番：この通りに進めれば迷わない
最後に、実際に手を動かすときの順番です。上から順に、1段ずつ。各段で「動いた」を確認してから次へ進むのがコツです。いきなり全部を一度に作ろうとすると、どこで壊れたか分からなくなります。
- ① 誰の何を解決するかを1文で書く「◯◯な人が、◯◯できるようになる」。ここがブレると全部ブレる。まず紙に1文。
- ② Artifactで"いちばん小さい動くもの"を作る目玉機能を1つだけ。見た目より「動くこと」を優先。触って手応えを確かめる。
- ③ 使う人に見せて反応をもらう作り込む前に見せる。要らない機能を作り込まずに済む、いちばんの節約。
- ④ 本番の①画面②頭脳を書き起こすArtifactの試作を土台に、ちゃんとしたコードへ。AIに手伝ってもらいながら。
- ⑤ ③倉庫をつなぐ「ためる」が必要になった時点で初めてDBを足す。最初から作り込まない。
- ⑥ ④配信してURLで公開まずは限定公開（合言葉URL）で少人数に。問題がなければ範囲を広げる。
- ⑦ 自動化・会員・課金を必要な分だけ足すここは"育ってから"でいい。反応を見ながら、必要になったものだけ。
小さく作って、見せて、育てる。「完璧な設計を先に全部」ではなく「動く最小を出して、反応で直す」。これがAI時代のいちばん速い作り方です。
まとめ
- 1Webサービスは 画面・頭脳・倉庫・配信 の4部品。今どこを触っているかを意識する。
- 2Artifactは 「①画面＋軽い②頭脳」を一瞬で作る作業台。試作に最強。
- 3Artifactの限界は ③倉庫と④配信。ためる・みんなで使う・自分のURL・会員課金は苦手。
- 4③倉庫と④配信を足すと 本物のサービス になり、自動化・会員・課金まで広がる。
- 5進め方は 小さく作って・見せて・育てる。最小の動くものから1段ずつ。
この地図が頭に入っていれば、次にどんなツールが流行っても「あ、これは③倉庫の道具だな」と位置づけられます。技術は変わっても、4部品の骨格は変わりません。まずはArtifactで、あなたの"いちばん小さい1個"を一緒に作りましょう。