Httpster ·イギリス（ロンドン） ·Picked 2026.10.18
Cubitts
メガネ店（店舗＋EC）のサイトデザイン参考 — 小売店・店舗への導線・バーチャル試着・モノクロ
出典：cubitts.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
ECの中に「店舗に来てもらう」入口を常に置き、視力検査や修理など店でしかできないことを並べるロンドンのメガネ店。
ロンドン発のメガネ店 Cubitts のサイト。ファーストビューは新作コレクションとアーティストとのコラボレーションの写真を左右に2枚並べただけ。画面には「Our stores — Visit us（店舗へ）」の入口が常に表示され、店舗ページではロンドン・エディンバラ・マンチェスターなど6都市の店で、フレームの調整・視力検査・修理・オーダーメイドができることを伝えている。ナビにはバーチャル試着もあり、オンラインと店舗の両方から選べる。
- 01 EC サイトの中に「店舗へ」の入口を常に表示し、ネットで見て店で買う人を取りこぼさない
- 02 視力検査・フレーム調整・修理・オーダーメイドなど、店でしかできないことを店舗に来る理由として並べる
- 03 バーチャル試着を用意し、店に行けない人の「似合うか分からない」に答える
Conversion
集客の工夫
- 店舗への導線 （あり） 「Our stores — Visit us」を常に表示
- 店舗の所在地 （あり） ブライトン・ケンブリッジ・エディンバラ・リーズ・ロンドン・マンチェスター
- 店でできること （あり） フレーム調整・視力検査・修理・オーダーメイド
- バーチャル試着 （あり） ナビに Virtual try-on
- メール登録 （あり） フッターにニュースレター
- 国・地域の切り替え （あり） フッターで選択（英国・米国）
- ヘッダーの検索 （あり） PC はヘッダーに検索欄
- 電話番号の掲載 （なし） トップにはなし（店舗ページへ）
EC の中に、店舗への入口を置く
ファーストビューは新作と、アーティストとのコラボレーションの写真を左右に並べただけです。そのかわり画面には 「Our stores — Visit us（店舗へ）」の入口が常に表示されています。メガネのように合うかどうかが大事な商品は、ネットで見てから店で確かめる人が多いため、EC の中で店舗を隠さない作りです。
店に来る理由を、はっきり書く
店舗ページでは、ブライトン・ケンブリッジ・エディンバラ・リーズ・ロンドン・マンチェスターの6都市の店で、フレームの調整・視力検査・修理・オーダーメイドができることを伝えています。「お近くの店舗へ」だけでなく、店でしかできないことを並べることで、来店の理由が生まれます。
店に行けない人には、試着をオンラインで
ナビには「Virtual try-on（バーチャル試着）」があります。店舗が近くにない人の「似合うか分からない」という不安に、オンラインで答える入口です。店舗とオンラインのどちらからでも、同じ不安を解消できるように設計されています。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #0B0B0B 見出し・本文・ボタン
- #F5F5F5 商品カードの背景
- #7A7575 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン（すべて） | Fold Grotesque | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 16px / 400 | 1.38 | 16px / 400 |
| 本文（p） | 14px / 400 | 1.43 | 14px / 400 |
| ボタン | 14px / 400 | 1.14 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ショップ・発見・来店の3つと、検索・アカウント・カート。上部にお知らせの帯。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 新作コレクションと、アーティストとのコラボレーションの写真を左右に2枚。 ファーストビュー／文字＋画像の左右分割型
- 03 店舗 「Our stores」として店舗への入口。 コンセプト／写真＋メッセージ型
- 04 コレクション アクセサリー・眼鏡・サングラスなどの入口。 一覧／カード並び型
- 05 眼鏡 眼鏡の商品をカルーセルで。 商品／グリッド型
- 06 サングラス サングラスの商品をカルーセルで。 商品／グリッド型
- 07 ブランド動画 ブランドの映像を全幅で。 ファーストビュー／全面動画＋コピー型
- 08 オーダーメイド・クロス・歴史 オーダーメイドのフレーム、アーティストが描いたメガネ拭き、ロンドンの眼鏡づくりの歴史。 一覧／カード並び型
- 09 フッター ヘルプ・会社・ショップのリンク、ニュースレター、国の選択。 フッター／ナビ＋会社情報型
- 10 店舗への入口（常時表示） 「Our stores — Visit us」が画面に残り続ける。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 EC と実店舗の両方がある店は、EC の中に「店舗へ」の入口を常に置く
- 02 店でしかできないこと（採寸・試着・修理・相談）を、店舗に来る理由として書く
- 03 店に行けない人のために、試着や相談をオンラインでも用意する
- 04 店舗一覧は都市ごとに並べ、自分の近くにあるかを一目で分かるようにする
FAQ
よくある質問
Cubitts のサイトで使われているフォントは？
見出しから本文、ボタンまで Fold Grotesque 1書体で組んでいます。有料書体なので、無料で近づけるなら Inter が候補です。
EC があるのに、店舗に誘導する意味はありますか？
メガネのように「合うかどうか」が大事な商品は、ネットで見てから店で確かめる人が多くいます。Cubitts は視力検査や調整など店でしかできないことを並べ、来店の理由をはっきりさせています。EC と店舗を競わせず、互いの入口にするのが要点です。
どんな業種の参考になりますか？
メガネ店・靴店・家具店・仕立て屋など、試着や採寸が必要な商品を扱う店に向きます。EC と実店舗の両方を持つ小売店全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はCubittsおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
