おかえりなさい 👋
HP制作副業のポータルです。手順書・営業ツール・サンプルHPをここから確認できます。
手順書
📘
GitHub〜Cloudflare公開まで
アカウント作成からHP公開まで全9章・15ステップ。初心者向け。
setup-guide.html📗
Cloudflare公開後の追加作業
GitHub Pages OFF・Shopify・LINE連携・フル機能HP公開の補足手順。
setup-guide-extra.html📙
ドメイン取得・Access設定
Cloudflare Registrarでのドメイン購入からメール認証設定まで。
setup-guide-domain.html📓
予約システム設定
Googleフォーム・スプレッドシート連携・GAS自動化コードの手順。
reservation-gas.js
サンプルHP
☕
Café Mori — フル機能版
予約・EC・LINE連携を統合したカフェのサンプルHP
予約フォームShopifyLINE
✦
LUMIÈRE — 美容院
ラグジュアリー×モノクロのハイエンド美容院サンプル
予約フォームスタイリスト紹介
📘 setup-guide.html
📘
全9章・15ステップの手順書
Ch.1 GitHubとは / Ch.2 アカウント作成 / Ch.3 ファイルアップロード
Ch.4 GitHub Pages（任意・OFF推奨）/ Ch.5 Cloudflareとは
Ch.6 Cloudflareアカウント作成 / Ch.7 GitHubと連携
Ch.8 リポジトリ選択・デプロイ / Ch.9 公開完了・確認
📗 setup-guide-extra.html
📗
Section 1：GitHub PagesをOFFにする
Section 2：Shopifyアカウント作成・購入ボタン設置
Section 3：LINE公式アカウント作成・HP連携
Section 4：フル機能HPの公開
Section 5：環境・コスト全体まとめ
📙 setup-guide-domain.html
📙
Section 1：なぜドメインが必要か
Section 2：Cloudflare Registrarでドメインを取得する
Section 3：PagesにカスタムドメインをONにする
Section 4：Cloudflare Zero Trustを有効にする
Section 5：Accessポリシーを設定する
Section 6：動作確認・完了
予約システムの仕組み（概要）
- お客様がHPのフォームから予約リクエストを送信
- Googleスプレッドシートに自動で1行追加される
- お店のGmailに通知メールが届く
- 店側がスプレッドシートのH列を「確認済み」に変更
- GASが自動でお客様に確定メールを送信
🤖 reservation-gas.js — GAS自動化コード
🤖
スプレッドシートのH列を「確認済み」に変えるだけで
お客様に確定メールが自動送信されます。
Google Apps Script にコピペして使用。
設定手順（所要時間：約15分）
- business.google.com にアクセス（Googleアカウントでログイン）
- 「今すぐ管理」→ ビジネス名を入力して検索
- 業種・住所・電話番号・営業時間を入力
- HPのURLを登録（CloudflareのURLを入れる）
- ハガキで本人確認（1〜2週間で届く）
- 確認後、Googleマップ・検索に表示される
設定後にできること
- 「浜松 カフェ」などで検索したときにお店が表示される
- 営業時間・写真・メニューをGoogleマップ上に掲載できる
- お客様の口コミに返信できる
- アクセス数・検索キーワードなどの分析データが見られる
✓ 完全無料・設定15分で完了。HP制作のオプション（¥11,000〜）として提案できます。
🌐 system-overview.html
🌐
GitHub / Cloudflare Pages / Googleフォーム＋GAS
Shopify / LINE公式アカウント / 独自ドメイン
各サービスの役割・費用・コスト全体まとめ表
📋 reservation-visual.html
📋
① お客様がフォームを送信
② お店のGmailに通知が届く（自動）
③ スプレッドシートに自動記録（自動）
④ GASがステータス変更を検知（自動）
⑤ お客様に確定メールが送信される（自動）
実装の流れ
- Shopifyアカウント作成（14日間無料トライアルあり）
- 商品・価格・在庫をShopify管理画面に登録
- 「購入ボタン」のコードをShopifyが自動生成
- そのコードをHTMLの商品カード部分に貼り付けるだけ
- GitHubにアップ → Cloudflareが自動反映
料金プラン
- Basic：月額 $39（約6,000円）— 個人・小規模向け
- Shopify：月額 $105 — 成長期のビジネス向け
- 取引手数料：売上の2〜3%程度
☕ cafe-shop.html — Shopify連携サンプル
🛍️
Shopify購入ボタン組み込みのカフェHPサンプル
実装方法
- LINE Official Account Manager でアカウント作成（無料）
- 「友だち追加URL（https://lin.ee/xxxxx）」を取得
- HTMLのボタンのhref属性にそのURLを貼るだけ
- 固定ボタン（右下に常時表示）はCSSで position:fixed にする
料金プラン
- フリー：月額無料・月200通まで
- ライト：月額5,000円・月5,000通まで
- スタンダード：月額15,000円・月30,000通まで
💬 cafe-line.html — LINE連携サンプル
💰 price-list.html
💰
ライト：¥49,800〜（1ページLP）
スタンダード：¥98,000〜（5ページ・人気No.1）
プレミアム：¥198,000〜（8〜15ページ）
オプション11種・月額保守プランあり
🎤 sales-script.html
🎤
Step 1：つかみトーク（30秒）
Step 2：課題ヒアリング
Step 3：サンプル提示
Step 4：料金提示
Step 5：クロージング・次のアポ
☕
予約フォームShopify ECLINE連携新着情報ギャラリー
✦
メニュー一覧スタイリスト紹介予約フォームギャラリー