Recent ·スウェーデン ·Picked 2026.10.18
Icebug
アウトドアシューズECのサイトデザイン参考 — EC・アースカラー・読む導線と買う導線・商品グリッド
出典：icebug.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
新作1足の物語を先に見せ、そのすぐ下から価格つきで買えるようにしたアウトドアシューズのEC。
スウェーデンのアウトドアシューズブランド Icebug の英国向けショップ。ファーストビューは新作スニーカー1足の写真に「READ MORE」と「SHOP NOW」の2つのボタン。その下は季節の商品グリッド、読みもの、カテゴリ、用途別（冬用ブーツ・トレイルランニング）の特集と商品が交互に続き、靴選びを手伝う「シューファインダー」、生産の透明性の話、メール登録で締める。
- 01 新作1足に「読む」と「買う」の2つのボタンを並べ、同じ場所で読み手と買い手を分ける
- 02 用途別の特集写真のすぐ下に、その用途の商品を価格つきで並べる
- 03 迷った人のために「シューファインダー」を、ヘッダーとページ中盤の両方に置く
Conversion
集客の工夫
- ヘッダーの追従 （あり） PC・SP とも上部に固定（検索・カートつき）
- ファーストビューに購入導線 （あり） READ MORE と SHOP NOW
- 価格の表示 （あり） 商品グリッドに価格（GBP）
- 選び方の案内 （あり） シューファインダー（ヘッダーと中盤）
- 地域・通貨の切り替え （あり） EN/GBP の表示と、アクセス元に合わせた国の案内
- メール登録 （あり） フッターに「JOIN OUR COMMUNITY」
- Cookie の選択肢 （あり） 「必要なものだけ」を選べるバナー
- 電話番号の掲載 （なし） なし（HELP ページから問い合わせ）
1画面の中で、読む人と買う人を分ける
ファーストビューは新作スニーカー1足だけで、ボタンは READ MORE と SHOP NOW の2つです。ブランドの話を読みたい人と、すぐ買いたい人を同じ場所で分けています。世界観のページと売り場を別々に作ると、世界観のページが行き止まりになりがちです。
特集の真下に、その商品を置く
「冬用ブーツ」「トレイルランニング」と、用途ごとの大きな写真と一文のすぐ下に、その用途の商品が価格（GBP）つきで並びます。気分が上がった瞬間に、選べる商品が目の前にある構成です。同じ型を2回くり返すことで、ページ全体に買い物のリズムが生まれています。
迷った人の受け皿を2か所に置く
質問に答えて靴を絞り込む「シューファインダー」が、ヘッダーとページ中盤の両方にあります。アウトドア用品は「どれを選べばいいか分からない」が購入の壁になりやすいため、選び方の手伝い自体を入口にしているのが要点です。アクセス元に合わせて国と通貨を案内する作りも、海外に売る事業では前提になります。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #ECECEC セクション背景
- #FFFFFF 背景・写真の上の文字
- #262626 見出し・本文・ヘッダー
- #3C4C3D ブランドの深緑（登録ボタンなど）
- #878787 補足テキスト
- #CECECE 罫線・枠
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・商品名・価格・ラベル | Suisse Int'l Mono | Geist Mono |
| 見出し・本文 | Suisse Int'l | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 88px / 400 | 0.90 | 43px / 400 |
| h2 | 12px / 400 | 1.40 | 12px / 400 |
| h3 | 15px / 600 | normal | 15px / 600 |
| 本文（p） | 12px / 400 | 1.40 | 12px / 400 |
| ボタン | 12px / 400 | 1.40 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 女性・男性・取り組み・シューファインダーと、検索・ヘルプ・通貨・ログイン・カート。上部に固定。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 新作スニーカー1足の写真に「読む」「買う」の2ボタン。 ファーストビュー／商品1点＋2ボタン型
- 03 季節の商品 秋冬向けの商品を、色名と価格つきで。 商品／グリッド型
- 04 読みもの 外に出かけたくなるガイドやストーリー。 一覧／カード並び型
- 05 カテゴリから探す 用途ごとのカテゴリ。 一覧／カード並び型
- 06 特集：冬用ブーツ 用途の写真と一文のあとに、その用途の商品が続く。 ファーストビュー／全面写真＋コピー型
- 07 冬用ブーツの商品 特集のすぐ下に、該当商品を価格つきで。 商品／グリッド型
- 08 特集：トレイルランニング 同じ型をもう一度くり返す。 ファーストビュー／全面写真＋コピー型
- 09 トレイルランニングの商品 特集の商品を価格つきで。 商品／グリッド型
- 10 シューファインダー 「次の冒険にぴったりの靴を探すお手伝い」と、質問に答えて靴を絞る機能への入口。 コンセプト／写真＋メッセージ型
- 11 生産の透明性 「良い靴、公正な条件、徹底した透明性」と、生産背景の話。 コンセプト／写真＋メッセージ型
- 12 ブランド動画 「長く続ける。私たちの道具もそうだ」と重ねた映像。 ファーストビュー／全面動画＋コピー型
- 13 フッター 情報・SNS・会社のリンクと、メール登録「JOIN OUR COMMUNITY」。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 新商品やおすすめは「読む」と「買う」の2つの入口をセットで置く
- 02 特集の写真のすぐ下に、その特集の商品を価格つきで並べる
- 03 迷った人向けの「選び方の手伝い」を、ヘッダーとページ中盤の両方から入れるようにする
- 04 海外に売るなら、通貨と地域の切り替えを最初から用意する
FAQ
よくある質問
Icebug のサイトで使われているフォントは？
商品名・価格・ナビなど多くの文字に Suisse Int'l Mono（等幅）、見出しと本文に Suisse Int'l を使っています。無料で近づけるなら Geist Mono と Inter の組み合わせが候補です。
ブランドの世界観とECの売りやすさは、両立できますか？
Icebug は、写真が主役の特集ブロックと価格つきの商品グリッドを交互に置くことで両立させています。世界観のページを別に作ると行き止まりになりやすいので、同じページの中で「読む」と「買う」を交互に置くのが効果的です。
どんな業種の参考になりますか？
アパレル・シューズ・アウトドア用品などのECのほか、用途によって選ぶ商品が変わる小売全般に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はIcebugおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Recent
