静的ページ
LP・ポートフォリオ・ドキュメントなど更新頻度が低いもの
$0 + ドメイン · 最小
△ ユーザーごとの表示や、メール送信以上のフォーム処理が必要になった時
図面セット · L0–L3
ひとりでサイトを公開する
AI のおかげで「コードを書く」ことは簡単になった。誰も渡してくれないのはインフラの地図: ウェブサイトにはどんな形態があり、一人プロジェクトにはどれが合い、各形態が毎月いくらの請求を 引きずるのか。以下は静的 1 ページからマイクロサービスまでの全景——その大半は 「まだ作るべきでないもの」を知るために存在する。
設計思想
ウェブサイトとは、このアドレスが応答し続けるという約束です。速さも見た目も機能も交渉できますが、リンク切れだけは許されません。
URL は永遠
一度公開したページのアドレスは、他のサイトも検索エンジンも AI モデルも覚えています。リダイレクトなしで変えるのは、自分の履歴を黙って消すことです。
まずコンテンツ、実行環境は最後
ほとんどのウェブサイトはプログラムではなく文書です。前もって焼けるページは焼いておき、訪問者ごとに計算が本当に必要なページにだけサーバーを足します。
1 ページ 1 問い
各ページは、ある一種類の訪問者のために、ただ一つの問いに答えます。その問いを言えないなら、そのページはまだ存在すべきではありません。
一人で最初の本格サイトなら、静的サイトかエッジフルスタックから(共に推奨マーク付き)。 地図でその右側にあるものは、ユーザー・収益・チームができた日のためのもの。 シグナルが鳴ってからアップグレードを。
図番L0
プロトタイプ
使う人あなたと数人の友人だけ
月額$0
①なぜ上がるか
そのアイデアに価値があるかを知りたい段階です。まだ誰も依存していないので守るものはなく、試す速さだけが重要です。
②アーキテクチャ
③ツール
機能の多さではなく、あなたのエージェントが一番流暢に書けるスタックを選びます。この段階でフレームワークはほぼ関係なく、公開の流れが大事です。
④コードとテスト
- リポジトリ 1 つ、ブランチ 1 つ、push でデプロイ。ステージング環境はまだ不要。
- 完了と言う前に、全ページを実機のスマホで開く。
- リンクチェックを回す。リンク切れだらけのプロトタイプは、アイデアについて何も教えてくれません。
図番L1
実ユーザー
使う人あなたを見つけた見知らぬ人
月額$0–5
①なぜ上がるか
会ったこともない人が訪れ始めました。フォーム、言語切り替え、検索など、一部のページにロジックが必要になり、検索エンジンもあなたを評価し始めています。
②アーキテクチャ
静的ページは静的なまま。計算が必要な一部のリクエストだけを薄いエッジコードが処理します。自前のサーバーもデータベースもまだありません。
Δ この段階で追加
- + 動的部分を担うエッジ関数
- + SEO タグの唯一の出口
- + デプロイ前の自動チェック
- + アクセス解析
地図上の形: エッジフルスタック(本サイトの形) · 静的フロント + サーバーレス関数
③ツール
無料枠が実際のトラフィックに耐え、フレームワークがその実行環境を公式にサポートしているホストを選びます。誰も保守していないアダプターは、選べる中で最も高くつく無料品です。
④コードとテスト
- push のたびに CI で lint、型チェック、ビルド。チェックが赤ならデプロイしない。
- 開発サーバーではなく本番と同じ実行環境（エッジ worker のローカルプレビュー）でテストする。挙動が違います。
- デプロイ後は公開ページを実際に取得して中身を確認する。ステータスコードだけでは不十分。200 は正しいという意味ではありません。
図番L2
お金とデータ
使う人あなたに支払う人、データを預ける人
月額$5–25
①なぜ上がるか
アカウント、決済、個人データが登場しました。バグはもう恥ずかしいだけでは済まず、誰かにお金の損失や情報漏えいをもたらします。ここから、あなたには他人を守る責任があります。
②アーキテクチャ
エッジアプリに本物のデータベースがつき、最も危険な部分であるログインと決済は、自作せず専門業者（ホスト型の認証サービス、決済代行）に任せます。シークレットは完全にコードの外へ出ます。
Δ この段階で追加
- + バックアップ付きのマネージド DB
- + 認証と決済を専門業者へ委託
- + リポジトリ外に保存されたシークレット
- + コードの挙動と一致するプライバシーポリシー
③ツール
人を傷つけうるものは買い、あなたを差別化するものは作ります。パスワード保存やカード処理を自作してはいけません。署名付き webhook があり、データを持って移転できる業者を選びます。
④コードとテスト
- 境界ですべての入力を検証し、すべての webhook の署名を確認する。
- データベースをバックアップし、実際に復元を練習する。試していないバックアップは願望であってバックアップではありません。
- お金と権限に関わる経路から先にテストを書く。そこでのバグには被害者が出ます。
- push の前に、すべてのコミットをキーと個人データについてスキャンする。
図番L3
スケール
使う人大勢が同時に
月額$50–300+
①なぜ上がるか
何よりも先にデータベースが悲鳴を上げ、深夜 3 時の障害が実際にお金を失わせ、コードを出す人が一人ではなくなりました。計測がそう告げたときだけ、ここへ進みます。
②アーキテクチャ
まずデータベースの前にキャッシュを置き、次に読み取りと書き込みを分けます。書き込み自体がボトルネックになって初めてシャーディングし、多くのチームがぶつかり合って初めてサービスに分割します。各段階は建物全体の改築ではなく、一つ上の階の増築です。
Δ この段階で追加
- + キャッシュ層
- + 読み取りレプリカ
- + アラート付き監視
- + 段階的リリース
地図上の形: キャッシュ層 + リード/ライト分離 · コンテナ化モノリス(Docker) · 古典的三層(Web / アプリ / DB) · データベースシャーディング · マイクロサービス
③ツール
この段階のツールはどれも、お金と複雑さを余裕と引き換えにします。一つ足して計測し、それから次を決めます。一人でこれを読んでいるなら、ほぼ確実にもっと下の階があなたの場所です。
④コードとテスト
- 障害の後ではなく、公開前に現実的なトラフィックで負荷試験をする。
- まず一部のユーザーに出してエラー率を見てから全体へ広げる。
- すべてのアラートに取るべき行動を書く。誰も対処できないアラートは、アラートを無視する習慣を育てます。
アーキテクチャ全景
取り得るすべての形。その大半は「まだ作るべきでないもの」を知るためにある。
静的生成(SSG)
ブログ・ドキュメント・本サイト——デプロイ時にデータからページを大量生成
$0 + ドメイン · 低
△ 再デプロイなしの更新や、リクエスト単位の処理が必要になった時
エッジフルスタック(本サイトの形)
API・多言語・動的処理が必要だが、サーバーは持ちたくない個人プロジェクト
$0–5/月 · 低〜中
△ 長時間ジョブ、大規模 WebSocket、重いリレーショナルデータが出てきた時
静的フロント + サーバーレス関数
ほぼ静的だが API を数本持つサイト(フォーム・決済・認証)
$0–10/月 · 低〜中
△ 関数が増殖し状態を共有し始めた——断片でバックエンドを組み立てている兆候
フロントエンド + BaaS(ホスト型バックエンド)
認証・DB・リアルタイムが必要なアプリ型プロダクトを最速で
$0–25/月 · 低〜中
△ ユーザー増で料金が急カーブ、またはプラットフォームが許さないロジックが必要になった時
VPS モノリス(1 台のサーバーに全部)
完全な制御・特殊なランタイム・長時間プロセスを低予算で
$5–20/月 · 中——今日からあなたが運用チーム
△ 午前 3 時のサーバーダウンが自分の問題であること。それが許容できなくなった時が移行時
コンテナ化モノリス(Docker)
同じアプリをラップトップ・VPS・クラウドで同一に動かしたい
$5–30/月 · 中
△ コンテナ 1 つで負荷を支えられない、またはゼロダウンタイムデプロイが必要になった時
古典的三層(Web / アプリ / DB)
チーム開発の業務システム;教科書的なエンタープライズ形態
$20–100/月 · 中〜高
△ 読み取りトラフィックが最初に DB を潰す——次の一手は通常キャッシュ
キャッシュ層 + リード/ライト分離
読み取り中心のトラフィックが単一 DB の限界を超えた時
$50–300/月 · 高
△ 書き込み自体がボトルネックに——この先はシャーディングの領域
データベースシャーディング
書き込み量やデータ量が単一 DB の限界を超えた時
$300+/月 · 非常に高い
△ シャード横断クエリとチーム調整が苦痛に→サービス分割の合図
マイクロサービス
複数チームが同一プロダクトを独立してリリースする時
$1000+/月 + プラットフォームチーム · 極高
△ ここが終着駅。一人でこれを読んでいるなら——タブを閉じて、作りに戻ろう
本当に必要な概念
各概念に平易な一文とたとえ話をひとつずつ。ツールモジュールをクリックしても同じ解説が出る。
- ドメインと DNS
- ドメインは住所、DNS はその住所を実際に応答するサーバーへ対応付ける電話帳。
- ≈ 看板はそのままに、厨房を一晩で丸ごと入れ替えても客は気づかない。
- ホスティング形態
- 静的ホスティングはファイル配信のみ、サーバーレスはリクエスト毎にコード実行、VPS は丸ごと借りるコンピュータ。
- ≈ 自販機、注文が入った時だけ人が立つ屋台、レストランの一棟貸し。
- SSG と SSR
- SSG はデプロイ時に全ページを焼き上げ、SSR はリクエスト毎に作りたてを出す。内容が許すなら焼き置きが安くて速い。
- ≈ パン屋の朝の一括焼き上げと、注文ごとに作る厨房。
- エッジコンピューティング
- コードが 1 つのリージョンではなくユーザーに近い数百拠点で動く——低遅延で、管理するサーバーもない。
- ≈ 国に 1 つの大倉庫ではなく、どの角にもあるコンビニ。
- CI/CD
- push のたびに検査とデプロイが自動で走る——リリース作業から人間が解放される。
- ≈ ベルトコンベアが検品も出荷も済ませる工場ライン。
- 環境変数とシークレット
- 設定とキーはコードの外に置き、実行時に注入——リポジトリには絶対入れない。
- ≈ 金庫の暗証番号は頭の中に。扉に書いてはいけない。
- キャッシュ
- 高くつく計算の答えを保存し、古くなるまで使い回す。
- ≈ 常連の注文を付箋に書いて貼っておくバリスタ。毎朝聞き直さない。
- 多言語ルーティング
- 言語ごとに固有の URL(/zh、/ja)を持たせ、検索エンジンに各版を別々に索引させる。
- ≈ 1 つの美術館に、完全な案内表示付きの 3 つの順路。イヤホンガイド 1 本ではなく。
skill.md を持ち帰る
このシナリオ用のスキル中心主義スターターファイル——最初のプロンプトの前にエージェントへ。計画・スタック・既知の落とし穴が入っている。