出典：distillatigroup.com ↗ 確認日 2026.10.26
Editor's note
編集部の視点
「誰のための商品か」を最初の見出しで言い切り、商品ラインごとに味の数と用途を並べて、カタログと電話へつなぐイタリアの業務用リキュール・シロップのメーカー。
1965年にパドヴァで創業した、業務用の蒸留酒・リキュール・シロップのメーカー Distillati Group のサイト。最初に年齢確認があり、続くトップはざらついた生成り色の背景に「A Family Company」「Est. 1965」を添えたロゴ、ボトルを並べた写真、「バー・ホテル・レストランなど業務用の蒸留酒・リキュール・シロップ、1965年からイタリア製」という見出し。その下に、バーやホテル、卸の業者に向けて作っていることの説明と動画が続く。商品は果物のプレパレーション「Dreamy」（40種以上の味）、シロップ「Il Doge」（90種以上）、デザート用のソース、粉末、ノンアルコール、アルコールの順に、それぞれ用途と「DISCOVER」で並ぶ。フッターには住所・電話・メール・付加価値税の番号と、「CALL US」「CATALOGS」のリンクがある。
- 01 最初の見出しで「バー・ホテル・レストラン向け」「1965年からイタリア製」と、相手と歴史を一文で言い切る
- 02 商品ラインごとに「味の数」と「使い道（カクテル・ミルクシェイク・アイスの上がけなど）」を書き、仕入れる側が選びやすくする
- 03 カタログのページに総合カタログと商品ライン別のカタログ、問い合わせフォームをまとめ、メニューとフッターから「CATALOGS」「CALL US」でつなぐ
Conversion
集客の工夫
- 取引先の明示 （あり） 見出しにバー・ホテル・レストラン・卸
- 創業年と家族経営 （あり） ロゴに「A Family Company」「Est. 1965」
- 商品ラインの整理 （あり） Dreamy・Il Doge・ソース・粉末・ノンアル・アルコール
- 用途の説明 （あり） カクテル・コーヒー・ミルクシェイク・アイスなど
- カタログ （あり） 総合と商品ライン別の3冊のページ
- 問い合わせフォーム （あり） カタログのページに名前・メール・メッセージ
- 電話・住所の掲載 （あり） フッターに住所・電話・メール・税番号
- 言語の切り替え （あり） ヘッダー右に ENG／ITA（英語・イタリア語）
誰のための商品かを、最初の見出しで言い切る
年齢確認の後に出るトップでは、ボトルの写真のすぐ下に 「バー・ホテル・レストランなど業務用の蒸留酒・リキュール・シロップ、1965年からイタリア製」という見出しがあります。続く文でも、バーテンダー・卸・ホテルチェーンなどに向けて作っていると書き、一般の消費者ではなく仕入れる人に向けたサイトであることを最初に伝えています。
商品ラインごとに、種類の数と使い道を書く
商品は、果物のプレパレーション「Dreamy」が40種以上、シロップ「Il Doge」が90種以上というように、ラインごとに味の数と使い道（カクテル・コーヒー・ミルクシェイク・アイスの上がけなど）を書いています。粉末の商品には「慣れていないスタッフでも同じ品質の飲み物を出せる」とあり、仕入れる側の悩みに合わせた説明です。
カタログと電話への入口を、メニューとフッターに
メニューとフッターには「CALL US」と「CATALOGS」があります。カタログのページには、総合カタログと Il Doge・Dreamy のカタログ、名前・メール・メッセージの問い合わせフォームがまとまっています。カタログを見てそのまま問い合わせられる流れで、フッターには住所・電話・メールも載っています。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #EDE7DB 背景（紙のような生成り色）
- #222222 見出し・本文
- #000000 年齢確認の画面・暗い面
- #FF9800 年齢確認のボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Subversia | Bebas Neue |
| 本文 | Muli | Mulish |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 33px / 400 | 1.00 | 30px / 400 |
| h2 | 32px / 400 | 1.00 | 32px / 400 |
| 本文（p） | 15px / 400 | 1.50 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左に MENU、中央に「A Family Company」「Est. 1965」つきの大きなロゴ、右に ENG／ITA。メニューの下部に「CALL US」「CATALOGS」。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 角を丸めた枠に、商品のボトルを並べた写真。 ファーストビュー／全面写真＋コピー型
- 03 事業の一文 「業務用の蒸留酒・リキュール・シロップ、1965年からイタリア製」の見出しと、取引先（バー・ホテル・レストラン・卸）の説明。 メッセージ／大きな一文型
- 04 動画 説明文の下に横長の動画。 動画／動画カード型
- 05 選ばれる理由 60年以上の経験、安定した品質、忙しい店での使いやすさ。「COMPANY」へのリンク。 コンセプト／写真＋メッセージ型
- 06 商品ライン 果物のプレパレーション Dreamy（40種以上）、シロップ Il Doge（90種以上）、デザート用ソース、粉末を、味の数と用途、「DISCOVER」で交互に。 機能・強み／左右交互型
- 07 ノンアルコールとアルコール ノンアルコールの商品と、蒸留酒・リキュールの2つの入口。 一覧／カード並び型
- 08 フッター 会社名・住所・電話・メール、規約、「CALL US」「CATALOGS」と商品ラインのリンク、付加価値税の番号。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 BtoB のメーカーは、最初の見出しで「誰に向けた商品か」と創業年を一文で書く
- 02 商品ラインごとに種類の数と使い道を書き、仕入れる側が比べやすいようにする
- 03 カタログは総合と商品ライン別に分け、同じページに問い合わせフォームを置く
- 04 電話とカタログへのリンクは、メニューとフッターの両方から届くようにする
FAQ
よくある質問
Distillati Group のサイトで使われているフォントは？
見出しは縦長の書体 Subversia、本文は Muli（現在の名前は Mulish）です。Mulish は Google Fonts で無料で使えます。見出しを無料で近づけるなら Bebas Neue が候補です。
BtoB のメーカーのサイトで、何を最初に書けばよいですか？
「誰のための商品か」です。Distillati Group は最初の見出しでバー・ホテル・レストラン・卸の業者に向けた業務用だと言い切り、創業年とイタリア製であることを添えています。一般の消費者ではなく仕入れる人に向けたサイトだと、すぐに分かります。
どんな業種の参考になりますか？
食品・飲料・調味料のメーカーや、飲食店向けの業務用品の卸など、商品の種類が多い BtoB の製造業に向きます。商品ラインごとのカタログと問い合わせを1ページにまとめる方法は、カタログ請求が営業の入口になる業種全般に使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はDistillati Groupおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
