出典：coutumes.com ↗ 確認日 2026.11.01
Editor's note
編集部の視点
送料・返品・保証・分割払いの4つを帯で並べ、ECの中にパリ・マレ地区のブティックへの入口を置くメンズジュエリーのレーベル。
パリのマレ地区（50 rue des Francs Bourgeois）にブティックを持つ、男性向けジュエリーのレーベル Coutumes のサイト。ファーストビューは新コレクション「Jours ouvrés」の写真2枚に、黄色の大きなコレクション名。続いてブレスレット・ネックレス・リング・ペンダントの4つの入口、「ブティック」と「私たちの歴史」の2枚、そして「30日以内の返品無料」「150€以上で送料無料」「2年保証」「Alma で3回払い」を並べた帯。ブティックのページには住所と曜日ごとの営業時間、道順のボタンがあり、店では試して、組み合わせて選べることを伝えている。
- 01 送料・返品・保証・分割払いの4つの安心材料を、トップの帯に短い言葉で並べる
- 02 商品の入口をブレスレット・ネックレス・リング・ペンダントの4種類に絞り、迷わせない
- 03 ECのトップに「ブティック」の入口を置き、店では試して組み合わせて選べることを伝える
Conversion
集客の工夫
- 返品・送料の明記 （あり） 「30日以内の返品無料」「150€以上で送料無料」
- 保証 （あり） 2年保証を帯に明記
- 分割払い （あり） Alma で3回払い
- 店舗への導線 （あり） トップに「Boutique」の入口（住所・営業時間・道順へ）
- 営業時間の明記 （あり） ブティックのページに曜日別（月〜土 10:30〜19:30、日 12:00〜19:00）
- メール登録 （あり） 初回注文の送料無料を特典にしたメール登録
- ギフト対応 （あり） カートでギフト用の箱とカード（5€）を案内
- 電話番号の掲載 （なし） トップにはなし（Contact のリンクのみ）
買う前の不安に、帯でまとめて答える
トップの中ほどに 「30日以内の返品無料」「150€以上で送料無料」「2年保証」「Alma で3回払い」 の4つが1行ずつ並んでいます。ジュエリーは安い買い物ではないため、合わなかったら返せるか、壊れたらどうなるかが気になります。その答えを商品ページまで行かなくても読めるように、トップに置いています。
入口は4種類だけ
ファーストビューは新コレクション「Jours ouvrés」の写真と黄色の大きなコレクション名だけで、その下の入口は ブレスレット・ネックレス・リング・ペンダントの4つ に絞られています。商品の数が多くても、最初に選ばせるのは「何を身につけたいか」だけにしています。
EC の中に、ブティックへの入口を置く
トップには「Boutique」と「私たちの歴史」の2枚が並びます。ブティックのページには、マレ地区の住所、曜日ごとの営業時間、道順のボタンがあり、「試して、組み合わせて、自分のものになる一つを選べる」場所だと書かれています。ネットで見た人を店に呼ぶ理由が、短い文章ではっきり示されています。
チェック項目は 2026.11.01 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #000000 文字・カートのボタン
- #ECE9E2 カテゴリの入口・ブティックの面（ベージュ）
- #F9AF26 コレクション名の大きな文字（黄）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・ナビ・ボタン | Exposure | Newsreader |
| 小さな文字 | Plaak | Oswald |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 400 | 1.50 | 16px / 400 |
| h2 | 35px / 400 | 1.05 | 28px / 400 |
| 本文（p） | 11px / 400 | 1.27 | 11px / 400 |
| ボタン | 16px / 400 | 1.50 | 18px / 400 |
実測値（PC 1440px・SP 375px、2026.11.01 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ジュエリー・アクセサリー・パーソナライズ・私たちについてと、検索・マガジン・言語と通貨・カート。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 新コレクション「Jours ouvrés」の写真を左右に2枚、黄色の大きなコレクション名を重ねる。 ファーストビュー／文字＋画像の左右分割型
- 03 コレクションの紹介 「毎日のために考えたジュエリー」という短い文章。 メッセージ／大きな一文型
- 04 種類別の入口 ブレスレット・ネックレス・リング・ペンダントの4つ。 一覧／カード並び型
- 05 ブティックと歴史 マレ地区のブティックと、「私たちの歴史」の写真を2枚並べる。 一覧／カード並び型
- 06 安心材料の帯 30日以内の返品無料・150€以上で送料無料・2年保証・Alma で3回払い。 信頼／ロゴ帯型
- 07 メール登録 「初回の注文は送料無料」を特典にした登録欄。 行動喚起／メール登録型
- 08 フッター ブランド・コレクション・ヘルプ（配送・返品・FAQ・連絡先）のリンク。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 送料・返品・保証・支払い方法など、買う前の不安に答える言葉を短くまとめて帯にする
- 02 商品の種類が多くても、トップの入口は4つ前後に絞る
- 03 実店舗がある EC は、トップから店舗ページへの入口を置き、住所・曜日別の営業時間・道順をまとめる
- 04 店で何ができるか（試す・組み合わせる・選ぶ）を、店舗ページで言葉にする
FAQ
よくある質問
Coutumes のサイトで使われているフォントは？
見出し・ナビ・ボタンは Exposure、小さな文字は Plaak です。どちらも有料書体なので、無料で近づけるなら Newsreader と Oswald の組み合わせが候補です。
「送料無料」や「返品無料」はどこに書くのがよいですか？
Coutumes はトップの中ほどに、返品・送料・保証・分割払いの4つを1行ずつ並べた帯を置いています。商品ページだけでなくトップにも出しておくと、初めての人が買う前に感じる不安を早めに減らせます。
どんな業種の参考になりますか？
アクセサリー・時計・メガネ・革小物など、実店舗とネット販売の両方を持つ小売店に向きます。店では試せること、ネットでは送料や返品が安心であることを、それぞれはっきり書く作りです。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はCoutumesおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
