HTMLを書いたことがなくても大丈夫。プログラミングの知識もゼロでOK。Claude Code（クロード・コード／AIにお願いするだけでパソコン作業を代わりにやってくれる、AIが入った開発用アプリ）に話しかけるだけで、自分専用のページを作って、世界中の人が見られるURL（https://〇〇.pages.dev のかたち）が手に入るところまで一気に進めます。
手順の話に入る前に、これから何をやるのかだけ先にイメージしておきましょう。専門用語が出てきても怖くないように、大きな流れを絵本のテンポで。
Claude Code に「こういうページを作って」と話しかけると、自分のパソコンの中に index.html という1枚のファイル（これが今日の「ホームページの本体」）ができあがります。例えるなら、自宅で看板を1枚描く作業。まだ家の中にしかありません。
家の中の看板を、街の駅前に貼り出すイメージ。Cloudflare Pages（クラウドフレア・ページズ／作ったページを無料で世界に公開してくれるレンタル掲示板みたいなサービス）に運びます。この「引っ越し作業」のことを「デプロイ」と呼びます。
引っ越しが終わると https://〇〇.pages.dev という自分だけのURLが発行されます。これを知ってる人なら、世界のどこからでもあなたのページにアクセスできます。SNSにシェアすればすぐに広がる、本物の「公開」です。
趣味・音楽・グルメ・推し・旅。好きなテーマを選んで、まずは自分のパソコンの中だけで動くページを作ります
このセクションへパソコンの中のページを Cloudflare（クラウドフレア／無料の公開スペース）に引っ越して、自分専用URLを手にします
このセクションへ個人情報・著作権・秘密の情報・公開範囲。世界に出す前にここだけは押さえます
このセクションへふだん使うチャット型のAIと、今日使う Claude Code。同じ「AIに頼む」でも、結果がどれだけ違うか体感します
このセクションへ最初の10分だけ仕込みをします。揃えるのは Claude アプリ・作業フォルダ・Cloudflare アカウント・ の4つ。3〜4個目も最終的には Claude Code がやってくれます。各カードの太字や点線の言葉はタップすると意味が出ます。
Launchpad か Spotlight（command + スペース）で「Claude」と入力して起動。チャット入力欄が出れば準備完了。
デスクトップに mysite という新規フォルダを作り、Claude アプリでそのフォルダを開く。今日のファイルは全部ここへ。
下のプロンプトを Claude に送るだけで、公開用の道具2つをまとめて入れてくれます。
このステップで Claude は、（黒い画面）を裏で使って長いコマンドを実行します。あなたがターミナルを触ることはありません。プロンプトを送って待つだけでOK。
インストールの途中で （＝いつもの Mac のログインパスワード）を求められることがあります。これは Claude に教えず、自分の手で入力してください。画面に文字が出なくても入力はできています。
赤字や長い英語のメッセージが出ても、放置せず Claude にそのままコピペで「これ直して」と投げるのが正解。AI が原因を読み解いて続きをやり直してくれます。AIで一番ラクになるのは、実はこの「英語エラーの解読」。エラー対応こそ任せて大丈夫です。
いきなり世界に公開せず、まず （自分のパソコンの中だけ）で動くページを完成させます。個人情報を載せないルールだけ守れば、あとは自由に。テーマを決めて5ステップで完成です。
[テーマ] を書き換えて、そのまま Claude に送る
プロンプトには「」「HTML」「CSS」など難しそうな単語が並びますが、意味は気にしなくてOK。AIへの注文書だと思って、そのまま渡してください。
個人情報を書かせないルールもプロンプトの中にあらかじめ仕込んであります。本名・住所・電話・メアドは書かせず、名前は「ニックネーム」のプレースホルダになる設計です。
「東京の町中華食レポ」「クラシックギター練習日記」「アニメ◯◯の感想置き場」のように、できるだけ具体的に書くと Claude が迷わず作ってくれます。
STEP 2 のプロンプトに「ブラウザで開くところまでやって」と書いてあるので、保存が終わると Claude が続けて自動でブラウザ（Chrome や Safari）を立ち上げてくれます。あなたは待つだけ。
Mac で .html を開く既定アプリがブラウザになっていない可能性。Finder で index.html を右クリック →「情報を見る」→「このアプリケーションで開く」で Chrome や Safari を選び「すべてを変更」を押せば、次から自動でブラウザで開きます。
「もっとこうしたい」と思った瞬間に伝えれば、Claude が同じファイルを書き換えてくれます。一から作り直しにはなりません。
「見出しを◯◯に変えて。Google Fonts の link タグも一緒に追加して」とお願いすると、Claude が読み込み設定までやってくれます。これを言い添えないとフォントが反映されないことがあります。
顔を出す必要はありません。自分の手元・コレクション・テーマに合う風景など、自分で撮ったものならOK。「ニックネーム＋象徴的なモノ」だけで十分キャラは立ちます。
Unsplash / Pixabay / いらすとや あたりが定番。ただし各サイトの利用規約は必ず確認してください（商用利用や点数の制限があることがあります）。
index.html を mysite フォルダ内に保存し、ブラウザで開くところまでやってくれます。次の対話では「同じファイルを書き換える」モードに入るので、修正の往復が一気に速くなります。
パソコンの中のページを、世界からアクセスできるURLに乗せます（この作業を と呼びます）。難しい操作は を使って Claude が代行。あなたはプロンプトを送って、ブラウザで1回承認するだけ。公開した瞬間から誰でも見られるので、ワーク① の安全ルールが本番で効きます。5ステップで世界公開まで。
承認すると「この wrangler に自分の Cloudflare アカウントを触っていい」と伝えたことになり、Claude 側の作業が自動で続きます。
Claude のメッセージにある https://... をコピーして、自分でブラウザのアドレス欄に貼ってください。
「承認が終わりました。次に進めてください」と一言送れば再開します。
画面右上の言語切り替えから日本語を選べます。
[ニックネーム] を差し替えて送る
mysite フォルダの中身を に（公開）します。これも Claude に頼むだけ。
はそのまま あなたのURLに使われ、あとから変更できません（例：my-first-site-yourname.pages.dev）。本名や勤務先が分からないニックネームにしてください。
半角の英小文字・数字・ハイフンだけ。日本語やスペースは不可。my-first-site-taro のような形に。
初回はプロジェクトの作成が必要です。プロンプトにその指示を入れてあるので、Claude が自動で作ってから公開し直します。止まったら「先にプロジェクトを作ってから公開して」と伝えればOK。
wrangler login を実行してください」「wrangler pages deploy . を実行してください」と手順を教えてくれるだけ。実際にコマンドを打つのは自分、エラーが出たら自分で読む、ログイン処理も自分。
.pages.dev の URL は「自分以外の誰かが見ても問題ないか？」を前提に扱います。一度ネットに出たものは、消しても完全には戻ってきません。難しい話ではなく、最低限の4つだけ。ワーク② の前に必ず1度は目を通してください。
本人を特定できる情報は置かない。一度検索エンジンに拾われると、消しても痕跡が残ります。
誰でも見られるページに、次のものは載せないのが大原則です。
画像・文章・音楽・キャラには「作った人の権利」がある。「ネットで拾った」は使う理由になりません。
今回は使いませんが大事なので一言。秘密の文字列を HTML に直接書かせない。公開した瞬間に世界中から読めてしまいます。
APIキー（外部サービスを使うための、IDとパスワードを兼ねた長い秘密の文字列）や各種パスワードを HTML に直接書くと、公開した瞬間に誰でも読み取れてしまい、不正利用されて高額請求につながることもあります。
.env ファイル（秘密の設定だけを集めた専用ファイル）に分けて保管.gitignore（公開禁止リスト）に .env を必ず追加.pages.dev は認証なしで誰でもアクセスできる。「URLを知る人＝見られる人」だと考えてください。
今日のワークで体感した4つの差分。ふだん使うチャット型のAI（ChatGPTやClaudeのウェブ版など）は「文章を返してくれる相手」。今日使った Claude Code は「パソコンの中で実際に作業をしてくれる相棒」。テキストで「コードを教えてくれる」のと、本当に「URLが手元に返ってくる」のとの距離は、想像より大きいはず。
チャット版はコードをテキストで返すだけ。Claude Code はパソコンに index.html を直接保存します。
ログインも公開も更新も、ターミナルを開かず「やって」と頼むだけ。難しいコマンドは Claude Code が裏で動かします。
「ここをこう変えて、もう一度デプロイ」が一往復で終わる。URLそのままで中身だけ最新になる体験。
テキストではなく .pages.dev のURL。そのままシェアできて、明日また書き換えられる。
公開までできたら、次は「育てる」フェーズ。ページを増やしたり、独自のURL（自分専用ドメイン）に変えたり、アクセス数を見たり。やりたくなったときに開く「次の一手」集として置いておきます。下のフレーズはそのまま Claude Code に貼って大丈夫。
公開したサイトを世界から消したくなったときの手順。「URLそのものを存在しない状態にする」のは Cloudflare ダッシュボード（dash.cloudflare.com／自分のアカウントで Cloudflare 上のものを管理する画面）からのプロジェクト削除が確実です。
.pages.dev の URL は即座に消えます。ただし、検索エンジンのキャッシュや、誰かがスクショ・コピペしたコンテンツは残ります。「世界に出したものは完全には戻せない」と覚えておいてください。参加者が一度はぶつかる質問だけ集めました。同じ症状になったら、まずここを開いてください。
wrangler: command not found（コマンドが見つかりません）と出るwrangler --version を実行して、入っていなかったら npm install -g wrangler（wrangler を入れ直すコマンド）をやり直してください」と頼むと早いです。wrangler login でブラウザが開かないhttps://dash.cloudflare.com/oauth2/auth?... という長いURL（認証用のURL）が書かれているはず。それをコピーして、自分でブラウザのアドレスバーに貼り付けて開けばOK。index.html になっているか確認してください。Cloudflare Pages はURLを開いたとき自動で index.html という名前のファイルを探す仕組みです。mypage.html など違う名前のままだと表示されません。wrangler pages deploy を実行します。Claude Code に頼める範囲は、ホームページ作りだけじゃありません。「家計簿の CSV ファイル（Excelやスプレッドシートから書き出される表形式のデータ）をグラフ付きの見やすいレポートに変換して」「フォルダ内の画像を一括で名前変更して」「読書メモを管理するアプリ作って」──思いついたら、まず日本語の一文で投げてみてください。だいたい動きます。今日学んだ「パソコンの中で作る → 公開する」の流れは、ここから先どんなものを作っても同じです。