Men's Grooming

KANNA

メンズグルーミングサロン・理容　／　LP（1ページ）＋ プライバシーポリシー

自主制作（実案件を想定し、要件整理から公開まで実案件と同一フローで制作）

本番サイトを開く
  1. 狙い

    完全予約制の「入りにくさ」を解いて、ネット予約へ迷わず進ませる

  2. 打ち手

    料金・所要時間・施術の流れを先に開示し、世界観はコピーと動きで伝える

  3. 効果

    価格で比較されず、思想に共感した層が月1回通う設計

スクリーンショット

PC
KANNA のPC表示（ページ全体）

▼ 枠内スクロールで全体を確認できます

SP
KANNA のスマートフォン表示（ページ全体）
01Approach

工夫したポイント

  1. 01

    リサーチの仮説を実測で棄却してから配色を決めた

    「メンズサロンは黒基調が定石」という仮説で同業7サイトを調査したところ、実際に黒を主色に置いていたのは想定を大きく下回りました。定石ではなく差別化として黒を選ぶ、と位置づけ直したうえでアートディレクションを確定しています

  2. 02

    演出を主役にしながら Performance 99 を維持

    文字分割・画像マスク・pin・横スクロール・パララックスと演出を重ねる構成でありながら、Webフォントを実使用文字にサブセット化して自前配信に切り替え、LCP 1.55秒・CLS 0.002 を達成。動きの量とスコアはトレードオフではないことを実証しました

  3. 03

    動かない環境でも壊れない作りにした

    オープニングの黒幕は「既定を非表示・アニメーションが走ったときだけ表示」に反転させ、CSSが効かない環境で画面が塞がる事故を構造的に潰しました。GSAPの全演出も prefers-reduced-motion 配下に置き、演出が出なくても情報とCTAは完全に読める設計です

  4. 04

    架空店舗であることを隠さず明示した

    ポートフォリオ用の架空店舗のため、電話番号はダミー・予約リンクは無効化し、その理由を画面上に明記。全画像がAI生成である旨もフッターに記載しています。実在の店舗を騙らないことを制作上の制約として最初に定義しました

02Overview

制作概要

福岡・大名の看板を出さないメンズグルーミングサロンを想定した1ページ完結のLP。「削ぎ落として、整える」という店名（鉋）の思想を軸に、黒基調・大きな明朝体・スクロール連動の演出で世界観を作りました。演出を主役に据える設計としながら、Lighthouse Performance 99・LCP 1.55秒を維持しています。

制作区分
自主制作（実案件を想定し、要件整理から公開まで実案件と同一フローで制作）
業種
メンズグルーミングサロン・理容
サイト種別
LP（1ページ）＋ プライバシーポリシー
制作目的
ネット予約（主CV）へ迷いなく進ませる。完全予約制・マンツーマンという「入りにくさ」を、料金と所要時間と施術の流れを先に開示することで解消し、月1回通う定期客を育てる。
想定ターゲット
A：身だしなみに投資する30〜40代のビジネスパーソン。月1回の定期利用を主CVとする層。B：結婚式・撮影・面接の前に一度だけ整えたいスポット利用層。「いくらで、何分で、何をされるのか」を予約前に確定させたい。
訴求軸
理容師免許保有だからできる顔そり（シェービング）／1席・完全個室のマンツーマン／福岡・大名の看板を出さない隠れ家という立地。安さではなく「削ぎ落として、整える」という思想で差別化する。
納期目安
実案件想定で 2〜3週間
担当範囲
  • 競合デザインリサーチ（同業7サイトを実測）
  • 要件定義
  • 画像プラン設計
  • 構成設計
  • コピーライティング
  • アートディレクション
  • モーション設計（motion-spec 策定）
  • AI画像生成（9点）
  • 実装
  • レスポンシブ対応
  • SEO・構造化データ
  • 法規制チェック（理容師法・景表法・薬機法）
  • クロスモデルレビュー
  • 公開前検証
  • デプロイ
使用技術
  • Astro（静的）
  • GSAP 3.15 + ScrollTrigger
  • Webフォント自前配信（サブセット化）
  • AI画像生成（9点）+ WebP最適化
  • Vercel

Lighthouse ／ mobile

Performance
99
SEO
100
Accessibility
100
LCP
1.55秒
CLS
0.002