エージェント型Webサイトのための Claude Code テックスタック

結論:エージェント型ウェブサイトとは、AI エージェントが構築、運用、改善を支援し、重要な変更は人が承認するマーケティングサイトのことです。これに適したスタックは、エージェントが触れるものをすべて、読み取れるファイルにまとめておく構成です。具体的には、Astro のような静的サイトフレームワーク、Sanity のようにスキーマをコードで管理できるヘッドレス CMS、Netlify のようにデプロイプレビューとスケジュール実行の関数を備えたホスティング、そしてプルリクエスト経由で作業する Claude Code です。

今では多くの B2B SaaS チームがコピーの作成に AI を使っています。しかし、ウェブサイトそのものの変更までエージェントに任せているチームははるかに少なく、試したチームの多くは痛い目に遭って理由を知ります。ビジュアルエディタをクリックして操作するために作られたプラットフォームでは、エージェントが読めるものも、テストできるものも、安全に試せる場所もありません。解決策は、最初からエージェントを前提に設計したスタックとルールです。

このガイドでは、そのスタックと、本番サイトを安全に保つガードレール、その上で動くエージェントのワークフローを紹介します。内容は、Astro、Tailwind、Sanity、Netlify で動き、Claude Code で構築した saas-hackers.com のリニューアルに基づいています。そもそもウェブサイトに何を担わせるかをまだ検討中の場合は、まずB2B SaaS ウェブサイト戦略ガイドをご覧のうえ、構築編にお戻りください。

エージェント型ウェブサイトとは?

エージェント型ウェブサイトとは、人が定めたルールと毎回実行されるチェックのもとで、AI エージェントが構築と保守の多くを担うサイトです。エージェントはページを書き、リンクを修正し、コンテンツを更新し、コード変更を提案します。人は、サイトの目的を決め、リスクのある変更を承認し、結果を確認します。

これは、プロンプトから一度だけサイトを生成する AI ウェブサイトビルダーとは異なります。エージェント型ウェブサイトでは、開発者やコンテンツ編集者のように、エージェントが公開後も作業を続け、その変更はすべて人の変更と同じレビューを通ります。

単に AI が支援するだけのサイトではなく、エージェント型といえるサイトには、次の3つの条件があります。

• エージェントが、サイトを定義するすべてを読み取れること。ページテンプレート、コンテンツタイプ、デザイントークン、リダイレクト、ルールそのものは、ダッシュボードだけでなく、コードリポジトリに置かれています。
• すべての変更を公開前にテストできること。壊れたページがあればビルドが失敗し、変更ごとにプレビューリンクが発行され、コンテンツ用のスクリプトはすべてドライランできます。
• 重要な権限は人が握っていること。コードのマージ、センシティブなコンテンツの公開、費用が発生する作業は、担当者を決めて人が行います。

エージェントが作業する場合、なぜスタックがより重要になるのですか?

エージェントは、見えるものと確認できるものの範囲でしか安全に作業できないため、スタックがより重要になります。人であれば、ビジュアルエディタでページがおかしいことに気づけます。エージェントには、その知識が明文化されている必要があります。たとえば、必須項目の欠落を拒否するスキーマ、ビルドを失敗させるチェック、毎回のセッション前に読み込むファイル内のルールです。

エージェント向けに作られたスタックには、4つの特性があります。

1. クリックよりテキスト。設定、コンテンツモデル、スタイルはリポジトリ内のファイルなので、エージェントが読み取り、変更し、説明できます。
2. 速く正直なフィードバック。ビルドやテストがはっきり失敗すれば、訪問者より先にエージェントが誤りに気づけます。
3. 安全に試せる場所。ブランチ、下書き、プレビューリンクにより、エージェントは本番サイトに触れずに作業内容を見せられます。
4. 単一のレビューゲート。コードの変更はすべてプルリクエストとして届き、人が内容を読んでマージするか却下します。

これらが揃っていれば、モデルの選択はそれほど重要ではなくなります。揃っていなければ、慎重なエージェントでもいずれ何かを壊します。壊したことを知らせる仕組みがないからです。

エージェント型ウェブサイトのための Claude Code テックスタックとは?

このスタックは5つのレイヤーで構成されます。静的サイトフレームワーク、ヘッドレス CMS、ホスティング、エージェント、そしてそれらの間にあるレビューゲートです。各レイヤーは、エージェントが読み取るもの、または確認するものを提供するために存在します。

静的サイトフレームワーク:Astro

Astro は事前にページをビルドします。デフォルトでは、すべてのページ、ルート、エンドポイントをビルド時に静的 HTML としてプリレンダリングし、必要なルートだけをオンデマンドレンダリングに切り替えます(Astro、2026年)。エージェントにとって、静的出力は大きな利点です。ビルド後にサイト全体がファイルとして存在するため、公開前にスクリプトですべてのページをチェックできます。

SaaS Hackers は、すべてのページを静的にレンダリングしています。リクエスト時にレンダリングされるのは下書きプレビューだけで、編集者が CMS から開いて未公開の変更を確認するために使います。それ以外はすべてビルド時にチェックされ、絞り込みリストの各項目を含め、コンテンツは初回読み込み時から HTML に含まれています。

スキーマをコードで管理するヘッドレス CMS:Sanity

ヘッドレス CMS は、コンテンツをサイトのデザインから切り離して管理し、API 経由でサイトに配信します。エージェントにとって重要なのは、コンテンツモデルがどこにあるかです。Sanity では、編集者が作成できるドキュメントとフィールドの種類をスキーマで定義し、それは Studio の設定内にコードとして記述されます(Sanity、2026年)。

スキーマがコードであれば、エージェントはブログ記事やプロフィールが何で構成されているかを正確に読み取り、プルリクエストでフィールドを追加し、スキーマが検証するスクリプトでコンテンツを書き込めます。編集者は引き続きビジュアルエディタを使えます。SaaS Hackers では、すべてのスキーマをリポジトリで管理し、ダッシュボードだけに置くことはしません。これはプロジェクトファイルのルールの1つです。

プレビューと関数を備えたホスティング:Netlify

ホスティングは、エージェントに2つのものを提供します。変更ごとのプレビューと、小さなジョブを実行する場所です。Netlify は、連携したリポジトリでプルリクエストが作成されると、専用のアドレスでデプロイプレビューを自動的にビルドし、検索エンジンに無視されるよう noindex ヘッダーを付与します(Netlify、2026年)。このプレビューリンクにより、人はマージ前に、実際のページでエージェントの変更を確認できます。

Netlify のスケジュール関数は、UTC の固定スケジュールで cron ジョブのように実行され、公開済みの本番デプロイでのみ動作し、1回の実行は30秒までです(Netlify、2026年)。短時間のスケジュールジョブは、エージェントによる保守に適しています。たとえば、何か変更があったかを確認し、再ビルドするかどうかを判断する作業です。

Claude Code:CLAUDE.md、スキル、フック、MCP

Claude Code がエージェントです。次の4つの機能が、高性能なモデルを、チームの信頼できる一員にします。

• CLAUDE.md。CLAUDE.md は、プロジェクトに関する永続的な指示を Claude に与える Markdown ファイルで、Claude はセッションの開始時に毎回これを読み込みます(Anthropic、2026年)。バージョン管理で共有すれば、プロジェクトのファイルに、ビルドコマンド、基準、全員が従うルールをまとめられます。
• スキル。 スキルとは、 SKILL.md Claude が自分のツールキットに加え、必要に応じて使う指示ファイルです。CLAUDE.md と違い、スキルの本文は使用時にだけ読み込まれるため、長い手順も必要になるまでほとんどコストがかかりません(Anthropic、2026年)。 マーケティングチーム向け Claude スキル の解説では、コピー作成での活用方法を紹介しています。
• フック。フックは、Claude Code が決まったタイミングで実行するシェルコマンドです。モデルの判断に任せず、特定の動作を必ず実行させる確実な制御ができます(Anthropic、2026年)。シークレットファイルの編集をブロックするなど、決して曲げてはならないルールに使います。
• MCP サーバー。Model Context Protocol は、AI ツールを他のシステムに接続するためのオープンソースの標準で、MCP サーバーによって Claude Code は、ツール、データベース、API にアクセスできます(Anthropic、2026年)。これにより、エージェントは、貼り付けられた情報に頼らず、アクセス解析、検索順位、CMS を直接読み取れます。接続できるマーケティングツールについては、AI マーケティングエージェントと MCP のガイドをご覧ください。

クラウドセッションとスケジュールタスク

クラウドセッションは、ノート PC ではなくクラウドインフラ上で動く Claude Code のセッションで、PC を閉じても動き続けます(Anthropic、2026年)。スケジュール実行やトリガー実行は、それぞれクラウドセッションとして開始されます。そのため、誰もキーボードの前にいなくても、エージェントが1時43分にブログ記事を公開したり、火曜の朝に検索順位を計測したりできます。

レビューゲートとしての GitHub プルリクエスト

エージェントが行うコード変更はすべてブランチに反映され、プルリクエストとして提出されます。デプロイプレビューはそのプルリクエストからビルドされ、チェックもそこで実行され、マージするかどうかは人が判断します。SaaS Hackers のルールは明快で、エージェントはプルリクエストを作成し、マージするのは Darren です。エージェントが自分の作業を自分でマージすることはありません。

エージェントが本番サイトを壊さないようにするには?

エージェントが公開中のサイトを壊さないようにするには、安全な手順を唯一の手順にします。書き込み前のバックアップ、変更内容を示すドライラン、すべてのビルドで行うチェック、エージェントが単独で変更できる範囲の制限です。これらはどれも、エージェントが慎重に行動することを前提にしていません。スクリプト、スキーマ、ビルドに組み込まれています。

バックアップ、ドライラン、そして書き込み

SaaS Hackers で公開済みコンテンツを変更するスクリプトは、すべて同じ流れで動きます。

1. バックアップ。 npm run backup 変更を加える前に、データセット全体を日付入りのファイルにエクスポートします。
2. ドライラン。 スクリプトを次のオプションなしで実行します: --write。すべてを確認し、変更される内容をレポートとして書き出します。
3. ドライランの結果を読む。 次に進む前に、エージェントまたは人がそのレポートを読みます。
4. 書き込み。 その後に初めて、同じスクリプトを次のオプション付きで実行します: --write.
5. チェック。 公開済みコンテンツからサイトをビルドし、ルートチェックとスキーマチェックを実行します。

各作業の後の引き継ぎ報告には取得したバックアップが記載されるため、どの変更も元に戻せます。

CMS のロック

ミスの中には、後から見つけるより CMS で防ぐほうが低コストなものがあります。SaaS Hackers の Studio では、ドキュメントが公開されるとスラッグがロックされ、公開中のアドレスが誤って変わることはありません。有効なリダイレクトがあるアドレスにはページを公開できず、代替テキストのない新しい画像も公開できません。スクリプトは削除せず非公開にし、他の人の下書きには手を触れません。

すべてのビルドで行うチェック

ビルドは、エージェントにとって最も正直な批評者です。SaaS Hackers では、 npm run build は次のいずれかが失敗すると停止します。

• デザイントークンが古い、トークン以外の色やサイズが使われている、またはテキストのコントラストが基準を満たしていない。
• CMS のセクションブロックに対応するページコンポーネントがない。
• 構造化データが解析できない、またはそのページタイプのスキーマを満たしていない。あるいは H1 がちょうど1つではないページがある。
• 言語リンク(hreflang)が相互に向き合っていない。

ビルド後、ルートチェックで対象の公開アドレスすべてが 200 を返すことを確認し、パリティチェックでタイトル、ディスクリプション、canonical、見出し、スキーマを公開サイトと比較します。表示速度もチェックの対象です。注目すべき指標は、ハンドブックの Core Web Vitals の項目で解説しています。

シークレットはリポジトリに置かない

トークンとキーは、git が無視するローカルの .env ファイルと、ホスティング先の環境変数に保存します。リポジトリに残すのは、それらの名前の一覧だけです。エージェントは、環境にあるキーを、ファイルやコミット、レポートに書き込むことなく使えます。

エージェントが単独で変更できる範囲の制限

エージェントが確認なしで行ってよいことを事前に決めて書き出し、可能な限りコードで強制します。SaaS Hackers では現在、次のように分けています。

• ブログ記事は、スクリプトのチェックを通過するとすぐに公開され、その後で人がレビューします。
• ページのコピー、タイトル、内部リンクは、SEO エージェントが、1回の実行ごとに定めた上限の範囲内で変更します。
• コードの変更はプルリクエストに回し、人がマージします。
• エージェンシーからのプロフィール申請は、人が Slack で「Approve」をタップするまで待機します。
• スコア、レビュー、ランキングは、エージェントが変更することも、依頼を受けて変更することも一切ありません。

コストの上限

エージェントは短時間で費用をかけてしまうことがあるため、コストもガードレールの一つです。SaaS Hackers では以前、公開のたびに再ビルドしており、本番デプロイ1回につき Netlify クレジットを15消費していました。現在は再ビルドを1日1回に制限しています。スケジュール関数が UTC 05:17 に実行され、公開中のビルド以降に公開されたものがある場合にのみ再ビルドします。SEO エージェントへの指示書にも、自らデプロイを実行しないことを明記しています。

エージェント型ウェブサイトではどのようなエージェントワークフローが動いていますか?

スタックとガードレールが整えば、エージェントは、公開、計測、更新、翻訳といった、とかくおろそかになりがちな繰り返しの作業を担えます。各ワークフローには、文書化された指示書、スケジュール、上限、レポートがあります。

2日に1本のブログ記事を公開

スケジュールされたタスクが、コンテンツのバックログから2日に1本の記事を、毎日の再ビルドより前の UTC 01:43 に作成して公開します。コピーライティングのスキルで執筆し、コンテンツ監査のスキルで内容を確認します。その後、公開用スクリプトが、エムダッシュ、プレースホルダー、誤ったスラッグ、長すぎるメタディスクリプション、3本未満の内部リンク、公開されていない内部リンクのいずれかを見つけると、その記事を受け付けません。作成するのは新しい記事のみで、既存の記事は変更しません。

週2回、計測と施策を行う SEO エージェント

毎週火曜日と金曜日の UTC 06:41 に、新しいセッションが検索順位を計測し、目標に照らしてサイトを採点し、優先順位を付けた施策リストを上から順に実行します。1回の実行で変更できるのは最大8ページ、新規リストの作成は1件、追加できる内部リンクは30本までで、有料データの呼び出しと翻訳費用にも上限があります。すべての変更を、元に戻せるよう変更前のコピーとともに記録し、コードの変更はプルリクエストに回し、チームの Slack チャンネルに報告します。この種の構成がノーコードツールを上回るのはどんなときかは、コンテンツチーム向け Claude Code と AirOps の比較で取り上げています。

ディレクトリのプロフィールを最新に保つ

月次のスクリプトが各エージェンシーのウェブサイトを確認し、正常に動作しているか、移転したか、リンク切れかを記録します。四半期ごとのクロールでは、各エージェンシー自身のサイトを読み取り、記載されている事実を保存します。サイトに明記されているサービスや業界のタグは追加しますが、削除はしません。スコア、レビュー、ランキングには、どちらの処理も一切手を触れません。

Slack で承認されるリクエスト

エージェンシーは、プロフィールの更新や掲載の申し込みを依頼できます。各リクエストはメールで確認され、Claude がそのエージェンシー自身のウェブサイトと照合し、CMS の下書きとして保存され、カードとして Slack に送信されます。「Approve」をタップできるのは承認権限のある人だけで、クリックのたびに Slack のリクエスト署名と照合し、各リクエストの判断は1回しかできません。

すべてのページを翻訳

SaaS Hackers のすべてのページは、ドイツ語、フランス語、スペイン語、オランダ語、日本語、ブラジルポルトガル語でもビルドされています。Claude Sonnet 5.5 が Batch API を通じてサイトを翻訳し、費用は合計で $91.35 でした。以降の実行では、変更のあったテキストだけを送信します。引用や、エージェンシーが自社サイトで述べている内容は、英語のまま一字一句変えずに残しています。

SaaS Hackers はこのスタックでどのように構築されましたか?

SaaS Hackers は、Claude Code を使って Webflow から Astro、Tailwind、Sanity、Netlify へと段階的に再構築しました。各段階は、SaaS Hackers の担当者がレビューしてマージしたプルリクエストです。プロジェクトファイルで順序、ルール、コマンドを定め、文書化した仕様で各段階の「完了」の基準を定めました。この再構築のデザイン面は、Claude Code でウェブサイトを構築するガイドで紹介しています。

移行では、233本の記事と172件の専門家プロフィールをまず下書きとして Sanity に移し、公開前に公開中のページと比較しました。SEO フェーズでは、全ページの構造化データが解析できるかのチェックと、公開サイトとのパリティチェックを追加しました。新サイトが Webflow に置き換わる時点で、ルートチェックは公開アドレス494件中494件が正常、3,936ページ(英語、米国版、6言語)のビルドは8.5分、本番で検証したページの Lighthouse モバイルパフォーマンスは99から100でした。

現在は同じスタックが、上記のエージェントワークフローを支えています。それを可能にしたのは3つです。毎回のセッションが読み込むプロジェクトファイル、不正な入力を受け付けないスクリプト、そしてコードをマージする人です。マーケティングオペレーションの面を知りたい方は、サイトを取り巻くデータとツールを扱ったB2B SaaS マーケティングオペレーションのガイドをご覧ください。

エージェント型ウェブサイトのメリットは?

得られるメリットは、繰り返しの作業が毎回期限どおりに完了し、何が変わったかの記録も残ることです。

• メンテナンスが期限どおりに行われます。リンク切れ、古くなった情報、メタディスクリプションの抜けは、年に一度の大掃除ではなく、スケジュールに沿って修正されます。
• 変更を取り消せます。バックアップ、変更前のコピー、プルリクエストにより、エージェントによるどの変更も追跡して元に戻せます。
• 引き継ぎが減ります。ライター、開発者、SEO 担当者の間で作業を受け渡す代わりに、1つのエージェントが同じプルリクエストでコンテンツ、テンプレート、チェックを変更できます。
• 適したスタックなら、運用コストを低く抑えられます。SaaS Hackers 自身のコスト見直しでは、新サイトのために追加のホスティングプラン料金は発生せず、注意すべき主なコストはデプロイ用の Netlify クレジットでした。

エージェント型ウェブサイトでよくある問題と解決方法

エージェントが同じミスを繰り返す。 エージェントは前回のセッションを覚えていません。修正したらすぐに、そのルールを CLAUDE.md またはスキルに書き込み、今後のすべてのセッションがそのルールを踏まえて始まるようにしましょう。

コードでは問題なさそうなのに、実際のページが崩れている。プレビューがなければ、公開されるまで誰もそのページを確認できません。すべてのプルリクエストにデプロイプレビューのリンクを必須とし、マージする前にページそのものを確認してください。

チェックは通るのに、サイトが少しずつ想定からずれていく。チェックで見つかるのは、テストした内容だけです。すり抜けた問題があれば、同じことが起きないようにビルドにそのチェックを追加してください。

コストがじわじわ増える。再ビルド、クロール、API呼び出しには、そのたびに費用がかかります。各エージェントへの指示に上限を盛り込み、再ビルドはまとめて実行し、費用は各実行の引き継ぎレポートに記載させましょう。

エージェントが何を変更したのか分からない。作業のたびに引き継ぎレポートを求めましょう。変更内容、取得したバックアップ、実行したチェック、できなかったことを記載させます。

構築を外部に依頼する場合に確認すべきこと

エージェンティックなWebサイトの構築を代理店や開発者に依頼する場合は、デザインだけでなく、ガードレールも見せてもらってください。信頼できるパートナーであれば、次のものを示してくれます。

• プロジェクトの指示ファイルと、その中のルール
• ドライランとバックアップの手順を備えたコンテンツ用スクリプト
• 実際の問題があれば失敗するビルドチェックと、その実行コマンド
• エージェントが変更してよい範囲と、人が承認すべき範囲の明確な区分
• デプロイやAPI利用を含む運用コストの書面での提示

専門家を比較するには、B2B SaaSに強いWebデザイン会社のおすすめ一覧をご覧ください。

SaaS Hackersについて

SaaS Hackersは、B2B SaaSの専門家が実践的な知見を共有するコミュニティです。マーケター、ストラテジスト、ビルダーなど、成長を支える人たちによって運営されています。ガイド、ハンドブック、トップリストを公開し、B2B SaaSマーケティング会社と専門家のディレクトリも運営しています。SaaS Hackersを運営するのはTeam 4で、B2B SaaSマーケティングを手がける同社自身もディレクトリに掲載され、ランク付けされています。