ブラウザだけで、AI（Claude Code)を使って、モダンなWebページを作って公開する方法
開発環境を準備せず、ブラウザだけで、モダンなWebページを作り、公開してしまうステップを解説します
この記事では、「Claude、Claude Codeの進化」によって、Webページ作成が、真に民主化（誰でも）できたことを知ってもらうためのものです。
想定読者: 「非エンジニア」「非デザイナー」「非コピーライター」。つまり普通の人
必要なもの: 「ブラウザだけ」（開発環境を用意しなくてOK。スマホだけでもできます）
実現するもの: 「プロが作ったようなデザイン、配色、アニメーション、コピー（メッセージ）のWebページ」
費用: 「初期費用ゼロ、維持費用ゼロ、安全、高速、自動化」
※ Claudeのサブスクが必要です（$20/月）
です。
知らないサービス、用語、仕組みが出てくるかも知れませんが、操作自体は、ものすごく簡単！ということを、感じていただければ嬉しいです。
全体像
以下のような流れで作ります。
Githubにリポジトリ（保管庫）を作る
Cloudflare Pagesを用意する（Github連携させる）
Claude Code on the Web で作成開始
プレビュー専用URLでチェック & 修正
公開（プルリクエストを作って、マージという手順を実行）
１つ１つのステップは、驚くほど簡単です。
(1) Githubにリポジトリを用意する
Githubという世界中で使われているアプリや、システム、Webサイトのデータを保管、管理するためのWebサービスがあります。これを利用し、あなたのWebサイトデータを保管、履歴管理をします。
具体的に行う作業は、「テンプレートから、あなたの保管庫（リポジトリ）を作る」だけです。めちゃくちゃ簡単ですよね？数クリックです。
細かく示します。
Githubアカウントを持っていない人は作成する
スターターテンプレートのページを開く 👉 claude1page
Use this templateボタンから、create new repository をクリック
リポジトリの設定（名前だけでOK。説明は任意。Privateを選ぶと良い）
Create repository をクリック
これだけです！！
簡単ですよね。
(2) Cloudflare Pagesを用意する
こちらも、ものすごく簡単です。
Cloudflare アカウントを持っていない人は作成する
サイドバーの「コンピューティングとAI」から、Workers & Pagesをクリック
アプリケーションを作成する
Cloudflare Pagesのための設定を開く
既存のリポジトリをインポートするを選ぶ
先ほど作ったリポジトリを探してクリックして選択。さらにセットアップへ進む
公開時の名前を好きなものにし、「ビルド出力ディレクトリ」を public 選び、次へ進む
ビルドが行われるので待つ
これまた簡単です。自動的に作成されたページは、空なのでアクセスしても、以下のようになりますが、問題ありません。この後、ページを作って公開したら、解決します。
ここまでの作業も、やってみたら、超簡単です。
(3) Claude Code on the Web で作成開始
いよいよ、Claude Code on the Webで作成開始です。
リポジトリを選択する
ギアアイコンで設定をします 開発環境の設定をします
ネットワークアクセスは、Fullにして、環境変数を設定します（Unsplashの検索ができるようにAPIキーを取得します。ここでは説明しませんが、すごく簡単な作業です） 作りたいWebページについての内容を入れる（計画を見せてとつ加えておく）
画像のように、ざっくり伝えたい内容を思うままにつらつら書いていくだけでOKです！ 計画が示されるので、確認して、追加したいことなどを伝えてGO!（待つだけ）
ゼロからページを生成するステップは、大量の書き込みなどがあるので、時間がかかるので、気長に待ちましょう！ 確認用URLをCloudflare Pagesの設定で見つけてクリックし確認（必要に応じて、さらに対話をして修正をお願いしてもOK）
(4) 確認用URLでチェック
Claude Code on the Web は「開発のための仕組み」を使って、現在公開中のWebサイト（最初は何も公開していませんが）とは別の場所で、Webページを作成、更新します（ブランチと言います）。
この作成したWebページを確認する専用のURLが、発行されるので、それを使って確認します。
Cloudflare Pagesの該当するプロジェクトにアクセス
デプロイタブで、プレビューURLを見つけてクリック
確認（ブラウザで、出来栄えを確認する）
必要に応じて、Claude Code on the Webで修正をお願いする
実行が完了すると、新しいURLが発行されるので、そちらで確認する
何度か繰り返したら「完成！」
(5) 公開
現在は「ブランチ」と言って、枝分かれした状態でプロジェクトを更新しています。それをメインの保存場所へ統合することをマージと言います。マージしてもらいたいものを報告すること（提案すること）を「プルリクエスト」と言います。
とにかく、このプルリクエストという作業を通じて、更新作業をすると本番のURLのWebページが公開されます。
PRを作成をクリック（PRとはPull Request (プルリクエスト)のこと）
Githubに移動するので、フォームに内容を入れてプルリクエストを作成
続いてすぐに「マージ」を実行。Merge Pull Request を実行
少し待つ（本番環境側が更新される）
確認、完成
なんだか、難しそうに感じますが、作業そのものは簡単。
クリックして、メッセージを記入して、確定を２回繰り返すだけ。それだけのことです。
これでなんとWebサイトが公開されてしまいます。
注意点
現在、Claude Code on the Web では、外部へのアクセス（多分、バグ？DNS問い合わせエラーっぽい）ができません。その結果、Unsplashでいい感じに画像を検索し、自動で埋め込むことができません（その代わり、ダミー画像が入る）。
ダミー画像が入ったところは、Claude Code に、Unsplash の画像URLを教えてあげることで、差し替えをしてくれます。
まとめ
(1) 可能性について
開発環境不要で、すぐに作成開始できます。可能性を知るのには、とても良いです。
ただし、使ってみて思ったのは「ゼロから作り出すところ」は、ローカル開発環境の方が適しています。ゼロから作り出すところは、細かい調整、変更が増えます。この時、ローカル開発環境の方が高速で、気軽にできます。確認作業も行いやすいです。
一方で、小さな修正、変更には最高にマッチします。
上記の記事でやった作業と、今回の作業はほぼ同じです。
とにかく、Claude Codeが手軽に使えるのは、面白い体験です。
(2) 注意点
２つあります。
Unsplashの画像が検索できない（今だけかも）
ローカルで開発している場合、ソースコードの整合性を保つために「フェッチ」という作業を行なってください
Github上のブランチは、使い終わったら削除する（手動） ※任意です
Cloudflare Pagesのプレビューデプロイは削除する（手動） ※任意です
追伸
ウェビナーで「実際にやってみせる！」という企画をします。お楽しみに！