Recent ·フランス（パリ） ·Picked 2026.10.18
Bécane Paris
アパレルECのサイトデザイン参考 — EC・全文大文字・番号つきナビ・ブランドステートメント
出典：becaneparis.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
ナビの各項目に番号と件数を添えて、サイト全体の分量を先に見せるアパレルEC。
女性向けテクニカルウェアのブランド Bécane のショップ。トップは1画面に、モデル14人が横一列に並んだコレクションと「COLLECTION」の見出しだけ。左上の小さなカードに「ALL 27」「STORIES 04」「CART 00」と件数つきのナビ、右上に「COLLECTION 01 / 01」。その下に「道で生まれ、街のために作られた」というブランドの一文があり、配送・サイズガイド・連絡先は画面下に追従する帯にまとめている。
- 01 ナビの各項目に件数を添え（ALL 27、STORIES 04、CART 00）、クリックする前に分量が分かる
- 02 トップは商品を一列に並べた1画面だけ。説明より先に、コレクション全体を一望させる
- 03 配送・サイズガイド・規約・連絡先を画面下の帯に追従させ、買う前の不安にいつでも答える
Conversion
集客の工夫
- ナビに件数 （あり） ALL 27・STORIES 04・CART 00
- 商品点数の表示 （あり） PRODUCTS 14
- コレクションの一望 （あり） モデル14人を1画面に
- 配送・サイズ情報への導線 （あり） 画面下に追従する帯
- ブランドの一文 （あり） 「道で生まれ、街のために」
- Cookie の選択肢 （あり） DECLINE を選べるバナー
- メールアドレスの掲載 （あり） 画面下の帯に mailto:リンク
- メール登録 （なし） トップにはなし
件数で、サイトの分量を先に見せる
左上の小さなカードには「ALL 27」「STORIES 04」「CART 00」、右上には「COLLECTION 01 / 01」。どのナビにも数字が添えられていて、クリックする前に、見に行く価値があるかが分かります。点数の少ない小規模ブランドでも、少ないことを隠さず数で出すほうが信用されます。
1画面で、コレクション全体を一望させる
トップはモデル14人を横一列に並べた画面と「COLLECTION」の見出しだけです。説明を読ませるより先に、このブランドが何をどれだけ作っているかを一望させています。その下の一文「BORN ON THE ROAD, MADE FOR THE CITY.」が、何のための服かを決めています。
買う前の不安に、いつでも答える
規約・配送ポリシー・サイズガイド・メールアドレス・Instagram は、画面下に追従する帯にまとめられています。EC で最後の一押しを止めるのは、たいてい送料やサイズの不安です。その答えを、どこにいても手の届く場所に置く作りです。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F6F6F6 背景
- #FFFFFF ナビのカード・帯の背景
- #0A0A0A 見出し・本文
- #B2B2B2 件数・補足の数字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ナビ（すべて大文字） | Eurostile（ブランド用に調整した書体） | Michroma |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 30px / 700 | 1.00 | 20px / 700 |
| h2 | 8px / 400 | 1.10 | 10px / 400 |
| 本文（p） | 10px / 400 | 1.30 | 12px / 400 |
| ボタン | 8px / 400 | 1.10 | 10px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左上の小さなカードにロゴと件数つきナビ（ALL・STORIES・CART）、右上に COLLECTION 01 / 01。 ヘッダー／カテゴリ＋カート型
- 02 コレクション モデル14人を横一列に並べた1画面と「COLLECTION」の見出し、商品点数。 ファーストビュー／大きな文字型
- 03 ブランドの一文 「道で生まれ、街のために作られた。技術的で、守ってくれて、堂々と女性らしい」。 メッセージ／大きな一文型
- 04 画面下の帯 規約・配送・サイズガイド・メール・Instagram を追従させる。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 ナビに件数を出し、点数が少なくても隠さず数で見せる
- 02 商品数が少ないブランドは、トップで全商品を一望させる
- 03 配送・返品・サイズなど買う前の不安への答えは、どの画面からでも届く場所に置く
- 04 ブランドの立ち位置は、飾りではなく本文の先頭で一文にまとめる
FAQ
よくある質問
Bécane のサイトで使われているフォントは？
すべての文字を、ブランド用に調整された Eurostile 系の書体（大文字）で組んでいます。無料で近い雰囲気にするなら、横に広い Michroma が候補です。
トップに説明文がほとんどなくても大丈夫ですか？
Bécane は商品点数が少なく、写真で世界観が伝わる業種だから成り立っています。そのかわり、件数つきのナビと画面下の配送・サイズ情報で「買うために必要な情報」は常に見えるようにしています。説明を削るなら、その分の答えをどこかに常設してください。
どんな業種の参考になりますか？
アパレル・雑貨・工芸品など点数の少ないブランドのEC、作品数で見せたい作家やギャラリーのサイトに向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBécane Parisおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Recent
