【マルチテナント型SaaSの開発はまず自分から:デモサイト有り】Vol.4～自分のnoteデータで作るSaaSのリアル、ポートフォリオはデプロイしてから語れ～

📌この記事1枚でわかること

・SaaSとSIerのビジネスモデルの違いと収益の仕組み

・なぜNext.js + Vercelを選んだか（将来のAWS/GCP/Azure移行を見据えた理由）

・Claude Sonnet 4.6で仕様書を作りClaude Codeに投入する開発方式

・GASとスプレッドシートの資産を無駄にしないデータ連携の考え方

・マルチテナント型SaaSとして設計した「まず自分から」という思想

※今回は長文です。AIと二日がかりで作りました。

📝 はじめに

🎀 Erica「SaaSって聞いたことある？実は私のnoteデータで動くWebシステムを作ったのよ。しかも将来は企業向けに展開できる設計で！ポートフォリオってね、デプロイしてから語るものなのよ。」

※【追記 2026/06/30 10:00：デモサイトをお試しください】は記事の末尾をご覧ください。

【スクショ：ダッシュボード画面】

このシステムはVol.1〜Vol.3で作ったGASのグラフを統合した管理システムです。

Vol.1で作ったフォロワー数推移グラフ、Vol.2で作ったスキ・フォロー・コメントの曜日別・時間帯別グラフ、Vol.3で作った3年計画の予実管理グラフ、これらをWebアプリとして1つのダッシュボードに統合しました。

エンジニアの自己紹介でよく見る言葉があります。

「Webアプリ開発経験あり」

「クラウド環境での構築経験あり」

「SaaS開発に興味あり」

でも実際に動いているものを見せられる人は、意外と少ないです。この記事では、自分のnoteのフォロワーデータを可視化するWebアプリを作った話をします。ただの個人ツールではなく、将来的に複数企業に提供できるマルチテナント型SaaSとして設計した話です。

📝 SaaSとSIerの違い

🔹 IT業界の2つのビジネスモデル

非エンジニアの方にも伝わるよう、まず前提を整理します。IT業界には大きく2つのビジネスモデルがあります。

SaaS（Software as a Service）とは、作ったソフトウェアを繰り返し売るモデルです。1つのシステムを多数の顧客に提供します。月額・年額のサブスクリプションで収益を得ます。顧客が増えても開発コストはほぼ変わりません。みなさんが使っているSlack・Notion・Canvaなどがこれにあたります。

収益のイメージはこうなります。

1,000社 × 月額5,000円 ＝ 月500万円

一度作ったものが資産になり、寝ていても収益が入る仕組みです。

SIer（System Integrator）とは、顧客の要件に合わせて都度開発して売るモデルです。顧客ごとに個別のシステムを受注・開発します。納品と保守契約で収益を得ます。顧客が増えると人員も比例して必要になります。

収益のイメージはこうなります。

1案件 × 500万円 ＝ 500万円（1回限り）

高い技術力が求められますが、売上の天井が人員数で決まってしまうという特性があります。

🔹 私が作ったシステムはどちら？

実は私はIT業界で30年以上、SIer的な仕事を続けてきました。クライアント企業から要件をヒアリングして、設計からコーディングまで全て担当するスタイルです。

過去に作ったシステムのひとつが、会議ログレポートシステムです。多地点接続・1対1接続のデータを集計して、経営層向けにグラフで可視化するWebアプリでした。そのノウハウを今回、自分のnoteデータに応用しました。

ただし今回は設計思想を変えました。SIer的に「1社のためだけに作る」のではなく、SaaS的に「複数企業に展開できる構造で作る」ことにしたのです。

📝 なぜNext.js + Vercelを選んだのか

🔹 将来のクラウド移行を見据えた技術選定

これは記事を書くにあたって特に伝えたかったことです。

今回のシステムはNext.js + Vercel + Supabaseという構成で動いています。最初「なぜLaravelではなくNext.jsなのか」と聞かれたら、答えは1つです。

将来、AWS・GCP・Azureに移行するとき、コードをほぼ変えなくて済むからです。

クラウド移行のフェーズはこのように設計しています。

Phase 1（現在）：Vercel + Supabase

コスト：ゼロ。ポートフォリオとして公開しながら実績を積む段階です。

Phase 2：企業向けに展開するとき

AWS Amplify、GCP Cloud Run、Azure Static Web Appsへの移行。Next.jsはクラウド3社すべてに公式対応しています。

Phase 3：本格的なSaaS展開

マルチリージョン対応・SLA保証・セキュリティ強化。

LaravelはVPS（自前サーバー）やレンタルサーバーへのデプロイが基本で、クラウド移行には設定の手間がかかります。Next.jsはVercelで始めることで、企業から引き合いが来たタイミングでそのままAWSやGCPに移れます。コード変更がほぼ不要というのは、ITエンジニアとしてとても大きなメリットです。

まず無料で動くものを作る。ポートフォリオとして見せながら実績を作る。企業から引き合いが来たらクラウドに移行する。これがSIerからSaaSへの、現実的なルートだと思っています。

📝 まず自分から、という考え方

🔹 GASとスプレッドシートの資産を生かす

開発を始めるとき、最初に考えたのは「Vol.1〜3で作ったGASとスプレッドシートを無駄にしない」ということでした。

せっかくGASでフォロワーデータを自動収集する仕組みを作ったのに、それを捨ててゼロから作り直すのはもったいないです。なので、Webアプリ側からGoogle Sheets APIでスプレッドシートのデータを取得する方式にしました。

「データベースなしで行けるのでは？」と最初は思いました。でも実際に設計を進めると、ユーザー管理・テナント管理・バッチログなどのデータはやはりDBが必要でした。

ということでデータベースはSupabaseを使います。あ、結局データベース使いますね（笑）。SupabaseはPostgreSQL互換のクラウドDBで、外部から接続することを前提に設計されているため、Vercelとの相性が抜群です。

🔹 自分がファーストユーザーになる

SaaSを作るとき、最初のユーザーが誰かという問題があります。「まず自分から」という考え方は、この問題を解決します。

自分が最初のユーザーになれば、要件定義が速いです。自分のことなので「何が欲しいか」が明確です。動かなければすぐ気づきます。改善のフィードバックが即座に得られます。そして何より、リスクゼロで動くものが作れます。

自分のデータで動くものができれば、次のステップが見えてきます。「これ、他のnoteクリエイターにも使ってもらえるのでは？」「noteを複数アカウント運用している企業にも需要があるのでは？」

そのためにマルチテナント型の設計にしました。最初は自分1社だけです。でもシステムは最初から複数企業を受け入れられる構造になっています。

📝 Claude Codeとの開発記

🔹 仕様書をClaude Sonnet 4.6で作ってからClaude Codeに投入する

今回の開発で工夫したのは、開発方式です。

Claude Codeに直接「これ作って」と言うのではなく、まず私がClaude Sonnet 4.6（この会話です）と相談しながら仕様書と開発要件の指示文書を作りました。そしてその指示書をClaude Codeに投入するという方式を取りました。

なぜこの方式にしたか。Claude Codeはコードを書く力は抜群ですが、「何を作るべきか」という上流の設計は人間が考えた方がいいからです。仕様書があれば、Claude Codeは迷わず動けます。

🔹 初日と二日目のリアル

初日に仕様書を投入すると、ある程度の形はできました。認証画面・ダッシュボードの骨格・サイドメニューあたりは一気に出来上がりました。

ただし細かい部分は何度も修正指示が必要でした。グラフのスケールがおかしい、日付がずれる、テストデータが想定と違う、など。二日目に繰り返し修正指示を出して、やっと「これだ」という形になりました。

でも頼もしい相棒が二人いてとても楽しく作ることができました。👦 ClaudeくんとClaude Codeさん 👩 です。AIと開発するのは、ひとりで作業するのとも、チームで作るのとも違う、新しい感覚です。「こうしたい」と言えば即座に動いてくれる、最高の開発体験でした。

🔹 システムの概要

このシステムで見られるデータはこちらです。

【スクショ：ダッシュボード画面】

予実管理グラフ：月別フォロワー数の目標と実績を複合グラフで可視化。赤い折れ線（目標）を青い折れ線（実績）が追いかける形。棒グラフ（緑：実績・オレンジ：目標）は単月フォロワー数。

フォロワー数ページ：3アカウント（エリカ・Kenny・雪乃）それぞれの日別フォロワー推移グラフとデータ表。年・月で絞り込みができます。

【スクショ：通知分析画面】

通知分析ページ：スキ・フォロー・コメントのデータを曜日別・時間帯別に表示。「土曜の夜にスキが多い」といった傾向が見えてきます。

GA4アクセスページ：Google Analytics 4のデータを国内・海外の地図で表示（実装予定）。

【スクショ：GA4アクセス他テストグラフ画面】

📝 おわりに

🎀 Erica「ポートフォリオって、デプロイしてから語るものよ。動くものを見せられるエンジニアは強いわ。そして『まず自分から』作ったものが、いつか誰かのニーズに応える。それがSaaSの面白さなの。」

30年ITエンジニアをやってきて、ひとつ確信していることがあります。「作ったものが、次の仕事を呼ぶ」。企画書や口頭の説明より、動くものを1つ見せる方が圧倒的に伝わります。

もしnoteを複数アカウント運用していて、データ可視化に興味がある方がいれば、お気軽にコメントをどうぞ。

【追記 2026/06/30 10:00：デモサイトをお試しください】

以下の画像リンク、URLからシステムをお試しいただけます。
実際に動きますのでどんなものか触ってみてください。

デモサイトURL：https://noter-report.vercel.app
ログインID：noter
パスワード：Follower

テストデータで動作するデモ環境です。本番データは含まれていません。

📌 ここから有料パートです

無料パートでは、noteAnalyticsの開発ストーリーと設計思想をお伝えしました。

有料パートでは、実際にClaude Codeに投入した仕様書と開発指示書の全文を公開します。「どんな指示書を書けばAIがここまで動いてくれるのか」を知りたい方はぜひご覧ください。

この2つのファイルがあれば、同じシステムを自分でゼロから作ることができます。

仕様書（586行）：DB設計・画面設計・権限設計・API設計を全て網羅。次世代クラウド移行フェーズも記載。

開発指示書（396行）：Claude CodeへのPhase別の具体的な指示文。コピペでそのまま使えます。

合計約1,000行、通常のSaaS設計書として外注すれば数十万円相当の内容です。

Claude Codeを使ってSaaSを作りたいエンジニアの方に最短ルートを提供できると思っています。

📝 初回投入後の重要な追加指示ポイント解説

初回の仕様書投入だけではシステムは完成しませんでした。その後の修正・追加指示のやりとりで重要だったポイントを解説します。