SELF-INITIATED DEMO / 自主制作
KISSA — Cafe Site & Orders — カフェの公式サイトと、注文・席予約
OVERVIEW
見て終わりではなく、注文と予約まで進める店舗サイト。
Live Demoを操作する架空店舗の自主制作です。注文も予約も画面上では最後まで進みますが、実際の注文・予約・支払いは発生せず、入力内容はお使いのブラウザにだけ保存されます。
- AI
- 使っていません計算と決まった規則だけで動きます。
- 保存先
- このブラウザカート・注文・予約・売り切れの設定を、このブラウザにだけ保存します。
- 外部送信
- なし注文・予約・支払いは発生しません。支払いは結果を選んで試す模擬で、カード情報は入力しません。
- SCOPE
- Design + Build + QA
- EST. DELIVERY / 納期目安
- 7〜14営業日
- PRICE GUIDE / 参考価格
- 50,000円〜
WORKING VERSION / 操作できる版
画面を動かして試せます
この制作例には、実際に操作できる店舗サイトがあります。メニューを選んでカートに入れ、受取時間を決めて注文し、席を予約して変更まで行えます。運営側の画面では、同じ記録を店の立場から動かせます。
架空の店舗です。実際の注文・予約・支払いは発生せず、入力した内容はお使いのブラウザの中だけに保存されます。
01THE PROBLEM
雰囲気を伝えながら、注文と予約を迷わず終えられること。
- 想定したクライアント
- 新しく店を開く、席数の少ない個人経営のカフェ（架空）
- 想定依頼
- 新規オープンするカフェの世界観とメニューを伝え、注文と席の予約まで受けられる公式サイトを制作したい。
- 起きていること
- 持ち帰りの注文は電話、席の予約はSNSのメッセージ。混む時間ほど、受け取り時刻の確認と取り違えが増える。
- 困りごと
- 店の雰囲気を伝えるサイトと、注文・予約の受付が別々で、どちらも中途半端になっている。
- 制作コンセプト
- 静かな朝、木漏れ日、一杯の余韻。紙のような色と深いブラウンで編集。
想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。
02SIGNATURE JOURNEY
一杯を選んでから、店の厨房に届くまで。
メニューから注文、席の予約、変更・取消、そして店側の運営画面までを一つの記録でつなぎました。
メニューから選ぶ
14品から選び、温度・サイズ・オプションを決めてカートへ。売り切れや時間外の商品は、選べない理由が出ます。
受取時間を決める
調理時間と営業時間から、受け取れる時間だけを候補に出します。混み合う時間枠は選べません。
注文を確定する
内容を確認して注文。受付番号が出て、注文の状況は「わたしの記録」でいつでも見られます。
店の画面で進める
運営画面に同じ注文が届き、「調理を始める」「受け渡した」と進めると、お客様側の表示も変わります。
画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す
訪れる前に、空気感まで。
店舗の温かさと、コーヒーの質感を伝える写真構成。
AI生成の架空店舗・メニューのイメージです。
03KEY INTERACTIONS
触って確かめられる操作
見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。
選べない理由を出す
売り切れ・時間外・販売終了を商品ごとに区別。カートに入れる前に止まり、なぜ買えないかを書きます。
受取時間は店の都合から計算
15分刻み・1枠3件まで・6時間先まで。営業時間外と定休日の水曜は出しません。
席の予約・変更・取消
人数に合う席だけを出し、10分の仮押さえのあとに確定。確定した予約は日時の変更と取り消しができます。
店側の操作が客側に届く
運営画面で売り切れにすると、メニューでもすぐ選べなくなります。注文の進行も同じ記録を読みます。
04BEHIND THE SYSTEM
画面の裏で、何が決まっているか
データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。
データ
- 商品・オプション・販売状態（販売中／売り切れ／時間外／販売終了）
- 注文（受付番号・明細・受取時間・支払いの状態）
- 席と予約（人数・仮押さえの期限・変更の履歴）
状態の流れ
- 受付
- 調理中
- 受取待ち
- 受け渡し済み
安全のための決まりごと
- 確定の直前に、受取枠と商品の在庫状態をもう一度確かめる
- 仮押さえは10分で自動的に解放し、席を抱え込まない
- 未払いのまま受け渡した注文は、その事実を記録に残す
05RESPONSIVE & ACCESSIBILITY
ひとつの体験を、どの画面でも。
PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。
- 360pxの画面幅から主要な操作ができること
- キーボードだけで操作でき、フォーカスが見えること
- 入力欄にラベルがあり、エラーの理由が文字で出ること
- 動きを減らす設定（prefers-reduced-motion）を尊重すること
06SCOPE & BOUNDARIES
できること・していないことを、先に書く
自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。
実装済み
このデモで実際に動くこと
- メニュー・カート・受取時間・注文・取消
- 席の空き確認・仮押さえ・確定・変更・取消
- 運営画面（注文の進行・販売状態・本日の席・売上）
- データの書き出し・読み込み・初期化
デモ限定
見せ方のために簡略化していること
- 支払いは結果を選んで試す模擬（5通り）
- 店舗・商品・価格は架空
- お客様と店の画面を同じブラウザで行き来する
未接続
公開版では接続していないもの
- 決済サービス
- 予約確認メールの送信
- 複数の端末・スタッフ間での共有
本番化に必要なこと
実案件で追加で設計・実装するもの
- サーバー側の注文・予約データベースと認証
- 決済サービスとの接続と返金の運用
- 通知（メール／LINE）と、店舗スタッフの権限
07DELIVERY & QUOTE
納品物と、見積もりの目安
参考価格 50,000円〜／納期目安 7〜14営業日。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。
もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
Next.js / React / TypeScript / CSS
設計・デザイン・実装・内部QA・ドキュメント整理
7〜14営業日
50,000円〜
- 14品のメニューと商品詳細・カート
- 調理時間と営業時間から出す受取時間
- 空席から選ぶ席予約と、仮押さえ・変更・取消
- 運営画面（注文の進行・売り切れ・売上）
- ソースコード・設定ファイル
- 起動・更新手順のREADME
- 画面仕様・検証項目一覧
- PC / Tablet / Mobile表示
- キーボード操作・コントラスト
- リンク・入力・エラー状態
見積もりが変わるところ
- 商品数とオプションの種類
- 予約の対象（席・時間・コースなど）と店舗数
- 決済・通知・POSなど外部サービスとの接続
- 写真撮影や原稿づくりを含めるか
参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。
08CONTEXTUAL CONTACT
このデモのような制作を相談する
近いと感じた機能に印をつけてください。相談フォームに「KISSAを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。
つくりたいものを、
聞かせてください。
まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。
打ち合わせの前に、相談できます。
- 01相談を送信
- 02内容を確認
- 03メールで返信
- 04合意して制作開始
金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。
案件サイトからのご相談は、そのサービス内メッセージでも進められます。