01Overview
制作概要
福岡・大名の看板を出さないメンズグルーミングサロンを想定した1ページ完結のLP。「削ぎ落として、整える」という店名（鉋）の思想を軸に、黒基調・大きな明朝体・スクロール連動の演出で世界観を作りました。演出を5種類重ね、同一条件で表示速度も再計測しています。
- 制作区分
- 自主制作デモ（架空の店舗）
- 業種
- メンズグルーミングサロン・理容
- サイト種別
- LP（1ページ）＋ プライバシーポリシー
- 納期目安
- 実案件想定で 2〜3週間
02Problem
課題
完全予約制の「入りにくさ」を解いて、ネット予約へ迷わず進ませる
- 制作目的
- ネット予約（主CV）へ迷いなく進ませる。完全予約制・マンツーマンという「入りにくさ」を、料金と所要時間と施術の流れを先に開示することで解消し、月1回通う定期客を育てる。
- 読み手
- A：身だしなみに投資する30〜40代のビジネスパーソン。月1回の定期利用を主CVとする層。B：結婚式・撮影・面接の前に一度だけ整えたいスポット利用層。「いくらで、何分で、何をされるのか」を予約前に確定させたい。
03Research
調査と気づき
リサーチの仮説を実測で棄却してから配色を決めた
「メンズサロンは黒基調が定石」という仮説で同業7サイトを調査したところ、実際に黒を主色に置いていたのは想定を大きく下回りました。定石ではなく差別化として黒を選ぶ、と位置づけ直したうえでアートディレクションを確定しています
04Decision
設計判断
理容師免許保有だからできる顔そり（シェービング）／1席・完全個室のマンツーマン／福岡・大名の看板を出さない隠れ家という立地。安さではなく「削ぎ落として、整える」という思想で差別化する。
架空店舗であることを隠さず明示した
ポートフォリオ用の架空店舗のため、電話番号は架空の例示・予約リンクは無効化し、その理由を画面上に明記。全画像がAI生成である旨もフッターに記載しています。実在の店舗を騙らないことを制作上の制約として最初に定義しました
05Implementation
実装
動かない環境でも壊れない作りにした
オープニングの黒幕は「既定を非表示・アニメーションが走ったときだけ表示」に反転させ、CSSが効かない環境で画面が塞がる事故を構造的に潰しました。GSAPの全演出も prefers-reduced-motion 配下に置き、演出が出なくても情報とCTAは完全に読める設計です
06Verification
検証
演出と表示速度の両立を、計測しながら検証した
文字分割・画像マスク・pin・横スクロール・パララックスと演出を重ねる構成でありながら、Webフォントを実使用文字にサブセット化して自前配信に切り替えました。制作当時の計測ではPerformance 99でしたが、掲載している数値は3件を同一条件で測り直したものです。動きの量とスコアはトレードオフではない、という結論は変わっていません
07Result
成果
自主制作のため事業成果はありません。数値は、演出を5種類重ねた状態の表示性能を同一条件で測り直したものです。
モバイル実測（Lighthouse・同一条件）
- Performance
- 85
- LCP
- 3.1秒
- CLS
- 0.002
08Screens
Desktop / Mobile
枠の中を縦にスクロールすると、ページ全体を確認できます
09Scope
担当範囲・使用技術
担当範囲
- 競合デザインリサーチ（同業7サイトを実測）
- 要件定義
- 画像プラン設計
- 構成設計
- コピーライティング
- アートディレクション
- モーション設計（motion-spec 策定）
- AI画像生成（9点）
- 実装
- レスポンシブ対応
- SEO・構造化データ
- 法規制チェック（理容師法・景表法・薬機法）
- クロスモデルレビュー
- 公開前検証
- デプロイ
使用技術
- Astro（静的）
- GSAP 3.15 + ScrollTrigger
- Webフォント自前配信（サブセット化）
- AI画像生成（9点）+ WebP最適化
- Vercel