美容室サイト「MELLOW」を制作した理由と、デザインで考えたこと

今回は単純に「美容室っぽい綺麗なサイトを作る」というよりも、実際に美容室からWeb制作を依頼された場合を想定して、

• どんなお客様をターゲットにするのか
• どんな美容室との差別化をするのか
• 予約までどうやって誘導するのか
• スマートフォンで見たときに使いやすいか

といった部分から考えて制作しています。

なぜ美容室を選んだのか

美容室を選んだ理由のひとつは、Webサイトのデザイン性と集客導線の両方が重要な業種だからです。

美容室を探すときは、料金や場所だけではなく、

「自分の好きな雰囲気か」

「この美容室なら自分に合う髪型にしてもらえそうか」

といった感覚的な部分もかなり大きいと思います。

そのため、美容室サイトは情報をただ並べるだけではなく、写真、文字、余白、色、動きなどを含めて、店舗の雰囲気そのものを伝える必要があります。

Web制作のポートフォリオとしても、デザイン・レスポンシブ・予約導線など、いろいろな要素をまとめて見せられる題材だと考えました。

どんな美容室をイメージしたのか

今回のコンセプトは、

「韓国の高級ヘアサロン × 韓国カフェ」

です。

ターゲットは主に20〜40代の女性。

高級感は出したいけれど、いわゆるラグジュアリーホテルのような重たい雰囲気ではなく、

• 自然光
• ベージュ
• 白
• 余白
• 透明感
• ミニマル
• 韓国っぽいトレンド感

を中心に考えました。

「高級だけど入りづらくない」

「写真を見て、ここに行ってみたいと思える」

そんな美容室をイメージしています。

制作前に比較したサイト

制作を始める前に、美容室のWebサイトをいくつか見比べました。

特に見ていたのは、

高級サロン系、韓国系サロン、ナチュラル系サロン、地域密着型美容室などです。

高級サロンは写真や余白の使い方がとても綺麗な一方で、店舗によっては少し敷居が高く感じるものもありました。

逆に地域密着型の美容室は、料金やスタッフ情報は分かりやすいものの、ビジュアル面では店舗の魅力が十分に伝わっていないサイトもあります。

そこでMELLOWでは、

高級サロンのビジュアルと地域の美容室の分かりやすさ

の両方を取り入れることを意識しました。

見た目だけではなく、

「料金はいくらなのか」

「どんなスタッフがいるのか」

「どんなヘアスタイルが得意なのか」

「どうやって予約するのか」

まで迷わず確認できる構成にしています。

一番気をつけたのは「写真を主役にすること」

美容室サイトでは、文章以上に写真が重要だと思っています。

そのためMELLOWでは、画面いっぱいに情報を詰め込まず、写真の周りに余白をしっかり取っています。

文字サイズや装飾も必要以上に強くせず、

ヘアスタイルや店舗写真を邪魔しないUI

を意識しました。

また、Styleページでは静止画だけではなく、短い動画も使用しています。

髪型は正面から見た写真だけでは伝わりにくいため、少し角度が変わるだけでも、レイヤーや髪の動きが分かりやすくなります。

ここは今回の制作で特に試してみたかった部分です。

予約までの導線もかなり意識しました

美容室のWebサイトは、最終的には予約につながることが重要です。

そのためPCではヘッダー部分にReserveを配置し、スマートフォンでは予約ボタンへアクセスしやすいようにしています。

サイトを見て、

「この髪型いいな」

「このスタッフにお願いしたいな」

と思ったあとに、予約場所を探さなくてもいいようにするためです。

デザインを綺麗にすることと同じくらい、

次に何をしてほしいサイトなのか

が分かることを大切にしました。

スマートフォン表示は特に細かく調整しました

美容室を探す人の多くは、スマートフォンからサイトを見ることを想定しています。

そのためDesktop版を小さくしただけではなく、

• 見出しの改行
• 写真サイズ
• ボタンサイズ
• 余白
• 文字量
• ナビゲーション
• 予約ボタン

などを画面幅ごとに調整しています。

特に、PCでは綺麗に見えていても、スマートフォンでは見出しが変な位置で改行されたり、情報量が多く見えたりするため、そのあたりは何度も実機サイズで確認しました。

制作して感じたこと

今回MELLOWを制作して改めて感じたのは、

Webサイトは、見た目だけを作るものではない

ということでした。

誰に来てほしいのかを考えて、競合を見て、情報を整理して、そのうえでデザインと実装を行う。

今回の制作では、

企画・リサーチ・UX設計・UIデザイン・フロントエンド実装・レスポンシブ対応まで一通り行いました。

完成した画面だけを見るとシンプルな美容室サイトですが、そのシンプルさにするまでには意外と多くの判断があります。

そういった部分も含めて、今回の制作事例として残しておきたいと思います。