Httpster ·ノルウェー ·Picked 2026.10.18
O.A. Devold
ウール衣料（店舗＋EC）のサイトデザイン参考 — 小売店・商品の物語・限定数・セリフ体
出典：oadevold.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
1860年代に漁師のために編まれたセーターの物語を、限定68着の新作とつなげて売るノルウェーの老舗ウールブランド。
1868年から続くノルウェーのウールブランド O.A. Devold（O.A.D.）のサイト。ファーストビューは新作「Blaatrøie Patches」を着た人物の写真に「Limited Edition」の文字。続く物語のブロックでは、1860年代に漁師や船乗りのために編まれたセーター Blaatrøie の由来と、古いボーイスカウトのワッペンから生まれた今回の限定品が「68着、手書きの通し番号入り」であることを語り、そのまま新作の商品一覧（価格つき）へつなぐ。ページの途中と最後に、15%オフのメール登録が置かれている。
- 01 商品の歴史（1860年代の漁師のセーター）を、新作を買う理由として語る
- 02 「68着・手書きの通し番号」と限定の数を具体的に書く
- 03 物語のブロックのすぐ下に、価格つきの商品一覧を置く
Conversion
集客の工夫
- 商品の物語 （あり） Blaatrøie の由来と限定品の背景
- 限定数の明示 （あり） 68着・手書きの通し番号
- 価格の表示 （あり） 新作一覧に価格（EUR）
- メール登録 （あり） 15%オフ。ページ内に3か所
- 地域・通貨の切り替え （あり） アクセス元に合わせて表示（NL / EUR など）
- 男女別の入口 （あり） ヘッダーに Men / Women
- ヘッダーの追従 （あり） PC・SP とも上部に固定
- 電話番号の掲載 （なし） トップにはなし
歴史を、新作を買う理由にする
物語のブロックでは、1860年代に漁師や船乗りのために編まれたセーター Blaatrøie の由来が語られます。そして今回の限定品が、古いボーイスカウトのワッペンから生まれたことにつながります。老舗の歴史を年表として見せるのではなく、新作を買う理由として語っているのが要点です。
限定の数を、具体的に書く
「数量限定」ではなく、「68着、手書きの通し番号入り」と書かれています。具体的な数と特別さが分かると、限定品であることの説得力が一気に増します。物語のすぐ下には、価格（EUR）つきの新作一覧が並び、読み終えた人がそのまま選べます。
メール登録を、何度も差し出す
「次のオンライン注文が15%オフ」のメール登録が、ファーストビューの直後・ページの中ほど・最後と3か所にあります。高価な商品は、その場で決めない人も多いため、まずは登録してもらい、新作や催しの案内で関係を続ける作りです。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #2D1E1E ヘッダー・見出し・本文（焦げ茶）
- #FFFFFF 背景・写真の上の文字
- #EBECDC メール登録の背景（生成り）
- #CAC7B8 区切り・補足
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 大きな見出し | Viktor | Fraunces |
| 本文 | Founders Grotesk Text | Inter |
| ラベル・ボタン | Founders Grotesk Mono | IBM Plex Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 48px / 400 | normal | 48px / 400 |
| h2 | 32px / 400 | normal | 32px / 400 |
| h3 | 24px / 400 | normal | 16px / 400 |
| 本文（p） | 16px / 400 | 1.24 | 14px / 400 |
| ボタン | 13px / 300 | 1.52 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 男性・女性と、新作・コレクション・Blaatrøie、通貨、カート。上部に固定。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 新作を着た人物の写真に「新作」「限定品」の文字。 ファーストビュー／全面写真＋コピー型
- 03 メール登録 「次のオンライン注文が15%オフ」の登録。 行動喚起／メール登録型
- 04 商品の物語 1860年代の漁師のセーターの由来と、68着限定の新作の背景。 コンセプト／写真＋メッセージ型
- 05 新作 新作の商品を価格つきで。 商品／グリッド型
- 06 メール登録（2回目） 新しいコレクションや催しの案内。 行動喚起／メール登録型
- 07 定番品 復刻した定番セーターの紹介と、男性・女性それぞれの入口。 コンセプト／写真＋メッセージ型
- 08 ブランドの一文 「1868年から続くウールの遺産」。 メッセージ／大きな一文型
- 09 フッター メール登録・店舗・SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 長く続く商品や技術があるなら、その由来を新作を買う理由として語る
- 02 限定品は「数量限定」ではなく、具体的な数と特別さ（通し番号など）を書く
- 03 物語のすぐ下に、価格つきで商品を並べる
- 04 メール登録の特典は、最初の購入のきっかけとして具体的に書く
FAQ
よくある質問
O.A. Devold のサイトで使われているフォントは？
大きな見出しに Viktor、本文に Founders Grotesk Text、ラベルやボタンに Founders Grotesk Mono を使っています。無料で近づけるなら Fraunces・Inter・IBM Plex Mono の組み合わせが候補です。
老舗の歴史を、若い客層に伝えるには？
O.A. Devold は歴史を年表で見せるのではなく、新作の限定品の背景として語っています。「昔からある」ではなく「だから今これを買う意味がある」につなげるのが要点です。
どんな業種の参考になりますか？
老舗の衣料品店・工芸品店・和菓子店・酒蔵など、歴史や製法が商品の価値になっている店に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はO.A. Devoldおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
