永瀬美容室 予約・顧客管理システム
APP / DATABASE SYSTEM
美容室の「予約」と「顧客管理」をひとつにまとめた、データベース接続型のWebシステムです。お客様用と管理者用の2つの画面を持ち、予約・顧客・メニュー・売上のデータはすべてデータベースで一元管理。ログインする人の権限によって、見える画面と操作できる内容が切り替わります。バナーやサイト制作だけでなく、こうした「業務の仕組みそのもの」をつくれることを伝えたくて制作しました。
実際に触ってみる（公開デモ）
このシステムはデモサイトとして公開しています。下のテスト用アカウントでログインすると、お客様側・管理者側の両方をそのまま体験できます。
- お客様として体験 → 会員ID：000 ／ パスワード：000
- 管理者として体験 → 会員ID：123 ／ パスワード：123
※画面内の顧客名・予約データはすべて架空のデモ用データです。フォームには実際の個人情報を入力しないでください。
このシステムでできること
お客様側
- 会員IDとパスワードでログイン（マイページで会員情報・パスワードの変更も可能）
- 担当者 → メニュー → 日時 → 確認 の4ステップで迷わず予約できる新規予約ウィザード
- 予約の確認ページから日時変更・キャンセル
- 過去の施術履歴の閲覧
管理者側
- ダッシュボードで「本日の予約」「今後の予約合計」「登録顧客数」「今月の施術売上」をひと目で把握
- カレンダー形式の予約管理（日別の件数表示・定休日の制御・来店済み/キャンセル処理）
- 顧客管理（検索・新規登録・カルテ・編集・削除、来店回数の自動カウント）
- 施術メニューとスタイリストの追加・編集・削除（料金・所要時間もここで管理）
画面紹介：お客様側
画面紹介：管理者側
つくり方（制作の流れ）
STEP 1 要件の整理
「お客様は予約を取りたい・変更したい」「お店は今日の動きと売上を見たい」——立場ごとにやりたいことを書き出し、必要な画面と機能を決めました。最初に全体像を固めることで、あとの手戻りを防ぎます。
STEP 2 データベース設計
顧客・スタイリスト・施術メニュー・予約・施術履歴の5つのテーブルに分け、予約テーブルには「誰が・誰に・どのメニューを・いつ」を顧客ID・スタイリストID・メニューIDの紐付け（外部キー）で持たせました。売上や来店回数は、記録したデータから集計して算出します。
STEP 3 ログインと権限の実装
会員IDとパスワードでログインし、セッションでログイン状態を保持。アカウントの権限（管理者／お客様）によって表示するメニューと操作できる機能を出し分けています。
STEP 4 予約フローの実装
担当者→メニュー→日時→確認の4ステップウィザードを実装。選んだ内容を引き継ぎながら進み、最後に確認して確定するとデータベースに予約が登録されます。定休日や予約済みの時間帯は選べないように制御しました。
STEP 5 管理画面の実装
ダッシュボードの件数や売上はデータベースへの集計クエリで算出。カレンダーは月ごとの予約を日別に数えて表示しています。顧客・メニュー・スタイリストは登録・編集・削除（CRUD）を一通り実装し、システムの運用が管理画面だけで完結するようにしました。
STEP 6 デザイン調整
美容室の世界観に合わせて、ベージュ×ブラウンの落ち着いた配色に統一。画面設計や実装のたたき台はAI（Claude）に生成させ、細部の使い勝手と見た目は自分の手で調整しています。
使用技術
- フロントエンド：HTML / CSS / JavaScript
- サーバーサイド：PHP（セッションによるログイン管理・権限の出し分け）
- データベース：MySQL（5テーブル構成・外部キーで紐付け・集計クエリで売上算出）
- 開発：Claudeとのペア開発（設計の壁打ち・コード生成・デバッグ）
この作品で伝えたいこと
見た目をつくるだけでなく、データベースの設計から権限管理・予約ロジックまで含めた「動く業務システム」を、AIを使いこなすことで個人でもここまで形にできます。予約管理・顧客管理・在庫管理など、お店の困りごとに合わせた仕組みづくりが得意です。
※これは架空の美容室を想定した自主制作の管理システムです。AIを活用して制作しました。画面内の人物名・電話番号などはすべてダミーデータです。