siteInspire ·オーストラリア ·Picked 2026.10.18
SIHA
スキンケアEC（セレクトショップ）のサイトデザイン参考 — EC・悩みから探す・成分辞典・相談予約
出典：siha.com.au ↗ 確認日 2026.10.18
Editor's note
編集部の視点
商品ではなく「肌の悩み」と「成分」から探させる、スキンケアのセレクトEC。
オーストラリアとニュージーランドのスキンケアブランドを集めたセレクトショップ SIHA のサイト。ファーストビューは人物写真に「豪州とニュージーランドのスキンケアを厳選した品揃え」の一文。メニューには「ルーティンを探す（診断）」「成分」「相談を予約」が商品一覧と同列に並ぶ。トップは商品、成分辞典、取り扱いブランド、読みもの、そして「今日の肌の調子は？」という問いかけで診断へ誘う。
- 01 商品一覧を「肌の悩み」「商品の種類」「ブランド」の3つの軸で切っている
- 02 成分辞典と相談予約をメニューに並べ、「何を選べばいいか分からない」人の受け皿にしている
- 03 「今日の肌の調子は？」という問いかけから、ルーティン診断に誘う
Conversion
集客の工夫
- 悩みから探す （あり） ニキビ・エイジング・乾燥・敏感肌など7つ
- 診断コンテンツ （あり） ルーティン診断（Start quiz）
- 成分の解説 （あり） INGREDIENTS GLOSSARY
- 相談予約 （あり） メニューに Book a Consult
- ヘッダーの追従 （あり） PC・SP とも上部に固定（検索・カートつき）
- メール登録 （あり） 特典つきの登録欄（WORLD OF SIHA）とフッター
- SPの追従要素 （あり） 「Find my routine」が画面下に追従
- 電話番号の掲載 （なし） なし
「何を選んだか」より「どう選んだか」
見出しは「A considered edit of skincare brands from Australia and New Zealand（豪州とニュージーランドのスキンケアを厳選した品揃え）」。自社ブランドではなく、選んでいること自体を価値として言い切っています。同じ構造は、代理店・商社・取次など自社製品を持たない事業にそのまま当てはまります。
悩み・成分・相談で、迷う人を受け止める
商品一覧は Skin Concern（ニキビ・エイジング・乾燥・脂性・色素沈着・敏感肌・日焼けダメージ）、Product Types、Brands の3つの軸に分かれます。さらに INGREDIENTS GLOSSARY（成分辞典）、ルーティン診断、Book a Consult（相談予約）がメニューに並び、「何を選べばいいか分からない」人の受け皿が何重にも用意されています。
問いかけで、診断に誘う
ページの終盤には「How is your skin feeling today?（今日の肌の調子は？）」という大きな問いかけがあり、ルーティン診断へとつながります。スマホでは「Find my routine」が画面下に追従します。EC でありながら、買う前の「選ぶ」を手伝うことを主役にしているのが特徴です。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FBFBF9 背景・写真の上の文字
- #77301D 見出し・本文（赤茶）
- #A33314 ボタン・強調（テラコッタ）
- #F1F1F0 ボタンの文字・セクション背景
- #FFFFFF カード背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | ABC Walter Neue | DM Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 24px / 400 | 1.20 | 20px / 400 |
| h2 | 11px / 400 | 1.10 | 11px / 400 |
| h3 | 10px / 300 | 1.10 | 10px / 300 |
| 本文（p） | 12px / 400 | 1.25 | 11px / 400 |
| ボタン | 13px / 500 | 1.10 | 11px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ショップ・ルーティン診断・成分・会社・コミュニティ・相談予約と、アカウント・検索・カート。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 人物写真に「厳選した品揃え」の一文とルーティン診断への入口。 ファーストビュー／全面写真＋コピー型
- 03 商品 おすすめ商品を写真と価格で。 商品／グリッド型
- 04 成分辞典 成分ごとの解説への入口。「See all」で一覧へ。 一覧／カード並び型
- 05 取り扱いブランド ブランドごとの写真と商品。「Shop All」へ。 商品／グリッド型
- 06 読みもの 肌の悩みの解説やインタビューなど3本。 一覧／カード並び型
- 07 診断への問いかけ 「今日の肌の調子は？」という問いかけでルーティン診断へ。 ファーストビュー／全面写真＋コピー型
- 08 フッター お客様窓口・SNS・メール登録。 フッター／ナビ＋会社情報型
- 09 スマホの追従ボタン 「Find my routine（自分に合うルーティンを探す）」が画面下に残る。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 商品の分類とは別に、「お客様の悩み」の分類で入口を作る
- 02 選び方が分からない人のために、診断・用語解説・相談予約のどれかを用意する
- 03 自社製品を持たない事業は、「どう選んだか」を最初の一文で言い切る
- 04 スマホでは、いちばん勧めたい行動を画面下に追従させる
FAQ
よくある質問
SIHA のサイトで使われているフォントは？
見出しから本文、ボタンまで ABC Walter Neue 1書体で組んでいます。有料書体なので、無料で近づけるなら DM Sans が候補です。
悩み別の入口は、検索にも効きますか？
「乾燥肌 スキンケア」のように、お客様は悩みの言葉で検索します。悩みごとのページを用意すると、そのままその検索の受け皿になります。SIHA は悩み別の一覧をメニューの最初に置いています。
どんな業種の参考になりますか？
化粧品・健康食品・サプリメントなどのEC、セレクトショップ、代理店や商社など自社製品を持たない事業に向きます。相談予約を並べる型は、単価の高い商材全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はSIHAおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
