Shop / Barber

THE CUT SHAVE CO.

“空気感”で惹きつけ、予約まで迷わせない

バーバーショップの世界観を、写真とタイポで直感的に伝える制作例。
メニュー→お知らせ→予約フォームの導線を整理し、初来店の不安を先に潰します。

  • Dark Tone
  • Menu Grid
  • Booking Flow
THE CUT SHAVE CO. トップページ
Top / PC
担当
企画 / 情報設計 / デザイン / 実装
目的
店の空気を伝え、予約の心理ハードルを下げる
制作
HTML / CSS / JS(導線設計・フォーム)
世界観
静かな説得力
余白とコントラストで“店の緊張感”を作る
導線
迷いを先回り
価格/施術/来店手順を不安の順に配置
予約
スマホ最適
親指で押せるCTAとフォーム段階設計

空気感で選ばれて、予約まで迷わせない。

Overview

バーバーショップの魅力を「メニュー」ではなく「空気感」から伝えることを目的に、ブランドの世界観を前面に出したサイトを制作しました。
初めて訪れる人が、無言のうちに店のスタンスを理解できる構成を意識しています。

Challenge

写真や雰囲気で魅せたい一方、情報を削りすぎると「結局何の店か分からない」状態になりがちです。
世界観と分かりやすさを両立させ、予約や相談に自然につながる導線設計が課題でした。

Solution

  • 写真とタイポグラフィを主役にし、視線が迷わないレイアウトで世界観を先に伝える構成にしました。
  • 情報は「必要最低限」を整理して配置し、読み込み量を増やさずに理解できる導線を設計しています。
  • 予約・相談のCTAは押しつけず、ページ内で迷いが出るタイミングに自然に置く設計にしました。

Highlights

  • 写真とタイポグラフィを主役にし、空気感が先に伝わる構成。
  • メニュー・料金・予約の不安を“迷う前”に解消する導線。
  • スマホ操作を前提に、親指で押しやすいCTA配置。

Design

店の空気感が伝わるよう、余白とコントラストで静かな緊張感を作りました。
装飾で盛り上げるのではなく、写真と文字が「映える」状態を整えることで説得力を作っています。

Screenshots

スクリーンショット 1
Top
スクリーンショット 2
カットメニュー
スクリーンショット 3
お知らせ
スクリーンショット 4
予約フォーム

Result

初見でも店のスタンスが直感的に伝わり、予約・相談へ自然につながるサイトになりました。
世界観と導線を両立させることで、仕上がりの説得力を高めた制作事例です。

Role & Deliverables

  • 情報設計:世界観と導線の両立
  • UI設計:余白・コントラスト・視線誘導
  • 実装:HTML / CSS / JavaScript

Technology

  • HTML / CSS / JavaScript ・ Menu UI ・ Responsive Design

参考制作費

約 ¥180,000〜¥260,000

実店舗サイト一式 / メニュー設計 / 予約フォーム / 導線設計を含む想定です。

※ページ数・フォーム仕様・導線設計により変動します。

“予約される導線”、作りませんか?

情報整理から実装まで一貫対応。 “すごい”で終わらせず、行動に繋げます。

この規模感で相談する

このテイストで作りたい方へ。
予約まで迷わない流れを体験できます。