SELF-INITIATED DEMO / 自主制作
DAYBOOK — 予約管理ダッシュボード
OVERVIEW
「埋まっています」で終わらせない。空いている時間まで出す予約。
Live Demoを操作する架空のスタジオです。実際の予約は入らず、メールも送られません。相談と予約はこのブラウザの中だけに保存され、他の訪問者とは共有されません。空き判定と候補の並びは決まった規則による処理で、AIは使っていません。
- AI
- 未接続（ルール処理）文章からの日時の読み取りと空き候補の提示は決まった規則で行います。公開版はAIのAPIに接続していません。
- 保存先
- このブラウザ相談と予約を、このブラウザにだけ保存します。
- 外部送信
- なし実際の予約は入らず、確認のメールも送られません。
- SCOPE
- Design + Build + QA
- EST. DELIVERY / 納期目安
- 要件確定後に提示
- PRICE GUIDE / 参考価格
- 要件により見積
WORKING VERSION / 操作できる版
画面を動かして試せます
この制作例には、実際に操作できる予約体験があります。文章で希望を送ると、営業時間・前後の準備時間・先約に照らして空き状況を判定し、取れないときは実際に空いている候補を出します。確定するのは、予約者が合意し、お店が承認した時だけです。変更を頼んでも、承認されるまで元の予約は残ります。
架空のスタジオです。実際の予約は入らず、メールも送られません。相談と予約はお使いのブラウザの中だけに保存されます。
01THE PROBLEM
「その時間は埋まっています」で止まり、空き探しのやりとりが何往復も続くこと。
- 想定したクライアント
- 予約制の小さな撮影スタジオ（架空）
- 想定依頼
- 小さなスタジオの予約を整理し、希望が埋まっているときのやりとりを減らしたい。
- 起きていること
- 希望の日時がメールで届くが、埋まっていると「その時間は埋まっています」と返し、空き探しが何往復も続く。
- 困りごと
- 前後の準備時間を忘れて予約を詰めてしまい、当日に慌てることがある。
- 制作コンセプト
- 断るところで終わらず、次の一手まで出す。
想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。
02SIGNATURE JOURNEY
「埋まっています」で終わらせず、空いている時間まで出す。
文章で届いた希望から日付と時刻を読み取り、営業時間・前後の準備時間・先約に照らして判定します。取れないときは実際に空いている候補を出し、確定は予約者の合意とお店の承認がそろった時だけに限りました。
希望を文章で送る
例文から選ぶか、自由に書いて相談。日付と時刻を読み取り、読めない項目は推測せずに伝えます。
埋まっていたら空き候補
営業時間・前後15分の準備時間・先約に照らして判定し、取れる時間を候補として出します。
仮押さえと確定の依頼
候補を選ぶと10分だけ仮押さえ。予約者が確定を依頼します。
店が承認して確定
運用側の台帳で承認すると確定。予約者の合意と店の承認、両方がそろったときだけ確定します。
画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す
03KEY INTERACTIONS
触って確かめられる操作
見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。
読めないことを推測しない
日付か時刻が読み取れないときは、その旨を表示して近い候補を出します。
変更しても元の予約を消さない
変更は承認されるまで元の予約を残し、変わるところだけを表示します。
ほかのシステムの予定を尊重
共有カレンダーにある他システムの予定は読み取り専用。動かしも消しもしません。
04BEHIND THE SYSTEM
画面の裏で、何が決まっているか
データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。
データ
- スタジオの営業日・営業時間・所要時間・前後の準備時間
- 予約（状態・仮押さえの期限・変更の依頼）
- 予約者の合意と店の承認、2つの記録
状態の流れ
- 相談
- 候補の提示
- 仮押さえ
- 確定の依頼
- 承認・確定
安全のための決まりごと
- 前後15分の準備時間を含めて重なりを判定する
- 確定されない仮押さえは10分で解放する
- 変更に失敗しても、元の予約はそのまま残す
05RESPONSIVE & ACCESSIBILITY
ひとつの体験を、どの画面でも。
PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。
- 360pxの画面幅から主要な操作ができること
- キーボードだけで操作でき、フォーカスが見えること
- 入力欄にラベルがあり、エラーの理由が文字で出ること
- 動きを減らす設定（prefers-reduced-motion）を尊重すること
06SCOPE & BOUNDARIES
できること・していないことを、先に書く
自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。
実装済み
このデモで実際に動くこと
- 文章からの日時の読み取り（決まった規則）
- 空き判定と候補の提示・仮押さえ・確定の依頼
- 運用側の承認・変更の承認・取消
- データの書き出し・読み込み・初期化
デモ限定
見せ方のために簡略化していること
- スタジオは架空の1室、平日10時〜18時・1回60分
- /demos/booking は週の予定表を操作する簡易版で、保存しない
未接続
公開版では接続していないもの
- Googleカレンダーなど外部カレンダー
- 予約確認のメール・SMS
- AIによる文章の解釈
本番化に必要なこと
実案件で追加で設計・実装するもの
- スタッフ・部屋ごとの空きと、休業日の管理画面
- 外部カレンダーとの双方向の同期と、重複の防止
- 通知とリマインダー、キャンセル規定
07DELIVERY & QUOTE
納品物と、見積もりの目安
参考価格 要件により見積／納期目安 要件確定後に提示。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。
もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
Next.js / React / TypeScript / CSS
設計・デザイン・実装・内部QA・ドキュメント整理
要件確定後に提示
要件により見積
- 文章から日時を読み取り、読み取れない項目は推測せず明示
- 埋まっているときは、前後の準備時間まで踏まえた空き候補を提示
- 予約者の合意とお店の承認、2つの記録がそろった時だけ確定
- 変更は合意するまで元の予約を消さず、変わる所だけを表示
- ソースコード・設定ファイル
- 起動・更新手順のREADME
- 画面仕様・検証項目一覧
- PC / Tablet / Mobile表示
- キーボード操作・コントラスト
- リンク・入力・エラー状態
見積もりが変わるところ
- 予約の対象（人・部屋・機材）と同時に扱う数
- 外部カレンダーや決済との連携
- 通知（メール・LINE）の有無
- スタッフ用の権限と管理画面の範囲
参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。
08CONTEXTUAL CONTACT
このデモのような制作を相談する
近いと感じた機能に印をつけてください。相談フォームに「DAYBOOKを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。
つくりたいものを、
聞かせてください。
まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。
打ち合わせの前に、相談できます。
- 01相談を送信
- 02内容を確認
- 03メールで返信
- 04合意して制作開始
金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。
案件サイトからのご相談は、そのサービス内メッセージでも進められます。