ウェブアプリ／美容室・サロン予約ポータル

サロンズアップ

その席は、
いま空いている。

架空の運営会社を題材にした、美容室・サロンの予約ポータルです。行が店、列が時刻の空席盤をトップのヒーローに置き、⌘Kで開く自然文のコマンドパレットから条件を書くだけで空き枠を探せます。予約の確定、店舗での受け入れ、掲載や口コミの審査までを一つのデモとしてまとめました。

作品を開く

架空の運営会社を題材にした自主制作です。決済・通知は模擬で、実際の課金や送金は行いません。

探して回るのではなく、
空いている席を選ぶ。

サロンを眺めて選ぶのではなく、行きたい日時が先に決まっている人が使う前提で組み立てています。トップには行が店、列が時刻の空席盤を置き、セルの数字がその時刻に担当できる人数を示します。

セルを選ぶと右に予約パネルが開き、そのまま決済まで進めます。利用者・店舗スタッフ・運営者の立場を切り替えると、同じ予約データを役割ごとの画面から確認できます。

地を白、文字を墨にし、空いている枠だけにライムの差し色を使っています。見出しはM PLUS 1、本文はBIZ UDPGothic、時刻や金額はIBM Plex Monoの等幅で組み、数字を読み取りやすくしました。

サロン詳細は写真3枚の横帯を画面いっぱいに置き、メニュー・スタッフ・口コミはタブで切り替えます。空きの面には人数の数字を必ず添え、色だけに頼らない表示にしています。

⌘K（またはCtrl+K）で開くコマンドパレットに「明日 19時中目黒カット指名なし」のような自然文を書くと、条件がその場で解釈され、店・サロン・ページの候補が並びます。盤も同じ条件に絞られ、URLにも条件が残ります。

選んだ枠は仮押さえのバーとともに右のパネルへ引き継がれ、そのまま決済まで進めます。立場を切り替えれば、店舗の予約台帳やカルテ、運営側の掲載・口コミ審査まで試せます。決済と通知は模擬で、実際の送金やメール送信は行いません。

スマートフォンでは見出しと説明を空席盤より前に置き、検索条件をその下へ縦に並べます。ナビゲーションは折りたたみ、立場の切り替えは画面上部に残しました。