予約カレンダー Skill（無料配布）| 服部制作室

01できること

お客さんには「今週の空き」が ◯✕のカレンダーで見える。受けたいメニューを選ぶと、その所要時間ぶん空いている枠だけが◯に。
空きの元は、店主が普段使っている Googleカレンダー。予約が入ればサイトの◯が✕に変わり、お客さんの名前はサイトに出ません。
予約は LINE。さらに任意で、送るだけで予約が自動で確定する形（自動返信つき・二重予約防止つき）まで配線できます。
できあがるのは静的なHTML/CSS/JSの予約専用ページ。サーバー処理は不要で、既存のお店のサイトからリンクするだけで使えます。

※ 対象は「同じ時間にお一人」を受ける1対1のお店です。グループレッスン（1対複数）や、複数スタッフで同時にいくつも予約を受ける形（美容院の複数席など）には対応していません。

生成された予約カレンダーの作例。今週の空きの週間◯✕グリッド、メニュー選択、LINE予約ボタン、料金表が一式そろっている — 会話で生成した作例（雰囲気：都会的）

別の作例。セリフ体の上品なトーンの週間◯✕カレンダー — 同じ質問に答えて、雰囲気だけ変えた作例（上品）

02用途に合わせて使えます

使う人によって、読む順番と押さえるポイントが少し変わります。次の2通りを想定しています。

FOR CREATORS

🔧 制作会社・フリーランスなど、
お店の代わりに作る方

顧客案件にそのまま使えます。先に押さえるのは名義です。GAS（カレンダーの窓口）とLINE公式アカウントは、店主名義で作ってください。同梱の手順書に「制作者が代行する場合」の節があり、店主に依頼する作業（合計30分ほど）と、制作側が行う作業の分担を記載しています。

FOR OWNERS

🏠 自分のお店のために、
自分でやってみる方

専門知識は不要ですが、Claude Code を使える環境が必要です。手順書は初めての人向けに書いています。途中で分からなくなったら、画面のスクリーンショットをClaudeに見せて質問すれば、ほぼ解決します。難しい場合は、ダウンロードしたフォルダごと、普段依頼しているweb制作者に渡すこともできます。

03インストールと操作方法

ダウンロードから、テスト予約がLINEに届くまでの手順です。この順番どおりに進めてください。所要時間は、空き表示までで約20分、LINE自動予約まで含めて約1時間です。

手順3から先は、ひとりで手順書を読み込む必要はありません。Claude Code に「セットアップを手伝って」と言えば、同梱の手順書（manual.md）はClaudeが読み、あなたは言われたとおりに画面を操作するだけです。

入れる1分
上のボタンから booking-calendar.zip をダウンロードしたら、Claude Code にこう頼むだけ：
ダウンロードした booking-calendar.zip を、Skillとしてインストールして
Claude が解凍して所定の場所に置いてくれます（zipはふつう「ダウンロード」フォルダにあります）。終わったら新しいセッションを開くと認識されます（アプリごと開き直してもOK・再起動までは不要）。
手動で置く場合：解凍した booking-calendar フォルダを丸ごと .claude/skills/（プロジェクト用）または ~/.claude/skills/（全プロジェクト共通）の中へ。
作る5〜10分
Claude Code に話しかける：予約カレンダーを作りたい
あとは質問（お店のこと・営業時間・メニュー・予約の受け方・雰囲気）に1つずつ答えるだけ。終わると、あなたのお店用の予約ページがモック（見本の空き）で動いています。できあがった index.html をダブルクリックすると、ブラウザで見られます（ファイルの場所はClaudeが教えてくれます）。
Googleカレンダーとつなぐ約15分
Claude Code に話しかける：セットアップを手伝って
ここから先はClaudeが1ステップずつ案内してくれます。やることは——設定シート（テンプレ）を「コピーを作成」→ シートのメニュー「⚙️ 予約カレンダー」→「① 初期設定」（ここでGoogleの承認。警告画面が出ますが正常です＝下の「つまずき」参照）→ ウェブアプリとしてデプロイ（シートの「拡張機能 → Apps Script」から・動画3-2参照）→ 出てきたURLを2箇所に貼る＝ ①設定シートのB6 ②サイト側の app.js（こちらはClaudeに「このURLをapp.jsに入れて」と頼めばOK）。コードの貼り付けは不要です。

手順3（Googleカレンダーとつなぐ）の実際の画面です。3つの操作に分かれています（音なし・各30秒〜1分）。

3-1テンプレをコピー →「① 初期設定」→ Googleの承認（すべて選択して許可）

3-2ウェブアプリとしてデプロイ。英語の警告は「詳細 →（unsafe）に移動」で進む

3-3出てきたURLを B6 に貼る →「② 設定チェック」で ✅ を確認

✅ ゴール1（ここまで約20分）：サイトに、あなたのGoogleカレンダーの「本物の空き」が◯✕で出る。確認方法：カレンダーに予定を1件入れてサイトを再読み込み → その枠が✕に変われば成功。ここでやめても「空きが見えるページ」として使えます。

LINEをつなぐ約15分
LINE公式アカウント（無料・個人のLINEとは別物）を作り、IDをサイトに設定 → ◯をタップしたお客さんから、日時入りの相談がLINEに届く形になります。

手順4（LINEをつなぐ）の実際の画面です（音なし）。

4-1LINE公式アカウントを作成（アカウント名・業種などを入力して確認）

※ 動画では、ビジネスマネージャーの組織に「服部制作室」を選んでいます。ここはご自身（またはお店）の環境に読み替えてください。「服部制作室」という組織はあなたの画面には出ません。まだ組織がなければ「組織を作成」を選べばOKです。

自動予約にする（任意）約20分
Messaging APIを有効化 → トークンを設定シートに貼って「① 初期設定」を再実行 → Webhookをつなぐ → 最後にサイトを自動予約モードに切り替える（Claudeに「自動予約モードにして」と頼めばOK・手順書 STEP 11）。これで、送るだけで予約が確定し、二重予約も防がれます。

手順5（自動予約）の実際の画面です。4つの操作に分かれています（音なし）。

5-1設定 → Messaging API → プロバイダー（事業体名）を選んで有効化

5-2LINE Developers で「チャネルアクセストークン（長期）」を発行

5-3トークンを設定シートB4に貼る →「① 初期設定」→「② 設定チェック」で ✅

5-4URLをWebhookに貼る → 検証 → 利用ON →（応答メッセージはOFF）

※ 5-1・5-2の動画では、プロバイダーに「服部制作室」を選んでいます。ここはご自身（またはお店）の環境に読み替えてください。「服部制作室」はあなたの画面には出ません。プロバイダーが無ければ新しく作成すればOKです。
※ 動画内のトークン・シークレットはモザイクで伏せています（表示されているアカウントは説明用のサンプルです）。

✅ ゴール2（合計約1時間）：自分のスマホで空き枠を選んで送信 →「ご予約を承りました」が返ってきて、Googleカレンダーに予定が入り、サイトの◯が✕に変わったら——完成です。サイトを公開する前でも、手順書の 11-a（LINEに「テスト」と送る配線チェック）で動作確認できます。

手順4〜5が難しいと感じたら、ここでやめても大丈夫です。ダウンロードしたフォルダごと、ふだん頼んでいるweb制作の方に渡してください（→ 02 用途に合わせて使えます）。

必要なもの：Claude Code ／ Googleアカウント（無料）／ LINE公式アカウント（無料・手順4で作れます）

04うまくいかないとき

初めての方がつまずきやすいポイントは、ほぼ決まっています。詳しい対処は手順書に記載していますが、代表的な3つをここにまとめます。

「このアプリは Google で確認されていません」という警告が出る
正常です。あなたが自分用に作ったプログラムだから審査を受けていない、という意味しかありません。左下の小さな「詳細」→「（安全ではないページ）に移動」→ チェックは「すべて選択」で埋めて →「続行」で進めます（英語表示でも同じ）。
シートのメニュー「⚙️ 予約カレンダー」がすぐ出ない
開いた直後は数秒〜十数秒かかります。待っても出なければページを再読み込み。
予約はカレンダーに入るのに、LINEの返信だけ来ない
トークンを貼ったあとの「反映」もれです。テンプレ方式なら「① 初期設定」を再実行するだけ（再デプロイ不要）。手動方式（＝手順書の「方法2」で、自分でコードを貼って作った場合）なら「新バージョンで再デプロイ」が必要です。

これ以外でつまずいた場合も、画面のスクリーンショットと手順書をClaudeに見せて質問すれば、多くはその場で解決できます。

05よくある質問

本当に無料ですか？: 無料です。商用利用も、制作者がお客様の案件に使うのもOKです。
保証はありますか？: 無保証（AS IS・現状有姿）で提供しています。導入前に、必ずテスト予約で動作確認をしてください。重要な業務でのご利用は自己責任でお願いします。安心してお使いいただけるよう動作確認やドキュメントには力を入れていますが、あらゆる環境での完全な動作を保証するものではありません。
このSkillを販売してもいいですか？: Skill自体の販売（有償での再配布）はご遠慮ください。一方で——無償で人に渡すのはOKです（お店の方が制作者にフォルダごと渡す、同僚に共有する等）。また、このSkillを使ってお客様のサイトを作り、制作費をいただくのはOKです（それは制作のお仕事の対価で、Skillの販売ではありません）。
予約システムの月額費用はかかりませんか？: かかりません。使うのは Googleカレンダー・GAS・LINE公式アカウントで、いずれも無料の範囲で動きます。なお、LINE公式アカウントの無料プランには「月200通まで」の制限がありますが、これはお店から送る一斉配信（お知らせ等）の通数です。予約の自動返信やチャットの返事はこの通数に数えられないため、予約のやりとりだけなら無料のまま使えます。お知らせ配信を多く送るお店だけ、LINE側の有料プランが必要になることがあります。
お客さんの名前がサイトに出たりしませんか？: 出ません。サイトに渡るのは「何時から何時が埋まっているか」だけで、予定の名前や内容は途中で捨てられます。カレンダーは非公開のままで使えます。
複数スタッフ・複数席のお店でも使えますか？: このSkillは「席がひとつ（1対1）」のお店向けです。カレンダーの空き＝そのまま店の空き、になる業態（個人サロン・教室・整体など）に向いています。
詰まったらどこに聞けばいいですか？: 手元の Claude に、手順書と画面のスクショを見せて聞いてください。そのための設計になっています。

予約カレンダーSkillのダウンロードはこちらから。

Skill をダウンロードbooking-calendar.zip（無料・約40KB）

無料・商用利用OK（お客様への納品にも使えます）

予約カレンダー Skill 配布ページ