Wizard
スタック診断ウィザード
3問答えるだけで、最適な技術スタックを提案します。
STEP 1 / 3
どんなサイトを作りますか？
Stack Wizard
技術スタック選び方ガイド
Claude Code でWebアプリを作るとき、どの技術を選ぶか迷いませんか？ このページでは、カテゴリごとに主要ツールを比較し、よく使う組み合わせを紹介します。
フレームワーク
フロントエンドフレームワーク
アプリの「骨格」となる技術。最初の選択で後のツール選びも決まります。
Next.js
推奨React ベースのフルスタックフレームワーク。App Router で API・ページ・認証まで一体で管理できます。
メリット
- 情報量・事例が最多
- Vercel と組み合わせると設定が最小
- Claude Code との相性が抜群
注意点
- —設定が多く学習コストあり
- —シンプルなサイトには少し重い
Astro
シンプル静的サイト・ブログに最適。不要な JavaScript を生成しないため表示が高速です。
メリット
- 表示速度が速い
- 静的サイト / ブログに最適
- Markdown / MDX 対応
注意点
- —動的機能（ログイン・DB）は別途必要
- —Next.js ほど日本語情報が多くない
React（Vite）
上級者向けフレームワークなし・SPA構成。自由度が高い反面、ルーティングや SSR は自分で設定する必要があります。
メリット
- シンプルな構成
- 既存の React 知識が使いやすい
注意点
- —SEO に弱い（SSR 非対応）
- —API・認証は自前実装
- —デプロイが複雑になりやすい
ホスティング
ホスティング・デプロイ先
作ったアプリをインターネットに公開するサービス。Next.js を使うなら事実上の選択肢は1つです。
Vercel
推奨Next.js の開発元が提供するホスティング。GitHub に push するだけで自動デプロイが完了します。
メリット
- Next.js との相性が最高
- 無料枠で十分運用できる
- 独自ドメイン・HTTPS 自動対応
注意点
- —商用・大規模になると有料プランが必要
- —特定の機能は Vercel 独自仕様
Netlify
シンプル静的サイト・Jamstack に強いホスティング。Next.js もサポートしますが Vercel ほど最適化されていません。
メリット
- 静的サイトに強い
- 無料枠が充実
- フォーム機能が内蔵
注意点
- —Next.js の全機能をサポートしきれないことがある
- —Vercel より設定が増えるケースあり
Cloudflare Pages
上級者向け世界中のエッジで動作する高速ホスティング。Next.js 対応は限定的で知識が必要です。
メリット
- 高速（エッジ配信）
- 無料枠が広い
- DDoS 対策が強い
注意点
- —Next.js との互換性に注意が必要
- —設定が複雑
- —日本語情報が少ない
ヘッドレスCMS
ヘッドレスCMS（コンテンツ管理）
ブログ・お知らせ・商品情報を「コードなし」で更新したい場合に使います。DB の代わりに使えるため、非エンジニアでも運用しやすくなります。
microCMS
推奨日本製のヘッドレスCMS。日本語UIで使いやすく、国内の採用事例が最も多い。無料枠でも本番運用が可能です。
メリット
- 日本語対応・サポートが充実
- 管理画面が直感的で非エンジニアに優しい
- 無料枠で十分運用できる
注意点
- —無料枠はコンテンツ件数・API 呼び出し数に上限あり
- —ロックイン（microCMS 独自 API に依存）
Newt
シンプル日本製の新世代ヘッドレスCMS。モダンな管理 UI と柔軟なスキーマ設計が特徴。microCMS より後発で機能が整理されています。
メリット
- 管理画面のデザインが洗練されている
- 日本語対応
- コンテンツモデルの設計が柔軟
注意点
- —microCMS より国内事例が少ない
- —無料枠は制限あり
Contentful
上級者向け海外老舗のヘッドレスCMS。大規模サイト・多言語・複数プロジェクトの管理に向いています。
メリット
- 大規模・多言語対応が得意
- 豊富なプラグイン・統合
- 実績が豊富
注意点
- —管理画面が英語
- —価格が高め（本格運用は有料必須）
- —設定が複雑になりやすい
データベース
データベース
ユーザー情報・投稿・注文データなどを保存する場所。「DB が必要かどうか」から判断しましょう。
Neon
推奨サーバーレス対応の PostgreSQL。Vercel + Prisma との組み合わせが鉄板で、無料枠も充実しています。
メリット
- Vercel との統合が簡単
- 無料枠で小規模なら十分
- ブランチ機能で安全に開発できる
注意点
- —無料枠はストレージ 512 MB まで
- —アクセスが少ないとコールドスタートあり
Supabase
シンプルPostgreSQL + 認証 + ストレージをまとめて提供。自前で揃えるより手軽ですが、依存度が高くなります。
メリット
- 認証・ストレージが最初から付属
- 管理 UI が分かりやすい
- 無料枠あり
注意点
- —ロックインが強い（Supabase SDK に依存）
- —無料枠は2プロジェクトまで
- —大規模運用でコストが高くなる
PlanetScale
上級者向けMySQL 互換のサーバーレス DB。スケールに強いが、無料枠が廃止されており中〜大規模向けです。
メリット
- 水平スケールが得意
- ブランチ機能あり
- パフォーマンスが高い
注意点
- —無料枠なし（$39/月〜）
- —MySQL 知識が必要
- —小規模プロジェクトにはコスト過多
ORM
ORM（データベース操作）
TypeScript コードから DB を操作するためのライブラリ。DB を使うなら ORM はほぼ必須です。
Prisma
推奨スキーマファイルで型安全に DB を操作。Claude Code との相性も良く、日本語情報が豊富です。
メリット
- スキーマ定義が直感的
- TypeScript の型安全が強力
- マイグレーション管理が簡単
注意点
- —バンドルサイズが大きい
- —エッジ環境（Cloudflare）では追加設定が必要
Drizzle ORM
シンプル軽量・型安全な新世代 ORM。Prisma より設定が少なく、エッジ環境にも対応しています。
メリット
- 軽量でバンドルサイズが小さい
- エッジ環境対応
- SQL に近い書き方で直感的
注意点
- —Prisma より日本語情報が少ない
- —マイグレーション管理がやや手動的
- —エコシステムが小さい
ORM なし（直接 SQL）
上級者向けSQL を直接書く方法。柔軟性は高いが、型安全性・保守性が落ちます。
メリット
- SQL の知識がそのまま使える
- 追加ライブラリ不要
注意点
- —型安全性がない
- —保守・変更が大変
- —初心者にはおすすめしない
認証
認証（ログイン機能）
ユーザーのログイン・登録が必要なアプリに使います。まず「ログイン機能が本当に必要か」を検討しましょう。
Clerk
推奨コンポーネントを置くだけで認証が完成。UI ・メール送信・OAuth まで全部入りです。
メリット
- 実装が最も速い
- UI・メール・OAuth が最初から付属
- Next.js との統合が完璧
注意点
- —無料枠は月 10,000 MAU まで
- —Clerk への依存が強い
- —カスタマイズに制限あり
Auth.js（NextAuth）
シンプルNext.js 向けの OSS 認証ライブラリ。Google・GitHub ログインを手軽に実装できます。
メリット
- 無料・OSS
- プロバイダー連携（Google・GitHub 等）が豊富
- 自前 DB と組み合わせやすい
注意点
- —v5 は設定が複雑
- —UI は自前で作る必要あり
- —セッション管理の理解が必要
自作（パスワード認証のみ）
管理画面限定管理者だけが使うシンプルな画面なら、自作の Cookie 認証で十分な場合もあります。
メリット
- 外部依存なし
- 一般公開しない管理画面に最適
- シンプルで分かりやすい
注意点
- —ユーザー登録・パスワードリセット機能がない
- —一般ユーザー向けには不向き
- —セキュリティ設計の知識が必要
メール送信
メール送信サービス
お問い合わせフォームの通知・自動返信・パスワードリセットなどに使います。
Resend
推奨開発者向けに設計されたモダンなメールサービス。React Email と組み合わせると HTML メールが簡単に作れます。
メリット
- Next.js との相性が最高
- React Email で型安全なテンプレート
- 無料枠が充実（100通/日）
注意点
- —独自ドメイン送信は DNS 設定が必要
- —SMS・LINE には非対応
SendGrid
定番老舗のメール配信サービス。大量送信・配信分析に強く、マーケティングメールにも対応しています。
メリット
- 大量送信に強い
- 豊富なテンプレート機能
- メール分析ダッシュボード
注意点
- —API が複雑で設定が多い
- —無料枠縮小（100通/日）
- —React Email との統合は追加設定が必要
Nodemailer（Gmail 経由）
上級者向けNode.js 用のメール送信ライブラリ。Gmail アカウントで送信できますが、本番運用には向きません。
メリット
- 無料で試しやすい
- 学習・プロトタイプに向いている
注意点
- —Gmail は本番利用に不向き（送信制限あり）
- —Vercel 環境での設定が面倒
- —スパム判定されやすい
My Stack
このサイトで使っているスタック
迷ったらこの組み合わせを出発点にするのがおすすめです。 Claude Code との相性・情報量・コストのバランスを取っています。
フレームワーク
Next.js 15（App Router）
ホスティング
Vercel
データベース
Neon（PostgreSQL）
ORM
Prisma 6
認証
自作 Cookie 認証（管理画面のみ）
メール送信
Resend + React Email
UIコンポーネント
shadcn/ui + Tailwind CSS v4
FAQ
よくある質問
Q. 非エンジニアでも自分でスタックを選べますか？
A. 基本的には「推奨」マークのものを選んでいただければ大丈夫です。Next.js + Vercel + Neon + Prisma の組み合わせは情報量も多く、Claude Code が的確に助けてくれます。
Q. DB は必ず使わないといけませんか？
A. いいえ。会社・店舗の紹介ページ、ポートフォリオ、LP などコンテンツが固定のサイトなら DB は不要です。お問い合わせフォームも Resend だけでメール送信できます。
Q. 全部無料で作れますか？
A. 小規模なら基本的に無料枠で運用できます。Next.js（無料）+ Vercel 無料枠 + Neon 無料枠 + Resend 無料枠の組み合わせが多いです。アクセスが増えてきたら有料プランへの移行を検討します。
Q. どのスタックでサポートを依頼できますか？
A. このサイトのサービスは Next.js / TypeScript / Vercel を中心に対応しています。他のスタックについてもご相談ください。