サイト＋CMS制作（架空案件）
更新を、お店の人の手に戻す。
架空のネイルサロン「atelier muku nail」を題材に、お客さんが見る1ページサイトと、お店の人が自分で書き換えるための管理画面をセットで作りました。実在の店舗ではありません。店名・住所・料金・写真はすべてダミーです。
何を作ったか
他のLP制作と違うのは、渡したあとに動き続けることを前提にしている点です。営業日が変わった、今月のおすすめを差し替えたい、新しい写真を載せたい。そのたびに制作者へ連絡して待つのではなく、お店の人がその場で直せるようにしました。
題材にネイルサロンを選んだのは、個人でやっている小さなお店を想定しているからです。パソコンが得意ではない人が、予約の合間に触れる画面になっているかを基準に作りました。
お客さんが見る画面
お知らせ・今月のおすすめ・メニュー・写真・予約導線までを1ページにまとめています。
お店の人が見る画面
更新できる場所を5つだけに絞りました。左の並びが、そのまま公開ページの上から下の順番になっています。
ここで決めたのが「レイアウトは触らせない」ことです。文章と写真だけを差し替えられるようにして、並び順・余白・配色は変えられないようにしました。自由度を上げるほど画面は崩れやすくなり、一度崩れるとお店の人は触らなくなります。管理画面の説明文にも「レイアウトや見た目は固定です」と書いて、最初から期待値を揃えています。
お知らせを1回書けば、貼る文面までできる
小さなお店ほど、同じ内容をサイト・Instagram・LINE・予約サイトへ何度も書き写しています。そこを1回にまとめました。
連携はあえてコピーと画面を開くところまでにしています。各サービスのAPI連携は、審査やアカウントの準備がお店の側に必要で、そこで止まってしまうためです。まず確実に動く形を置いて、必要になってから深くする順にしました。
使ったもの
- Next.js（App Router） — 公開ページと管理画面を1つのアプリにまとめています
- Supabase — ログイン・データ・画像の保管。お店ごとにデータが分かれるようにしています
- 業種の切り替え — 見出しや写真の構成を業種ごとに持たせてあり、ネイルサロンと飲食店を同じ仕組みで出し分けられます
ログインが必要な管理画面を含むため、実物の公開はしていません。
実際に触ってみたい場合はご相談ください。