Behind the build — Day 018

つくり方の全容

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

Claudeとの会話画面。『予約カレンダーを作りたい』と伝えると、専用の仕組みが立ち上がり、『どんなお店・教室ですか? お店の名前もあわせて教えてください』と1つだけ質問が返ってくる
作りたいと伝えると、質問が1つずつ返ってくる

01

長い文章は要らない。
質問に、答えるだけ。

会話の続き。お店・営業時間・メニュー・予約の受け方(LINEか電話か)を1つずつ聞かれ、最後に『サイトの雰囲気を選んでください。A都会的・Bナチュラル・Cポップ・D上品』と提示され、Aを選んでいる
お店・営業時間・メニュー・予約方法…最後に雰囲気を選ぶ

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

聞かれること①どんなお店か ②営業時間と定休日 ③メニュー(時間と料金) ④予約はLINE / 電話 ⑤雰囲気(A都会的・Bナチュラル・Cポップ・D上品)

02

一気に聞かない。
雰囲気は、選ぶだけ。

質問に答え終わると出来上がる予約カレンダーの部品。今週の空きの週間◯✕カレンダー、メニュー選択、料金表、緑のLINE予約ボタンまでが一式そろっている
答え終わると、予約カレンダーの部品が一式そろう

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

つまずいた点質問をまとめて出す → 答える負担が大きい。配色・書体の名前で聞く → 選べない。どちらも「1問ずつ」「言葉で選ぶだけ」に直した。

03

裏は、Googleカレンダー。
名前は、サイトに出さない。

Arc の予約カレンダー部分。今週の空きの週間◯✕グリッドで、日付と時刻ごとに◯(空きあり)・✕(満席)・−(休み)が並ぶだけで、予約者の名前はどこにも出ていない
空きの元は店主のGoogleカレンダー。出るのは◯✕だけ

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

仕組み店主はいつものカレンダーに名前つきで書く → サイトには空き時間だけが渡る → お客さんの名前は出ない。予約は LINE / 電話。

04

そして、完成形。

完成形 PC。白地に鮮やかなライムの差し色、極太の見出しで組んだ都会的なピラティススタジオ Arc。ファーストビュー、今週の空きの週間◯✕カレンダー、予約カード、レッスンと料金、スタジオ紹介、アクセスの順に並ぶ
完成 — Arc(PC)
完成形 SP。縦長画面に、ファーストビュー、今週の空きの週間◯✕カレンダー、レッスンと料金、予約カード(LINE予約)、スタジオ紹介、アクセスが積み上がる
完成 — Arc(SP)

質問に答えて出来た予約カレンダーの部品を、そのままサイトに組み込みました。デザインは雰囲気「A 都会的」を選んだので、白地に鮮やかなライムの差し色と、極太の見出し。新しくお店を開く人ならこれ1枚をサイトとして、すでにサイトがある人なら予約専用の子ページとして置けます。作り込むのではなく、答えるだけで、ここまで来る。それが day18 の答えです。

この予約カレンダーは、
day20で無料配布します。

「作り方を教えてほしい」という声に応えて、この予約カレンダーを作る手順を、ひとつの Skill にまとめました。Claude Code を使える方なら、この Skill を読み込んで質問に答えるだけで、誰でも同じ部品を作れます。整体・ネイル・美容室・教室など、1対1で時間を予約する小さなお店で使える形です。この Skill を、100連発の中で day20 にて無料で配布する予定です。もう少しだけ、お待ちください。

サイトを見る →