出典：bodhicycling.com ↗ 確認日 2026.10.30
Editor's note
編集部の視点
既製品のECの中に、チームのオーダーメイドの「見積もり依頼」と「打ち合わせ予約」の入口を常に置く、ベルギーのサイクルウェアの作り手。
ベルギー・メヘレンのサイクルウェアの作り手 Bodhi Cycling のサイト。ヘッダーには商品カテゴリと並んで「Vraag vrijblijvend offerte aan（無料で見積もりを依頼）」の枠つきボタンが常に表示される。ファーストビューは文字を載せない全幅の写真1枚で、その下に男女別の緑のボタン2つ。カテゴリの入口にはシャツ・レーサーパンツと並べてチームのオーダーメイド「CUSTOM LAB」を置き、208色・16テンプレート・7パターンから選べるコンフィギュレーター、メヘレンの旗艦店（Bruul 106）、30日間の返品無料・転倒で破れたときの50%引きなど4つの約束が続く。フッターには住所・電話・メールと「Boek een meeting（打ち合わせを予約）」。
- 01 既製品のECのヘッダーに、オーダーメイドの「無料で見積もりを依頼」を常に置き、団体の注文を取りこぼさない
- 02 オーダーメイドを、シャツやパンツと同じ並びの「カテゴリの1つ」として見せ、特別な人だけのものに見せない
- 03 返品無料・転倒時の割引・手作り・サイズダウン割引の4つの約束を、アイコンつきで1列に並べる
Conversion
集客の工夫
- 見積もり依頼の導線 （あり） ヘッダーに「無料で見積もりを依頼」を常に表示
- 打ち合わせの予約 （あり） フッターに「Boek een meeting」
- 電話番号の掲載 （あり） フッターに電話・メール・住所
- 実店舗への導線 （あり） メヘレンの旗艦店（Bruul 106）を紹介
- 自分で作れる仕組み （あり） 208色・16テンプレート・7パターンのコンフィギュレーター
- 保証・返品の明示 （あり） 30日間の返品無料、転倒時の50%引き、サイズダウンの50%引き
- 言語の切り替え （あり） フッターで NL / EN
- メール登録 （なし） トップにはなし
既製品の売り場に、別注の入口を常に置く
ヘッダーには女性・男性・セットなどの商品カテゴリと並んで、「Vraag vrijblijvend offerte aan（無料で見積もりを依頼）」の枠つきボタンが常に表示されています。ECの中で別注の窓口を探させないので、クラブやチームでまとめて作りたい人もすぐに相談に進めます。フッターには電話・メール・住所に加えて「Boek een meeting（打ち合わせを予約）」があります。
オーダーメイドを「カテゴリの1つ」として見せる
カテゴリの入口は、シャツ・レーサーパンツ・CUSTOM LAB（オーダーメイド）の3つです。別注を特別なページに隠さず、既製品と同じ並びに置いています。CUSTOM LAB のページでは、専任のデザイナーがつくこと、最小5着から・平均6週間の製作期間、有料サンプル、25人以上の団体向けのオンライン注文の仕組みまで書かれていて、問い合わせる前に段取りが分かります。
約束を短く並べて、買う不安を減らす
ページの終わりには「30日間の返品無料」「転倒で傷んだウェアを交換するときの1回限りの50%引き」「手作り」「同じシャツを小さいサイズで50%引き」の4つが、アイコンつきで1列に並びます。サイズや破損の不安に、先に答えておく作りです。メヘレンの旗艦店（Bruul 106）の紹介もあり、ネットで迷った人を店に案内する道も用意されています。
チェック項目は 2026.10.30 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #DBDBDB 背景・ヘッダー
- #54565A 見出し・本文・フッターの背景
- #2FDD75 購入ボタンの緑
- #6C757D 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Quicksand | Quicksand |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 24px / 700 | 1.20 | 22px / 700 |
| 本文（p） | 16px / 400 | 1.50 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.30 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 女性・男性・セット・CUSTOM LAB・ギフトと、「無料で見積もりを依頼」・連絡先・カート。上部に固定。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 文字を載せない全幅の写真1枚。 ファーストビュー／全面写真＋コピー型
- 03 コレクションへの入口 「ONTDEK ONZE COLLECTIE（コレクションを見る）」と、男性・女性の緑のボタン2つ。 行動喚起／ボタン帯型
- 04 カテゴリから探す シャツ・レーサーパンツ・CUSTOM LAB の3つ。オーダーメイドには「なぜBodhi？」「料金」のリンク。 一覧／カード並び型
- 05 セット割引 「セットで最大30%お得」と、男女別のセットへの入口。 コンセプト／写真＋メッセージ型
- 06 LIFE BY BIKE レーサーパンツの選び方ガイド、コンフィギュレーター、メヘレンの旗艦店の3つ。 一覧／カード並び型
- 07 4つの約束 返品無料・転倒時の交換割引・手作り・サイズダウン割引を、アイコンつきで横に並べる。 機能・強み／左右交互型
- 08 フッター メール・電話・住所と「打ち合わせを予約」、商品・サポートのリンク、言語の切り替え。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 既製品と別注（オーダーメイド・団体注文）の両方を扱うなら、ヘッダーに「見積もりを依頼」を常に置く
- 02 別注をカテゴリの1つとして並べ、料金や「選ばれる理由」のページにすぐ行けるようにする
- 03 返品・修理・交換などの約束は、短い見出しとアイコンで1列にまとめて見せる
- 04 フッターに住所・電話・メールに加えて、打ち合わせの予約の入口を置く
FAQ
よくある質問
Bodhi Cycling のサイトで使われているフォントは？
見出しから本文、ボタンまで Quicksand 1書体で組んでいます。Google Fonts で無料で使える書体です。
既製品のECとオーダーメイドの受注を、同じサイトでどう両立していますか？
ヘッダーに「無料で見積もりを依頼」を常に置き、カテゴリの入口でもシャツ・パンツと並べてオーダーメイドを見せています。オーダーメイドのページでは、最小5着から・平均6週間の製作期間・有料サンプル・25人以上の団体向けのオンライン注文の仕組みまで説明しています。
どんな業種の参考になりますか？
ユニフォーム・作業着・名入れ品・オリジナルグッズなど、既製品の販売と団体向けの別注の両方を扱う製造業や小売店に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBodhi Cyclingおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
