#0 プロトタイプ(画面遷移)

01・1-1・02をつないだ動くプロトタイプ。スケジュールの予約カードをタップすると、その予約の施術の詳細(1-1)に遷移します。左上の戻るでスケジュールに戻ります。フッターの「顧客一覧」で顧客一覧(02)に、「設定」で設定画面(03)に、「スケジュール」で戻れます。顧客名・担当者・時間・メニュー・金額はタップしたカードに連動、画像とメモはサンプル固定です。

今日の共有事項

{{ n.text }}

{{ n.by }}
hair salon kiitos
{{ monthLabel }}
{{ w.label }}
・本日お誕生日のお客様が2名様いらっしゃいます。 ・今日からカラー剤が変更になっています。 ・明日は定休日です。誤って予約を取らないようお願いします。 ・昨日、待合いのソファでシルバーのピアスの落とし物がありました。レジ横の引き出しに保管しています。
{{ hour.label }}
{{ b.initial }} {{ b.name }} 誕生日
{{ b.menu }} {{ b.time }}
{{ b.initial }} {{ b.name }} {{ b.menu }} {{ b.time }}
14:20
施術前画像を追加
施術後画像を追加
施術の詳細
{{ d.dateLabel }}
{{ d.timeRange }}
{{ d.duration }}
{{ d.staffShort }} 担当者 {{ d.staffName }}
{{ d.custInitial }}
お客様 {{ d.customer }}
来店回数 {{ d.visits }} 電話番号 {{ d.phone }} タグ 指名 誕生日 敏感肌
メニュー
{{ m.name }} {{ m.min }} {{ m.price }}
合計 {{ d.total }}
施術前画像 2枚
施術前画像
施術前画像
施術後画像 2枚
施術後画像
施術後画像
いつも注意すること

地肌が敏感でアルカリカラーの刺激が出やすい。塗布前に保護オイルを必ず使用。毛先のダメージが強いので薬剤は弱め、放置時間も短めに。シャンプー時は湯温をぬるめに。

最終更新 8/26 18:04・南
来店ごとの記録 8/28
これまでの記録
6/12 南 里奈

夏に沖縄旅行の予定と伺い、海に入っても崩れにくい長さで調整。カラーは会社の規定で暗めに、と急な変更あり。

4/3 井上 陸

転職の面接が続くとのことで、いつもより短く軽さを抑えたイメチェン。仕上がりはかなり気に入っていた様子。

2/7 南 里奈

友人の紹介で来店。犬を飼い始めた話で盛り上がる。前の美容室で明るくされ過ぎたのが不満だったとのこと。

施術前 BEFORE
施術後 AFTER
施術前
BEFORE
施術後
AFTER
施術前 施術後 OVERLAY
BEFORE
{{ blendPct }}
AFTER
hair salon kiitos
該当する顧客がいません 名前・電話番号で検索してください
hair salon kiitos
フォーマット・項目の編集
アカウント
サポート・規約
アプリバージョン 1.0.0
01 スケジュール画面

当日のタイムテーブル(0:00–24:00)。担当者フィルタは複数選択、重なる予約は自動で列分割。日付タップで月カレンダー、+から「予定を追加」「予約を追加」。予約データはサンプル。

今日の共有事項

{{ n.text }}

{{ n.by }}
hair salon kiitos
{{ monthLabel }}
{{ w.label }}
・本日お誕生日のお客様が2名様いらっしゃいます。 ・今日からカラー剤が変更になっています。 ・明日は定休日です。誤って予約を取らないようお願いします。 ・昨日、待合いのソファでシルバーのピアスの落とし物がありました。レジ横の引き出しに保管しています。
{{ hour.label }}
{{ b.initial }} {{ b.name }} 誕生日
{{ b.menu }} {{ b.time }}
{{ b.initial }} {{ b.name }} {{ b.menu }} {{ b.time }}
14:20
02 顧客一覧画面

顧客のリスト。ヘッダーに検索バー(名前・かなの部分一致)と並び替えチップを置き、選択中のチップを再タップで昇順/降順を切替。五十音順のときのみチップの下に横並びのインデックス(あ〜わ行・A–Z・#)が出て、タップでその位置へスクロールします。行タップの遷移は未接続。顧客データはサンプル。

hair salon kiitos
該当する顧客がいません 名前・電話番号で検索してください
03 設定画面 作業中

フッター「設定」タブの遷移先。サロン情報、スタッフ、メニュー・料金、営業時間・受付枠、通知、データの書き出しなどの設定項目を置く想定。ヘッダーは02と同じ(メニュー・サロン名・通知・アカウント)、フッターは設定を選択中。項目を「フォーマット・項目の編集/アカウント/サポート・規約」の3グループに分けて並べています。各項目の遷移先はまだ未接続。

遷移元:フッター 設定タブ(01 / 02) 402 × 874 一覧+詳細の2階層を想定
hair salon kiitos
フォーマット・項目の編集
アカウント
サポート・規約
アプリバージョン 1.0.0
#1-1 施術の詳細画面

スケジュール画面(01)の予約カードをタップして開く詳細。顧客・メニュー・担当者・時間・金額・施術時の注意メモの確認と、各項目の編集と、下部にキャンセル導線。予約データはサンプル。

施術前画像を追加
施術後画像を追加
施術の詳細
2026年8月28日(金)
9:30 – 11:00
所要 1時間30分
担当者 南 里奈
お客様 佐藤 ひかり 様
来店回数 6回目(前回 2026年6月12日) 電話番号 090-2841-7736 タグ 指名 誕生日 敏感肌
メニュー
カット 45分 ¥5,500
カラー(リタッチ) 45分 ¥7,700
合計 ¥13,200
施術前画像 2枚
施術前画像
施術前画像
施術後画像 2枚
施術後画像
施術後画像
いつも注意すること

地肌が敏感でアルカリカラーの刺激が出やすい。塗布前に保護オイルを必ず使用。毛先のダメージが強いので薬剤は弱め、放置時間も短めに。シャンプー時は湯温をぬるめに。

最終更新 8/26 18:04・南
来店ごとの記録 8/28
これまでの記録
6/12 南 里奈

夏に沖縄旅行の予定と伺い、海に入っても崩れにくい長さで調整。カラーは会社の規定で暗めに、と急な変更あり。

4/3 井上 陸

転職の面接が続くとのことで、いつもより短く軽さを抑えたイメチェン。仕上がりはかなり気に入っていた様子。

2/7 南 里奈

友人の紹介で来店。犬を飼い始めた話で盛り上がる。前の美容室で明るくされ過ぎたのが不満だったとのこと。

#1-2 施術前後の比較画面(縦)

1-1の右下のボタンから開く画面。上半分が施術前、下半分が施術後。背景は黒。

施術前 BEFORE
施術後 AFTER
#1-3 施術前後の比較画面(横)

1-2と同じ機能を横向きのレイアウトで。左半分が施術前、右半分が施術後。背景は黒。端末は縦向きのまま、表示だけ90度回転した状態。

施術前
BEFORE
施術後
AFTER
9:41
#1-4 施術前後の比較画面(重ねて)

縦向き固定。施術前を下地に、施術後を上に重ねて表示。下部のスライダーで施術後側の不透明度を調整でき、0%で施術前、100%で施術後だけが見えます。スライダーは実際に動きます。

施術前 施術後 OVERLAY
BEFORE
{{ blendPct }}
AFTER