WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 美容室・サロン
  4. BLUE PEARL

webcan analyze bluepearl.jp

BEAUTY SALON · 福岡県 · PICKED 2026.11.10

BLUE PEARL美容室・サロンのホームページデザイン参考 — ピラティス・淡い水色・水彩

BLUE PEARLのトップページ（PC）
PC（1440px）
BLUE PEARLのトップページ（スマホ）
スマホ（375px）
出典：bluepearl.jp ↗確認日 2026.11.10
BLUE PEARL美容室・サロン · 福岡県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

水彩の丸いロゴと淡い水色の背景で、駅近のピラティススタジオの落ち着いた空気を伝える。

西鉄久留米駅から徒歩3分のピラティススタジオのサイト。ファーストビューは淡い水色の背景に水彩のにじみと線の模様を置き、中央に水彩の丸いロゴと「wellness studio」、オープン日を並べている。右上に MENU、右端に縦書きの INSTAGRAM・FACEBOOK のリンクを置く。ABOUT US、COURSE & PRICE・SCHEDULE・STUDIO の写真の入口、BLOG、NEWS、営業時間の表とお問い合わせ・LINEのボタンを載せたフッターと続く。

  1. 01淡い水色の背景・水彩のにじみ・細い線の模様で、全体をやわらかくまとめている
  2. 02写真の大きさと高さをずらして並べ、余白を広く取っている
  3. 03文字は青みのグレー（#809EAE）で統一し、英字は丸みのある Quicksand を使っている

3 VIEWPOINTS3つの視点で見る

デザインの視点

淡い水色（#F6F9FA）の背景に水彩のにじみと線の模様を置き、レッスンやスタジオの写真を、余白を取って高さをずらして並べる作りを真似するとよい。フッターの営業時間の表の下に、緑のLINEのボタンを置いている。

集客の視点

「西鉄久留米駅から徒歩3分」の立地と、STOTT PILATES®の資格を持つインストラクターを紹介文で明示し、フッターに曜日別の営業時間とLINEの友だち追加ボタンを置いている。立地・資格・営業時間・LINEを一か所にまとめる点を真似するとよい。

Webディレクターの視点

「ABOUT→コース・料金・スケジュール・スタジオ→ブログ→お知らせ」と並べ、最後に営業時間の表・定休日・お問い合わせ・LINEの友だち追加を置く構成を真似するとよい。小さな店舗が情報の置き場所を決めるときの手本になる。

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

駅からの距離と資格を最初に書く

ABOUT US の見出しで「西鉄久留米駅から徒歩3分のピラティススタジオです。」と書き、説明文で STOTT PILATES® の資格を持つインストラクターがプライベートレッスンと少人数制のグループレッスンを行うことを伝えている。

コース・料金・スケジュール・スタジオを写真で入口にする

COURSE & PRICE、SCHEDULE、STUDIO の3つを、それぞれ写真つきの入口にして並べている。知りたいことから選んで進める。

営業時間とLINEをフッターにまとめる

フッターに住所、曜日ごとの営業時間の表、定休日を載せ、その下に「CONTACT」と緑の「友だち追加」（LINE）のボタンを並べている。通えるかどうかを確かめた流れで連絡できる。

チェック項目は 2026.11.10 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#F6F9FA背景 · ペールブルーグレー
#FFFFFFボタン・カード
#809EAE本文テキスト · ブルーグレー
#BFCFD9補助テキスト・線

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
英字（ロゴまわり・見出し）
使用フォント
Quicksand
無料で近いもの
Quicksand
用途
和文の見出し
使用フォント
TsukuARdGothic（Adobe Fonts）
無料で近いもの
Zen Maru Gothic
用途
和文の本文
使用フォント
源ノ角ゴシック（Adobe Fonts）
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h113px / 4002.6413px / 400
h218px / 4001.9118px / 400
h313px / 4002.6413px / 400
本文（p）14px / 4002.4512px / 400
ボタン14px / 4002.4514px / 400

実測値（PC 1440px・SP 375px、2026.11.10 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    右上に MENU、右端に縦書きの INSTAGRAM・FACEBOOK。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    水彩の丸いロゴ、wellness studio、オープン日。

    ファーストビュー／全面写真＋コピー型
  3. 03

    ABOUT US

    駅からの距離の見出し、写真3枚、紹介文と MORE READ。

    コンセプト／写真＋メッセージ型
  4. 04

    COURSE & PRICE・SCHEDULE・STUDIO

    写真をずらして並べた3つの入口。

    メニュー・サービス／アイコン／写真グリッド型
  5. 05

    BLOG

    サムネイル・タイトル・日付。

    記事・メディア／記事カードグリッド型
  6. 06
  7. 07

    フッター

    住所、曜日ごとの営業時間の表、定休日、CONTACT と LINE の友だち追加のボタン、Googleマップ。

    フッター／店舗情報＋ナビ型
BLUE PEARLの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
BLUE PEARLのファーストビュー（PC）PC
BLUE PEARLのファーストビュー（スマホ）SP
03ABOUT USコンセプト／写真＋メッセージ型
BLUE PEARLのABOUT US（PC）PC
BLUE PEARLのABOUT US（スマホ）SP
04COURSE & PRICE・SCHEDULE・STUDIOメニュー・サービス／アイコン／写真グリッド型
BLUE PEARLのCOURSE & PRICE・SCHEDULE・STUDIO（PC）PC
BLUE PEARLのCOURSE & PRICE・SCHEDULE・STUDIO（スマホ）SP
07フッターフッター／店舗情報＋ナビ型
BLUE PEARLのフッター（PC）PC
BLUE PEARLのフッター（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.10 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01背景の色を淡い1色に決め、水彩や線の模様でやわらかさを足す
  2. 02最初の紹介文で、駅からの距離と講師の資格を書く
  3. 03コース・料金・スケジュールなど、よく見られるページを写真つきの入口にする
  4. 04フッターに営業時間の表と、お問い合わせ・LINEのボタンをまとめる

FAQよくある質問

BLUE PEARL のサイトで使われているフォントは？

英字は Quicksand（Google Fonts）、和文の見出しは TsukuARdGothic、本文は源ノ角ゴシック（どちらも Adobe Fonts）です。無料で近づけるなら Zen Maru Gothic と Noto Sans JP が使えます。

小さなスタジオのサイトでは、まず何を載せればよいですか？

このサイトのように、駅からの距離、講師の資格、コース・料金・スケジュールの入口、営業時間と連絡先をそろえると、通えるかどうかをその場で判断してもらえます。

どんな業種の参考になりますか？

ピラティス・ヨガのスタジオのほか、整体・エステ・パーソナルジムなど、落ち着いた雰囲気で選ばれる小さな店舗に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBLUE PEARLおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの美容室・サロンの参考サイト

美容室・サロンのすべてを見る8件
webcan design --sitemap bluepearl.jp

BLUE PEARLのサイトマップ

  • 48ページ
  • トップページ/
  • ABOUT US/about/
  • COURSE/course/
  • STUDIO/studio/
  • SCHEDULE/schedule/
  • ACCESS/access/
  • CONTACT/contact/
  • NEWS/newslist/
  • BLOG/blog/
  • 記事ページ/<各ページ>/39件

外部リンクInstagram・Facebook・LINE

2026.11.10 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のサロンサイトを。

「BLUE PEARLのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら