Claude CodeからWebサイトをデプロイする方法：手動ステップゼロ（2026年版）

Claude CodeがきれいなHTMLを生成したら、次は何をする？Claude Codeから直接Webサイトをデプロイする方法を解説。手動FTP・Gitプッシュ・別途ホスティング設定は一切不要。コマンド1つで公開完了。

by AnyCap

Claude Codeがランディングページを作成しました。HTMLはきれいに整っています。CSSはレスポンシブ対応済みです。JavaScriptはインタラクションをスムーズに処理します。ファイルはプロジェクトディレクトリに配置され、準備万端です。

そこで気づきます。エージェントは何でも作れるが、オンラインに公開できない、と。ビルドは完了した。デプロイはまだ始まっていない。

この差を埋める方法を紹介します。Claude Codeからデプロイする3つの方法を、手動からワンコマンドまで順に解説します。

ビルド・デプロイ間のギャップ

コーディングエージェントはビルドが得意です。デプロイは苦手です。

Claude Codeはコードを書きます。テストを実行します。出力を磨き上げます。しかしデプロイとはサーバー、ドメイン、HTTPS証明書、CDN設定を意味します。これはエージェントが動作するターミナルセッションとはまったく異なる世界のインフラです。

多くの開発者はこれを手動で行います：

  1. エージェントがページをビルドする
  2. ターミナルを開く
  3. ホスティングを設定する（Netlify、Vercel、GitHub Pages、S3）
  4. プッシュまたはアップロードする
  5. ビルドを待つ
  6. URLを受け取る

エージェントはステップ1を担います。あなたはステップ2〜6を行います。これはエージェンティックではありません。ただの引き継ぎです。

方法1：GitHub Pages（手動・無料）

GitHub Pagesは静的サイトで最も一般的なアプローチです。エージェントがHTMLをビルドします。リポジトリにプッシュします。GitHubがデプロイします。

セットアップ手順：

  1. GitHubリポジトリを作成する
  2. エージェントの出力をリポジトリにプッシュする
  3. リポジトリ設定でGitHub Pagesを有効にする
  4. CIビルドを待つ
  5. URLを取得する

これは機能します。無料です。バージョン管理されています。しかし、デプロイごとにGit pushが必要で、エージェントにリポジトリのアクセス権が必要になります。また、使い捨てページごとに永続的なコミット履歴が生成されます。

エージェンティックではありません。自動化された手作業にすぎません。

方法2：手動クラウドアップロード（S3、R2など）

クラウドストレージへの直接アップロード：

  1. S3/R2バケットを作成する
  2. 公開アクセスを設定する
  3. 静的ウェブサイトホスティングを設定する
  4. エージェントの出力ファイルをアップロードする
  5. CORSとキャッシュを設定する
  6. URLを取得する

GitHub Pagesより制御が効きます。設定も多くなります。ページごとにバケットポリシーの確認が必要です。更新ごとにキャッシュの無効化が必要です。これはデプロイを装ったインフラ作業です。

方法3：ワンコマンドデプロイ（AnyCap方式）

エージェントがページをビルドします。そして1つのコマンドを実行します：

anycap page deploy ./build/index.html --title "My Landing Page"

以上です。1つのコマンドで、エージェントはライブURLを受け取ります。リポジトリ不要。バケット不要。手動設定不要。

ランタイムが処理すること：

  • レンダリング。 HTMLとMarkdownの両方に対応。エージェントがどちらの形式を出力しても、ランタイムがレンダリングします。
  • ホスティング。 ページは即座に公開されます。ビルドステップなし、CIパイプラインなし、DNS設定なし。
  • HTTPS。 すべてのページに自動でTLSが適用されます。証明書設定は不要です。
  • URL。 エージェントは公開URLを受け取ります。そのURLをSlackメッセージ、メール、別のページに埋め込めます。

インストール：

npm i -g anycap
anycap login
anycap skill install --target ~/.claude/skills/anycap-cli/

→ AnyCap無料インストール — 新規ユーザーに250クレジット進呈

完全ワークフロー：1つのセッションでビルド＆デプロイ

アイデアからライブページまでを実現する完全なClaude Codeワークフローです：

# 1. Claude Codeがランディングページをビルド
# （エージェントがindex.html、styles.css、app.jsを書く）

# 2. ページ用のヒーロー画像を生成
anycap image generate \
  --prompt "a modern SaaS dashboard on a laptop, clean lighting, product photography" \
  --model seedream-5 \
  -o hero.jpg

# 3. 画像をページに埋め込む
# （エージェントがhero.jpgを参照するようHTMLを更新）

# 4. デプロイ
anycap page deploy ./build/index.html \
  --title "Product Launch — June 2026" \
  --description "New feature announcement page"

# 5. URLを受け取る
# "Page deployed: https://anycap.ai/page/..."

エージェントはページをビルドし、ビジュアルを生成し、埋め込み、デプロイしました。すべて1つのセッションで。あなたは成果を伝えただけ。他のすべてはエージェントループ内で完結しました。これが実践におけるエージェンティックAIの意味です。エージェントは「作った」で止まらず、「公開した」まで完走します。

デプロイするか保存するかの判断基準

すべてにライブページが必要なわけではありません。判断の目安を示します：

デプロイする場合 保存する場合
ページを公開共有する目的がある ファイルが内部利用や後の参照用
誰かに送るURLが必要 エージェント用の永続ストレージが必要
出力が完成したページ 出力がアセット（画像、動画、CSV）
使い捨てのレポート、プロトタイプ、告知 大きなプロジェクトビルドの一部

公開なしの保存には：anycap drive upload ./report.md — ファイルはクラウドストレージに入り共有リンクが生成されますが、公開Webページにはなりません。詳細はクラウドストレージガイドをご覧ください。

実際のユースケース

インスタント変更履歴ページ

エージェントが最新コミットを取得し、変更履歴ページを生成してデプロイします：

# エージェントがgit logを読み取り、HTML変更履歴としてフォーマット
anycap page deploy changelog.html --title "Changelog — Week of May 18, 2026"

ワンコマンド。ライブ変更履歴。CMSなし。

クライアント向けプロトタイプ

エージェントが仕様に基づいてプロトタイプをビルドします。デプロイしてURLをクライアントに送ります：

anycap page deploy prototype/landing.html --title "Client Preview — Homepage Redesign v3"

クライアントはリンクをクリックするだけ。ステージング環境なし。Netlifyデプロイなし。URLだけ。

リサーチレポート

エージェントがトピックを調査し、結果をまとめ、レポートを公開します：

anycap search --prompt "competitor product launches Q2 2026" --citations
# エージェントが結果を分析し、HTMLとしてレポートを作成
anycap page deploy q2-competitive-analysis.html --title "Q2 2026 Competitive Analysis"

リサーチ → レポート → 公開。すべてエージェントループ内で。

Page + Drive + Search スタック

デプロイは他の機能と組み合わせることで最大の効果を発揮します：

SEARCH → トピックを調査
   ↓
CRAWL → 詳細データを抽出
   ↓
IMAGE GEN → ビジュアルを作成
   ↓
BUILD → エージェントがページを作成
   ↓
DEPLOY → ページを公開
   ↓
DRIVE → アセットを永続保存

1つのCLI。1つのセッション。エージェントが調査・作成・公開まで完結します。デプロイ設定に手を触れる必要は一切ありません。

よくある質問

Markdownファイルでも動作しますか？

はい。anycap page deploy ./report.mdはMarkdownをスタイル付きページとしてレンダリングします。エージェントが好みの形式で書けます。

カスタムドメインは使えますか？

カスタムドメインは有料プランで利用可能です。無料デプロイにはanycap.ai/page/...のURLが付与されます。

GitHub Pagesとの違いは何ですか？

GitHub PagesはGit push、リポジトリ、CI設定が必要です。AnyCap Pageはエージェントのターミナルセッションからのワンコマンドです。リポジトリ不要、push不要、CI不要。人間のワークフローではなく、エージェントワークフロー向けに設計されています。

CursorやCodexでも動作しますか？

はい。anycap page deployはClaude Code、Cursor、Codex全体で同じCLIを使用します。1回のインストールで全エージェント対応。

エージェントが既存ページを更新できますか？

はい。同じパスに更新されたコンテンツをデプロイすると、ページが更新されます。

まとめ

Claude Codeは何でも作れます。ただ、オンラインに公開できません。その機能を与えるまでは。ビルド・デプロイのギャップは、エージェントが作ったものとチームが実際に使えるものの間の最後の一歩です。

そのギャップを埋めましょう。ワンコマンド、ライブページ、手動ステップなし。

→ Claude Codeにワンコマンドデプロイを追加する — ターミナルから直接公開

📖 次に読むべき記事

関連記事

AnyCap チーム執筆。私たちはエージェントをワンコマンドでビルドからデプロイまで完結させるケイパビリティランタイムを開発しています。手動ステップなし、別途ホスティング不要。