Yuta Matsufuji

顧客要件 / 実装ケーススタディ

Dearetoile

長爪スカルプを主軸としたネイルサロンサイト・予約導線の実装ケース

何を作ったか

長爪スカルプを主軸に、メニュー、予約導線、ガイド、ポリシーを整理し、Next.jsのWebサイト・LPとして実装した案件です。

どの制約を整理したか

店舗のマーケティング検証に合わせ、訴求やページ表現の更新に対応しながら構築している顧客案件ケーススタディです。

誰向けか

長爪スカルプやネイル施術を検討し、メニュー・料金・予約方法・来店前の注意事項を確認したい利用者。

担当範囲

顧客要件、店舗運用上の制約、予約出口、補助導線、ページ構成を整理し、レスポンシブなWebサイトへ落とし込みました。

種別実店舗向けWebサイト / LP
担当要件整理 / 情報設計 / UI実装 / 予約CTA / ガイド / 公開準備
主な技術Next.js / React / TypeScript / Tailwind CSS / Next Image
業務課題店舗制約、メニュー整理、予約出口、補助導線、モバイル対応
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Next Image
  • 静的コンテンツ

実際の画面

現行の公開サイトで確認できた画面です。素材画像ではなく、実際のページ表示を掲載しています。クリックすると拡大できます。

Dearetoile公式サイトのトップページ PC表示
PC版トップページ。店舗の打ち出し、ナビゲーション、予約CTAを確認できる画面。
Dearetoile公式サイトのトップページ モバイル表示
スマートフォン版トップページ。ファーストビューと予約CTAの見え方を確認できる画面。
Dearetoileのスカルプ施術向けLP PC表示
スカルプ施術向けLP。訴求、価格、予約CTAをまとめたPC画面。
Dearetoileのメニューと予約CTA PC表示
メニュー・料金確認からHot Pepper Beautyの予約へ進む部分を確認できる画面。
Dearetoileご利用ガイドのモバイル表示
ご利用ガイド。初回来店、次回予約、当日連絡、予約CTAを確認できるモバイル画面。

顧客要件と店舗制約

確認した打ち出し

現行実装では、長爪スカルプを主軸に、親しみやすさ、清潔感、予約前に確認したい情報を整理しています。

施術時間

オーナーのスカルプ枠は2時間半+15分インターバルで扱う方針。

予約上限

1日最大予約人数は店舗全体で最大4名。全員スカルプ4名を前提にしない設計。

完全予約制

予約時間を守って来店できる方へ自然に案内する方針を反映。

予約導線の設計

顧客が予約する導線と、店舗が予約を管理する導線を分けています。

顧客が予約するまで
公式サイト / LP
メニュー・料金・施術内容を確認
Hot Pepper Beautyで空き状況確認・予約
来店・施術
店舗が予約を管理する流れ
Hot Pepper Beautyから予約受付
SALON BOARDで予約・顧客情報を管理
来店準備・施術対応
LINE等の補助導線
不明点・補足確認
LINE
必要な確認
予約はHot Pepper Beautyへ戻す
電話は緊急時・例外時のみ

情報設計・ページ構成

顧客要件と店舗制約

現行実装と要件メモから、長爪スカルプを主軸に、可愛い、親しみやすい、清潔感のあるページ表現を重視する方針として整理しました。

  • オーナーのスカルプ枠は2時間半+15分インターバルで扱う。
  • 1日最大予約人数は店舗全体で最大4名。
  • 完全予約制のため、予約時間を守って来店できる方へ自然に案内する。
  • 店舗のマーケティング検証に合わせ、訴求やページ表現の更新に対応しながら構築しています。

予約導線の設計

顧客側の予約出口はHot Pepper Beautyへ集約し、SALON BOARDは店舗側の予約・顧客情報管理として扱います。LINEは主予約ではなく、補足確認に使う副導線として整理しました。

  • メニュー確認からHot Pepper Beautyの空き確認へ進めるCTAを配置。
  • LINEは不明点やオフ・長さ・撮影条件などの補足確認に限定。
  • 予約情報を複数サービスへ分散させず、店舗運用に合わせて一元化。

情報設計・ページ構成

トップページ、長爪スカルプ向けLP、ご利用ガイド、プライバシー、予約ポリシー、写真掲載ポリシー、口コミポリシー、Cookie、特商法、施術同意などのページが実装されています。

確認可能な納品物

売上や予約数ではなく、コードから確認できる納品物として、店舗公式サイト、LP、予約CTA、ご利用ガイド、メニュー・料金確認導線、Hot Pepper Beautyへの予約集約、モバイル対応、metadata / OGPを掲載対象にしています。

レスポンシブ対応

トップ、LP、ガイドではPCとスマートフォンで見せ方を変える画像やCTA、レイアウトが実装されています。LPではPC用・モバイル用の対象者カード画像も分けて管理されています。

実装内容

公式トップ、長爪スカルプ向けLP、ご利用ガイドの実装
メニュー・料金確認、予約CTA、FAQ、ポリシーページの構成
顧客向け予約はHot Pepper Beautyへ集約し、SALON BOARDは店舗側の予約管理として整理
LINE、Instagram、Google Mapsなど補助接点の整理
metadata、canonical、OGP、manifest、faviconの基本設定

確認可能な納品物

店舗公式サイト
長爪スカルプ向けLP
予約CTA
ご利用ガイド
メニュー・料金確認導線
Hot Pepper Beautyへの予約集約
SALON BOARDでの店舗側予約管理
LINEによる補助確認
モバイル対応
metadata / OGP

レスポンシブ対応

PCとスマートフォンの見え方を分ける

トップ、LP、ガイドでは画像、CTA、セクション幅、カード配置をレスポンシブに調整しています。LPではPC用・モバイル用の対象者カード画像も分けて管理されています。

サイトで使用したビジュアル資産

実画面とは分けて、サイト内で使用したデザイン資産を補助的に掲載しています。

Dearetoileサイトで使用したメインビジュアル資産
公式トップで使用したメインビジュアル資産。
スカルプ・美フォルムメニュー用のビジュアル資産
スカルプ・美フォルムのメニュー訴求に使用した画像。
ご利用ガイド用の手元ビジュアル資産
ご利用ガイドの導入で使用したビジュアル資産。

担当範囲

Yuta Matsufujiが担ったこと

顧客要件、店舗運用上の制約、予約出口、補助導線、ページ構成を整理し、レスポンシブなWebサイトへ落とし込みました。

担当範囲・検証範囲

透明性

本ページは、既存実装のREADME、要件メモ、現行ページ、コンポーネント、データ定義から確認できる内容を掲載しています。店舗情報や顧客連絡先は、採用判断に不要なため本文へ転載していません。