スクロールすると朝から午後へ。光が移ろう、薬院の美容室のホームページ

薬院の小さな美容室を架空のモデル店舗に見立てた制作サンプル。白背景＋写真＋LINEボタンの定番を封じ、「一日の光」をコンセプトに5ページを制作。却下した案と採用理由をお話しします。

この事例は、美容室のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。「hair atelier niwa」という薬院の美容室を架空のモデル店舗として設定しており、店舗・住所・電話番号は架空のものです。サイトのフッターにも「このサイトは制作サンプルです（架空のお店です）」と小さく記しています。ただし、設計の悩み方や却下した案、ページの作り方は、本物のお店をつくるときとまったく同じ手順で進めています。

モデル店舗の設定：薬院の路地、古いビルの3階にある4席の美容室

モデル店舗の設定はこうです。福岡市中央区薬院、駅から徒歩4分。古いビルの3階、看板は小さめ。2025年4月に独立したオーナー兼スタイリストの庭田紗希さんと、スタイリストの宮本さん、アシスタントの藤井さんの3人で、4席・シャンプー台2台のお店を営んでいます。ホームページの目的は、予約サイト頼みをやめて、自分のサイトからLINE予約とフォーム予約を受けられるようにすること。そして「値段で比べられたくない」という気持ち。美容室のホームページ制作で本当によく出てくる悩みなので、そのままモデル店舗のブリーフに据えました。

最初に決めたのは「やらないこと」

美容室のサイトには定番の型があります。白い背景に店の写真、その下にLINEボタン。写真＋見出し＋ボタンの三点セットを縦に並べる。同じ大きさのカードを格子に並べる。今回のブリーフでは、これらをすべて禁止にしました。色は白・生成り・うすいグレーだけ。植物の緑は「ひと葉」だけ。金色とピンクは使わない。文字が主役で、小文字の「niwa」のワードマークをページ幅いっぱいに置き、見出しは雑誌の見開きのように大きく、本文は静かに小さく。写真は大きく非対称に、縦写真は段違いに、文字が写真に少しかかる。動きは派手にせず、光がにじむようにゆっくり現れる。やらないことを先に決めると、どの方向に進んでも「よくある美容室のサイト」にはならなくなります。

却下した二つの方向

ひとつめは「影の庭」。グレー（#E9E7E2）の地に、写真を光の窓のように置く、翳りの強い方向でした。落ち着いていて美しいのですが、白と生成りという色の指定と衝突しますし、何より午後の光の美しさを殺してしまう。モデル店舗の魅力は大きな窓から入る光なので、地を暗くする案は却下になりました。

ふたつめは「二十四節気の庭」。白露のような季節の言葉を縦書きで各ページの主役に据え、光は固定する方向です。こちらは言葉が強くなりすぎて、写真と髪の光が脇役になってしまうのが理由で却下。ただ、季節の言葉そのものは気に入っていたので、フッターの右下に今日の節気を一語だけ残しました。ふりがなと「朝夕、髪に涼しさが混じる頃。」のようなひとことが、日付から自動で切り替わります。

採用したのは「一日の光」。スクロールが時間になる

最終的に採用したのは「サイト全体を、一日の光が巡る庭にする」という案です。どのページも、上端は朝の白い光（#FAFAF7）、下へたどるほど午後の生成り（#EFE9DD）に変わっていき、白い壁に落ちるオリーブの影が少しずつ濃く、長くなっていきます。スクロールの進み具合を「時刻」として扱い、背景色と影の濃さ・位置を連動させる仕組みです。髪型は「作る」ものではなく、その人に似合うものを一緒に「育てる」もの。その時間の流れをページの光で語る、という考え方です。緑はサイト全体でLINE予約ボタンひとつだけ。小さな葉のマークを添えた「LINEで予約」が、白い庭の中の「ひと葉」として目に入ります。

スマホの最初の画面は、写真と一言だけ

スマホで開いたときの最初の画面は、光に透ける髪の写真と「どんな朝ですか。」という一言だけ。キャッチコピーもボタンもありません。「ボタンで急がせない」というのがモデル店舗の姿勢だからです。ただし、予約はしてほしい。そこで右下の親指が届く位置に「LINEで予約」の葉を固定し、どのページ・どのスクロール位置でも、メニューを開いている最中でも、必ず見えているようにしました。電話番号も載せていますが、施術中は出られないことが多いので「LINEがいちばん確実です」と添えています。

余白は贅沢に、情報は完全に

静かなサイトにありがちな失敗は、雰囲気を優先して情報が足りなくなることです。今回は「間（ま）を基調にした静かな密度」を保ちながら、美容室のサイトに必ずあるべき情報は全部載せました。税込の料金表（カット7,700円、カット＋カラー15,400円〜、髪質改善トリートメント13,200円〜、白髪ぼかしハイライト19,800円〜）、営業時間（10:00–19:00、最終受付はカット18:00・カラー17:00、定休は月曜と第2火曜）、駅名と徒歩時間、駐車場なし・近くにコインパーキング、子連れOK・ベビーカー可、スタッフの実名、よくある質問、予約手段、プライバシーポリシー。初回はカウンセリング30分を含めて90分枠、という案内も料金表のすぐそばに置いています。

途中で加えた見直し：「世界観はこのまま、ただ読めるように」

一度かたちになった段階で、見直しをかけました。細い明朝と薄いグレーの文字は美しいのですが、そのままでは読みづらい。そこで方向は変えずに、本文は17px以上（デスクトップ18px）、キャプションや注釈、ナビも14px以上、細いウェイトは見出しだけにして本文は標準の太さに、文字色は午後の生成りの地の上でも十分なコントラストが出る濃さに、と全ページを調整しました。ヘッダーは下にスクロールすると隠れ、上に戻した瞬間に細いバーとして戻ってくる仕様に。雰囲気を守りながら読めるようにする、この調整は美容室のサイトではほぼ必ず通る道だと思います。

納品した5ページ

制作したのは、トップ、niwaについて、メニューと料金、ご予約・アクセス、プライバシーポリシーの5ページです。トップは、考え方、得意なスタイル、初めての方へ、料金の要約、スタッフ、営業時間とアクセスまでを一枚で語り、午後の光がいちばん深くなるのがアクセスのあたり。「niwaについて」は独立の経緯と店内、3人のプロフィール。「メニューと料金」は料金表に加えて髪質改善と白髪ぼかしの説明を、薬機法に触れない言葉づかいで。「ご予約・アクセス」はLINE・フォーム・電話の3つの予約方法、希望日時を3つ書けるフォーム、よくある質問、営業時間グリッド、地図をまとめています。予約の第一手段はLINE、次にフォーム、電話は補助、という順番をページの上から下まで一貫させました。

「白背景に写真とLINEボタン」から離れても、予約しやすさと情報の完全さは両立できる。このサンプルでお見せしたかったのはそこです。この事例のようなホームページを、あなたのお店にも。チャットで話すだけで、ホームページ番頭がかたちにします。hpbanto.com へどうぞ。