サイト制作の過程 ｜ Liner

指示のない依頼では、判断の根拠をこちらで用意します。自由度が高い状態ではなく、外れたときに気づく手がかりがない状態です。
手がかりにしたのは二つ。サロン名の由来と、内装。どちらもオーナーが時間をかけて決めたものです。ヒアリングで引き出す言葉より、すでに形になっているもののほうが確かです。

Liner には、線を引くという意味があります。髪を切ることは線を引くこと。何もないところに線を引くことは、新しいものを創り出すこと。新しい自分の始まり、新しい出会いの始まりになる店に。サロン名には、そうした意味が込められていました。
この言葉で骨格が決まりました。線を引く行為を、そのまま設計の原理にする。要素を増やさず、必要な線だけを引く。基準がひとつに定まっていれば、どこに何を置くかで迷いません。
タグラインは Draw the line, make a difference. としました。線を引く行為と「一線を画す」を重ねています。二人の経歴を説明せずに置いておける言葉です。
ロゴは既存のものを使いました。ロゴの中にあるスラッシュを、画面全体のモチーフとして扱っています。この判断が、のちに写真の選び方につながります。

構成は6ページ。Home、About、Price、Staff、Access、Recruit。標準的な構成です。判断したのは、載せないもののほうでした。
作らなかったのは、ヘアスタイルを掲載するページです。スタイル写真は日々増えます。サイトに置けば、更新が止まった時点で古びる。半年前のスタイルが並ぶページでは、内容より更新の停止のほうが目立ちます。
この役割は Instagram に渡しました。日々更新されるものは、日々更新される場所に置く。サイト側は埋め込みで受け、投稿すれば自動的に入れ替わります。
Recruit は最初から入れました。このサイトの役割は、ブランディングと採用です。ポータルサイトで表現できない世界観を見せ、ここに行きたい、ここで働きたいと思ってもらう。開業直後のサロンでは、後者も同じ重さを持ちます。

トーンの調整に時間をかけました。技術も実績もある二人のサロンです。売り込む見せ方は合いません。要素を減らし、色数を抑え、動きは最小限に。
静けさは品格になります。同時に、暗さにもなる。近寄りがたい店に見えれば、開業直後のサロンには不利です。その手前で止めました。
配色を一段明るくすれば軽くなり、余白を広げれば寂しくなる。正解の幅が狭い作業です。

和文は明朝体。ただし、しっとりとしすぎないものを選びました。上品さに寄せると、柔らかい印象が前に出ます。無骨さの残る明朝体のほうが合いました。欧文は Garamond 系。タグラインが英文なので、ここが弱いと全体が緩みます。
配色は内装から取りました。黄味のあるマットな色調です。来店したときの印象と、画面で見た印象をずらさないためです。
レイアウトは情報量を削りました。文字で説明せず、余白と写真で空気を伝える。読ませる要素が少ないぶん、置き場所がそのまま印象になります。

撮影は行っていません。使用している写真は、すべてサロンからの提供です。撮影のない案件では、素材の中から使えるものを見つける作業が設計に含まれます。
提供された写真の一枚に、床へ斜めの影が落ちているカットがありました。窓から入った光です。その角度が、ロゴのスラッシュと重なりました。トリミングしてファーストビューに使っています。
線を引くというコンセプト、ロゴのスラッシュ、床の影。三つが一枚の中で揃いました。探しているものが決まっていたから見つかったカットです。

ファーストビューには、ロゴマークの一本の線をブランドの象徴として置いています。この一本の線に影をつけました。光の入る店内では、影の角度も長さも一日のあいだに変わります。それを画面の中で再現しました。日時計と同じ考え方です。

気づく人は多くありません。一度しか訪れない人には静止画に見えます。それでも入れたのは、光の入る店内という事実を、写真だけでなく画面の側にも持たせるためです。線を一本引き、そこに時間を流す。公開後、最も反応があったのもこの部分でした。

予約は外部サービスを使います。サイト側に予約機能は作りません。送り届けることに徹します。
Liner では、予約をモーダルで開きます。グローバルナビとフッター、そして画面右下の追従ボタン。どのページからも一手で入れる状態です。別ページにしないのは、遷移と読み込みを挟まないためです。
SNSは Instagram と YouTube を埋め込んでいます。外部のエンベッドサービスを経由しているので、SNSを更新すればサイトの表示も入れ替わります。サイトのための作業を増やしません。
管理画面で触るのは、スタッフ情報とお知らせ一件のみにしました。更新できる範囲は、広いほど放置されます。営業しながら運用する店では、触る場所が少ないほうが整った状態が続きます。

公開から3年ほど経ち、追加の仕様としてシーズンビジュアルを掲載することになりました。
この写真も、いずれ古くなります。シーズンごとの撮影をページで持てば、次の撮影のたびに更新の判断が要る。更新が止まれば、去年のビジュアルが残ります。載せなかったヘアスタイルページと同じ構造です。
アクセス時にモーダルで表示する形にしました。画像の差し替えで完結し、不要になれば外すだけです。公開から4年、大きな作り替えは発生していません。増やさない構成にした結果です。

お任せの依頼は、自由に作れるという意味ではありません。判断の根拠を、こちらで探すということです。
Liner の根拠は、サロン名の由来と内装にありました。名前に込めた意味を読み、内装から色を取り、提供された写真から一枚を選ぶ。すでにあるものを翻訳する作業です。
センスで作ったものは、きれいでも、そのサロンでなくても成立します。世界観に一貫性のあるサイトは、作り手の発明ではなく、店がもともと持っていたものを取りこぼさなかった結果です。
Liner のサイトは、今も公開されています。時間帯によって、影の角度が違います。