出典：georgecoxfootwear.com ↗ 確認日 2026.10.25
Editor's note
編集部の視点
「1949年からのクリーパー」を看板にしながら、工場の工程と修理の受付をフッターから読めるようにしたイギリスの靴メーカーのEC。
イギリス・ウェリングボローの靴メーカー George Cox の公式 EC。ロゴには「EST.1906」、トップの見出しには「The Original Creeper. Since 1949.（元祖クリーパー、1949年から）」とある。ファーストビューは左にロゴと、BEAMS・Lavenham との協業「BEAMS x Lavenham x George Cox」と黒いボタン、右に協業の黄色いビジュアル。上部の帯は配送先の国に合わせた送料無料の案内。続いて名前と価格つきの商品、「Shop creepers」、アクセサリー・協業・メンズ・レディース・クリーパー全体の入口が格子状に並ぶ。フッターから、裁断・製甲・吊り込み・ウェルト縫いを説明する工程のページ、写真で受け付ける修理サービス、取扱店の一覧、サイズガイドに進める。
- 01 創業年（1906年）と看板商品の年（1949年）を、ロゴと見出しにそれぞれ入れる
- 02 工場の工程（裁断・製甲・吊り込み・ウェルト縫い）を写真つきのページにし、作り方を信用の根拠にする
- 03 修理を写真で受け付け、可否を信号の3色で答え、地域ごとの料金まで載せる
Conversion
集客の工夫
- 創業年の表示 （あり） ロゴに「EST.1906」、見出しに「Since 1949」
- 製造工程の紹介 （あり） フッターの「Our Process」（裁断・製甲・吊り込み・ウェルト縫い）
- 修理サービス （あり） 写真による無料の事前診断、ソール交換の料金を地域別に掲載
- 取扱店の一覧 （あり） フッターに「Stockists」
- サイズガイド （あり） フッターに Size Guide
- 国・言語の切り替え （あり） フッターで国（通貨）と言語（英語・日本語）
- 卸・取材の窓口 （あり） 連絡先ページに卸と取材のメールアドレス
- 電話番号の掲載 （なし） トップにはなし（連絡はフォームとメール）
創業年と看板商品の年を、両方見せる
ロゴには 「EST.1906」、トップの見出しには 「The Original Creeper. Since 1949.」 とあります。会社の歴史と、看板商品の歴史を分けて示しています。ファーストビューは BEAMS・Lavenham との協業を大きく見せ、黒い「Shop the collaboration」のボタンで商品へ進ませます。上部の帯には、配送先の国に合わせて送料無料の案内が出ます。
工場の工程を、ページにする
フッターの「Our Process」では、甲革と裏地を裁断する工程、甲の部分を縫い合わせる工程、木型に吊り込む工程、ウェルトを縫い付ける工程を 写真つきで順に説明しています。どう作っているかを見せることで、価格の理由が伝わります。
修理の受け付けを、基準と料金まで書く
修理のページでは、靴の写真をメールで送ると 無料で修理できるかを事前に診断し、可否を緑・黄・赤の3色で答える仕組みを説明しています。ソール交換の料金はイギリス・EU・アメリカごとに載せ、日本は現地で修理できると書いています。買ったあとの手入れまで面倒を見ることが、メーカーとしての信用になっています。
チェック項目は 2026.10.25 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景・格子の面
- #000000 文字・ボタン・フッターの背景
- #121212 細部の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・ボタン・ラベル・商品名 | ABC Diatype | Geist |
| 見出し（協業名・「The Original Creeper」） | Neue Haas Unica | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 35px / 400 | 1.35 | 23px / 400 |
| h3 | 13px / 400 | 1.67 | 13px / 400 |
| ボタン | 13px / 400 | 1.67 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.25 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー メニュー・メンズ・レディースと、検索・カート。上部に配送先に合わせた送料無料の帯。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 左にロゴと協業名、黒い「協業を見る」ボタン。右に協業の黄色いビジュアル。 ファーストビュー／文字＋画像の左右分割型
- 03 商品 名前と価格つきの靴を格子状に。 商品／グリッド型
- 04 看板商品 「The Original Creeper. Since 1949.」の見出しと写真、「クリーパーを見る」ボタン。 コンセプト／写真＋メッセージ型
- 05 コレクションの入口 アクセサリー・協業・メンズ・レディース・クリーパー全体を写真と「Shop now」で。 一覧／カード並び型
- 06 フッター ショップ・読みもの（物語・会社・工程・取扱店）・サポート（修理・配送・FAQ・返品・サイズ）・情報、国と言語の選択。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 創業年や看板商品の年は、ロゴや見出しに入れて最初から目に入るようにする
- 02 作り方の工程を写真と短い説明でページにし、価格の理由として読めるようにする
- 03 修理やメンテナンスを受け付けるなら、申し込み方・判断の基準・料金をひとつのページにまとめる
- 04 直販だけでなく取扱店の一覧も載せ、店で試したい人の行き先を用意する
FAQ
よくある質問
George Cox のサイトで使われているフォントは？
ナビやボタン、商品名は ABC Diatype、見出しは Neue Haas Unica です。どちらも有料書体なので、無料で近づけるならナビに Geist、見出しに Inter が候補です。
製造業の EC に、工程のページは必要ですか？
手作業の多い商品は、作り方が価格の理由になります。George Cox は裁断・製甲・吊り込み・ウェルト縫いを写真つきで説明し、修理のページではウェルト製法だからソールを交換できることを伝えています。工程と修理がつながることで、長く使える商品だと分かります。
どんな業種の参考になりますか？
靴・鞄・家具・刃物など、職人の工程があり修理も受けられる製品のメーカーに向きます。直販と取扱店の両方を持つ会社にも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はGeorge Coxおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
