2018年8月にオープン5周年を迎えた、札幌市中央区にあるHair Salon Groenのウェブサイトリニューアルを担当いたしました。都心から少し離れたエリアにあるヘアサロンらしく、ゆったりとしたデザインで、質の高い内装とスタッフの施術風景を表現しています。1ページの縦に長いウェブサイトにリッチなモーションを付けて下にフリックしやすく工夫しました。またGroenの外観イラストをSVGマスクで描画したり、フッターの背景に動画を使用する等のチャレンジをしています。オーナー様含めGroenスタッフのみなさまに、たくさんご協力頂いてできたブランディングサイトです。
流されない時間と上質な空間を表現する
Hair Salon Groen
ブランドを深く理解する為の時間。
札幌市中央区にサロンを構えるGroen(グルーン)さんから本格的にウェブサイトリニューアルのご依頼をいただいたのは、リリースのちょうど半年前でした。サロンのコンセプトや店内の見せ方を含めウェブサイトを通してブランディングしたいというお話を伺い、まずはウェブサイトに期待することや想定する閲覧者、どういう想いで5年間サロンを運営されていたのかを共有するワークショップを行ったのです。
想いやコンセプトを言語化する為には、設立までの経緯や、いままでとこれからのお客様を考える必要があります。またお客様の悩みを解決するための提案方法や、その悩みを個性として好きになってもらう為のアプローチなど、サロンとしてお客様とどうお付き合いしているかを知ることで、ズレがなくて長く愛されるコンセプトが完成すると考えています。
なので今回もワークショップには時間を割きました。オーナーが何気なく何度も発している言葉を逃さず、ウェブサイトで表現できる文章に作り上げていく過程があるから、その特長を深く理解し表現することができます。
体験することで言葉を見つける。
わたしたちにはお客様に提供できる8個の価値というものがあります。その2つめに掲げているのが「お客様のことを徹底的に調べます。」です。お客様の商品やサービスは可能な限り体験し、理解を深めてウェブサイトの企画やデザインに活かします。
今回も同様に、カットをはじめ様々なサービスを体験しました。サロン内は、日々の忙しい日常から少しだけ解放される心地よい時間であること、スマホから距離をおける数少ないシチュエーションであることなどを改めて理解しました。
これらの体験を踏まえて、コンセプトは「流されない、時間を。」としました。日々の忙しさに流されがちな毎日の中でも、自分だけの流されない時間としてGroenを利用してほしいという想いを込めています。
ウェブサイトのメインビジュアルで表現するキャッチコピーには、翌日の朝を少し楽しみにしてもらえるようなサービスを提供しますという意味で「Good morning , A brand new me.」を掲げ、新しい自分と朝を迎えるワクワク感を表現しました。
「髪の悩みはその人の個性と思ってます。」これはオーナー様にお話を伺った時の印象的なフレーズです。自分にとってはコンプレックスでもそれを個性として引き立たせることで、誰かから褒められ自信になるということです。これらの考え方もIdentityというコンテンツの見出しとして採用することを決めました。
こうした体験や対話を繰り返し、ウェブサイトで表現するべき言葉を少しずつ見つけ、磨き上げていきます。
サロン内の空気感を切り取る。
ウェブサイトをデザインしていく上での重要な要素として、写真や映像の存在は欠かせません。前述した言葉と組み合わせて表現することで、ブランドの魅力をより一層引き立たせます。今回の撮影は営業の合間を縫いながら店舗の外観・内観・スタッフ・映像と盛りだくさん。上手に香盤表を組み、お客様の邪魔にならないように撮影を進めていく難しさがありました。
撮影のポイントとしてカメラマンさんと念入りに打ち合わせしたのは「空気感」でした。店内の広さや動線など、サロンとしてのスペックを伝える写真ではなく、そこに自分がいてスタイリストとどんな話をしているのかをリアルに想像できる空間を切り取る、スタイリストの皆さんが鏡ごしにお客様と向き合っている一瞬を捉える。これらを意識して撮影に臨みました。
朝から日没まで続いた撮影はオーナー様もわたしたちも満足のいく仕上がりになりました、まさに共同作業。受発注の関係を超えたプロジェクトに欠かせないのは、なによりも目指すべき仕上がりのイメージを共有できているかどうかだと思っています。お互いのアイデアにブレがなく現場でブラッシュアップしていくことができました。
加えて外観をより記憶に残る形で表現したいため、今回は線画のイラストも作成しました。店舗の入口左右にシンメトリに配置された印象的な街路樹も含めて、描きこみ過ぎないスケッチとしてウェブサイトのマップ付近に配置することで初めて来店する方にも覚えてもらいやすいレイアウトとしました。
手描き要素で温度感をつくる。
今回はデザインレイアウトの段階からフロントエンドエンジニアとミーティングを重ね、店舗のイメージを伝えながら動きのイメージを共有していきました。特に縦に長いページはユーザに興味を持ってスクロール又はフリックしてもらえるかが、そのブランドを知ってもらう為のポイントとなるので、アニメーションは大切な要素となります。
どこで手を止めてもらうか、ファーストビューに滞在する数秒で何を見せるかなどを考えながらデザインとアニメーションのバランスを取っていく作業は、緻密な作業ですがより質の高いウェブサイトに仕上げる為に欠かせません。デザインの知識があり、信頼できるフロントエンドエンジニアの存在が、細部をブラッシュアップする為の時間を作ってくれます。
縦に長いページは最下部での滞在時間が長いことも考慮し、マップ付近に配置した手描きのイラストはスケッチしていく様子をSVGマスクで表現したり、通常はメインビジュアルに入れることの多い動画をフッターに配置する等、アイキャッチの要素を下部に盛り込みました。
お客様も自慢できるブランドサイトに。
広告媒体にはお金をかけず、長く足を運んでくれるお客様に還元したい。そのために働いている自分たちとお客様が自慢できるブランディングサイトをつくりたいというオーナーさまの想いで始まったリニューアルプロジェクトは無事に完了しました。
5周年パーティのタイミングでお披露目することはかないませんでしたが、これから長く使っていただけるウェブサイトとして少しずつ手を加えながら一緒に育てていきたいと思っています。
素敵なサロンなので皆さん是非一度足を運んでください!
ありがとうございました。
ご担当者様からの声
ウェブサイトから伝わる僕たちの想い。
オープン時にウェブサイトを立ち上げて5年が経過していました。自分やスタッフ、店の雰囲気や、やりたい事、伝えたい事が当時作ったウェブサイトとは変化し始め、5年目を期に思い切ったウェブサイトの変更を考えました。
当初の考えでは、美容室はお客様にお店に来ていただいてからお店の事や、私達の想いを伝える事が一番だと思い、ウェブサイトはシンプルにしてネット予約が出来れば良いかな位の考えでした。ただ時が経つにつれ ウェブサイトだけ過去に取り残された様な気持ちになり、リニューアルを考え始めました。
以前からお知り合いだっだGear8代表の水野さんに相談したところ、恥ずかしいくらいお店のことやスタッフのこと、自分達の想い、売上、客数、単価、目指すお店の形など、さまざまな事を聞いてくださり本気で僕たちのお店の入口となるウェブサイトを作ってくれるんだと思いました。ここまで本気になって同じ気持ちで制作して同じ目線で考えて頂けて光栄です。撮影も一日中サロンにいてもらい僕たちの仕事を間近で見て感じながら進行してくださったので、ウェブサイトから僕たちの仕事風景が伝わると思います。
ウェブサイトをリニューアルして数ヶ月経ちますが 来店されるお客様に本当にかっこいいウェブサイトだね、Groenの事を良く分かってる人に作ってもらったんだねと毎日のように嬉しいお言葉を頂いてます。思い切って水野さんに相談して良かったと思います。
自分が想像してた以上の仕上がりですし、制作期間中にチョイチョイあるサプライズ的な事にも毎回感動させられました!ありがとうございます!!今後も自分達の歴史とウェブサイトの歴史の変化が楽しみです!!