Hair Studio
Overview
A custom WordPress website for a fictional independent hair salon in Montréal. The project combines a refined visual identity with editable services, stylist profiles, pricing, contact information, and a clear appointment-booking flow.
モントリオールの架空の個人経営ヘアサロンを想定した、WordPressオリジナルテーマ制作プロジェクトです。洗練されたビジュアルデザインに加え、サービス、料金、スタイリスト情報、店舗情報を管理画面から更新できる構成と、分かりやすい予約導線を設計しました。
Role
Web Design
WordPress Theme Development
Front-end Development
UI Design
Year 2026
Tools
Figma
WordPress
PHP
ACF
HTML / CSS
JavaScript
Concept
A calm and refined salon experience built around soft style, thoughtful care, and effortless beauty.
やわらかなスタイル、丁寧なケア、自然体の美しさを大切にした、落ち着きのある洗練されたサロン体験を表現しました。
Process
Challenge
Create a sophisticated salon website that feels warm and approachable while presenting services, stylist levels, pricing, and booking information without overwhelming the user. The content also needed to remain easy for the salon owner to update.
洗練された印象を保ちながら、親しみやすさも感じられる美容室サイトを制作すること。サービス、スタイリストランク、料金、予約情報を複雑に見せず、利用者が迷わず確認できる構成が必要でした。また、店舗側が情報を更新しやすいWordPress設計も求められました。
Solution
A spacious editorial layout, soft neutral colours, large lifestyle photography, and restrained typography create a calm visual experience. WordPress custom post types and ACF allow services, prices, and stylist profiles to be managed from the dashboard, while prominent booking calls to action provide a clear path to conversion.
十分な余白、柔らかなニュートラルカラー、大きなライフスタイル写真、控えめなタイポグラフィによって、落ち着いた閲覧体験を設計しました。WordPressのカスタム投稿タイプとACFを使用し、サービス、料金、スタイリスト情報を管理画面から更新できるようにしています。予約ボタンを各所に配置し、予約までの導線も明確にしました。
Design System
Colour Palette
Ink
#0F0F0D
Paper
#F4F5F0
Paper Soft
#E4E8DF
Clay
#81C929
Moss
#566056
Cream
#FBFBF6
Aa Bb Cc
Instrument Serif
Editorial Headings
Aa Bb Cc
Inter
Body / Interface
Aa Bb Cc
Space Grotesk
Logo / Display / Labels