「で、何を使って作ってるの?」
SaaSを開発していると言うと、よく聞かれる質問です。
エンジニアじゃない私が、なぜこの技術を選んだのか。正直に全部公開します。
先に結論を言うと、私の技術選定の基準は1つだけ。
「素人でも理解できて、運用が楽なもの」。
パフォーマンスがどうとか、スケーラビリティがどうとか、正直そこまで考えられるレベルにない。でも、それでもちゃんと動くものが作れている。
フロントエンド:Next.js
なぜ選んだか
AIに「Webアプリを作りたい」と言ったら、最初に勧められたから。
…身も蓋もない理由ですが、これが正直なところです。
Next.jsはReactベースのフレームワークで、Webアプリケーションを作るための定番ツールです。サーバーサイドレンダリングという仕組みがあって、SEOにも強い。
素人目線で良いところ:
- ファイルを作れば自動でページが増える仕組み(ファイルベースルーティング)が直感的
- 情報が多い。困ったらネットで解決策が見つかりやすい
- AIに「Next.jsで〇〇を作って」と言うと、高確率でちゃんと動くコードが返ってくる
素人目線で困ったところ:
- 最初の学習コストが高い。「コンポーネント」「Props」「State」——用語が意味不明
- エラーメッセージが英語で、しかも専門的。AIに聞かないと解読できない
- バージョンアップが頻繁で、ネットの情報が古い場合がある
でも、AIと組み合わせれば何とかなる。これが最大のポイントです。
バックエンド・データベース:Supabase
なぜ選んだか
データベースの管理を自分でやりたくなかったから。
従来のWebアプリ開発では、データベースサーバーを自分で立てて、テーブルを設計して、SQLを書いて、バックアップを取って……と、やることが山盛りでした。
Supabaseは、これをほぼ全自動でやってくれるサービスです。
PostgreSQLというデータベースが裏側で動いているのですが、管理画面からポチポチ操作するだけでテーブルが作れる。認証機能(ログイン・サインアップ)も最初から付いている。ファイルストレージもある。
素人目線で良いところ:
- 管理画面が視覚的で、SQLを書かなくてもテーブルの中身が見える
- 認証機能が最初から入っている。自分で実装する必要がない
- 無料枠がある。小規模なうちはタダで使える
- リアルタイムデータベース機能がある(今はまだ使っていないけど将来的に)
素人目線で困ったところ:
- データベースの設計ミスをすると後から修正が面倒
- Row Level Security(行レベルセキュリティ)という概念が難しい
- エラーが出たとき、「Supabaseの問題」なのか「自分のコードの問題」なのかの切り分けが大変
ホスティング:Vercel
なぜ選んだか
Next.jsと相性が最高だったから。
Vercelは、Next.jsを作っている会社が提供しているホスティングサービスです。つまり、相性は完璧。
Gitにコードをプッシュするだけで、自動でデプロイ(公開)してくれる。SSL証明書も自動。ドメインの設定も簡単。
素人目線で良いところ:
- デプロイが本当にワンクリック。GitHubにプッシュ → 30秒後には公開
- SSL(https)が自動。セキュリティ設定を自分でやる必要がない
- 無料枠が十分。個人プロジェクトなら無料で運用できる
- プレビュー機能がある。本番環境に影響を与えずにテストできる
素人目線で困ったところ:
- サーバーレスの概念が最初は理解できなかった
- 無料枠の制限(ビルド時間、帯域幅)を超えそうなときの対処法がわからなかった
- ログが英語で専門的
バッチ処理用サーバー:VPS
なぜ選んだか
バッチ処理にはVPSが欠かせなかったから。
Vercelはリアルタイムの小さな処理は得意ですが、「75記事を一晩で一括生成する」ような重い処理は向いていません。処理時間の制限(タイムアウト)に引っかかる。
そこで、VPS(Virtual Private Server) を導入しました。
VPSは「自分だけの仮想サーバー」。好きなだけ時間をかけて処理を回せる。バッチ処理との相性は抜群です。
具体的な使い方:
- 75記事の一括生成処理
- 競合分析の夜間バッチ処理
- 定期的な内部リンク更新
- スケジューラー(cron)による自動実行
素人目線で良いところ:
- 処理時間の制限がない。何時間でも回せる
- サーバーの中にPythonスクリプトを置いて、自動で定期実行できる
- 月額1,000〜2,000円程度で十分なスペック
素人目線で困ったところ:
- 初期設定がVercelに比べて複雑。SSHとかLinuxコマンドとか
- セキュリティの管理は自分でやる必要がある
- 「何かあったとき」のトラブルシューティングが難しい
バッチ処理をやらないなら不要。でもやるなら必須。
→ バッチ処理のメリットは バッチ処理こそAIブログの最強戦略 で詳しく解説しています。
AI API:Claude + ChatGPT + 検索API
使い分け
1つのAIに全部やらせるのではなく、得意分野で使い分けるのがポイントです。
| 用途 | 使用AI | 理由 |
|---|---|---|
| 記事本文の生成 | Claude | 長文の品質が高い。文体の一貫性を保ちやすい |
| 記事構成案の生成 | ChatGPT | 要約・構造化が得意。短時間で構成が出る |
| 競合記事の分析 | Claude | 長い記事を丸ごと読ませても精度が落ちにくい |
| 検索・データ取得 | 検索特化API | ChatGPT/Claudeの検索よりスピード・精度が段違い |
| アイキャッチ画像 | DALL-E 3 | ChatGPT Plus内で使えて追加コストなし |
月額コスト: ChatGPT Plus(約3,000円)+ Claude Pro(約3,000円)+ 検索API(従量課金、月1,000〜3,000円)= 約7,000〜9,000円
全体のアーキテクチャ図
テキストで書くとこんな感じです。
[ユーザー] → [Next.js(Vercel)] → [Supabase(DB・認証)]
↑
[VPS(バッチ処理)] → [AI API群] → [WordPress REST API]
- ユーザーが操作する画面はNext.js(Vercel上)
- データはSupabaseに保存
- 重い処理はVPSで夜間バッチ
- 記事の生成・分析はAI APIを叩く
- 完成した記事はWordPress REST APIで自動投稿
この構成で、月額1万円以下で全部動いています。
なぜ「非エンジニアの視点」で選ぶことが大事なのか
エンジニアが技術スタックを選ぶときは、「パフォーマンス」「スケーラビリティ」「メンテナンス性」で判断します。
でも私は違います。
- AIに説明しやすいか(AIが知っている技術ほど、コード生成の精度が高い)
- 困ったときにネットに情報があるか(マイナーな技術は情報が少なくて詰む)
- 管理が楽か(自分でサーバー管理したくない)
- 無料枠があるか(最初はお金をかけたくない)
この基準で選ぶと、必然的に「メジャーで、ドキュメントが豊富で、マネージドサービスがある」技術に絞られます。
そしてそれが、結果的に正解でした。
まとめ:技術スタック一覧
| カテゴリ | ツール | 月額コスト |
|---|---|---|
| フロントエンド | Next.js | 無料(OSS) |
| データベース | Supabase | 無料〜 |
| ホスティング | Vercel | 無料〜 |
| バッチ処理 | VPS | 約1,000〜2,000円 |
| AI(記事生成) | Claude Pro | 約3,000円 |
| AI(構成・画像) | ChatGPT Plus | 約3,000円 |
| 検索API | 検索特化API | 約1,000〜3,000円 |
| 合計 | 約8,000〜11,000円 |
月1万円以下でSaaSが動いている。 エンジニアじゃなくても、これだけのものが作れる時代です。
こちらの記事もあわせてどうぞ:
【無料】LINE登録で2大特典を配布中
「AIで記事を書いてみたいけど、どう指示すればいいかわからない」
そんな方のために、私が97記事を量産する中で実際に使い込んだ12のプロンプトをまとめました。
コピペでそのまま使えます。
受け取り方はカンタン:LINEに友だち追加するだけ。
🎁 特典① AIブログ記事作成プロンプト集(12本)
✔ キーワード選定からリライトまで、記事作成の全工程をカバー
✔ ChatGPT・Claude・Gemini、どのAIでも使える
✔ コーチ→建築→AI副業と渡り歩いた筆者が実際に成果を出したプロンプトだけを厳選
🎁 特典② 中古ドメイン取得 完全マニュアル(PDF) ← NEW!
✔ 良い中古ドメインの見分け方(5つの判断基準)
✔ 有料サービスの比較と購入手順(おすすめはコレ)
✔ 自分で探す方法&Xserverへの設定手順まで完全網羅
さらに、LINE登録者には「素人SaaS開発の裏側レポート」も近日配信予定です。