出典：monasterymade.com ↗ 確認日 2026.11.01
Editor's note
編集部の視点
スキンケアのECとフェイシャルのスパを「Shop」「Spa」の2つの入口に分け、肌診断と施術の料金表で選びやすくするサンフランシスコのブランド。
植物由来のスキンケアを作るブランド Monastery のサイト。フッターの住所はサンフランシスコで、カリフォルニアにフェイシャルのスパを持つ。ヘッダーの中央には「Shop」と「Spa」の2つだけが大きく並び、商品を買う人とスパで施術を受ける人の入口を分けている。トップは新商品の写真と「SHOP NOW」、引用された評価の言葉が流れる帯、洗う・保湿・角質ケアの3つの商品、肌の悩み別のセット4つと「肌診断クイズ」、そして「VISIT MONASTERY — BOOK NOW」でスパへ。スパのページにはフェイシャル8種と眉・まつ毛7種の料金、創業者を含むエステティシャンの経歴、電話とメール、予約の入口がある。
- 01 ヘッダーの中央を「Shop」と「Spa」の2つにして、物販と施術の入口をはっきり分ける
- 02 肌の悩み別のセットと「肌診断クイズ」で、どれを買えばよいか分からない人を手助けする
- 03 スパのページに施術ごとの時間と料金、担当するエステティシャンの経歴を並べる
Conversion
集客の工夫
- スパへの導線 （あり） ヘッダーの「Spa」とトップの「VISIT MONASTERY — BOOK NOW」
- 施術の料金 （あり） フェイシャル8種・眉とまつ毛7種の料金（フェイシャルは時間も）
- オンライン予約 （あり） スパのページに「Book now」の予約欄
- スタッフ紹介 （あり） 創業者を含むエステティシャンの経歴
- 肌診断 （あり） 「Find your routine. Take our skin quiz.」
- 送料の明記 （あり） 上部の赤い帯に国内送料無料・海外は250ドル以上で無料
- 電話・メール （あり） スパのページに電話とメール（トップにはなし）
- 住所 （あり） フッターにサンフランシスコの住所
物販とサロンの入口を、2つに分ける
ヘッダーの中央には 「Shop」と「Spa」の2つだけ が大きく並んでいます。スキンケア商品を買いたい人と、スパで施術を受けたい人では、探しているものが違います。最初の画面で入口を分けることで、どちらの人も迷わずに進めます。
迷う人には、悩み別のセットと診断を
トップの中ほどには、ニキビ・明るさ・保湿・Ultimate の 4つの悩み別のセット と、「Find your routine. Take our skin quiz.（肌診断クイズ）」の赤いボタンがあります。商品が多いブランドでも、自分の悩みから選べる入口があると買い物の負担が減ります。
施術は、料金と担当者を見せて予約へ
トップの終わりの「VISIT MONASTERY」から、スパのページへ進めます。スパのページには フェイシャル8種（時間つき）と眉・まつ毛7種の料金、創業者を含むエステティシャンの経歴、電話とメールが並び、その下で予約ができます。料金と担当者が先に分かるので、初めての人も予約を決めやすい作りです。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #060606 背景（黒）
- #F1F1F1 文字
- #AB0605 上部の帯・肌診断のボタン（赤）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・商品名 | EB Garamond | EB Garamond |
| ナビ・ボタン・小見出し（大文字） | Planscribe NF | Josefin Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| 本文（p） | 12px / 700 | 1.40 | 12px / 700 |
| ボタン | 12px / 700 | 1.40 | 12px / 700 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 上部に赤いお知らせの帯。中央に「Shop」「Spa」、右に About・Read・Account・Cart。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 商品の写真に「Healing Botanical Skincare」と新商品の一文、「SHOP NOW」。 ファーストビュー／全面写真＋コピー型
- 03 評価の言葉 引用された評価の言葉が横に流れる帯。 推薦／利用者の声型
- 04 ブランドの考え方 「INITIATE YOURSELF INTO MONASTERY」と、肌の回復を助けるという考え方。 メッセージ／大きな一文型
- 05 3つのステップ 洗う・保湿・角質ケアの代表商品を1つずつ、価格つきで。 商品／グリッド型
- 06 原料の話 「MAKING MONASTERY」。原料の植物油と蒸留物の選び方。 コンセプト／写真＋メッセージ型
- 07 悩み別のセット ニキビ・明るさ・保湿・Ultimate の4つと、肌診断クイズのボタン。 一覧／カード並び型
- 08 スパへ 「VISIT MONASTERY」。カリフォルニアのスパでエステティシャンの施術を予約。 行動喚起／ボタン帯型
- 09 登録欄 「Subscribe and save 10%.」の登録欄。 行動喚起／メール登録型
- 10 フッター Shop・Spa（施術・スタッフ・予約）・About・FAQ と住所。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 物販とサロンの両方がある店は、ヘッダーで2つの入口を同じ大きさで並べる
- 02 商品選びに迷う人のために、悩み別のセットや簡単な診断を用意する
- 03 施術メニューは時間と料金を一覧にし、担当者の経歴を添える
- 04 送料などの条件は、上部の帯に1行で出しておく
FAQ
よくある質問
Monastery のサイトで使われているフォントは？
見出しや商品名は EB Garamond、ナビやボタンの大文字は Planscribe NF です。EB Garamond は無料で使えます。Planscribe NF の代わりには、幾何学的な Josefin Sans が候補です。
サロンのサイトに料金表は載せたほうがよいですか？
Monastery はスパのページで、フェイシャル8種と眉・まつ毛7種の料金を並べ、フェイシャルには時間も書いています。料金が分かると予約前の問い合わせが減り、どの施術にするかを自分で決めやすくなります。
どんな業種の参考になりますか？
エステサロン・美容室・ネイルサロン・整体院など、施術と自社商品の販売の両方を行う店に向きます。物販とサービスの入口を分けて見せたい事業全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はMonasteryおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
