ワイヤーDLBLUE PEARL
水彩の丸いロゴと淡い水色の背景で、駅近のピラティススタジオの落ち着いた空気を伝える。
webcan analyze naneaahua-hair.com
BEAUTY SALON · 東京都 · PICKED 2026.11.08
NANEA HAIR美容室・サロンのホームページデザイン参考 — 青緑1色・欧文セリフ・余白
出典：naneaahua-hair.com ↗確認日 2026.11.08
EDITOR'S NOTE編集部の視点
文字色を青緑の1色にそろえ、予約の入口をLINE・HOTPEPPER・電話の3つ並べる。
東京都世田谷区三宿の美容室のサイト。ファーストビューは淡いグレーの背景に欧文のコピーと短い英文の紹介を置き、その下に店内の写真を横長に大きく見せている。下に進むと、店の紹介、考え方、メニュー、店舗情報、定休日のお知らせが続き、最後にLINE・HOTPEPPER・電話の3つの予約の入口を並べている。
- 01ロゴ・見出し・ナビ・本文の文字色を、青緑（#107A7F）の1色にそろえている
- 02見出しに欧文セリフ体（Cormorant Garamond）、本文に明朝体（Zen Old Mincho）を使い、余白を広くとっている
- 03ページ末尾の「Reservation」で、公式LINE・HOTPEPPER Beauty・電話の3つの予約方法を横に並べている
3 VIEWPOINTS3つの視点で見る
デザインの視点
淡いグレーの背景に、ロゴ・見出し・ナビ・予約ボタンの文字を青緑の1色でそろえている。予約ボタンは枠線だけにして、ファーストビューの下に店内の写真を横長に1枚大きく置く。色数を増やさずに上品さを出す作りは、小さな美容室でも真似できる。
集客の視点
ヘッダーの「Reservation」に加え、ページ末尾で公式LINE・HOTPEPPER Beauty・電話の3通りの予約方法を並べ、営業時間も載せている。お客さんが使い慣れた手段を選べるように、予約の入口を複数用意している点を真似したい。
Webディレクターの視点
メニューを6項目に整理し、店舗情報、定休日のお知らせ、LINE・HOTPEPPER・電話の予約の3列を最後に並べている。文章と写真が中心の1ページの構成で、小さな店舗が取り入れやすい。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ご予約Reservation / 公式LINEで予約する
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
予約の手段を選べるようにする
ヘッダーの「Reservation」に加え、ページ末尾で公式LINE・HOTPEPPER Beauty・電話の3つを並べている。お客さんがふだん使っている方法で予約できる。
店舗情報と休みのお知らせを予約の直前に置く
「Salon Info」で住所・地図へのリンク・営業時間（10:00〜19:00）を示し、その下に月の定休日のお知らせを載せてから予約の欄に進む。来店できる日を確かめてから予約に移れる。
メニューを6つの入口に整理する
Set Menu・Cut・Color・Perm・Treatment・Spa の6つを英字と日本語の小さなラベルで並べている。メニューの種類が一目で分かる。
チェック項目は 2026.11.08 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F4F5F5背景 · ライトグレー
#EEF1F1セクション背景
#107A7F文字・ロゴ・ボタンの枠 · ティール
#81A5A7補助テキスト
#C7D1D1罫線
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 欧文見出し・ナビ
- 使用フォント
- Cormorant Garamond
- 無料で近いもの
- Cormorant Garamond
- 用途
- 和文本文
- 使用フォント
- Zen Old Mincho
- 無料で近いもの
- Zen Old Mincho
- 用途
- 補助（和文ゴシック）
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 54px / 400 | 1.50 | 32px / 400 |
| h3 | 15px / 400 | — | 13px / 400 |
| 本文（p） | 15px / 400 | 2.20 | 13px / 400 |
実測値（PC 1440px・SP 375px、2026.11.08 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
We can do（メニュー）
メニュー・サービス／アイコン／写真グリッド型 - 07
- 08
- 09
定休日のお知らせ
お知らせ／お知らせ一覧型 - 10
- 11
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.08 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01文字色をブランドの1色にそろえ、背景は淡いグレーにする
- 02欧文セリフ体の見出しと明朝体の本文で、余白を広くとる
- 03メニューは種類ごとの入口に分けて並べる
- 04予約の欄で、LINE・予約サイト・電話の3つを横に並べる
FAQよくある質問
NANEA HAIR のサイトで使われているフォントは？
欧文の見出しとナビに Cormorant Garamond、和文の本文に Zen Old Mincho、補助に Noto Sans JP を使っています。すべて Google Fonts で無料で使えます。
美容室のサイトで、予約サイトとLINEのどちらを入口にすべきですか？
NANEA HAIR は公式LINE・HOTPEPPER Beauty・電話の3つを同じ大きさで並べています。お客さんによって使い慣れた予約方法が違うため、どれか1つに絞らずに並べておくと選びやすくなります。
どんな業種の参考になりますか？
美容室のほか、ネイル・まつげ・エステなどの個人サロンや、小さなカフェなど、雰囲気を伝えつつ予約までを1ページで案内したい店に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はNANEA HAIRおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの美容室・サロンの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のサロンサイトを。
「NANEA HAIRのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。