サイト制作の過程 ｜ SIGN

SIGN は、東京・渋谷と表参道に2店舗を構えるヘアサロンです。韓国の最新トレンドを取り入れたスタイルを軸に、ヘッドスパを併設しています。
手がかりにしたのは内装です。ただし、SIGN の内装はひとつではありません。店舗ごと、フロアごとに雰囲気が異なります。ひとつの空間から色や質感を取る、という進め方がそのままでは使えない条件でした。
雰囲気の違いを残したまま、一つのサイトに収める。設計はここから始まっています。

SIGN には、兆しという意味があります。髪を通して、いい兆しを届ける。サロン名には、その意図が込められていました。
タグラインは CHANGE IN STYLE, SIGNS OF A NEW YOU. としました。スタイルを変えることは、新しい自分の兆しになる。サロン名の意味を、来店する側の変化として言い直しています。
2店舗を持つサロンのサイトでは、店舗ごとの情報とブランド全体の情報が混ざりやすくなります。上位に置くのは SIGN という一つの名前。店舗の違いは、その下に並べています。

構成は Home、Salon、Staff、Style、Spa、Product、Recruit、Contact。店舗ページは渋谷と表参道で分けています。
ヘッドスパは店内に併設されているため、最初から要件に含まれていました。サロンの付属ではなく、独立したページとして扱っています。
スタイルのページも作りました。ただし、写真を並べるだけのページにはしていません。スタイルを、スタッフの特徴として扱っています。どのスタッフが、どのようなスタイルを作るのか。写真から担当者にたどり着ける構造です。
在籍するスタッフは20名。人数が多いサロンでは、誰に切ってもらうかが来店の入口になります。スタイルとスタッフを切り離さないことが、この構成の要点でした。

トーンは、ファッショナブルな方向に振りました。渋谷という土地柄と、20代を中心とした客層。要素を削って静けさを出す手法は、このサロンには合いません。
一方で、SIGN が掲げているのは上質なヘアスタイルです。流行を取り入れながら、軽く見えないこと。トレンドの速さと、サロンとしての上質さを一つの画面に置いています。

SIGN のサイトは、情報量を多く持つ設計です。要素を絞る方向とは逆になります。
若い世代から見て、かっこいいと思えること。そのためには、見るものが多いことが価値になります。スタッフ、スタイル、スパ、プロダクト、コレクション。どこを開いても、次に見るものがある状態をつくりました。
トップページには、コレクションの映像を置いています。SNS は Instagram、YouTube、TikTok の三つ。サイトからそれぞれへつないでいます。

予約は、店舗ごとに外部の予約サイトを使っています。予約サイトが複数存在していたことが、導線設計の前提でした。
予約はモーダルで開き、渋谷と表参道のどちらで予約するかを最初に選ぶ形にしています。店舗名、住所、電話番号、予約サイトへのリンク。選んだ店舗の予約サイトへ、そのまま送ります。ヘッドスパの予約は、スパのページに別の導線を設けています。
予約サイトを一本化できない場合、サイトの役割は迷わせないことです。どこから開いても、選ぶのは店舗だけ。判断を一回で済ませる構造です。

プロダクトのページは、公開時にはありませんでした。サロンのオリジナルプロダクトが発売された時点で追加しています。現在は、シャンプーとトリートメントを掲載しています。
追加は、グローバルナビに一項目を足す形で行いました。既存の構成は変えていません。サロンの事業が広がっても、構造を作り直さずに受けられます。

SIGN では、手がかりにした内装が一つではありませんでした。店舗やフロアで異なる雰囲気、20代の客層、複数の予約サイト。ひとつの正解に寄せられる案件ではありません。
根拠にしたのは、サロン名の意味と、サロンが実際に持っている条件です。スタイルをスタッフに結びつけ、予約を店舗ごとに分け、プロダクトは発売に合わせて足す。どれも、SIGN がすでに持っていたものから決めています。
SIGN のサイトは、今も公開されています。