出典：youngspirits.co.uk ↗ 確認日 2026.10.27
Editor's note
編集部の視点
瓶詰め・ラベル貼りの受託を8つの仕事に分けて見せ、「最小ロットなし」と倉庫の広さで小さな蒸留所の不安に答える、エディンバラの工場。
エディンバラで蒸留酒の瓶詰めを請け負う Young Spirits のサイト。ファーストビューは黒い液体が揺れる動画に、ステンシルのような大きなロゴと「Partner in excellence for distillers & producers（蒸留所と生産者のためのパートナー）」の一文。続いて瓶詰め・ラベル貼り・梱包・海外配送・一貫支援・保管・原酒の供給・新商品の開発の8つの仕事を並べ、「最小ロットなしから10万本以上まで」「3万平方フィートの倉庫」と数字で書く。工場で開く試飲やイベントの予約、問い合わせフォームと地図もトップにある。
- 01 請け負う仕事を8つに分けて並べ、何を頼めるかを一覧で見せる
- 02 「最小ロットなし」「3万平方フィートの倉庫」と、発注前の不安に数字で答える
- 03 工場での試飲やイベント、瓶詰めの見学を案内し、取引先が来たくなる理由を作る
Conversion
集客の工夫
- 仕事の一覧 （あり） 瓶詰め・ラベル・梱包・保管・新商品の開発など8つ
- ロットの目安 （あり） 最小ロットなしから10万本以上まで
- 設備の規模 （あり） 3万平方フィートの倉庫（樽・パレットの保管も）
- 工場への招待 （あり） 試飲・イベントの予約、見学スペースから瓶詰めを見られる
- 問い合わせ （あり） ヘッダーの「GET IN TOUCH」とトップ下のフォーム
- 電話・メール （あり） tel:リンク 1か所・mailto:リンク 1か所、地図と住所
- メール登録 （あり） フッターにニュースレター
- 料金の目安 （なし） トップにはなし
何を頼めるかを、8つに分ける
ファーストビューの一文で「蒸留所と生産者のためのパートナー」と相手を絞り、続けて 瓶詰め・ラベル貼り・梱包・海外配送・一貫支援・保管・原酒の供給・新商品の開発の8つの仕事 を並べています。受託の工場は「何をしてくれるのか」が外から分かりにくいため、工程ごとに分けて見せるのが効きます。
発注前の不安に、数字で答える
瓶詰めの説明には「最小ロットなしから10万本以上まで」、保管の説明には「3万平方フィートの倉庫」と書いています。小さな蒸留所が気にする ロットの大きさと、設備の規模を数字で先に示す ことで、問い合わせる前に「頼めそうか」を判断できます。
工場に来てもらう理由を作る
トップには「Come and Sip for Yourself（試しに飲みに来て）」として、工場で開く試飲やワークショップ、発売イベントの予約があり、見学スペースから自分の樽が瓶詰めされる様子を見られる と書いています。問い合わせフォームは電話番号を任意にし、地図と住所も同じ場所に置いています。
チェック項目は 2026.10.27 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #1D1D1B 暗いセクションの背景
- #D7D7D7 明るいセクションの背景（会社紹介・問い合わせ）
- #FFFFFF 背景・暗い面の上の文字
- #AF8146 ボタンの枠と文字（金）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ロゴ・大きな見出し | YS-Display（専用書体） | Big Shoulders Stencil Display |
| 本文・ナビ・ボタン | Proxima Nova | Montserrat |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 74px / 400 | 0.80 | 50px / 400 |
| h2 | 24px / 600 | 1.20 | 20px / 600 |
| h3 | 14px / 600 | 1.20 | 14px / 600 |
| 本文（p） | 17px / 500 | 1.00 | 17px / 500 |
| ボタン | 14px / 500 | 1.00 | 14px / 500 |
実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ロゴ、瓶詰め・ラベル／シングルカスク・スコッチ／ジン・ラム／供給・保管・配送／自社ブランドのナビ、右に「GET IN TOUCH」。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 黒い液体が揺れる動画に、大きなロゴと「蒸留所と生産者のためのパートナー」の一文。 ファーストビュー／全面動画＋コピー型
- 03 できること 瓶詰め・ラベル貼り・梱包・海外配送・一貫支援・保管・原酒の供給・新商品の開発の8つ。 一覧／カード並び型
- 04 サービスの入口 4つのサービスのページへ「Learn More」。 入口／カテゴリ別スライド型
- 05 保税倉庫 工場の動画と、エディンバラの保税倉庫でできることの説明。 動画／動画カード型
- 06 会社紹介 創業者2人の名前と考え方、環境への取り組み。 コンセプト／写真＋メッセージ型
- 07 工場に来てもらう 試飲・ワークショップ・発売イベントと、見学スペースから瓶詰めを見られること。 コンセプト／写真＋メッセージ型
- 08 問い合わせ 電話・メール、名前・メール・電話（任意）・内容のフォーム、地図と住所。 行動喚起／ボタン帯型
- 09 メール登録 新商品・お知らせ・イベントの登録。 行動喚起／メール登録型
- 10 フッター サービス・はじめての方へ・FAQ・SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 受託の仕事は、工程ごとに分けて一覧で見せる
- 02 最小ロットや設備の規模など、発注前に聞かれる数字を先に書く
- 03 工場見学や試飲会を用意し、取引先が足を運ぶ理由を作る
- 04 問い合わせフォームは必須項目を絞り、電話番号は任意にする
FAQ
よくある質問
Young Spirits のサイトで使われているフォントは？
ロゴと大きな見出しは専用のステンシル風の書体、本文やボタンは Proxima Nova です。無料で近づけるなら、見出しに Big Shoulders Stencil Display、本文に Montserrat が候補です。
BtoB の受託製造で、トップに何を書けばいいですか？
Young Spirits は、請け負う仕事を8つに分けて並べ、「最小ロットなし」「3万平方フィートの倉庫」と数字で書いています。発注を考える人が最初に知りたい「頼めるか」「どれくらいの量か」に、問い合わせの前に答える作りです。
どんな業種の参考になりますか？
OEM や受託製造の工場、酒蔵の委託醸造、食品の充填・包装、印刷・加工の下請けなど、ほかの会社の商品をつくる BtoB の製造業に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はYoung Spiritsおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
