ワイヤーDLBLUE PEARL
水彩の丸いロゴと淡い水色の背景で、駅近のピラティススタジオの落ち着いた空気を伝える。
webcan analyze book-and-hair.com
BEAUTY SALON · 神奈川県 · PICKED 2026.10.28
本と美容室美容室・サロンのホームページデザイン参考 — イラスト・緑×オレンジ・明朝体
出典：book-and-hair.com ↗確認日 2026.10.28
EDITOR'S NOTE編集部の視点
本と美容道具が飛び交うイラストと縦書きの明朝体で、「美容室×セレクト書店」という新しい業態を物語として伝える。
神奈川県三浦市の出版社アタシ社が運営する、美容室とセレクト書店を一体にした店舗のブランドサイト。ファーストビューは、緑の背景に美容師と客、はさみ・ドライヤー・本などをちりばめた画面いっぱいのイラストで、文字はロゴとメニューボタンだけにしている。ブランドを始めた経緯の文章のあと、PROJECT（店舗）、RECRUIT（採用情報）、BOOKS（セレクト書店）、LOCAL（出店エリア募集）、SHOP（店舗一覧）を、大きな英字の見出しと写真で並べている。PCではRECRUITとLOCALの見出しを縦に置き、背景を緑とオレンジのグラデーションにしている。
- 01ファーストビューは文字を入れず、美容道具と本のイラストだけで業態を表している
- 02PROJECT・RECRUIT・BOOKS・LOCAL・SHOPを、太い英字の見出しと日本語の小見出し、写真の組み合わせで並べている
- 03緑・オレンジ・黄色のイラストを、セクションの間にも小物として散らしている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
美容師の採用を、働き方の提案として書く
RECRUITでは、都市からローカルへ移って働く「これからの美容師の生き方」を文章で提案し、店舗の紹介にも「スタッフ募集」のラベルを付けている。給与や条件より先に、働く場所と暮らし方に共感する人を集める作り。
出店する地域も募集する
LOCALで「あなたが暮らす街に「本と美容室」を呼んでくれませんか」と呼びかけ、出店エリアを募集している。来店客だけでなく、一緒に店をつくる地域の人も相手にしている。
店舗一覧に営業情報をそろえる
SHOPでは店舗の写真とともに、所在地・営業時間（最終受付の時刻つき）・定休日を載せている。ブランドの物語を読んだ人が、そのまま来店の情報を確かめられる。
チェック項目は 2026.10.28 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F2EFDE背景 · 生成り
#42B775ファーストビュー・帯 · グリーン
#000000本文テキスト・ボタン
#8E8A71補足テキスト · グレージュ
#FFFFFF白
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し
- 使用フォント
- 筑紫Aオールド明朝 B（Adobe Fonts）
- 無料で近いもの
- Shippori Mincho
- 用途
- 和文本文
- 使用フォント
- 筑紫Aオールド明朝 R（Adobe Fonts）
- 無料で近いもの
- Shippori Mincho
- 用途
- 英字見出し
- 使用フォント
- Yeseva One
- 無料で近いもの
- Yeseva One
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 18px / 400 | 1.20 | 13px / 400 |
| h3 | 25px / 400 | 1.48 | 22px / 400 |
| 本文（p） | 15px / 400 | 1.50 | 14px / 400 |
| ボタン | 13.3px / 400 | — | 13.3px / 400 |
実測値（PC 1440px・SP 375px、2026.10.28 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.28 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューは文字を減らし、業態がわかるイラストや写真1枚に任せる
- 02採用は条件より先に、その店で働く暮らし方を提案する文章で書く
- 03来店客のほかに、出店・協業してくれる人への呼びかけの入口を作る
- 04店舗一覧には、所在地・営業時間・最終受付・定休日をそろえて載せる
FAQよくある質問
本と美容室のサイトで使われているフォントは？
和文は Adobe Fonts の筑紫Aオールド明朝（見出しはB、本文はR）、英字の見出しは Yeseva One です。無料で近づけるなら、和文に Shippori Mincho、英字に Yeseva One（Google Fonts）が使えます。
美容室のサイトなのに、メニューや料金をトップに載せていないのはなぜですか？
このサイトは、個々の店舗よりも「本と美容室」というブランドと、そこで働く美容師・出店する地域を集めることを目的にしています。料金などの来店の情報は店舗ごとのページに分け、トップでは店舗一覧で所在地と営業時間を示しています。
どんな業種の参考になりますか？
美容室のほか、複数の業態を組み合わせた店（書店×カフェ、雑貨×サロンなど）や、地方への出店や移住を伴う採用をしている事業者のサイトに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は本と美容室および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの美容室・サロンの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のサロンサイトを。
「本と美容室のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。