ウェブサービス／美容室・予約管理システム

Hair Salon Corsage

灯りを落とした夜会のように、
静かに髪をととのえる。

架空の美容室を題材にした、予約管理システムです。プラム黒の地にシャンパン色の文字を合わせ、WebGPUで毛束を動かすトップページから、担当・メニュー・日時を一つずつ選ぶWeb予約、スタイリスト紹介、店舗側の予約台帳・カルテ・売上集計までを一つのデモにまとめました。

作品を開く

架空の美容室を題材にした自主制作です。予約・会計は模擬で、実際の来店や決済は行いません。

深夜でも迷わず、
最後まで選びきれるように。

予約の多くがスマートフォンから、しかも深夜や早朝に行われる前提で組み立てています。担当・メニュー・日時・お客様情報・確認の5段階に分け、一画面で一つだけ決める形にしました。決めた段は一行にたたまれ、次の段だけが開きます。

公開側ではサロンの空気を先に伝え、店舗側には同じ予約データを扱う台帳とカルテを置いています。利用者と店舗スタッフ、どちらの側からも試せます。

地の色をプラム黒、文字をシャンパン色にそろえ、差し色にワインローズを一色だけ使っています。見出しはShippori Mincho B1、本文はZen Kaku Gothic New、数字と英字の小見出しにはCormorant Garamond Italicを使いました。

スタイリスト紹介は1人1画面の左右分割で、写真を60%まで大きく使い、ランク・指名料・得意分野をその隣に添えています。ページを送るたびに次の担当へ切り替わり、そのまま指名予約へ進めます。

予約は担当・メニュー・日時・お客様情報・確認の5段階に分かれ、決めた段は一行にたたまれます。右側には予約票が置かれ、担当・メニュー・日時・所要時間・料金が選ぶたびに埋まっていきます。

日時は7日×15分刻みの週グリッドで空きを示し、平日昼割は自動で適用されます。完了画面では予約票をCanvasでPNGに書き出し、.ics形式での保存も試せます。会計は模擬で、実際の来店や課金は行いません。

スマートフォンでは左下に並ぶ縦の目次を「目次」ボタンへたたみ、見出しと写真を縦に並べます。予約ボタンは画面の右上に残し、動きを減らす設定では毛流れのアニメーションも静止画に切り替わります。