出典：unionboulangerie.com ↗ 確認日 2026.10.21
Editor's note
編集部の視点
ファーストビューに2つの店名ボタンを置き、押すとそのままGoogleマップの経路案内が開くパリの町のパン屋。
パリ9区と11区に店を構えるパン屋 Union のサイト。ファーストビューは焼き場の動画に「町のパン屋を、町のために」という見出しと、「Union 09 Arr.」「Union 11 Arr.」の2つのボタンだけ。ボタンを押すと、その店までの Google マップの経路案内が開く。店舗の欄では住所と曜日ごとの営業時間を並べ、3店目（左岸）を「近日オープン」と予告する。粉・バター・はちみつ・牛乳などの仕入れ先を生産者の名前と産地つきで紹介し、問い合わせフォームでは仕出し・飲食店向け卸・その他の3つから用件を選ばせる。
- 01 ファーストビューのボタンを店名にし、押すとその店までの経路案内が開くようにする
- 02 店舗ごとに住所と曜日別の営業時間を並べ、次の出店も「近日オープン」として予告する
- 03 問い合わせの用件を「仕出し」「飲食店・ホテル・カフェ向け」「その他」に分けて受ける
Conversion
集客の工夫
- ファーストビューに店舗への導線 （あり） 2店の名前のボタン（Googleマップの経路案内へ）
- 店舗の住所 （あり） 9区 2 rue Bleue と 11区 149 boulevard de Charonne
- 営業時間 （あり） 店ごとに平日・土曜・日曜（定休）を表示
- 仕出し・卸の受付 （あり） フォームの用件で「仕出し」「B2B」を選べる
- 仕入れ先の紹介 （あり） 製粉所・養蜂家・酪農協同組合などを名前と産地つきで
- メール登録 （あり） フッターにニュースレター
- 言語の切り替え （あり） FR / EN
- 電話番号の掲載 （なし） なし（フォームから問い合わせ）
ファーストビューのボタンが、そのまま道案内になる
焼き場の動画に「町のパン屋を、町のために」という見出し。その下にあるボタンは 「Union 09 Arr.」「Union 11 Arr.」の2つの店名だけです。押すと、その店までの Google マップの経路案内が開きます。パン屋のサイトを見る人がまず知りたいのは「どこにあって、どう行くか」なので、店舗ページをはさまずに道案内まで1回で届く作りにしています。
営業時間は曜日ごとに、次の店は予告で
店舗の欄では、9区の店（2 rue Bleue）と11区の店（149 boulevard de Charonne）の住所と、平日・土曜・日曜の営業時間を店ごとに並べています。9区は土曜が15時まで、11区は20時まで、と店によって違うことも一目で分かります。3店目の左岸の店は「近日オープン」として先に載せ、新しい店を待つ人をつくっています。
素材の話と、法人の注文を同じページで受ける
ページの中ほどでは、有機栽培の粉を挽く製粉所、はちみつの養蜂家、ノルマンディーの酪農協同組合など、仕入れ先を生産者の名前と産地つきで紹介しています。最後の問い合わせフォームでは、用件を「仕出し」「飲食店・ホテル・カフェ向け」「その他」から選ばせます。町の人に向けたサイトの中に、法人の注文の入口も置いている形です。
チェック項目は 2026.10.21 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F2F0ED 背景
- #2259EC ナビのボタン・アクセント
- #F25A07 問い合わせボタン
- #55270A 見出し・本文
- #FFFFFF 動画の上の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・ボタン | Serial Blur | Inter Tight |
| 本文 | Shinka | Inter |
| 手書き風の添え文字 | Kiddo | Caveat |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 40px / 80 | 1.00 | 24px / 80 |
| h2 | 40px / 80 | 1.00 | 24px / 80 |
| h3 | 16px / 80 | 1.00 | 16px / 80 |
| 本文（p） | 16px / 400 | 1.20 | 14px / 400 |
| ボタン | 16px / 400 | 1.00 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にロゴ、右に「お店について」「店舗」「問い合わせ」の3つと言語切り替え。問い合わせだけ色を変える。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 焼き場の動画に「町のパン屋を、町のために」。下に2店の名前のボタン。 ファーストビュー／全面動画＋コピー型
- 03 お店について 2020年1月に始めた理由と、町の人が集まる場所にしたいという考え。 コンセプト／写真＋メッセージ型
- 04 つくり方 職人のチームと、昔からのレシピに少しの工夫を加えるという方針。 コンセプト／写真＋メッセージ型
- 05 店舗 店ごとに住所・曜日別の営業時間・経路案内のボタン。3店目は「近日オープン」。 一覧／カード並び型
- 06 仕入れ先 粉・バター・はちみつ・牛乳・ナッツなどを、生産者の名前と産地つきで。 一覧／カード並び型
- 07 問い合わせ 名前・電話・メールと、用件（仕出し・飲食店向け・その他）を選んでメッセージ。 行動喚起／メール登録型
- 08 フッター ニュースレターの登録欄と Instagram、規約類。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 店舗が主役の商売は、ファーストビューのボタンを店名にして、地図アプリの経路案内に直接つなぐ
- 02 営業時間は「平日」「土曜」「日曜」のように曜日ごとに分け、定休日も書く
- 03 仕入れ先は「国産」でまとめず、生産者の名前と産地を書く
- 04 法人や仕出しの注文は、フォームの用件で最初から分けて受ける
FAQ
よくある質問
Union Boulangerie のサイトで使われているフォントは？
見出しとボタンに Serial Blur、本文に Shinka、手書き風の添え文字に Kiddo を使っています。いずれも有料書体なので、無料で近づけるなら Inter Tight・Inter・Caveat の組み合わせが候補です。
店舗ボタンを Google マップに直接つなぐのはなぜ？
パン屋のサイトを見る人の多くは「どこにあるか」「今から行けるか」を知りたい人です。店舗ページを1枚はさまず、経路案内まで1回で届くようにすると、来店までの手間がいちばん少なくなります。
どんな業種の参考になりますか？
パン屋・ケーキ店・カフェ・惣菜店など、複数の小さな店舗を持つ食の商売に向きます。仕出しや飲食店への卸もしている店なら、問い合わせの分け方もそのまま使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はUnion Boulangerieおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
