美容室 SUIの予約アプリ

Mobile app designテンプレートで、架空の美容室「SUI hair atelier」の予約アプリを制作してください。日本語、390px幅を中心とした高精細デザインと、最初から確認までを触れるプロトタイプをお願いします。他のカフェやギャラリーの雰囲気には合わせなくてよいです。

意匠：アイスブルー、インクネイビー、銀灰色。都会的で清潔、適度に大きな文字と広い余白、情報階層のはっきりしたアプリ。美容室の説明より「迷わず日時を選べる」ことに集中。外部写真に頼らず、オリジナルの抽象的なヘアラインや図形で品よく。架空店・予約体験デモであることを明記。

5画面を順に遷移：①メニュー ②担当者 ③日時 ④内容確認 ⑤完了見本。戻る操作で選択を保持、進む前に必須選択を検証、現在ステップがわかる。個人情報を入力させず、最後までローカルのデモ。選択内容と税込料金/所要時間が最終画面まで一致すること。
メニュー：カット60分5,500円／カット＋カラー120分12,100円／ヘッドスパ45分4,400円。すべて税込、指名料なし、追加料金なしのサンプル。
担当者：おまかせ／青木（ショート）／森（カラー）。実在人物の顔写真や経歴を使わない。
日付：2026年10月1日(木)〜10月7日(水)の1週間を固定サンプルとし、10月5日(月)定休。現実の空き枠ではないと明示。時間枠は10:00、13:00、16:00（営業時間10:00〜19:00、どのコースでも閉店を越えない）。10月1日13:00と10月3日10:00は満席で選択不可。選択不可の理由を表示する。別の日へ切替時は以前の時間選択をクリア。
確認画面：選択メニュー、担当、日時、税込総額、所要時間。「デモの予約を確定」ボタン。完了画面は「予約体験が完了しました」「実際の予約は作成されていません」と明示。最初から試すボタンで全選択をリセット。決済、会員、送信、通知、保存は実装しない。

スマホで画面下の固定ボタンが本文を隠さないこと。操作領域44px以上、選択状態は色だけに依存しない。キーボードでも選択でき、画面変更で見出しへフォーカス。PCでは落ち着いた説明と中央のアプリの見本を見せ、スマホでは横はみ出しなく収める。

成果物：デザイン本体、独立した booking.html（CSS/JS/SVG内包、外部ライブラリ/フォント/画像不要）、notes.txt（フロー、固定データ、状態遷移、未実装の実サービス機能）。自分でも一連のフローと戻る・定休/満席・リセットをチェックして直し、ファイルをプロジェクトに残してください。

店名・商品・価格・色の指定を、自分のお店に合わせて書き換えてください。生成結果は利用前に確認しましょう。