ワイヤーDLBLUE PEARL
水彩の丸いロゴと淡い水色の背景で、駅近のピラティススタジオの落ち着いた空気を伝える。
webcan analyze ao-beauty-labo.com
BEAUTY SALON · 愛知県 · PICKED 2026.11.01
aoはり治療院美容室・サロンのホームページデザイン参考 — ブルー・清潔感・2院の予約導線
出典：ao-beauty-labo.com ↗確認日 2026.11.01
EDITOR'S NOTE編集部の視点
「初めての不安」に6つのポイントで先に答え、2つの院それぞれのネット予約へ迷わず進ませる。
名古屋市中区の美容鍼の治療院（栄院・金山院）のサイト。ファーストビューは院内や施術の写真のスライドに、縦書きの「初めての方も安心」のコピー。直下に口コミ件数や入選の実績を並べ、初めての方へ・6つのポイント・メニュー・院紹介・スタッフと予約の順に進む。スマホでは画面下に2院それぞれのネット予約ボタンを固定している。
- 01ヘッダーに電話番号・受付時間・「完全予約制」と、「本日の予約状況」のボタンを並べている
- 02「初めての方に選ばれる6つのポイント」で、都度払い・完全個室・押し売りをしない・女性スタッフ在籍などを番号つきのカードで見せている
- 03スタッフ紹介を栄院・金山院のタブで切り替え、一人ずつ担当施術と空き状況（有・無）を出している
3 VIEWPOINTS3つの視点で見る
デザインの視点
青（#3972B7）と白だけで全体をまとめ、院内の写真も同じ青と白の空間で統一している。写真の直下に実績を置き、番号つき（01〜06）の特徴カード、写真つき3列のメニューと続く並びが真似しやすい。
集客の視点
「契約なし・都度払い」「押し売りはしません」「女性スタッフ在籍」など来院前の不安に先に答え、スマホでは画面下に2院それぞれのネット予約ボタンを固定している。スタッフごとに空き状況を出している点も予約につながる。
Webディレクターの視点
実績→コンセプト→初めての方へ→6つのポイント→メニュー→院紹介→スタッフと予約→ブログ→営業日カレンダーの順。スタッフ紹介とブログ、営業日カレンダーを分けて持つので、日々の更新を院内で回しやすい。
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線本日の予約状況 / ネットでのご予約はこちら
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
来院前の不安を先回りして答える
「契約などはいたしません」「商品の押し売りはしません」「女性スタッフも在籍」など、初めての人がためらう理由を6つのカードで先に打ち消している。美容系の店で特に効く書き方。
院ごとに予約の入口を分ける
スマホの画面下に「ネット予約（栄院）」「ネット予約（金山院）」の2つのボタンを固定し、ページ下部のINFORMATIONでも2院のネット予約を並べている。複数店舗でも、どちらに予約するかで迷わない。
外部サイトの評価を実績として見せる
ファーストビュー直下に、鍼灸院の比較サイトでの口コミ件数の順位と、美容鍼サロンのセレクションへの入選歴を、調べた日付つきで並べている。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#DFDDDCスタッフ紹介の背景 · ライトグレー
#3972B7帯・見出し・予約ボタン · ブルー
#7097D7差し色 · ライトブルー
#86BE24本院（中部治療院）への案内 · グリーン
#666666本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し（MENU・SALON など）
- 使用フォント
- Quicksand
- 無料で近いもの
- Quicksand
- 用途
- 和文見出し・本文
- 使用フォント
- 游ゴシック体（YuGothic）
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 20px / 400 | 1.00 | 20px / 400 |
| h3 | 20px / 700 | 1.00 | 16.4px / 700 |
| 本文（p） | 14px / 400 | 2.00 | 12px / 400 |
| ボタン | 14px / 700 | 3.57 | — |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
CONCEPT
コンセプト／写真＋メッセージ型 - 05
特集バナー
イベント・キャンペーン／特集バナー並び型 - 06
BEGINNER（初めての美容鍼でお悩みの方へ）
コンセプト／写真＋メッセージ型 - 07
初めての方に選ばれる6つのポイント
強み・選ばれる理由／番号つき3〜4項目型 - 08
- 09
- 10
- 11
- 12
Instagram・LINE
行動喚起／メルマガ・LINE登録型 - 13
- 14
フッター
フッター／店舗情報＋ナビ型 - 15
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.01 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01初めての人がためらう理由を洗い出し、番号つきのカードで先に答える
- 02複数店舗なら、予約ボタンを店舗ごとに分けて並べる
- 03スタッフ紹介に担当メニューと空き状況を添えて、指名予約につなげる
- 04色はブランドの青と白に絞り、写真も同じ色の院内で統一する
FAQよくある質問
aoはり治療院のサイトで使われているフォントは？
英字の見出しは Quicksand（Google Fonts）、和文は游ゴシック体です。和文を Webフォントにする場合は Noto Sans JP が近い印象になります。
店舗が2つあるとき、予約ボタンはどう置けばいいですか？
このサイトはスマホの画面下に「ネット予約（栄院）」「ネット予約（金山院）」を左右に並べて固定し、ページ下部でも同じ2つを並べています。店舗名をボタンに入れることで、押す前に選べます。
どんな業種の参考になりますか？
鍼灸院・整体院のほか、エステサロン・美容室・ネイルサロンなど、初回の来店に不安を持たれやすく、スタッフを指名して予約する業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はaoはり治療院および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの美容室・サロンの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のサロンサイトを。
「aoはり治療院のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。