個人でAIメディアを作る全体像 技術スタックと立ち上げの流れ

結論

AIメディアを個人で作るための最小構成は、Astro（サイト構築）、Vercel（ホスティング）、Supabase（データベース・アクセス計測）、Claude Code（記事制作支援）の4つだ。このスタックなら月数百円以下のインフラコストで、表示速度が高く、SEO・LLMO対応済みのメディアを1人で運営できる。

なぜこのスタックを選ぶのか

Astro：メディアに最適な静的サイトジェネレーター

Astroはコンテンツ中心のサイト（ブログ・メディア・ドキュメント）向けに設計されたフレームワークだ。ビルド時にHTMLファイルを生成し、そのファイルをCDNで配信する静的サイトの形をとる。

静的サイトの主なメリットは2つある。

表示速度：サーバーサイドの処理がなく、ユーザーのブラウザに最短距離でHTMLが届く。Core Web Vitals（Googleのページ速度指標）で高スコアを取りやすく、検索順位にも好影響がある。

インフラコスト：静的ファイルのホスティングはほぼ無料。WordPressのようにPHPサーバーを常時稼働させる必要がなく、月数千円のVPSコストが不要になる。

Astroの特徴として、Markdownファイルを記事として管理する仕組みが標準で入っている。src/content/articles/記事名.md にMarkdownを置けばそのまま記事になる設計で、Claude Codeと組み合わせると「記事のMarkdownファイルを生成→Gitにプッシュ→自動デプロイ」の流れを作りやすい。

Vercel：自動デプロイとCDNが込みのホスティング

VercelはNext.jsの開発元が提供するホスティングサービスで、Astroとの相性がよい。GitHubリポジトリと接続すると、mainブランチにプッシュするたびに自動でビルド・デプロイが走る。

個人・趣味の用途なら無料プランで十分運用できる。無料プランの主な制限は、ビルド時間の上限（月100時間）と帯域幅（月100GB）だが、月10万PV以下のメディアなら余裕を持って収まる。

独自ドメインの設定もVercelのダッシュボードから数分で完了する。DNSの設定をドメインレジストラで変更するだけで、HTTPSも自動で有効になる。

Supabase：Postgresベースのバックエンド

Supabaseは、PostgreSQLデータベースをAPIで扱えるBaaS（Backend as a Service）だ。メディアサイトの文脈では、記事のアクセス数カウント・問い合わせフォームのデータ保存・管理用ダッシュボードの認証などに使える。

静的サイトはHTMLを配信するだけなので「誰がどの記事を何回見たか」のデータを自分で保持する仕組みがない。Supabaseを使うと、記事ページが読み込まれたときにJavaScriptからSupabaseのAPIを呼び出してアクセス数を記録できる。自社でアクセスデータを持てるため、Google Analyticsに頼らない計測が可能だ。

Supabaseの無料プランでは、500MBのデータベースと月200万件のAPIリクエストまで無料で使える。個人規模のメディアなら無料プランで十分だ。

Claude Code：記事制作と開発を両方加速する

Claude Codeは、ターミナルから使えるAIコーディング支援ツールだ。Anthropicが提供し、コードの読み書き・リファクタリングだけでなく、Markdownの記事生成にも使える。

このメディアサイト自体、Claude Codeを使って記事のMarkdownファイルを生成している。CLAUDE.md（プロジェクト固有の指示ファイル）に執筆ルール・構成・SEO要件を書いておくと、指示に沿った品質の記事を継続的に生成できる。人間が行うのは品質確認・構成の判断・独自の知見の追加だ。

立ち上げの流れ

ステップ1：Astroプロジェクトの初期化（所要時間：1〜2時間）

npm create astro@latest

対話形式のセットアップで、テンプレートを選んでプロジェクトを初期化する。コンテンツコレクション（Markdownで記事を管理する仕組み）を含むテンプレートを選ぶと、記事管理の土台が最初から入った状態で始められる。

Astroのコンテンツコレクションは、src/content/config.tsでスキーマを定義することで、記事のフロントマター（title・description・category等）の型チェックができる。入力ミスを早期に検知できる。

ステップ2：GitHubリポジトリの作成とVercel連携（所要時間：30分）

GitHubにリポジトリを作り、Vercelと連携する。Vercelのダッシュボードで「Import Project」を選び、GitHubリポジトリを指定するだけで自動デプロイが設定できる。

この時点で、mainブランチにプッシュするたびにサイトが自動更新される状態になる。記事ファイルを追加してプッシュすれば、数分後に公開サイトに反映される。

ステップ3：Supabaseプロジェクトの作成と接続（所要時間：1〜2時間）

Supabaseのダッシュボードでプロジェクトを作成し、アクセスカウント用のテーブルを設定する。テーブル設計の例はSupabaseでアクセス数カウンターを作るで解説している。

SupabaseのAPIキーをVercelの環境変数に設定し、AstroのコンポーネントからクライアントサイドのJavaScriptでAPIを呼び出す形で接続する。

ステップ4：SEOと構造化データの設定（所要時間：2〜4時間）

Astroにはデフォルトでメタタグ・OGP・sitemap・RSS生成のプラグインが用意されている。@astrojs/sitemapを追加してVercelにデプロイするだけで、サイトマップが自動生成される。

記事に Article・FAQPage の JSON-LD 構造化データを自動で埋め込むコンポーネントを作ると、Google検索・AIのインデックス両方への対応が一度でできる。詳細はAstroでSEO・構造化データを自動化するを参照してほしい。

ステップ5：CLAUDE.mdで記事生成の品質基準を固める（所要時間：1〜2時間）

プロジェクトのルートにCLAUDE.mdを作り、記事の構成・文体・禁止事項・frontmatterのスキーマを書く。Claude Codeはこのファイルを毎回読んでから作業するため、指示を一度書いておくと品質が安定する。

インフラコストの実績値

このメディアサイトの月次コストの内訳（2026年6月時点）：

項目	月額
Vercel（Pro）	約2,900円（$20）
Supabase（Free）	0円
独自ドメイン	約200円（年2,000円を月換算）
Claude API	使用量による（記事生成に月数千円程度）
合計	約3,000〜5,000円

VercelはFreeプランから始められ、月間のビルド・帯域が無料枠を超えたタイミングでProにアップグレードする形でよい。Supabaseも無料枠で十分な期間が長い。

このスタックの限界と注意点

動的な機能の追加に工数がかかる：ユーザー登録・会員限定記事・コメント機能などを追加するには、Supabase Authの実装や、Astroのサーバーサイドレンダリングへの切り替えが必要になる。最初は読み専用のメディアサイトとして設計し、動的機能は段階的に追加する計画を立てることを勧める。

Claude APIのコストは使用量次第：記事の量産フェーズでは、1本あたり数十円〜数百円のAPIコスト（利用するモデルと記事の長さによる）がかかる。月20〜30本のペースなら月数千円程度に収まることが多いが、コストを把握しながら使うことが大切だ。

まとめ

Astro + Vercel + Supabase + Claude Codeのスタックは、個人開発者がメディアサイトを立ち上げる現実的な選択肢だ。表示速度・SEO対応・コストの3点でバランスがよく、記事制作の自動化まで視野に入れた構成になっている。立ち上げのステップは5つで、週末2〜3日あれば基本的な形は完成する。