Web Design / Hair Salon
Iris
Hair Salon Website
「髪から、私を好きになる。」をコンセプトにした美容室のWebサイト。
白と余白、やわらかな写真で、清潔感とナチュラルな空気感を表現しました。
02
Project Overview
Overview
髪から、私を好きになる。
一人ひとりの個性に寄り添い、その人らしいスタイルを提案する美容室のWebサイト。 サロンの空気感・メニュー・スタイル写真を通して、初めての方でも「行ってみたい」と感じられることを目的に制作しました。
- Type
- Hair Salon Website
- Target
- 美容室を探している女性ユーザー
- Design
- Natural / Clean / Elegant
- Device
- Desktop / Mobile
- Platform
- WordPress
03
Concept / Visual Direction
Concept
髪から、私を好きになる。
美容室らしい清潔感をベースにしながら、ナチュラルで女性らしい空気感を持たせたデザイン。 白を大きく使用した余白設計と、柔らかい写真、繊細なタイポグラフィによって、 Natural / Clean / Airy / Elegant という印象を表現しています。
Color
- White#FFFFFF
- Light Gray#F7F7F7
- Soft Green#C5CCC3
- Black#333333
- Accent#816D51
白とライトグレーでセクションを切り替え、Galleryだけに淡いグリーンの背景写真を使用。見出しの一部にブラウンを添えています。
Typography
髪から、私を好きになる。
Beauty, in your own way.
Noto Serif JP。和文・欧文ともにセリフ体で統一し、細い線と字間で繊細さと上品さを出しています。
Photography
人物・施術・サロンの写真を中心に、自然光のような明るくやわらかいトーンで統一。
Keywords
- Natural
- Clean
- Airy
- Elegant
- Relaxed
04
First View Design
大きなサロン写真をメインに使用し、情報量を抑えることで店舗の空気感を直感的に伝える設計。中央に「髪から、私を好きになる。」を配置し、写真・コピー・余白を中心としたシンプルな構成にしています。
05
Page Design
Design Details
-
Visual Hierarchy
大きな写真と余白を使い、コンテンツごとの情報量にメリハリをつけています。
-
Photography
人物・施術・サロン写真を中心に使用し、美容室の空気感を視覚的に伝えています。
-
Whitespace
十分な余白を設けることで、美容系サイトらしい清潔感と上品さを表現。
-
Content Flow
ユーザーが自然に店舗を理解できる流れで設計。
- Concept
- Menu
- Gallery
- Blog
- Access
- Contact
06
Design Details
01
CONCEPT
左に人物写真、右にコンセプト文。写真の余白と短い段落で、サロンの考え方を静かに伝える。
02
HAIR MENU
Conceptと写真の位置を反転。背景をライトグレーに切り替え、セクションの区切りをさりげなく示す。
03
GALLERY
淡いグリーンの背景写真の上に、6枚のヘアスタイルを3列で配置。サイトの中で最もビジュアルが主役になるセクション。
04
BLOG
サムネイル・タイトル・日付のカードを3枚並べ、タブで news / pick up を切り替え。
05
ACCESS / CONTACT
地図と店舗情報を左右に並べ、最後に電話・メールの予約ボタンを配置。
07
Responsive Design
PCでは横方向の余白を活かしたレイアウト、SPではコンテンツを縦方向に再構成し、写真・文章・ボタンの視認性を維持。デバイスごとに自然に閲覧できるレスポンシブ設計を行っています。
