Land-book ·オーストリア ·Picked 2026.10.18
DUFT UND KULTUR
香水・フレグランス専門店のサイトデザイン参考 — 小売店・読みものと商品・セリフ体・店舗一覧
出典：duftundkultur.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
季節の読みものの写真を半分の幅で固定し、その隣で商品をそのままカートに入れられる、オーストリアの香水専門店のEC。
ウィーンとオーバーエスターライヒ州に5つの店舗を持つ、ニッチ香水とホームフレグランスの専門店 DUFT UND KULTUR のサイト。ファーストビューは果物と香水瓶を並べた静物写真に「FRUITS OF TEMPTATION（誘惑の果実）」の見出しと「読みものを見る」のボタン。スクロールすると、季節の読みもの（ジャーナル）の縦長写真が半分の幅で固定され、隣の商品一覧からそのまま「カートに入れる」ことができる。オンラインと店頭の両方で相談を受けることも明記している。
- 01 季節の読みものの写真を固定し、隣に商品を並べて「読む」と「買う」を同じ画面に置く
- 02 商品一覧から直接カートに入れられ、商品ページを開かなくても買える
- 03 「オンラインでも店頭でも相談できる」と書き、香りの選び方に迷う人を受け止める
Conversion
集客の工夫
- 読みものと商品の同時表示 （あり） ジャーナルの写真を固定、隣に商品
- 一覧から直接カートへ （あり） 「Add to cart」「Choose options」
- 店舗一覧 （あり） ウィーン2店・リンツ・グムンデン・フェックラブルック
- 相談の窓口 （あり） オンラインと店頭の両方
- メール登録 （あり） 登録で5ユーロのクーポン
- 配送・返品の案内 （あり） 「More on shipping」など
- ヘッダーの追従 （あり） カテゴリ・検索・お気に入り・カートを上部に固定
- 電話番号の掲載 （なし） トップにはなし
読む画面と、買う画面を分けない
スクロールすると、季節の読みもの（ジャーナル）の縦長写真が半分の幅で固定され、その隣に商品が並びます。読みもので香りの情景を思い浮かべた人が、画面を移らずにそのまま商品を選べる作りです。特集ページと売り場を別々にすると、読みものが行き止まりになりがちです。
一覧から、そのままカートへ
商品一覧には「Add to cart（カートに入れる）」と「Choose options（種類を選ぶ）」のボタンが並び、商品ページを開かなくても買えます。キャンドルや石けんなど、ついで買いが多い商品ほど、この一手間の差が効きます。
試したい人の受け皿を用意する
香りは試さないと分からない商品です。サイトには「オンラインでも店頭でも、個別に相談できる」と書かれ、フッターにはウィーン（2店）・リンツ・グムンデン・フェックラブルックの5店舗が並びます。メール登録で5ユーロのクーポンがもらえることも、最初の購入のきっかけになっています。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #030305 見出し・本文・カートボタン
- #F5F5F5 商品カードの背景
- #F2DDDF 淡いピンク（帯・強調）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 本文・ボタン・ナビ | Raisonne | Space Grotesk |
| 大きな見出し（セリフ体） | Schnyder | Playfair Display |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 30px / 700 | 1.70 | 26px / 700 |
| 本文（p） | 15px / 400 | 1.70 | 13px / 400 |
| ボタン | 18px / 600 | 1.00 | 13px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 香水・ホームフレグランス・ボディケア・暮らし・ブランド・ギフトと、検索・お気に入り・カート。上部に固定。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 果物と香水瓶の静物写真に、セリフ体の見出しと「読みものを見る」のボタン。 ファーストビュー／全面写真＋コピー型
- 03 おすすめ商品 商品一覧から直接カートに入れられる。 商品／グリッド型
- 04 読みもの（ジャーナル） 季節の読みものの縦長写真を半分の幅で固定し、隣に関連する商品を並べる。 コンセプト／写真＋メッセージ型
- 05 関連する商品 読みものの隣で、そのまま買える商品。 商品／グリッド型
- 06 新着 新しく扱うブランドの写真と商品。 コンセプト／写真＋メッセージ型
- 07 新着の商品 新着商品を価格つきで。 商品／グリッド型
- 08 相談・配送 オンラインと店頭での相談、配送・返品の案内。 進め方／番号つきステップ型
- 09 メール登録 登録で5ユーロのクーポン。 行動喚起／メール登録型
- 10 フッター 5つの店舗の一覧と、規約・配送などのリンク。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 季節の特集や読みものを作るなら、同じ画面にその商品を置いて、読んだらすぐ買えるようにする
- 02 商品一覧から直接カートに入れられると、まとめ買いの手間が減る
- 03 選び方に迷いやすい商品は、オンラインと店頭の両方で相談できることを書く
- 04 店舗がある EC は、フッターに店舗の一覧を置く
FAQ
よくある質問
DUFT UND KULTUR のサイトで使われているフォントは？
本文やボタンに Raisonne、大きな見出しにセリフ体の Schnyder を使っています。どちらも有料書体なので、無料で近づけるなら Space Grotesk と Playfair Display の組み合わせが候補です。
香りのように試さないと分からない商品は、ネットで売れますか？
このサイトは読みもので香りの情景を伝え、隣に商品を置いて想像から購入までをつなげています。さらに「オンラインでも店頭でも相談できる」と書き、店舗の一覧も載せて、試したい人の受け皿を用意しています。
どんな業種の参考になりますか？
香水・化粧品・お茶・ワインなど、言葉で魅力を伝える必要がある商品の店に向きます。読みものと商品を並べる型は、雑貨店やセレクトショップにも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はDUFT UND KULTURおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Land-book
