Httpster ·イタリア・スロベニア（取扱産地） ·Picked 2026.10.18
Benvenusa Italian Wines
ワインの輸入・卸のサイトデザイン参考 — 全文大文字・産地から探す・選定基準の明示・ワイン
出典：benvenusa.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
「10ヘクタール未満・手摘み」という選定条件を先に示して、扱う生産者を絞って見せるワインのサイト。
イタリアとスロベニアの小規模な生産者のワインを扱う Benvenusa のサイト。画面いっぱいの「BENVENUSA」の文字と、白黒の畑の写真。続く紫の帯で「生産者は全員、10ヘクタール未満の畑で手摘みし、真摯なワインを造っている」と選定の条件を宣言し、6つの産地名を並べる。その後は「未来の歴史」という見出しと、白黒の肖像写真に一行の肩書を添えた約20の生産者の一覧。メニューは「生産者」と「流通業者」の2つだけ。
- 01 商品より先に「何を扱わないか」という選定条件を宣言している
- 02 生産者は白黒の肖像と一行の肩書（「エトナの偉大な白」など）で、人で選ばせる
- 03 メニューを「生産者」と「取扱先（流通業者）」の2つに絞り、「何を扱い、どこで買えるか」だけに答える
Conversion
集客の工夫
- 選定基準の明示 （あり） 「10ヘクタール未満・手摘み」
- 産地から探す （あり） 6つの産地名を一覧で
- 作り手の紹介 （あり） 約20の生産者を肖像と肩書つきで
- 取扱先への導線 （あり） 流通業者（DISTRIBUTORS）の一覧
- ヘッダーの追従 （あり） 2つのメニューを上部に固定
- メールアドレスの掲載 （あり） mailto:リンク 2か所
- 電話番号の掲載 （なし） なし
- SNSへの導線 （なし） なし
「何を扱わないか」を、先に宣言する
最初に出てくるのは商品でも会社でもなく、選定の条件です。紫の帯で「生産者は全員、10ヘクタール未満の畑を耕し、手で収穫し、真摯で意義あるワインを造ろうとしている」と宣言してから、扱う6つの産地（Friuli-Venezia Giulia、Piedmont、Sardinia、Sicily、Slovenia、Tuscany）が並びます。取扱商品が多い卸ほど「全部あります」と書きたくなりますが、基準を先に決めて書くことで、少ない点数でも選ぶ理由が立ちます。
作り手を、肖像と一行の肩書で
生産者は白黒の肖像写真に、名前と一行の肩書（CANTINA MAUGERI — THE GREAT WHITES OF ETNA など）を添えて並びます。ワインの銘柄より先に人を覚えてもらう見せ方です。写真の色を白黒で揃えているので、約20件が並んでも一覧が整って見えます。
メニューを、2つの問いに絞る
メニューは PRODUCERS（生産者）と DISTRIBUTORS（流通業者）の2つだけです。「どんな造り手を扱っているのか」「どこで手に入るのか」。輸入卸のサイトに来る人の問いはほぼこの2つなので、メニューをその問いの数に合わせると迷う余地がなくなります。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #AC00EF 選定条件の帯（紫）
- #FFFFFF 背景
- #000000 見出し・本文
- #C3C3C3 白黒写真の中間調・区切り
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し（A HISTORY OF THE FUTURE） | Syllabus | EB Garamond |
| 選定条件・産地名・生産者名 | DieGrotesk | EB Garamond |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 77px / 400 | 1.00 | 34px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 「生産者」「流通業者（取扱先）」の2つだけを上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 画面幅いっぱいの「BENVENUSA」の文字と、白黒の畑の写真。 ファーストビュー／大きな文字型
- 03 選定の条件 紫の帯に「10ヘクタール未満の畑、手摘み、真摯なワイン」という条件と、6つの産地名。 メッセージ／大きな一文型
- 04 畑の写真 白黒の風景写真を全幅で。 ファーストビュー／全面写真＋コピー型
- 05 見出し 「未来の歴史」と「各地の次の時代をつくる小さな生産者たち」という一文。 メッセージ／大きな一文型
- 06 生産者 白黒の肖像写真に、名前と一行の肩書を添えて約20件。 一覧／カード並び型
- 07 フッター ロゴと「会社について」「連絡先」。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 扱う商品が多い事業ほど、「何を扱わないか」という基準を先に書く
- 02 作り手がいる商品は、写真と一行の肩書で人を紹介する
- 03 メニューは「何を扱っているか」「どこで買えるか」のように、読み手の問いで絞る
- 04 写真の色を揃える（白黒など）と、点数が多くても一覧が整って見える
FAQ
よくある質問
Benvenusa のサイトで使われているフォントは？
見出しに Syllabus、選定条件や生産者名に DieGrotesk という書体名のフォントが指定されています。画面上はどちらもクラシックなセリフ体の大文字に見えるので、無料で近づけるなら EB Garamond が候補です。
メニューが2つだけで足りますか？
Benvenusa のメニューは「生産者（何を扱っているか）」と「流通業者（どこで買えるか）」の2つです。輸入卸のサイトに来る人の問いはほぼこの2つに集約されるので、迷う余地がありません。連絡先はページの最後に置いています。
どんな業種の参考になりますか？
酒類・食品の輸入卸、商社、セレクトショップなど、作り手を選んで扱う事業に向きます。生産者紹介の型は、農産物・工芸品・地場産品を扱う事業にも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBenvenusa Italian Winesおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
