TOP
デザイン参考集
Webメディア
北欧、暮らしの道具店

WEB MEDIA · 全国 · PICKED 2026.10.15

北欧、暮らしの道具店Webメディアのサイトデザイン参考 — EC×メディア・余白・写真主体

出典：hokuohkurashi.com ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

「読みもの」と「商品」を、同じ並びで見せる。

雑貨や衣類を扱う通販サイトで、読みもの（記事）と商品を一つのサイトで発信している。トップは特集の大きな写真から始まり、新着の読みもの、カテゴリ、記事の一覧、人気商品と続く。白い背景に写真を整然と並べ、記事を読む流れの中で自然に商品へ進めるようにしている。

01トップの最初に、特集の大きな写真と短い説明を置いている
02読みもの（記事）と商品を同じ写真の並びで見せ、記事から商品へ自然に移れる
03カテゴリをアイコンつきの一覧にして、ページの中盤に置いている

CONVERSION集客の工夫

✓サイト内検索検索窓を設置

✓カテゴリ・タグから探せるトップページ内

－人気記事・ランキングトップページ内

✓購読・会員・LINE登録LINE

✓SNSへの導線Instagram / YouTube / X

✓問い合わせ・相談の窓口お問い合わせ

記事を読んだ流れで商品へ

読みものの一覧のあとに人気商品を価格つきで並べている。記事で暮らしのイメージを持った人が、そのまま商品を見に行ける。メディアとECを一つにする強みがよく出ている。

上部の固定メニューで「買いもの」と「コンテンツ」を切り替える

画面上部に固定したメニューに「ホーム」「買いもの」「コンテンツ」「カート」が並ぶ。読む目的の人と買う目的の人の両方が、どこからでも目的の場所へ行ける。

写真の比率をそろえる

記事のサムネイルも商品写真も、同じ比率・同じトーンでそろえている。量が多くても雑然とせず、ブランドの世界観が保たれる。

チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景

#F7F7F7セクション背景

#F2F7F9セクション背景 · ペールブルー

#444444本文テキスト

#999999サブテキスト

#FB5C5C差し色（価格・注目）

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途: 見出し・本文
使用フォント: 游ゴシック Medium
無料で近いもの: Noto Sans JP

用途: 約物
使用フォント: YakuHanJPs
無料で近いもの: YakuHanJPs

要素	PC サイズ / 太さ	PC 行間	SP サイズ / 太さ
h2	20px / 700	1.30	18px / 700
h3	15px / 700	1.49	14px / 700
本文（p）	15px / 400	1.49	14px / 400
ボタン	16px / 400	—	16px / 400

実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

01
ヘッダー
ロゴの右にホーム・買いもの・コンテンツ・カートのアイコン。下段にカテゴリのタブと検索。
ヘッダー／ロゴ＋ナビ＋1ボタン型
02
特集
特集の大きな写真と説明。その下に関連する記事を並べる。
記事・メディア／注目記事の大判＋リスト型
03
新着の読みもの
記事・メディア／記事カードグリッド型
04
カテゴリーから探す
記事・メディア／カテゴリナビ＋検索型
05
読みもの・商品の一覧
記事・メディア／記事カードグリッド型
06
人気商品
商品写真と価格を並べる。
事例・実績／写真グリッド型
07
フッター
フッター／店舗情報＋ナビ型

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

SVGをダウンロードする
Figmaのキャンバスにファイルをドラッグ＆ドロップする
セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

01記事と商品の写真を同じ比率・トーンでそろえ、同じ並びで見せる
02記事の一覧のあとに商品を置き、読んだ流れで商品へ進めるようにする
03「読む」と「買う」の入口を、固定メニューに並べてどこからでも行き来できるようにする
04トップの最初は、いちばん伝えたい特集を大きな写真1枚で見せる

FAQよくある質問

北欧、暮らしの道具店で使われているフォントは？

見出しと本文は游ゴシック Medium に、約物を詰める YakuHanJPs を組み合わせています。無料で近づけるなら Noto Sans JP と YakuHanJPs が使えます。

ECサイトに記事を載せる意味はありますか？

商品の使い方や暮らしの場面を記事で伝えると、価格だけで比べられにくくなります。記事は検索からの入口にもなるので、広告に頼らない集客の柱になります。

どんな業種の参考になりますか？

雑貨・食品・アパレルなどのネットショップのほか、地域の特産品を扱う店や、商品の使い方を伝えたいメーカーの直販サイトに応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は北欧、暮らしの道具店および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。