ホームページ 納品ガイド

あなたのホームページを、
自分の手で公開しましょう。

むずかしい言葉は使いません。
このページのとおりに進めば、約15分で、納品されたホームページを
インターネットに公開できます。費用は0円です。

1

お渡ししたもの(納品物)について

お渡ししたのは、「ホームページのデータ一式」が入ったフォルダです。 (ZIP形式で受け取った場合は、ダブルクリックすると普通のフォルダになります)

🏠

たとえると…
このフォルダは「お店の内装・看板・メニュー表の一式」です。 中身はぜんぶ完成しています。ただし、まだ「土地」と「住所」がありません だから今はインターネットで見られない、というだけの状態です。

さわらないでOK:フォルダの中のファイル(index.html など)は、開いたり編集したりする必要はありません。フォルダごとそのまま使います。

2

ホームページが見られる「しくみ」

登場人物は3つだけです。これが分かれば、あとは作業するだけです。

📦

データ

= お店の内装一式

納品されたフォルダのこと。ホームページの見た目や文章がぜんぶ入っています。

🗺

サーバー

= インターネット上の土地

データを置く場所。今回は「Cloudflare(クラウドフレア)」という会社が無料で貸してくれます。

📮

ドメイン

= 住所

「〇〇.com」のような、サイトの住所。無料の仮住所がもらえるので、最初はなくてもOKです。

📦 データ を 🗺 土地 に置いて、📮 住所 を付けると…
世界中のスマホ・パソコンから見られるようになります。


3

公開する(最初の1回だけ・約15分)

パソコンで作業してください(スマホだと難しいです)。 画面は英語が混ざりますが、押すボタンはこの通りなので大丈夫です。

STEP1

Cloudflareの無料アカウントを作る

約5分
  1. インターネットで dash.cloudflare.com/sign-up を開く
  2. メールアドレスと、新しく決めるパスワードを入れて Sign Up(登録)を押す ※ 銀行口座やクレジットカードの登録は不要です
  3. 届いた確認メールの中のボタンを押して、登録完了
パスワードは必ずメモ! 今後、更新のたびに使います。スマホのメモ帳などに残してください。
STEP2

ホームページの「置き場所」を作る

約3分
  1. ログイン後の画面で、左メニューの Workers & Pages を押す
  2. Create(作成)→ PagesUpload assets(ファイルをアップロード)の順に押す
  3. 「プロジェクト名」を半角英数字で決めて入力 ※ これがそのまま仮の住所になります。例:mysalon → mysalon.pages.dev
  4. Create project を押す
STEP3

納品フォルダを、ドラッグ&ドロップ

約2分
  1. 点線の(Drag and drop…と書いてある場所)に、納品フォルダをそのままドラッグ&ドロップ ※ ドラッグ&ドロップ=フォルダをマウスでつかんで、枠の上まで運んで、はなすこと
  2. ファイルの一覧が表示されたら Deploy site(公開する)を押す
  3. 1〜2分待つと「Success!(成功)」と表示されます
ZIPのまま入れないでください。必ず「解凍したフォルダ」(ダブルクリックで開ける状態のもの)を入れてください。
STEP4

公開できたか、確認する

約1分
  1. 画面に表示された 〇〇〇.pages.dev のリンクを押す
  2. ホームページが表示されたら、公開完了です! ※ このURLをそのままLINEやインスタのプロフィールに貼って使えます
🎉 おつかれさまでした! この時点で、世界中の誰でもあなたのホームページを見られます。ここまで費用は0円。毎月の支払いもありません。

4

きれいな住所にしたい場合(任意)

「〇〇.pages.dev」のままでも何の問題もありません。 名刺やチラシに載せるなら、独自ドメイン(自分だけの住所)を付けると見栄えが良くなります。

📮

たとえると…
pages.dev は「マンション名入りの住所」、独自ドメインは「一戸建ての表札」。 中身は同じ家ですが、表札が「〇〇.com」になるイメージです。

やり方

いちばん簡単な

  1. Cloudflareの左メニュー Domain RegistrationRegister Domains欲しい名前を検索して購入 ※ 年間1,500〜3,000円くらい。これが唯一かかるお金です
  2. 自分のプロジェクトを開き Custom domains タブ → Set up a custom domain買ったドメインを入力
  3. 画面の指示に従って Activate domain を押せば完了 ※ Cloudflareで買ったドメインなら、難しい設定は全部自動でやってくれます

5

内容を更新したいとき

制作者から「新しいフォルダ」を受け取ったら、最初と同じことをもう一度やるだけです。

更新

3回押して、ドラッグするだけ

約3分
  1. dash.cloudflare.com にログイン → Workers & Pages → 自分のプロジェクト名を押す
  2. Create deployment(新しく公開)を押す
  3. 新しいフォルダをドラッグ&ドロップ → Deploy site を押す
安心ポイント:新しい内容で自動的に上書きされます。失敗しても、元のデータが消えることはありません(前の状態に戻すこともできます)。

6

お金の(ぜんぶ書きます)

ホームページを置く場所(サーバー)0円(ずっと無料)
仮の住所(〇〇.pages.dev)0円(ずっと無料)
公開・更新の作業0円何回でも無料)
独自ドメイン(任意・〇〇.comなど)年間 約1,500〜3,000円
月額のサーバー代は不要です。「ホームページには月々の管理費がかかる」と聞いたことがあるかもしれませんが、この式では毎月の支払いはありません。

7

よくある質問

Q本当に無料?あとから請求されない?
個人・お店のホームページ程度のアクセスなら、Cloudflareの無料プランで十分です。勝手に有料になることはありません有料化には自分でカード登録が必要な仕組みです)。
Q操作をまちがえて、サイトが消えたら?
納品フォルダがあなたのパソコンにある限り、何度でも元通りにできます同じ手順でもう一度アップロードするだけです。納品フォルダは大切に保管してください(USBやGoogleドライブにコピーしておくと安心です)。
Q英語の画面が不安…
押すボタンはこのガイドに書いてある通りです。どうしても不安なときは、ブラウザの「日本語に翻訳」機能(画面を右クリック→「日本語に翻訳」)を使うと日本語になります。
Qスマホだけで公開できますか?
アップロード作業はパソコンをおすすめします(ドラッグ&ドロップが必要なため)。公開されたホームページを見るのは、もちろんスマホでOKです。
Q文章や写真を自分で変えたい
データの中身の変更は制作者にご相談ください(有料の場合があります)。受け取った新しいフォルダをアップロードする作業は、このガイドの「5. 更新したいとき」の通りご自身でできます。
Qパスワードを忘れた
ログイン画面の「Forgot your password?(パスワードをお忘れですか)」を押すと、メールで再設定できます。

8

ミニ用語辞典

HTMLえいちてぃーえむえる
ホームページの設計図となるファイルの種類。納品フォルダの中の「index.html」が玄関(トップページ)です。
サーバー
データを置いておく、インターネット上の「土地」。24時間、世界中に見せてくれる場所のこと。
ドメイン
「〇〇.com」のような、ホームページの「住所」。
URLゆーあーるえる
住所の正式な書き方。「https://〇〇.com/」のような文字列全体のこと。
アップロード
自分のパソコンから、インターネット上(サーバー)データを送ること。「荷物を土地に運び込む」イメージ。
デプロイ(Deploy)
「公開する」という意味の専門用語。ボタンに書いてあったら「公開ボタン」だと思ってください。
Cloudflareくらうどふれあ
世界最大級のインターネット企業のひとつ。土地(サーバー)を無料で貸してくれます。世界中の大企業も使っている、信頼できる会社です。
9

こまったときは

  • あわてなくて大丈夫。納品フォルダがあれば、必ず元に戻せます
  • まずこのガイドの該当ステップを、もう一度ゆっくり読む
  • 画面のスクリーンショット(写真)を撮ってから、制作者に連絡する
  • パスワードなど大事なメモは、なくさない場所に保管する