とここと AI先生STEP 07
2026-08 版
STEP 07 / 10

自分のページを作って、公開できるようにする

Vault に溜まった情報を、スマホからでも見られる1枚のページにします。 ついでに、Claude Code に「Webページを作らせて世に出す」という一連の流れが手に入ります。 このマニュアル自体も、まったく同じやり方で作られています。

ゴール自分のURLが持てる
所要時間約25分
むずかしさふつう
費用無料枠で足ります
💡点線のついた言葉は押すと意味が出ます。
01

先に決める:何を外に出して、何を出さないか

ここを決めずに進むのが、いちばん危ないパターンです。Vault の中身は、そのままネットに出してはいけません。 会議の書き起こし、取引先の名前、メールの本文が丸ごと入っているからです。

Vault の中(外に出さない) ・会議の書き起こし全文 ・メールの本文 ・取引先の担当者名 ・金額・条件・交渉の経緯 ・私用のやり取り パソコンと非公開リポジトリ の中だけに置く 要約だけ 出しても困らないもの ・今週やることの件数 ・期限が近いものの数 ・自分用のリンク集 ・手順書・チェックリスト ・固有名詞を伏せた進捗 ログイン不要で 公開してよい 中身も見たい場合 Cloudflare Access で 自分のメールアドレスだけ 通す設定をかける URL を知っていても 他人は開けなくなる 迷ったらこちら
図:まずは真ん中(当たりさわりのないページ)から始めるのが安全です。慣れてから右へ広げてください。
⚠️ Cloudflare Pages の URL は、推測されにくいだけで「秘密」ではありません。 誰にも教えていなくても、URL が漏れれば誰でも開けます。「見られたら困るもの」は、ログイン不要のページに置かない。これが線引きです。
02

Cloudflare のアカウントを作る

無料アカウントを作る

dash.cloudflare.com/sign-up でメールアドレスとパスワードを登録します。 独自ドメインは要りません。クレジットカードも不要です。

メールの確認と、2段階認証をオンにする

届いたメールのリンクを開いて確認。そのまま2段階認証(2FA)も設定しておいてください。 ここはサイトを公開する権限を持つアカウントなので、乗っ取られると影響が大きい場所です。

ログインしたまま、Claude Code に戻る

次の手順で、ブラウザ経由の許可画面が出ます。ログイン済みだとスムーズです。

🔑 Cloudflare のパスワードを、Claude Code のチャット欄に貼らないでください。 このあとの接続は、ブラウザの許可画面(OAuth)で行います。あなたがパスワードを打つのは、Cloudflare 自身のログイン画面だけです。
03

まず1枚、当たりさわりのないページを出してみる

いきなり Vault の中身を出さず、練習として「自分用のリンク集」を1枚公開します。 これで「作る → 出す」の流れが体で分かります。

最初の1枚は中身がどうでもいいものにしてください。「作って出す」の流れさえ体で覚えれば、あとは何でも出せます。
PROMPT 07-A最初のページを作って公開する
Cloudflare Pages に、自分用のシンプルなページを1枚公開したいです。
ホームフォルダに my-page というフォルダを新しく作って、そこで作業してください。
(ai-vault の中には作らないでください)

【作るもの】
public/index.html を1枚。中身は次のとおり。
- タイトル: 「(あなたの名前)の作業用ページ」  ← 名前は私に聞いてください
- よく使うリンクの一覧(Gmail・カレンダー・Slack・Obsidian のフォルダなど。私に聞いて決めてください)
- 今日の日付を表示する小さな時計
- スマホでも読める、落ち着いた見た目(グラデーションや派手な装飾は使わないこと)
- 個人情報・社名・取引先名は書かないこと

【公開の手順】
1. Cloudflare へのサインインが必要です。npx wrangler login を使い、
   ブラウザで許可する手順を番号付きで教えてください。
   ※私にAPIトークンやパスワードを入力させないでください。
2. サインインできたら、プロジェクト名を決めて Cloudflare Pages へデプロイしてください。
   プロジェクト名の候補を3つ提案してください(英小文字・数字・ハイフンのみ)。
3. デプロイが終わったら、公開URLを教えてください。
4. そのURLを実際に開いて、ページが正しく表示されているか確認してください。
   表示がおかしければ直して、もう一度デプロイしてください。

【最後に】
- このあと私が「内容を直して出し直す」ときに打てばいい一言を、1行で教えてください。
- 作ったフォルダの中身を、ファイルごとに1行で説明してください。

【禁止】
- ai-vault の中身をこのページに載せないこと。
- 実在の会社名・人名・メールアドレス・電話番号を書かないこと。
公開URLの形:https://(プロジェクト名).pages.dev になります。
次からは:「このページのここを直して、出し直して」と言うだけで反映されます。
つまずきやすいところ症状直し方
ブラウザが開かないサインインの画面が出てこない「ブラウザが開かないので、URLを表示して。自分で貼ります」と頼む
デプロイしたのに古いままURLを開いても内容が前のままブラウザの再読み込み(キャッシュを無視して読み込み)。それでも古ければ、本番向けに出せているかAIに確認させる
404 と出るページが見つからないファイルが public/index.html にあるか確認する
プロジェクト名が使えないすでに使われている別の名前にする。名前は後から変えにくいので、少し長めのほうが安全です
04

Vault の内容を見るページを作る(自分だけが見る)

練習ができたら、本命です。ここからは公開範囲の設定が必須になります。 ログイン不要のままにするなら、固有名詞と本文を出さない作りにしてください。

PROMPT 07-BVault の要約ページを作る
ai-vault の内容を、スマホで見られる1枚のページにまとめたいです。
my-page/public/ の中に status.html として作ってください。

【載せる内容】
1. 今週の動き(会議の件数、取り込まれたノートの件数、最終更新日時)
2. 返事が必要そうなもの(件数と、期限が近い順に上位5件のタイトルだけ)
3. 期限が近いもの(日付順。「動かせない期限」と「調整できる期限」を分けて)
4. AIからの質問(_internal/questions.md の未回答件数と、代表3件)
5. 毎朝の自動処理が動いているか(_internal/last-run.md の直近7日)

【重要な制約 — 必ず守ること】
- メールの本文・書き起こしの本文は載せないこと。
- 取引先の会社名・個人名は、イニシャルまたは「A社」「Bさん」に置き換えること。
- 金額・契約条件は載せないこと。
- 載せるのは「件数」「日付」「短いタイトル」までにすること。

【公開の設定】
公開する前に、次の2つの選択肢を私に提示して、選ばせてください。
 (A) このままログイン不要で公開する(上の制約を守っているので、見られても実害が小さい)
 (B) Cloudflare Access をかけて、自分のメールアドレスだけが開けるようにする
選んだほうの手順を、番号付きで案内してください。
(B) を選んだ場合、私がダッシュボード上で何をクリックすればよいかまで具体的に書いてください。

【更新】
毎朝の daily-vault-sync が終わったあとに、このページも作り直されるようにしたいです。
新しい定期タスクを増やさず、既存のタスクの最後に1行足す形で実現してください。
ポイント:「定期タスクを増やさず、既存の最後に足す」と書いているのは意図的です。本数が増えるほど、朝の失敗と原因追跡が増えます。
ℹ️ Cloudflare Access は無料枠で使えます。「このURLは、この人のメールアドレスでログインした人だけ開ける」という関所を、 サイトの前に置く仕組みです。Vault の中身に近いものを出すなら、これを付けてください。
05

無料枠 — ここはほぼ気にしなくていい

結論は「無料のままで大丈夫」です。Cloudflare は、見られる回数も通信量も無料で無制限。 ただし1つだけ、うっかり当たる上限があるので、そこだけ覚えておいてください。

無料有料(月5ドル)この使い方だと
ページを作り直す回数月 500 回月 5,000 回 ここだけ注意。1日16回まで。手で更新するぶんには絶対に届きませんが、
「更新のたびに自動で作り直す」設定にすると、意外と早く減ります
見られる回数・通信量無制限無制限 気にしなくて大丈夫です。ここが無料なのが Cloudflare の強みです
置けるファイル数2万ファイル2万ファイル 普通のページなら数十ファイルです。届きません
ℹ️ 500回を使い切っても、サイトが落ちるわけではありません。 止まるのは「作り直し」だけで、すでに公開されているページはそのまま見えたままです。翌月1日に戻ります。 あわてて課金する必要はありません。
使用量の見張りは、ステップ06 の PROMPT 06-Cが GitHub のぶんと一緒に見てくれます。ここで別に何かする必要はありません。

このステップの完了チェック

  • Cloudflare のアカウントがあり、2段階認証がオン
  • 練習ページが *.pages.dev で開ける
  • 「直して出し直して」で更新できることを1回試した
  • Vault の内容を出すページは、固有名詞を伏せている or Access をかけている