Behind the build — Day 020
day16 から作ってきた予約カレンダー——Googleカレンダー連動、LINE予約、そして送るだけで確定する自動予約と二重予約防止——を、今日、無料で配ります。Claude Code の「Skill」という形です。day18 で「作り方を教えてほしいという声に、Skillで答えます」と書きました。今日はその配布日。そして、これまで書かずにとっておいた「Skillそのものの作り方」も、あわせて公開します。予約カレンダーが要らない人にも、「自分の得意な作業をSkillにする」の参考になるはずです。
01
配布するのは、サイト全体のテンプレートではなく予約カレンダーの部品です。質問に1つずつ答えると、あなたのお店用の予約ページ（HTML/CSS/JS）と、Googleカレンダーをつなぐ仕組み、手順書が出てきます。LINEで送るだけで予約が確定する自動予約（day19の仕組み）も同梱。無料で、商用利用もお客様への納品もOK。無償で人に渡すのもOKです（Skill自体の販売だけご遠慮ください）。詳しい条件と入れ方は配布ページに。
配布の考え方サイト全体より、業種で化ける「部品」で配る。1対1で時間を予約する小さなお店なら、整体でもネイルでも教室でも同じ部品が効く。
02
Skillと聞くと難しそうですが、正体はただのフォルダです。決まった場所（.claude/skills/）に置くと、Claude が中の SKILL.md という指示書を読んで、その通りに振る舞ってくれる。それだけ。私の場合、「予約カレンダーの作り方」をこの1枚に書き込んであるので、誰のClaudeでも同じ手順・同じ品質で予約カレンダーが出てきます。いちど確立した自分のやり方を、指示書ごと人に渡せる——これがSkillの本質です。
構成の考え方Claudeが読むもの（SKILL.md）と、人が読むもの（README・manual）をはっきり分ける。人に「読まなくていいファイル」を伝えるのも設計のうち。
03
書き方の勘所は3つです。①いつ使うかを具体的に書く——冒頭の description は「Claudeがこの道具を取り出す条件」。「予約サイトを作りたいとき」「美容室・整体・教室の1対1予約」と具体的に書くほど、正しく起動します。②質問は1問ずつ、とルールで縛る——AIは放っておくと質問を一括で並べます。答える側の負担はルールとして明記しないと守られません。③知識がいる選択は、言葉の選択肢に変える——配色や書体を聞かず「雰囲気を4つから選ぶ」に。専門用語を知らなくても、選ぶだけで良い結果になるように作ります。
もうひとつの柱ゼロから生成させず、「そのまま動く完動見本（reference）を土台に、設定だけ差し替える」方式にする。毎回同じ品質が出る＝再現性はここから生まれる。
04
作者は自分の文脈を無意識に補ってしまうので、自分では穴に気づけません。だから配る前に、何も知らない環境で「予約カレンダーを作りたい」から通す。電話を使わない店で押せないボタンが残る、明るい差し色に白文字で読めない——テストのたびに穴が見つかり、そのたびSkillに還元しました。仕上げは、いちばん難しいGoogleまわりの設定を「シートをコピーして、メニューを2回押すだけ」に圧縮した設定シートづくり。ここでも実際に手を動かして検証し、つまずいた箇所を全部手順書に書き戻しています。つまずきこそが配布物の品質になる——この検証だけで丸一日かけました。
検証の姿勢途中で想定外が出ても、回避してやり過ごさない。直して、最初からやり直す。初見の人が通れない配布物は、配っても動かないのと同じ。
05
配布ページでは、使う人を2通り想定して、読み方を分けて説明しています。お店の代わりに作る制作者の方と、自分でやってみる事業主の方。手順書はどちらでも使えるように書いてあり、途中で詰まったら、画面のスクショをClaudeに見せて聞けばいい——それがこの配布物のいちばんの安全網です。day17で「作り方を教えてほしい」と言ってもらってから、3日かけてここまで来ました。作り方を教える、のいちばん誠実な形は、作り方ごと渡すこと。これがday20の答えです。
配布ページへ →予約カレンダーのSkillは、配布ページから無料でダウンロードできます。整体・ネイル・美容室・教室など、1対1で時間を予約する小さなお店に。そして、このページの後半に書いたSKILL.mdの考え方は、予約カレンダーに限りません。あなたがいつもやっている得意な作業も、フォルダひとつで人に渡せる形にできます。100連発は、まだ続きます。
配布ページを見る →