はじめての方向け
LP 公開・運用スタートガイド

Webサイトを作るのが初めての方でも、1ステップずつ進められるように作りました。
本書は 業務範囲のお取り決め（契約条件） を兼ねます。
制作：杉山／ 対象：BubbleSong Festival 2026 LP

専門用語はそのつど「たとえ」で説明します。わからない箇所は遠慮なくご連絡ください。所要時間の目安：アカウント登録 約30分＋ドメイン取得 約15分。

もくじ
  1. この10分でわかる全体像
  2. 役割分担（誰が何をやる？）
  3. 準備いただくもの（チェックリスト）
  4. 杉山に「渡してもらうもの」一覧 ★重要
  5. ステップ手順（1個ずつ）
  6. 公開までの流れ（時系列）
  7. 公開した後の「修正・更新」の考え方
  8. 困ったとき・注意点
  9. 業務範囲とお取り決め（契約条件）
  10. 合意欄

0. この10分でわかる全体像

Webサイトを公開するには、ざっくり「家具（中身）」「住所」「公開する場所」「カウンター」の4つが必要です。

たとえ正式名称役割担当
🛋 家具・中身HTML（ページのデータ）文章・画像・デザインそのもの杉山
🏠 住所ドメインサイトのURL（例 bubblesong.jp）片岡様
🌐 公開する場所Cloudflare（Pages）家具を置いて世に出す土地杉山→片岡様へ移管
📊 カウンターGA4（Googleアナリティクス）来場者数・行動を計測片岡様
① 杉山 HTML制作＆仮公開 ② 片岡様が用意 ドメイン・GA4 ③ つないで 本番公開 ④ 所有を 片岡様へ移管
図① 全体像：杉山が作って仮公開 → 片岡様が住所と計測を用意 → 本番公開 → 最後に所有を片岡様へ

1. 役割分担（誰が何をやる？）

杉山（制作）がやること ・LPのデータ（HTML）を作る ・最初の仮公開（Cloudflare） ・GA4タグ・ボタン計測の埋め込み ・各種「手順書」のご用意 片岡様がやること ・ドメイン（住所）の取得 ・GitHub / Cloudflare アカウント作成 ・GA4アカウントの作成 ・本番公開／公開後の運用・更新管理
図② 役割分担マップ
大事なこと：杉山がお渡しするのは「公開する前のページのデータ（HTML）」までです。ドメイン・本番公開・公開後の運用は片岡様の作業・権利になります（詳細は第8章のお取り決めを参照）。

2. 準備いただくもの（チェックリスト）

料金がかかるのはドメインだけ。他はすべて無料です。

#何を費用用途（たとえ）登録先
1ドメイン年 約750〜1,900円
※1年目は0円キャンペーンの場合あり		サイトの住所お名前.com など
2GitHub アカウント無料データの保管庫（図書館）github.com
3Cloudflare アカウント無料公開する場所dash.cloudflare.com
4Google アカウント＋GA4無料来場者カウンターanalytics.google.com
おすすめ：ID・パスワードは「パスワード管理アプリ」やメモに安全に保管してください。これらを失うと、後から更新できなくなります。

3. 杉山に「渡してもらうもの」一覧 ★重要

共有の形は3種類だけです。パスワードを教える必要はありません。

📦 納品物ファイル・リンクで共有 🔤 値文字列をチャットで伝える 🤝 招待相手を自分のアカウントに招く 🚫 不要渡さなくてよい

渡してもらうもの共有のしかた具体的に
企画書・原稿・素材（画像・ロゴ）📦 納品物Googleドライブ等の共有リンクを送る
ドメイン名🔤 値取得した文字列を伝えるだけ（例 bubblesong.jp）
GA4 の測定ID🔤 値G-XXXXXXXXXX を伝える
GitHub（保管庫）🤝 招待杉山のGitHubユーザー名を「共同編集者」に追加
Cloudflare（公開場所）🤝 招待杉山のメールアドレスを「メンバー」に招待
お名前.com のログイン情報🚫 不要渡さない。杉山が伝える「NS文字列」を片岡様が貼るだけ
セキュリティの原則：各サービスは「招待」「値の共有」で連携できる仕組みがあります。ID・パスワードそのものを渡す必要はありません（乗っ取り・課金情報流出のリスクがあるため避けます）。

4. ステップ手順（1個ずつ）

STEP 1：Google アナリティクス（GA4）を用意して「測定ID」を取得

  1. Googleアカウントでログインした状態で analytics.google.com を開き、「測定を開始」をクリック。
  2. アカウント名（会社名やサイト名でOK）を入力して「次へ」。
  3. プロパティ名（例：BubbleSong）／タイムゾーン＝日本／通貨＝日本円(JPY) を設定して「次へ」。
  4. 業種・規模・利用目的を選び、利用規約（国＝日本）に同意。
  5. データストリーム（＝計測したいサイトの登録枠）で「ウェブ」を選択 → サイトURL（仮で https://bubblesong.jp 等）とストリーム名を入れ「ストリームを作成」。
  6. 発行された G-XXXXXXXXXX（測定ID）を確認 → 🔤 値 これを杉山に共有。
    確認場所：管理（左下の歯車）→ データストリーム → 該当ストリームをクリック → 右上に表示。
計測の設定やデータ確認も任せたい場合は、ID共有の代わりに「管理 → プロパティのアクセス管理 → ＋ → ユーザーを追加」で杉山のGoogleアカウントを「編集者」で招待でもOKです。

STEP 2：ドメイン（住所）を取得

お名前.com を例に説明します（Cloudflareで取得する方法は STEP3 の補足を参照）。

  1. onamae.com の検索窓に希望の文字列（例 bubblesong）を入力して検索。
  2. 取りたい拡張子（.com / .jp 等）にチェック → 「お申込みへ進む」。
  3. 登録年数（1年でOK）を選び、サーバー等の同時申込オプションのチェックは外す。
  4. 初回は会員登録（メール・パスワード・氏名住所）→ 支払い方法を選択。自動更新するならクレジットカード推奨。
  5. 「申込む」で確定。「ドメイン登録 完了通知」メールが届けば取得完了（最短数分）。
  6. 取得したドメイン名を 🔤 値 杉山に共有。
更新について：ドメインは「買い切り」ではなく1年ごとの利用権です。更新を忘れるとサイトが消え、他人に取られることもあります。自動更新をONにしておきましょう（お名前.com Naviの更新画面）。

ドメインはどこで取る？（お名前.com と Cloudflare の比較）

取得先は2択です。結論から言うと「.jp を使うならお名前.com、.com 等で管理を集約したいなら Cloudflare」です。

比較項目お名前.comCloudflare で取得
日本語・サポート◎ 完全日本語・電話/チャット対応△ 画面は一部英語・日本語サポートなし
.jp / .co.jp◎ 取得できる（日本ドメインに強い）✕ 取得できない（.com 等のgTLD中心）
料金1年目0円など割安。ただし更新料が上がりやすい原価提供・上乗せなし。更新も同額で安定（1年目無料はなし）
支払い方法◎ クレカ・コンビニ・銀行振込クレジットカードのみ
プライバシー保護(Whois)条件により制限あり◎ 無料で標準付帯
公開までの手間ネームサーバー変更の一手間が必要（STEP3）◎ 住所・公開・計測が1アカウントに集約され接続が最速
販促・オプション同時申込の勧誘・案内メールが多い余計な勧誘なし
どちらを選ぶ？
・「bubblesong.jp」など .jp を使いたい → お名前.com 一択（Cloudflareでは .jp は取得不可）。
・.com 等でよく、管理を1か所に集約したい・更新料を抑えたいなら Cloudflare が有利。
※ Cloudflareで取得しない場合でも、お名前.comで取った .jp をCloudflareにつないで公開することは問題なくできます（STEP3）。

STEP 3：仮公開サイトに「住所（ドメイン）」をつなぐ

杉山がCloudflareで仮URL（例 bsf2026-lp.pages.dev）で公開済みの状態から、片岡様のドメインをつなぎます。ルートドメイン（＝wwwなどが付かない一番短い住所。例 bubblesong.jp）で使う場合は、ネームサーバー（NS＝「この住所をどのサーバーに向けるか」を案内する係）の変更がいちばん確実です。

  1. 片岡様が dash.cloudflare.com でCloudflare無料アカウントを作成（次のSTEP4で詳述）。
  2. Cloudflareダッシュボード左メニュー「Websites」→「Add a site」で、取得したドメインを入力 → プランはFreeを選択。
  3. Cloudflareが表示する2つのネームサーバー（例 xxx.ns.cloudflare.com / yyy.ns.cloudflare.com）をコピー。
  4. お名前.com Navi → 対象ドメインの「ネームサーバー設定」→「その他のサービスのネームサーバーを使う」を選び、上記2つに書き換えて保存。
    ※ この貼り付け作業は片岡様ご自身で。NS文字列は杉山が 🔤 値 でお渡しします（お名前.comのログインは渡さない）。
  5. Cloudflareに戻り「Check nameservers」を押す。反映は数分〜最大48時間（多くは数十分）。完了するとActive通知メールが届く。
  6. Cloudflare Pages（＝サイトを公開する機能）の該当プロジェクト →「Custom domains」（独自ドメインの設定）→「Set up a domain」でドメインを登録 → ステータスがActive（有効）になれば接続完了。
注意：Cloudflareダッシュボードの「Set up a domain」を踏まずにDNSレコード（＝住所と公開先を結びつける設定）だけ向けると522エラー（＝サイトにつながらない時に出るエラー画面）になります。必ずこの手順で登録してください。
補足（Cloudflareでドメイン取得する場合）：ドメインもCloudflareで取得すると「住所・公開・計測」が1アカウントに集約され管理がラクです（画面は一部英語）。その場合 STEP2・3 のネームサーバー作業は不要になります。

STEP 4：GitHub と Cloudflare のアカウントを作り、杉山を招待

GitHub（保管庫）

  1. github.com →「Sign up」。メール・パスワード・ユーザー名を登録。
  2. メールに届く認証コードを入力。プランはFree。
  3. 対象リポジトリ（＝サイトのデータを入れる保管庫。サイトごとに1つ作ります）のSettings → Collaborators（共同編集者） → Add peopleで、杉山のGitHubユーザー名を入力して招待。🤝 招待

Cloudflare（公開場所）

  1. dash.cloudflare.com/sign-up でメール・パスワード登録 → メール認証。
  2. 右上「Manage Account」→「Members」→「Invite」。
  3. 杉山のメールアドレスを入力し、ロール（＝権限の種類）は Administrator（管理者）を付与して招待。🤝 招待
Cloudflareの無料プランでもメンバー招待は可能です。ただし最上位の管理者（Super Administrator）は1名のみ＝オーナーは片岡様のまま。杉山には通常のAdministratorを付与します。

STEP 5：所有を「片岡様アカウント」に移管（納品確定時）

制作・修正が落ち着いたら、データと公開場所の所有を完全に片岡様へ移します。

制作中 杉山アカウントで仮公開 移管 納品後 片岡様アカウントが所有
図⑥ 所有の移管
  1. GitHub：杉山がリポジトリを「Settings → Danger Zone（＝重要操作エリア。設定画面の最下部）→ Transfer（移管）」で片岡様ユーザー名へ移管 → 片岡様が承認。
  2. Cloudflare：片岡様アカウントの「Workers & Pages → Create → Pages → Connect to Git」（＝保管庫とつなぐ操作）で移管後のリポジトリに接続し、新しいPagesプロジェクト（＝公開の設定一式）を作成（Pagesはアカウント間の直接移管ができないため、つなぎ直すのが正攻法）。
  3. カスタムドメインを旧プロジェクトから外し、片岡様の新プロジェクトで再設定。動作確認後、杉山側の旧プロジェクトを削除。

5. 公開までの流れ（時系列）

制作杉山 確認・修正両者 仮公開杉山 ドメイン接続片岡様＋杉山 本番→移管片岡様
図⑦ タイムライン

6. 公開した後の「修正・更新」の考え方

Webサイトは「公開された画面を直接いじって直す」ものではありません。元データ（HTML）を直して、もう一度アップし直す＝それが反映される、という仕組みです。スポンサーのロゴ・リンク追加も、この繰り返しです。

① データを直す ② 上げ直す ③ 数十秒で反映
図⑧ 修正ループ（GitHub連携なら「前のバージョンに戻す」も可能）

7. 困ったとき・注意点（FAQ／リスク）

こんなときどうする
ドメインの更新を忘れそう自動更新をONに。カード情報は最新に保つ。
ログイン情報が分からなくなった更新・修正ができなくなるため、パスワード管理アプリ等で安全に保管。
ドメインをつないでもエラー（522等）Cloudflare側で「Set up a domain」登録済みか確認（手順STEP3）。
表示が重い・遅い画像は圧縮、動画は最小限に。
申し込みフォームの個人情報Googleフォーム等、管理元を明確に。

8. 業務範囲とお取り決め（契約条件）

本ガイドは、本LP制作に関する委託者（甲）と受託者（乙）のお取り決めを兼ねます。下記に合意のうえ着手いたします。【　】は記入・確認のうえ確定してください。

項目内容
委託者（甲）片岡 様（会社名：【　】）
受託者（乙）杉山 【氏名】（個人事業主）
業務内容BubbleSong Festival 2026 ランディングページ（LP）の制作（HTML / CSS）
納品物公開前のHTML（ページのデータ）一式。GitHubリポジトリ（＝コードを保管・共有する保管庫）経由で引き渡し。
報酬金 100,000 円（税込）
お支払い納品後 3 日以内に、指定口座へお振込み
納期初稿：【2026/7/2】を目標／以降フィードバックに応じて調整
修正対応本番公開までに 【2】回まで無償。納品後の修正は「スポンサーロゴの変更・追加」のみ対応します。それ以外の内容修正・追加は別途お見積り。

本業務に含まれるもの

本業務に含まれないもの（対象外）

著作権・権利の帰属

完成したLPの著作権その他一切の権利は、納品および報酬のお支払い完了をもって甲（委託者）に帰属します。以降、甲は自由に利用・改変できます。なお乙は本制作物を実績として掲載できるものとします（非公開をご希望の場合はその旨ご連絡ください）。

免責事項

9. 合意欄

上記の内容に合意し、本LP制作を委託・受託いたします。

委託者（甲）

日付：____________________

会社名：____________________

署名 / 記名：____________________

受託者（乙）

日付：____________________

氏名：杉山 ____________________

署名 / 記名：____________________

※ 本書は当事者間のお取り決めを明文化したものです。より厳密な契約をご希望の場合は、別途の業務委託契約書の締結や専門家のご確認をおすすめします。

本ガイドは2025〜2026年時点の各サービス画面に基づいて作成しています。各社のUI変更により名称・位置が変わる場合があります。ご不明点はいつでもご連絡ください。— 杉山