- 区分・種別
- サンプル制作 / 整体院の1ページサイト
- 担当範囲
- 企画・構成・原稿・デザイン・HTML実装・予約デモ制作（AIを活用した自主制作）
- 使った技術
- HTML・SCSS・JavaScript
制作の目的
「予約の電話対応が多く、施術に集中できない」という架空の院長の悩みを出発点にしました。料金や所要時間、来院の流れ、道順などを先に確認できるようにし、予約後の変更・キャンセルまでWebで進められる受付を考えました。院長が目の前の方に向き合う時間を大切にできることを目指した、学習用の制作です。
工夫したところ
- 料金・所要時間・追加料金の有無・初回来院の流れ・よくある質問をまとめ、来院前に知りたいことを確認しやすくしました。
- ページの先頭に本日の営業状況と空いている時間を表示し、空き確認から予約へ進めるようにしました。
- 予約完了後はメール見本から日時変更・キャンセルまで操作できるようにし、予約後のやり取りも含めた流れを制作しました。
- 白と青、明朝体、自然光を感じる写真で、穏やかな整体室の雰囲気を表現しました。
- スクロールに合わせて写真がゆっくり動く演出と、駅からの道順をたどるアニメーションを加えました。動きを抑える端末設定にも対応しています。
実際のサイトで、動きや読みやすさを確かめていただけます。
サイトを見る（別タブ）デイトラ第5回課題として制作した、架空の整体院の学習用デモです。実際の予約受付・メール送信・決済は行いません。予約内容はこのページを開いている間のみ保持され、再読み込みすると消えます。