お店のページを無料URLで公開する。Cloudflareにフォルダを載せて、スマホで開けるまで

この記事でできること

手元にあるお店の1ページを、Cloudflare（クラウドフレア） Workers が用意する無料のURL（workers.dev で終わる形）で公開します。自分のスマホのブラウザでそのURLを開き、店名・キャッチ・画像・問い合わせの一文が見えるところまでがゴールです。

「ページはできたのに、どうやってネットに出すか分からない」——ここで止まる人は多いです。レンタルサーバーやFTPの用語が増えると、閉店後の短い時間では手が出なくなります。今日の手順は、すでに持っている Cloudflare アカウントの中に、店のフォルダをブラウザで載せるだけです。GitHubも、ターミナルも使いません。

独自ドメイン（www.店舗名.jp のようなもの）は、この記事では扱いません。まずは workers.dev のURLで、家族やスタッフに送れる住所を手に入れるところまで進めます。あとで自分のドメインに付け替える話は、別の機会で大丈夫です。

事前に用意するもの

画面を開く前に、上げるフォルダだけ整えてください。ここを飛ばすと、「公開したのに真っ白」「文字だけ出て画像がない」が起きやすいです。閉店後に慌てて直すより、今の数分で潰した方が早いです。

次のリストは、載せたあとにスマホで開いたときに「欠けていない」状態を先に作るための確認です。仕事帰りの人が片手でページを開いても、店の顔（名前・写真・問い合わせ）が届くようにします。

• Cloudflare アカウント（すでに作成済みで、ログインできること）
• お店の1ページが入ったフォルダ（画面がzipも受け付けるならそのzipでも可）
• フォルダの直下に index.html があること
• CSS・画像が同じフォルダ内にあり、相対パス（例: images/hero.jpg）になっていること
• パソコンで index.html を開いて、見た目が欠けていないこと
• できればパソコンのブラウザ（ドラッグ＆ドロップしやすい）と、確認用の自分のスマホ

フォルダのイメージ（架空のカフェ）

サンプルとして、架空のカフェ「久留米駅前焙煎舎」（西鉄久留米駅近く）なら、次のような並びです。自分の店でも、直下に index.html がある形に揃えてください。

kurume-roasting/
├ index.html
├ styles.css（あれば）
└ images/（店の写真）

zipにするときは、中身を選んで圧縮してください。フォルダごと圧縮すると、zipの中にもう一段フォルダが入り、二重になって失敗しやすいです。

手順

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

「ダッシュボードは英語が多くて怖い」と感じても大丈夫です。今日押す入口はひとつだけです。Git連携や、テンプレートから作る道には入りません。ボタン名は時期で変わるので、完璧に暗記しなくて構いません。言葉を探しながら進めてください。

1. ブラウザで Cloudflareのダッシュボード を開く
2. アカウントでログインする
3. 「Workers と Pages」のようなメニューを開く（左のコンピュートの中に見えることもある）
4. 「アプリケーションを作る」のような入口へ進む
5. 「静的ファイルをアップロードする」「Upload your static files」「ファイルをドラッグして載せる」のような入口を選ぶ

カードが並ぶ画面では、Gitにつなぐものやコードのテンプレートが目立つことがあります。今回は使いません。「静的ファイルをアップロードする／ファイルをドラッグして載せる」入口だけを選んでください。店のフォルダをそのまま載せる道です。

2. 名前を付けて、フォルダを載せて公開する

名前は、あとで発行されるURLのラベルになります。英数字とハイフンで、お店が分かる短い名前にすると、スタッフに送るときにも迷いにくいです。最初からランダムな名前が入っていることがあります。そのままでも動きますが、後から見やすい名前に変えておくと安心です。サンプルでは kurume-roasting のように入れます。先頭や末尾にハイフンは付けない方が無難です。

名前を入れたら、確認済みのフォルダを枠へドラッグ＆ドロップします。画面がzipも受け付けるなら、zipでも構いません。載ったら、「公開する」「デプロイする」のようなボタンを押します。文言は時期でゆれることがあります。載せる直後の確定ボタンを探してください。

少し待つと、完了画面に workers.dev で終わるURLが出ます。形はだいたい「Workerの名前」と「アカウントのサブドメイン」が並んだものです。これをコピーしてください。今日のゴールの半分です。パソコンのブラウザでも一度開き、ページが出るか見ておくと安心です。

似た画面で、アカウントなしでフォルダを載せられる「Drop」という入口を見かけることがあります。あれはだいたい1時間で消える仮の公開です。この記事では使いません。アカウントの中に残る、今回のドラッグ＆ドロップの公開を使います。

3. 自分のスマホで開いて確認する

コピーしたURLを、自分のスマホのブラウザに貼って開いてください。家族やスタッフに送る前に、いちど自分の実機で見るのが安心です。仕事帰りの人は、だいたいスマホでページを開きます。パソコンだけで「ちゃんと出た」と思っても、スマホでは画像が欠けていた、ということがよくあります。

見るポイントは次です。店名が見えるか。誰向けかの一文やキャッチが見えるか。写真が出ているか。問い合わせの一文が見えるか。サンプルの久留米駅前焙煎舎なら、西鉄久留米駅近く・仕事帰り・電話のCTAが入っているかをざっと見てください。

成功チェックリスト

次の項目は、「URLが手元にある」だけでなく、「読む人の手元（スマホ）で店の顔が見える」ところまでをまとめたものです。閉店後にひとつずつ当てはめてみてください。全部にチェックが付けば、この記事のゴールとしては合格です。

• workers.dev で終わるURLが手元にある
• 自分のスマホのブラウザでそのURLが開く
• 店名・キャッチ（誰向けか）・画像・問い合わせの一文が見える
• パソコンのローカルで見たときと、大きく食い違っていない

4. 欠けていたら、直してもう一度載せる

画像が欠けている、トップが空っぽ、といったときは、壊れたまま諦めなくて大丈夫です。多い原因はフォルダの組み立てです。パソコンに戻って、index.html が上げる単位の直下にあるか、画像が同じフォルダに入っているか、相対パスかを見直します。

直したら、同じ Worker を開いて、「新しいバージョン」「もう一度載せる」のような入口がないか探してください。見つかったら、フォルダをもう一度ドロップします。入口が見当たらないときは、焦らなくて大丈夫です。いちばん大事なのは初回の公開とスマホ確認です。載せ直しは、同じ手順で名前を揃えてもう一度載せるか、この記事の画面の流れを真似てください。載せ直したあと、スマホで同じURLを再読み込みしてください。

よくあるつまずきと対処

うまくいかないときは、だいたい次のどれかです。下の表は「症状 → すぐやる一手」の一覧なので、該当する行だけ見て直してください。無料枠の回数やアクセス上限を断定する説明はしません。静的な1ページを載せる用途では、まずフォルダ構成と入口の選び直しで落ち着くことが多いです。

つまずき	対処
トップが空／一覧っぽい	上げる単位の直下に index.html があるか確認し、載せ直す
文字だけ・画像なし	相対パスと画像の同梱を確認し、同じ構成でもう一度載せる
zipの中が二重フォルダ	中のファイルを選んで圧縮し直し、再アップロードする
Gitやテンプレートのカードに迷う	「静的ファイルをアップロード／ドラッグして載せる」入口だけに戻る
赤い警告が出る	大きすぎるファイル（目安25MB超）を縮小し、フォルダ全体を再アップロードする
Dropの仮URLと混同する	1時間で消える仮公開は使わない。アカウント内の今回の公開URLを使う
載せ直し入口が分からない	初回公開の成功を優先。同じ手順で名前を揃える／この記事の画面の流れを真似る
載せ直したあと古い内容に見える	スマホで再読み込みする。必要ならシークレットウィンドウで開く

多くは「直下の index.html」「相対パス」「静的ファイルを載せる入口」の3点に戻ると早いです。どこから手を付ければいいか分からなくなったら、事前確認のフォルダチェックに戻ってください。

まとめ

サーバー契約やFTPの用語のかたまりに入らなくても、手元の店のフォルダを Cloudflare に載せれば、workers.dev で終わるURLが手に入ります。自分のスマホで店名・キャッチ・画像・問い合わせの一文が見えれば、家族やスタッフに送れる公開の一歩目です。

仕事帰りの人が、電車の中でそのURLを開いて「この店、自分向けかな」と見られる状態——そこまで来ていれば、この記事は完了です。