おしゃれに見えるサイトに共通しているのは、手法ではなく観察
美容室のサイトを作るとき、私が最初にしているのは、デザインを考えることではありません。そのサロンがどういう場所なのかを理解することです。
当たり前に聞こえるかもしれませんが、ここを飛ばしても、見た目が整ったサイトは作れてしまいます。流行の余白の取り方、流行の書体、流行の写真の見せ方を当てはめれば、それなりに今風の画面にはなります。ただ、そうして作られたサイトは、どのサロンのものであっても同じ顔になります。
私が目指しているのは、そのサイトを開いた人が、まるでそのサロンにいるかのような空気感を受け取れる状態です。内装も、コンセプトも、そこにいる人もサロンごとに違う以上、同じ手法で作れるはずがありません。おしゃれに見えるサイトに共通点があるとすれば、それは特定のデザイン手法ではなく、そのサロンを徹底的に観察したうえで判断されている、という一点です。
以下では、その観察がデザインのどこに現れるのかを、順に書いていきます。
世界観は、言葉より先に内装に表れている
ヒアリングでは「どんなサイトにしたいですか」と聞きますが、その答えだけを頼りにすることはありません。多くの場合、オーナーご自身が言葉にできていない部分にこそ、そのサロンらしさがあるからです。
そこで私が見ているのは、主に次の3つです。
- 内装店舗のサイトである以上、内装には最も多くのこだわりと好みが反映されています。床の素材、照明の色、什器の高さ、鏡の配置。ひとつひとつを観察していくと、そのサロンが何を心地よいと考えているかが見えてきます。
- オーナーの人柄や話し方ゆっくり話す方のサロンと、テンポよく話す方のサロンでは、届けたい空気が違います。口調や間の取り方といった、打ち合わせ中の何気ない部分から雰囲気を読み取ります。
- SNSの使い方普段どんな写真を選び、どんな言葉を添えているか。好みは、意識して選んだ答えよりも、日常の選択のほうに正直に出ます。
この3つを突き合わせると、「このサロンはこういう場所だ」という像が立ち上がってきます。デザインを考え始めるのは、そこからです。
逆に言えば、この工程を経ずに作られたサイトは、どれだけ丁寧に仕上げても、そのサロンでなくてもいいサイトになります。参考サイトを何十枚並べても自分の店の答えが出てこないのは、答えが外にではなく、自分の店の中にあるからです。
内装写真は、まず携帯で撮ってもらう
実務的な話をすると、打ち合わせの早い段階で、店内の写真を携帯で何枚か撮って送っていただくことがよくあります。
美容師の方は写真を撮るのが上手な職種です。日常的にスタイル写真を撮り、SNSに載せているので、何をどう写すと魅力が伝わるかを体感で分かっている。だから携帯の写真でも、そのサロンが大事にしている角度が写っています。
その写真を使って、まずデザインの方向を作ります。本番用の撮影はその後です。遠方のサロンであれば、内装を手がけた施工会社が撮影した写真を素材として共有いただくこともありますし、美容業界はカメラマンとのつながりが多い業界なので、お店の知り合いのカメラマンに撮影の指示だけをお渡しして撮っていただくこともあります。
余白は、そこで過ごす時間と音を表す
「おしゃれなサイトは余白が広い」とよく言われます。半分は当たっていますが、そのまま受け取ると危険な言葉でもあります。余白を広く取れば洗練されるわけではないからです。
私は、余白はそこで過ごすくつろぎや、時間の流れ、音を表すものだと考えています。静かな空間で、施術の合間に会話が途切れても気まずくならないサロン。そういう店の余白は広い。一方で、会話が賑やかで、次から次へと人が出入りする活気のあるサロンに同じ余白を当てると、店の体温が伝わらなくなります。
つまり、ブランドに見合った余白というものが存在します。広い・狭いではなく、合っているかどうかです。
判断の基準は、実際にその店で過ごしている時間を想像できるかどうかに置いています。画面をスクロールする速度が、その店で流れている時間の速さと一致しているか。文字と文字の間、写真と写真の間に、その店で聞こえる音が入る余地があるか。抽象的に聞こえるかもしれませんが、内装を観察していれば、この判断はそれほど難しくありません。
余白について、もうひとつ。広く取ると、その分だけ1画面あたりの情報量は減ります。スクロールの回数は増え、目的の情報にたどり着くまでの距離は長くなる。ここを考えずに余白だけを増やすと、きれいだが使いにくいサイトになります。この点は最後の章でもう一度書きます。
書体は「似合うかどうか」で決まる
書体選びについては、「上品に見せたいなら明朝体」「親しみやすさならゴシック体」といった説明をよく見かけます。間違いではありませんが、この基準だけで選ぶと、どこかで見たことのあるサイトになります。
私が最終的に頼りにしているのは、そのサロンに似合うかどうか、という一点です。
似合うかどうかを判断するための材料は、やはり観察から集めます。オーナーとのヒアリングで出てきた言葉の選び方、SNSに載せている写真のトーン、店内で使われている素材。そうしたものを見ていると、その方の好みの傾向が見えてきます。細い線が好きなのか、重心の低い形が落ち着くのか。文字に対する好みは、服や什器の選び方とだいたい連動しています。
そのうえで、提案の段階では必ず複数のパターンをお見せします。書体は、言葉で説明されるより実際に組まれた状態を見たほうが判断できるものだからです。オーナーが並べられた候補の中から迷いなく1つを選ぶとき、その理由が言語化されていなくても、それが答えであることが多いです。
動きは、気づかれなくてもいい
サイトに動きを付けるかどうかは、必要に応じて判断しています。動かせば印象に残るというものではなく、むしろ主張の強い動きは、サロンの空気感を壊すことがあるからです。
分かりやすい例として、制作したサロンサイトのひとつ、Linerの話を書きます。
Linerのファーストビューに置いた、日時計のような線
Linerのトップページを開くと、画面に線が引かれています。一見すると止まっているように見えますが、時間の経過とともに、その影がゆっくりと動きます。
これは、日が差し込む店内をイメージした日時計のようなものです。窓から入る光が時間とともに角度を変え、床に落ちる影が少しずつ移動していく。サロンで過ごす時間の中に確かに存在しているのに、意識されることのない変化です。
この動きに気づかない方もいると思います。数十秒で離脱すれば、線は止まったままに見えるでしょう。それでいいと考えています。
地味であり、同時に大胆でもある。気づかれないかもしれないが、その場に確かにある。私はこうしたニュアンスを大事にしています。派手な動きで注意を引くのではなく、その店に流れている時間そのものを画面の中に置いておく。動きを付けるとしたら、そういう理由がある場合だけです。
逆に言えば、理由のない動きは付けません。スクロールするたびに要素が跳ねたり、文字が一字ずつ現れたりする演出は、それ自体が目的になっている場合が多く、読む速度を落とすだけになります。サロンの空気を伝えたいのか、技術を見せたいのか。目的が違えば、答えも変わります。
操作性を失ったら、それはただのアート
ここまで世界観の話を続けてきましたが、最後に最も重要なことを書きます。
どれだけ空気感が伝わっても、情報が伝わらなければ、そのサイトは役割を果たしていません。営業時間が分からない、地図が見つからない、予約ボタンがどこにあるか探さないといけない。そういうサイトは、どれだけ美しくても、ただのアートです。
この基準は、サロンのサービスに置き換えると分かりやすいと思います。内装が素晴らしく、施術も上手い。けれど席に案内されず、上着を掛ける場所も教えてもらえない。それは気が利かない店です。使いづらいサイトというのは、それと同じことをしています。
だから設計の段階で、次のような点は必ず確認します。
- 営業時間・定休日・住所スクロールせずに、あるいは最小限の操作でたどり着けるか。来店前に最も確認される情報です。
- 予約への導線どの画面からでも予約に進めるか。読み物として読んでいる途中で「行きたい」と思った瞬間に、探させないこと。
- スマートフォンでの見え方ほとんどの方は移動中に片手で見ています。文字の大きさ、押せるボタンの余裕、読み込みの速さ。パソコンの画面だけで判断しないこと。
- 初めて訪れた人の順序何も知らない状態で開いたとき、どういう順番で情報が目に入るか。作った側は全体を知っているので、この視点は意識的に取り戻す必要があります。
世界観と使いやすさは、対立するものではありません。むしろ、その店の空気を正しく伝えることと、訪れた人に不便をかけないことは、どちらもお客さまへの態度という意味で同じものだと思っています。
余白を広く取るなら、その分だけ情報の置き場所を考える。動きを付けるなら、読む邪魔にならない範囲にする。制約の中で成立させるのが設計です。
参考サイトを探す前にできること
おしゃれな美容室のホームページを探している方に、ひとつだけお伝えしたいことがあります。
参考サイトを集めることは無駄ではありませんが、そこで見つかるのは他の店の答えです。余白の広さも、書体も、写真の撮り方も、そのサロンだから成立している判断であって、自分の店に当てはめてうまくいく保証はありません。
代わりにできることとして、ご自身の店を観察してみてください。なぜこの床材を選んだのか。なぜこの照明の色にしたのか。お客さまがどの瞬間に「いい店だな」と感じてくれているように見えるか。開業のときに何を大事にしようと決めたか。
そこで出てきた言葉や感覚は、そのままサイトの設計の材料になります。私たちがヒアリングで引き出そうとしているのも、結局はそれです。
サイトを作るというのは、店をもう一度言葉と視覚に翻訳し直す作業です。翻訳する元があいまいなままでは、どれだけ丁寧に作っても、どこかで見たようなサイトにしかなりません。逆に、翻訳する元がはっきりしていれば、その店にしかならないサイトができます。
おしゃれに見えるサイトの共通点があるとすれば、それだけだと思います。