Behind the build — Day 018
前回(day17)の予約カレンダーに、「作り方を教えてほしい」という声をいくつかいただきました。そこで day18 は、いつもの「1枚のサイトを作り込む」回とは少し変えて、あの予約カレンダーを、誰でも作れるように仕組み化してみました。手がかりにしたのが「Skill(スキル)」です。Claude Code には、いちど決めた手順をひとまとめにして、何度でも同じように呼び出せる「Skill」という機能があります。そこで、この予約カレンダーの作り方を1つの Skill にまとめてみました。こうしておくと、長い注文文(プロンプト)を書かなくても、質問に1つずつ答えるだけで、同じ予約カレンダーができる。しかも誰の環境でも、同じ答えなら同じ部品ができる——再現性を持たせられます。題材にしたのは、1対1のピラティススタジオ「Arc(架空)」。どう作ったのか、順番に。

01

作り方はシンプルです。「予約カレンダーを作りたい」と伝えると、あとはお店のこと・営業時間と定休日・メニュー(所要時間と料金)・予約の受け方(LINEか電話か)を、1つずつ順番に聞かれます。聞かれたことに答えていくだけ。難しい言葉も、長い文章も要りません。最後にサイトの雰囲気を4つから選ぶと、それに合わせて全部が組み上がります。day17 までのように、指示を何十回も練り込む必要はありません。
聞かれること①どんなお店か ②営業時間と定休日 ③メニュー(時間と料金) ④予約はLINE / 電話 ⑤雰囲気(A都会的・Bナチュラル・Cポップ・D上品)
02

ここが、今回いちばん試行錯誤したところです。最初は質問をまとめて一度に出していたのですが、一気に聞かれると答えるのが大変で、途中で嫌になる。だから「1メッセージに1問だけ」に直しました。配色や書体も、名前を知らないと選べません。そこで「都会的」「ナチュラル」など雰囲気の言葉で選ぶだけで、ちゃんとした見た目になるようにしています。今回のシャープな見た目も、雰囲気で「A 都会的」を選んだ結果です。詳しい人でなくても、答えるだけで形になる——そこを目指しました。
つまずいた点質問をまとめて出す → 答える負担が大きい。配色・書体の名前で聞く → 選べない。どちらも「1問ずつ」「言葉で選ぶだけ」に直した。
03

中身は day16・day17 と同じ考え方です。空き状況の元は、店主が普段使っている Google カレンダー1枚。予約が入れば◯が✕に変わります。カレンダーには「14:00 パーソナル 田中さん」と名前つきで書いてありますが、サイトが受け取るのは「その時間が空いているかどうか」だけ。名前は途中で捨てられ、サイトには一切出ません。予約は LINE か電話で、受けたいメニューの時間ぶん続けて空いている枠だけが◯になります。毎月の掲載料も、専用の予約システムも要りません。
仕組み店主はいつものカレンダーに名前つきで書く → サイトには空き時間だけが渡る → お客さんの名前は出ない。予約は LINE / 電話。
04


質問に答えて出来た予約カレンダーの部品を、そのままサイトに組み込みました。デザインは雰囲気「A 都会的」を選んだので、白地に鮮やかなライムの差し色と、極太の見出し。新しくお店を開く人ならこれ1枚をサイトとして、すでにサイトがある人なら予約専用の子ページとして置けます。作り込むのではなく、答えるだけで、ここまで来る。それが day18 の答えです。
「作り方を教えてほしい」という声に応えて、この予約カレンダーを作る手順を、ひとつの Skill にまとめました。Claude Code を使える方なら、この Skill を読み込んで質問に答えるだけで、誰でも同じ部品を作れます。整体・ネイル・美容室・教室など、1対1で時間を予約する小さなお店で使える形です。この Skill を、100連発の中で day20 にて無料で配布する予定です。もう少しだけ、お待ちください。
サイトを見る →