【新規顧客】
10代後半〜60代の男性
近隣住民(転居など)で新たに理髪店を検討しており、店舗情報や価格、カットスタイルを検索している見込み客
他店でのカットが気に入らず理想のカットがで きる店舗を探している見込み客

【既存顧客】
10代後半〜60代の男性
休業案内や営業時間をHPに掲載し、店舗の利便性を高めリピート率↑
スタイルギャラリーを掲載し、多様なヘアスタイルに対応できることを明示し他店への流出を抑制

・既存サイトはPC対応のみなのでレスポンシブ対応し、スマホユーザーの利便性を高める
・全体的なデザインが古いため、クライアントの意向に沿った新デザインに変更
・カットギャラリーを追加し、顧客数と売上の拡大を狙う

【HOME】
NewsやWork Dayなど、顧客が店舗を利用するにあたって知りたい内容を上部に掲載
Style GalleryやPrice Listをダイジェストで掲載し、クライアントの強みであるフェードカット、リーズナブルな価格を訴求

【STYLE GALLERY】
新設ページであり、店舗の強みを打ち出す重要なポジション
タイル形式で、複数のスタイルを比較して閲覧できるように設計

【PRICE LIST】
一般料金、シニア料金、学生料金をそれぞれに分けて掲載
ページの長さはあるものの、各メニューの料金が明確にわかるように掲載

【SHOP INFO】
クライアントのこだわりである内装やカット道具を紹介
クライアントもこの設計にはこだわりを持っており、写真を多数配置して店舗コンセプトが伝わる内容に仕上げた

※詳細はREPORTを参照

店舗コンセプトに合ったサイトデザインにすることを第一に進行。
アメリカンバーバーのコンセプトを再現するために、カラーはブラックやゴールドを起用、フォントはセリフ体をクライアントが希望したため「Times New Roman」を使用した。
当初は全ての背景色をブラックで統一する予定だったが、高級感が増しリーズナブルな価格設定とのギャップが生まれたため、アイボリーを合間に配置して顧客に与えるプレッシャーを抑制。トップページにはフェードカットを彷彿させるグラデーションを写真に適用させた。

旧サイトでは、営業カレンダーをGoogleカレンダーの埋め込みにより配置されていたが、サイトデザインとのマッチングが難しく、HTML・CSSでカレンダーを実装。

【制作期間】
撮影：1日
デザイン：9日
コーディング：14日

【使用ツール】
Photoshop：画像加工
Illustrator：ロゴ作成
Figma：ワイヤーフレームおよびデザインカンプ
VScode：コーディング