出典：salusbody.com.au ↗ 確認日 2026.10.31
Editor's note
編集部の視点
トップをカテゴリのタイルで埋めて買い物の入口にし、送料無料・ギフトカード・法人ギフト・卸の窓口まで用意したオーストラリアのボディケアブランド。
家で使うスパ用品をつくる Salus Body & Spa のサイト。最上部の帯で「全注文で送料無料・試供品つき」と伝え、ヘッダーは細い線で区切った格子に Shop・About・ロゴ・アカウント・カート・検索を並べる。トップはほとんどが、保湿・洗う・ヘアケア・手・顔・家・詰め替えとまとめ買い・温熱ピロー・スクラブと入浴・セットと旅行用の10のカテゴリのタイルで、写真のタイルと交互に並ぶ。その下にブランドの話とギフトカード、フッターに初回10ドル引きのメール登録と、一般・卸それぞれの問い合わせ先がある。
- 01 トップの大半をカテゴリのタイルにして、来た人がすぐ商品の種類を選べるようにする
- 02 送料無料と試供品を最上部の帯で伝え、買う前の迷いを減らす
- 03 ギフトカード・法人ギフト・卸の窓口を用意し、個人の買い物以外の注文も受ける
Conversion
集客の工夫
- 送料無料・試供品 （あり） 最上部の帯で「全注文で送料無料・試供品つき」
- カテゴリの入口 （あり） トップに10カテゴリのタイル
- 詰め替え・まとめ買い （あり） 「Refills & Bundles」のカテゴリ
- ギフトカード （あり） メッセージを添えて郵送かメールで
- 法人ギフト （あり） About に「Corporate Gifting」
- 卸の窓口 （あり） フッターに Stockist Enquiry のメール
- メール登録 （あり） 初回10ドル引き（75ドル以上）と試供品
- 電話番号のリンク （なし） フッターにテキストで掲載（tel:リンクはなし）
トップを、カテゴリの入口にする
トップには大きな見出しも説明文もありません。かわりに、保湿・洗う・ヘアケア・手・顔・家など 10のカテゴリのタイルが、写真のタイルと交互に 並び、それぞれに「Shop now」のリンクがあります。何を探しているか決まっている人が、最初の画面から商品の一覧に進める作りです。ヘッダーも細い線の格子で区切られ、タイルと同じ形にそろえています。
買う前の迷いを、帯で先に消す
最上部の帯は 「全注文で送料無料・試供品つき」。送料がいくらかかるか、使ったことのない香りが合うかといった、買う前に気になることに先に答えています。フッターのメール登録でも、初回10ドル引き（75ドル以上の注文）と試供品、新商品の先行案内を約束しています。
個人の買い物以外の入口もつくる
カテゴリには「Refills & Bundles（詰め替えとまとめ買い）」があり、2回目以降の購入を受け止めます。トップの下ではギフトカードを紹介し、About のメニューには 「Corporate Gifting（法人ギフト）」、フッターには一般の問い合わせとは別に卸の問い合わせ先を置いています。ひとつのサイトで、個人・贈り物・法人・取扱店の注文を受けられるようにしています。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景・タイル
- #F3F2F1 淡い面
- #333333 お知らせの帯
- #1A1A1A 見出し・本文・格子の線
- #808080 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Untitled Sans | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 32px / 400 | 1.40 | 19px / 400 |
| h3 | 22px / 400 | 1.40 | 19px / 400 |
| 本文（p） | 16px / 400 | 1.40 | 14px / 400 |
| ボタン | 16px / 400 | 5.63 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 上に送料無料を知らせる帯。細い線の格子に、ショップ・ブランド紹介・ロゴ・アカウント・カート・検索。スクロールしても残る。 ヘッダー／カテゴリ＋カート型
- 02 カテゴリのタイル 保湿・洗う・ヘアケア・手・顔・家・詰め替えとまとめ買い・温熱ピロー・スクラブと入浴・セットと旅行用の10カテゴリを、写真のタイルと交互に。それぞれ「今すぐ買う」のリンク。 一覧／カード並び型
- 03 ブランドの話 心を落ち着け体をいたわる、家で使うスパ用品として開発したこと。 コンセプト／写真＋メッセージ型
- 04 ギフトカード メッセージを添えて郵送かメールで送れるギフトカード。 コンセプト／写真＋メッセージ型
- 05 メール登録 初回10ドル引き（75ドル以上）、試供品、新商品の先行案内。 行動喚起／メール登録型
- 06 フッター 会社名と住所・電話、一般の問い合わせと卸の問い合わせのメール、ショップ・ブランド紹介のリンク、SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 商品の種類が多い店は、トップをカテゴリの入口にして、すぐ選べるようにする
- 02 送料や試供品など、買う前に気になる条件は最上部の帯で先に伝える
- 03 詰め替えやまとめ買いを独立したカテゴリにし、2回目以降の購入を受け止める
- 04 ギフトカード・法人ギフト・卸の窓口を分けて置き、個人以外の注文の入口をつくる
FAQ
よくある質問
Salus のサイトで使われているフォントは？
見出しから本文、ボタンまで Untitled Sans 1書体で組んでいます。無料で近い雰囲気にするなら Inter が候補です。
EC のトップに、商品を並べずカテゴリだけを置いてもいいですか？
商品の数が多く、用途で選ぶ人が多い店なら有効です。Salus はトップの大半を「保湿」「洗う」「手」「顔」などのタイルにして、来た人が自分の目的に近い入口からすぐ商品一覧に進めるようにしています。
どんな業種の参考になりますか？
化粧品や石けん、入浴剤、アロマ用品などのメーカーやブランドに向きます。個人向けの EC と、法人ギフト・卸を同じサイトで受けたい事業者の参考になります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はSalusおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
