出典：dixhectares.com ↗ 確認日 2026.10.23
Editor's note
編集部の視点
ボルドーの農園で育てた植物から作るスキンケアを、季節・肌悩み・カテゴリの3つの入口で選ばせ、価格と容量を最初から見せるフランスのEC。
ボルドーの農園シャトー・モンローズの敷地で育てた植物を使うスキンケアブランドのEC。最上部に送料・サンプル・返品が無料であることを流す帯。ファーストビューはスポイトから滴る美容液の動画に、画面幅いっぱいの「DIX HECTARES」と「フランスの特別な農園で生まれた、季節に合わせるボタニカルスキンケア」の3行。続いて新作、季節ごとの商品（準備用・秋冬用・春夏用）を容量と価格つきで、カテゴリのスライド、ベストセラー、8つの肌悩みから探すスライド、メディア掲載の引用、農園（SOIL）と研究（SKIN）の話、メール登録。
- 01 送料・サンプル・返品の無料を、最上部の帯で最初に伝える
- 02 季節・カテゴリ・肌悩みの3つの入口を用意し、選び方がわからない人も迷わせない
- 03 メディアの掲載を、媒体名と掲載月と引用文のセットで並べる
Conversion
集客の工夫
- 送料・返品の案内 （あり） 最上部の帯に送料・サンプル・返品が無料
- 価格と容量の明示 （あり） 商品ごとに容量（ml）と価格（€）
- 悩みから探す （あり） 乾燥・くすみ・赤み・シミなど8つ
- 季節で選ぶ （あり） 秋冬用・春夏用の商品を分けて並べる
- メディア掲載 （あり） 媒体名・掲載月・引用文
- 言語・配送先の選択 （あり） 英語・フランス語と配送先の地域
- 名入れサービス （あり） 無料の刻印（12文字まで）
- 電話・メールのリンク （なし） トップにはなし（CONTACT US のページへ）
買う前の不安を、最上部の帯で消す
画面のいちばん上に、送料・サンプル・返品がどれも無料であることを流す帯があります。商品を見る前に買い物の条件を先に伝えるので、カートに進むときのためらいが減ります。配送先の地域と言語（英語・フランス語）は最初に選べます。
選び方の入口を3つ用意する
商品は「肌の準備」「秋冬用」「春夏用」の季節ごとに容量と価格つきで並び、その下にクレンジング・美容液・クリームなどのカテゴリ、さらに乾燥・くすみ・赤み・シミなど8つの肌悩みから探すスライドが続きます。季節・種類・悩みのどこからでも商品にたどり着ける作りです。
産地と掲載実績で、信用を積み上げる
雑誌や新聞の掲載は、媒体のロゴ・掲載月・引用文のセットで横に流れます。ページの後半では、シャトー・モンローズの農園で再生型農業によって原料を育てていること（SOIL）と、自社のラボで処方を開発し、効果を機器による測定と使用者の調査で評価していると書いた説明（SKIN）を、写真と短い文で見せています。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #EFE5D7 背景（生成り）
- #A85435 見出し・本文・告知帯・ボタン（テラコッタ）
- #B8705E 農園の話のパネル
- #FFFFFF 写真の上の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 大見出し（ブランド名）・本文 | Francesco | EB Garamond |
| セクション名・メニュー・ボタン | Sackers Gothic | Syncopate |
| カテゴリ名・肌悩みの名前 | Ceraph Italic | Cormorant Garamond Italic |
| ファーストビューの3行 | Engravers MT | Cinzel |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 14px / 400 | 1.50 | 12px / 400 |
| h2 | 10px / 400 | 1.60 | 10px / 400 |
| h3 | 14px / 400 | 1.40 | 12px / 400 |
| 本文（p） | 14px / 400 | 1.43 | 10px / 400 |
| ボタン | 11px / 400 | 1.45 | 10px / 400 |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 上に送料・サンプル・返品の無料を流す帯。左にメニュー、中央にロゴ、右にカート。上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 美容液が滴る動画に、画面幅いっぱいのブランド名と3行の説明。 ファーストビュー／全面動画＋コピー型
- 03 ブランドの一文 「科学で高めたボタニカルスキンケア」と、自社農園と自社ラボの説明。 メッセージ／大きな一文型
- 04 季節ごとの商品 肌の準備・秋冬用・春夏用の3列に、容量と価格つきで商品を並べる。 商品／グリッド型
- 05 カテゴリから探す すべて・クレンジング・美容液・クリーム・目元を写真つきで。 入口／カテゴリ別スライド型
- 06 ベストセラー 左右2枚の写真の中央に「Best sellers」の札とリンク。 コンセプト／写真＋メッセージ型
- 07 肌悩みから探す 乾燥・くすみ・赤み・シミなど8つを人物写真で。 入口／カテゴリ別スライド型
- 08 メディア掲載 媒体のロゴ・掲載月・引用文を横に流す。 推薦／利用者の声型
- 09 農園と研究 「SOIL」で農園と再生型農業、「SKIN」で自社ラボと試験の話。 コンセプト／写真＋メッセージ型
- 10 フッター 会社紹介・FAQ・問い合わせ・ギフトカード・規約と、メール登録。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 送料・返品の条件は、最上部の帯で最初に伝える
- 02 商品の選び方を、カテゴリ・悩み・季節など複数の入口で用意する
- 03 メディア掲載は媒体名と時期を添えて、引用文で見せる
- 04 原料の産地がある商品は、畑や工房の写真で物語をつくる
FAQ
よくある質問
Dix Hectares のサイトで使われているフォントは？
ブランド名と本文に Francesco、セクション名やボタンに幅の広い Sackers Gothic、カテゴリ名に Ceraph の斜体、ファーストビューの説明に Engravers MT を使っています。無料で近づけるなら EB Garamond・Syncopate・Cormorant Garamond Italic・Cinzel が候補です。
化粧品のECで「悩みから探す」は必要ですか？
商品名だけでは自分に合うかわからない人に向けた入口です。Dix Hectares は乾燥・くすみ・赤み・シミなど8つの悩みを人物写真つきで並べ、カテゴリや季節とは別の選び方を用意しています。
どんな業種の参考になりますか？
化粧品・石けん・ハーブ製品など原料の産地を持つブランド、農園や蔵元が始める加工品のEC、季節で商品が変わる食品の通販に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はDix Hectaresおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
