1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@alpha123

[手順解説] 生成AIでWebサイトを高速作成して無料公開するまで

1
Last updated at Posted at 2026-05-18

AIエージェントで試しにWebサイトを無料で作って公開してみた

はじめに

Claude CodeやCodexなどのAIエージェントを使い始めると、「コードを書いてもらえるなら、Webサイトも作れるんじゃ？」と思うことがあります。

でも、いざやってみようとすると疑問が出てきます。

  • どのフレームワークを使えばいいの？
  • 公開するにはどのサービスを使うの？
  • クレカ登録や月額料金がかかるの？
  • そもそも何から始めればいい？

この記事は、そういった**「AIエージェントを使い始めたばかりで、試しにWebサイトを作って公開してみたいけど、最初はお金をかけたくない」**という方に向けた、ゼロから公開までの手順書です。

結論から言うと、Claude Code（またはCodex）+ Cloudflare Pagesの組み合わせなら、クレカ登録なし・月額料金なしで本格的なWebサイトを公開できます。

「無料」の範囲について: この記事で「無料」と言っているのはサイトの運営・公開にかかる費用のことです。AIエージェント（Claude CodeやCodex）の利用料は別途かかります。また、独自ドメイン（example.com のような自分専用のURL）を使いたい場合は年間1,000〜2,000円程度の費用が発生します。「とりあえず公開してみる」だけなら完全無料で始められます。

実際にこの手順で作ったサイトが react-guide.com です。

この記事の前提

  • Claude Code（またはOpenAI Codex）が使える状態である
  • GitHubアカウントを持っている
  • ターミナル（macOS: Terminal、Windows: PowerShell）を多少触れる

コードの知識は問いません。書くのはAIの仕事です。

なぜこの構成なのか

Reactとは何か

ReactはMeta（Facebook）が開発した、Webサイトの画面を作るためのJavaScriptライブラリです。

Webサイトは大きく「見た目（HTML/CSS）」と「動き（JavaScript）」で構成されていますが、ページ数が増えたり機能が複雑になるほど管理が大変になります。Reactはそれをコンポーネントという部品単位で整理できるようにしたしくみで、「ヘッダー」「記事カード」「ボタン」などをパーツとして作り、組み合わせてページを構築します。

非エンジニアの方がReactのコードを読み書きできなくても問題ありません。この記事ではAIエージェントがコードを生成するので、指示を出すだけで動くものができます。

なぜReactなのか

Webサイトを作るフレームワークは色々ありますが、ReactはClaude CodeなどAIが最も得意とする構成のひとつです。

  • 世界シェアNo.1のフロントエンドフレームワーク（学習リソースが豊富）
  • AIへの指示が通りやすい（「Reactでボタンを作って」と言えばそのまま動く）
  • Viteという高速ビルドツールと組み合わせることで、開発→公開のサイクルが速い
  • TypeScriptとの相性が良く、品質の高いコードが生成されやすい

「Reactじゃなくても良くない？」という疑問はもっともです。シンプルなHTMLページなら必要ありません。ただ、ページ数が増えたり動的な機能を追加したりと成長させやすい点でReactは優秀です。

なぜCloudflare Pagesなのか

Cloudflareはサイトを世界中に高速配信するためのインフラサービスです。

特徴 内容
無料枠が広い 月500ビルド・帯域無制限・クレカ登録不要
世界最速レベル 300以上のデータセンターからユーザーの近くで配信
独自ドメイン対応 取得したドメインを無料で接続できる
HTTPS自動対応 SSL証明書の設定が不要
GitHubと連携可能 pushするだけで自動デプロイ

GitHub Pages・Vercelとの比較

静的サイトの無料公開サービスとして代表的な3つを比較します。

Cloudflare Pages GitHub Pages Vercel
費用 無料枠あり 無料枠あり 無料枠あり
帯域制限 制限なし 月100GB 月100GB
ビルド回数 月500回 月10回/時間 月6,000分
商用利用 無料枠でも可 可 ⚠️ 無料枠は不可（要有料プラン）
クレカ登録 不要 不要 不要
プライベートリポジトリ 可 ⚠️ GitHubの無料プランでは不可 可
配信速度 ◎（CDN拠点が最多） △ ○

Vercelは開発者向けの機能が豊富ですが、無料プラン（Hobby）は商用利用禁止という制約があります。将来的に広告収入を得たい場合や仕事で使いたい場合は注意が必要です。GitHub Pagesはシンプルで使いやすい反面、帯域や機能に制限があります。

Cloudflare Pagesは「無料枠での商用利用OK・帯域無制限・クレカ不要」という点で、試しに始めるには最もリスクが少ない選択肢です。ただし無料枠にも月500ビルドという上限はあるため、「完全に無制限で無料」というわけではありません。個人の小規模サイトであれば実質的に上限に達することはほぼないでしょう。

クレジットカードは登録しない方針で進める

この記事ではクレジットカードを登録しないことを前提に進めます。その理由：

  • Cloudflare Pagesの無料枠はクレカなしでも全機能使える
  • 登録すると有料プランへの誤操作・自動アップグレードのリスクが生じる
  • 無料枠の条件が将来変わった場合、知らぬ間に課金されることがある
  • 使用状況の定期確認など管理コストが増える

クレカ登録を促す画面が出ても「後で」「スキップ」を選んで問題ありません。Pages の静的サイト配信は無料枠で十分に運用できます。

STEP 1：Cloudflareアカウントを作成する

まずCloudflareのアカウントを作成します。

1-1. サインアップページにアクセス

ブラウザで https://dash.cloudflare.com/sign-up を開きます。

1-2. メールアドレスとパスワードを入力

  • Email にメールアドレスを入力
  • Password にパスワードを入力（8文字以上、英数字混在推奨）
  • 「Create Account」ボタンをクリック

1-3. メール認証

登録したメールアドレスに確認メールが届きます。メール内の「Verify email」ボタンをクリックして認証を完了してください。

1-4. ダッシュボードに入れれば完了

ログイン後、左側にメニューが並ぶダッシュボード画面が表示されれば登録完了です。

ポイント: この時点ではドメイン等は何も設定しなくてOKです。Pages のデプロイ先として使うだけなら、追加設定は不要です。

⚠️ クレジットカードの登録は不要です: 登録を促す画面が表示されることがありますが、スキップして問題ありません。無料枠の範囲内であればカード情報なしで全機能を利用できます。

STEP 2：Claude CodeでReactプロジェクトを作る

2-1. ターミナルを開く

  • macOS: Spotlight（⌘+Space）で「Terminal」と検索して起動
  • Windows: スタートメニューで「PowerShell」と検索して起動

2-2. プロジェクトを作るフォルダに移動

# デスクトップに移動する場合
cd ~/Desktop

# 任意の場所でOK（例：Documentsの中）
cd ~/Documents

2-3. Claude Codeを起動してプロジェクトを作成

claude

Claude Codeのプロンプトが起動したら、以下のように指示します：

Reactのサイトを作りたい。Vite + React + TypeScript + Tailwind CSSの構成で、
「my-website」というプロジェクトを作成して。
ページはトップページだけでいいので、シンプルなデザインで作ってほしい。

AIがコマンドを実行し、プロジェクトを自動生成します。生成が完了したら以下でプロジェクトフォルダに移動します：

cd my-website

2-4. ローカルで動作確認

npm install
npm run dev

ブラウザで http://localhost:5173 を開くと、作成したサイトが表示されます。

この状態でClaude Codeにデザインや内容の変更を依頼できます：

トップページに自己紹介を追加して。背景色はネイビー系にして。

満足のいくサイトができたら次のステップへ。

STEP 3：GitHubにコードをアップロードする

3-1. GitHubで新しいリポジトリを作成

まずブラウザでリポジトリ（コードの保管場所）を作ります。

  1. https://github.com にアクセスしてログイン
  2. 右上の「+」ボタン → 「New repository」をクリック
  3. 以下を設定：
    • Repository name: my-website（プロジェクト名に合わせる）
    • Public / Private: どちらでも可（Privateでも無料でCloudflare Pagesにデプロイできる）
    • 「Create repository」をクリック
  4. 作成後に表示されるページに https://github.com/あなたのユーザー名/my-website.git という形式のURLが表示されます。このURLをコピーしておいてください。

3-2. Claude Codeにpushを依頼する

ターミナルでClaude Codeが起動している状態（STEP 2の続き）で、コピーしたURLを使って以下のように依頼します：

GitHubにpushして。リポジトリのURLは
https://github.com/あなたのユーザー名/my-website.git

Claude Codeが自動的に以下の操作をまとめて実行してくれます：

  • git init（Gitの初期化）
  • git add .（ファイルをステージング）
  • git commit（変更を記録）
  • git remote add origin（GitHubと紐付け）
  • git push（GitHubにアップロード）

途中でGitHubの認証を求められる場合があります。その場合はClaude Codeの指示に従って認証を進めてください。

GitHubのリポジトリページをリロードしてコードが表示されれば完了です。

STEP 4：Cloudflare PagesでWebサイトを公開する

4-1. Cloudflareダッシュボードを開く

https://dash.cloudflare.com にアクセスしてログインします。

4-2. Pages プロジェクトを作成

  1. 左側メニューの「Workers & Pages」をクリック
  2. 「Create application」ボタンをクリック
  3. 「Pages」タブを選択
  4. 「Connect to Git」をクリック

4-3. GitHubと連携する

  1. 「Connect GitHub」ボタンをクリック
  2. GitHubの認証画面が開くので「Authorize Cloudflare Pages」を承認
  3. リポジトリ選択画面で my-website を選択して「Begin setup」をクリック

4-4. ビルド設定を入力する

以下の通り設定します（Vite + React の場合）：

項目 設定値
Production branch main
Framework preset None（手動設定）
Build command npm run build
Build output directory dist

入力したら「Save and Deploy」をクリック。

4-5. デプロイ完了を待つ

1〜3分ほどでビルドが完了します。画面上に緑のチェックマークと your-project.pages.dev のようなURLが表示されれば公開完了です。

そのURLをブラウザで開くと、世界中からアクセスできる状態になっています。

参考: Cloudflare Pages 公式ドキュメント（Git連携）

STEP 5：サイトを修正して再デプロイする

ここからが本番です。STEP 4でGitHubとCloudflareを連携したことで、以降の更新はブラウザを開かずにClaudeへの指示だけで完結します。

5-1. Claude Codeで修正を依頼する

Claude Codeを起動した状態で、修正したい内容を自然な言葉で伝えます：

トップページのタイトルを「私のポートフォリオ」に変更して

お問い合わせページを新しく追加して。名前とメールアドレスと本文を入力できるフォームにして

全体的に配色をダークモードに変えて

AIがファイルを修正します。修正後はローカル（ http://localhost:5173 ）で見た目を確認しておくと安心です。

5-2. GitHubにpushする（Claudeに依頼）

確認が取れたら、そのままClaude Codeに依頼します：

GitHubにpushして

Claude Codeが git add → git commit → git push を自動実行します。

5-3. Cloudflareが自動でデプロイする

STEP 4でGitHub連携を設定した時点で、GitHubはCloudflareに対して「このリポジトリに変更があったら通知する」という設定（Webhook）が自動登録されています。

git push をすると：

  1. GitHubがCloudflareにWebhookで通知
  2. CloudflareがGitHubからコードを取得
  3. Cloudflare側でビルド・デプロイを実行

という流れで自動的に処理されます。「Cloudflareがリポジトリを常時監視している」というよりは、pushのたびにGitHubから通知が飛ぶ仕組みです。

  • デプロイ状況はCloudflareダッシュボードの Workers & Pages → プロジェクト名 で確認できます
  • 通常1〜3分で完了し、公開URLに変更が反映されます

ブラウザ操作は一切不要です。Claude Codeに指示を出すだけで、修正からサイト反映まで完結します。

オプション①：GitHubにpushしたら自動デプロイされるようにする

STEP 4の方法でもGitHub連携により自動デプロイはされますが、GitHub Actionsを使うとビルドプロセスをより細かく制御できます（サイトマップ自動生成等）。

Cloudflare APIトークンの取得が必要です。

APIトークンの取得

  1. Cloudflareダッシュボード右上のアイコン → 「My Profile」
  2. 左メニュー「API Tokens」→「Create Token」
  3. 「Edit Cloudflare Workers」テンプレートを選択（または Custom token）
  4. Permissionsを以下に設定：
    • Account / Cloudflare Pages / Edit
  5. 「Continue to summary」→「Create Token」
  6. 表示されたトークン文字列をコピー（この画面を閉じると二度と見れない）

Account ID の確認

Cloudflareダッシュボードの右側サイドバー、または以下のURLで確認できます：
https://dash.cloudflare.com/ → ドメインを選択した後のURLの数字部分

GitHub Secretsに登録

  1. GitHubのリポジトリページを開く
  2. 「Settings」タブ → 左メニュー「Secrets and variables」→「Actions」
  3. 「New repository secret」で以下の2つを登録：
Name Value
CLOUDFLARE_API_TOKEN 先ほど取得したトークン
CLOUDFLARE_ACCOUNT_ID CloudflareのAccount ID

GitHub Actionsファイルの作成

プロジェクトに .github/workflows/deploy.yml を作成し、Claude Codeに以下を依頼するか、直接作成します：

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
      - run: npx wrangler pages deploy dist --project-name my-website --commit-message "deploy"
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

これで git push するたびに自動でデプロイされます。

オプション②：独自ドメインを取得して設定する

your-project.pages.dev のままでも公開はできますが、収益化（Google AdSense等）を目指すなら独自ドメインがほぼ必須です。

ドメインの取得

ドメインは年額1,000〜2,000円程度から取得できます。主なサービス：

.com は年間1,000〜1,500円、.net .org も同程度です。日本語ドメイン（.jp）は高め。

この記事で紹介しているサイト（react-guide.com）はお名前.comでドメインを取得しました。日本語UIで手順がわかりやすく、サポートも日本語対応しているため、国内在住の方には使いやすい選択肢です。

⚠️ Cloudflare Registrarを使う場合はCloudflareへのクレカ登録が必要です。Cloudflare側にカード情報を渡したくない方は、お名前.com や Namecheap でドメインを取得し、ネームサーバーをCloudflareに向ける方法を選んでください（手順は少し増えますが、Cloudflare側にカード情報を渡さずに済みます）。

Cloudflare Pagesにドメインを設定する

  1. Cloudflareダッシュボード → Workers & Pages → 作成したPagesプロジェクトを選択
  2. 「Custom domains」タブ → 「Set up a custom domain」
  3. 取得したドメイン名を入力（例: my-website.com）
  4. DNSの設定に従って、ドメイン取得サービス側でネームサーバーを変更

Cloudflare Registrarでドメインを取得した場合は自動設定されます。他サービスの場合はDNS設定の変更が必要です（サービスによって手順が異なるため、各サービスのサポートを参照）。

設定後、数時間〜48時間でドメインが有効になります。

まとめ

ステップ 内容 費用 クレカ要否
Cloudflareアカウント作成 メール登録のみ 無料 不要
Claude Codeでサイト生成 プロンプト入力のみ Claude Codeの利用料のみ —
GitHubにpush コマンド数行 無料 不要
Cloudflare Pagesにデプロイ 設定画面で数項目入力 無料 不要
独自ドメイン（オプション） ドメイン購入 年1,000〜2,000円 必要（ドメイン購入時のみ）

コードを一行も書かずに、AIの指示出しだけで本格的なWebサイトが作れる時代です。

この記事の手順で実際に作ったReact学習サイトが https://react-guide.com です。Reactを学びたい方はぜひ参考にしてみてください。

参考リンク

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?