SUI hair atelier ― 予約体験デモ ================================================== 架空の美容室の予約フローのデザイン／プロトタイプです。 実店舗ではありません。実際の予約は作成されません。 ■ ファイル -------------------------------------------------- SUI hair atelier 予約アプリ.dc.html デザイン本体。PC側の説明 ＋ 390px 端末モック。 Tweaks: showIntro（説明の表示）/ startStep（開始ステップ 1–5）/ showEndTime（時間枠に終了時刻を併記） booking.html 単体で動く版。CSS / JS / SVG をすべて内包。 外部ライブラリ・外部フォント・外部画像を一切読み込みません。 ファイルをダブルクリックするだけで動作します。 notes.txt このファイル。 ■ 画面フロー -------------------------------------------------- ① メニュー → ② 担当者 → ③ 日時 → ④ 内容確認 → ⑤ 完了見本 ・「次へ進む」で前進。④ では「デモの予約を確定」。 ・「戻る」で①〜④を後退。戻っても選択内容は保持されます。 ・⑤ の「最初から試す」で全選択をリセットし ① へ。 ・進む前に必須選択を検証。未選択のまま押すと フッターにエラーメッセージを表示し、前進しません。 ・現在ステップはヘッダーの「STEP n / 5」、プログレスバー、 5つのステップ名（現在のみ白＋太字）の3か所で示します。 ■ 固定サンプルデータ -------------------------------------------------- メニュー（すべて税込・指名料なし・追加料金なし） カット 60分 ¥5,500 カット＋カラー 120分 ¥12,100 ヘッドスパ 45分 ¥4,400 担当者（実在人物ではありません。顔写真・経歴は使用していません） おまかせ 空いているスタッフが担当します 青木 ショート・骨格に合わせた設計が得意 森 カラー・透明感のある色づくりが得意 日付（2026年10月1日(木) 〜 10月7日(水) の1週間で固定） 10/1(木) 10/2(金) 10/3(土) 10/4(日) 10/5(月)=定休 10/6(火) 10/7(水) 時間枠（営業時間 10:00〜19:00） 10:00 / 13:00 / 16:00 最長コース120分でも 16:00 + 120分 = 18:00 で閉店を越えません。 選択不可の枠と、その理由表示 10/5(月) → 日付セルを破線グレー＋「定休」と表記 10/1 13:00 → 「この枠は満席です（固定サンプル）」＋「満席」バッジ 10/3 10:00 → 同上 ■ 状態遷移 -------------------------------------------------- state = { step, menu, stylist, date, time, error } メニュー選択 → menu を更新、error クリア 担当者選択 → stylist を更新、error クリア 日付選択 → date を更新、★ time を null にクリア、error クリア （別の日に切り替えると時間選択は必ず解除される） 時間選択 → time を更新、error クリア 次へ → 検証OK なら step+1、NG なら error のみ更新 戻る → step-1（選択値はそのまま保持）、error クリア 最初から試す → 全項目を初期値に戻し step=1 検証ルール step1: menu 必須 → 「メニューを選んでください。」 step2: stylist 必須 → 「担当者を選んでください。」 step3: date 必須 → 「日付を選んでください。」 step3: time 必須 → 「時間を選んでください。」 金額・所要時間の一貫性 ④確認・⑤完了に出る税込総額／所要時間は、いずれも選択中の メニュー1件から算出しています（追加料金・指名料の加算なし）。 リセットするまで state を保持するため、①〜⑤で必ず一致します。 ■ アクセシビリティ／レイアウト上の配慮 -------------------------------------------------- ・選択肢はすべて