出典：triplettapizza.com ↗ 確認日 2026.10.24
Editor's note
編集部の視点
トップで「宅配・持ち帰り・店内・グッズ」の4つから選ばせ、都市ごとの店舗ページに看板ピザとメニューを載せる、フランスのピッツェリア。
パリのベルヴィルで始まったピッツェリア Tripletta のサイト。ファーストビューは大きな店名とピザを食べる人のイラストだけで、下に「採用」「貸切」のリンクと SNS。スクロールするとすぐに「LIVRER（宅配）」「À EMPORTER（持ち帰り）」「SUR PLACE（店内）」「SHOP」の4つのボタンが並び、その下にリール、ボルドー、パリなど9都市の名前が続く。店舗ページには住所と店の紹介、その界隈の名前をつけた看板ピザ、メニューのダウンロードがある。
- 01 トップの最初の操作を「宅配・持ち帰り・店内・グッズ」の4つに絞り、来た目的ですぐ分かれられるようにする
- 02 都市ごと・店ごとにページを分け、その界隈の名前をつけた看板ピザで店の個性を出す
- 03 採用・貸切・会員プログラムの入口を、トップとフッターに小さく常に置く
Conversion
集客の工夫
- 注文方法の入口 （あり） 宅配（Deliveroo）・持ち帰り・店内の3つ＋SHOP
- 店舗の一覧 （あり） 9都市・15店舗のページ
- 店舗ページの中身 （あり） 住所・店の紹介・看板ピザ・メニューのダウンロード
- グッズの通販 （あり） Tシャツ・帽子などの SHOP
- 会員プログラム （あり） フッターに「Fidélité」（外部サービス）
- 貸切の相談 （あり） 「Privatisation」から担当者へメール
- 採用 （あり） 「Recrutement」から採用サイトへ
- 電話番号の掲載 （なし） トップにはなし（メールのみ）
来た目的で、最初に分かれてもらう
ファーストビューは大きな店名とイラストだけですが、少しスクロールすると 「宅配」「持ち帰り」「店内」「SHOP」の4つの大きなボタン が並びます。宅配のボタンはそのまま Deliveroo の注文画面につながります。飲食店のサイトに来る人の多くは「今日どうやって食べるか」がもう決まっているため、最初の操作をその4つに絞っています。
店ごとに、行く理由をつくる
9都市・15店舗には、それぞれページがあります。最初の店であるパリ・ベルヴィルのページには、住所と「すべてが始まった場所」という紹介、テラス席や自然派ワインの話、そして その界隈の名前をつけた看板ピザ「BELLEVILLE」 が並び、メニューもダウンロードできます。チェーンでも店ごとの個性が見えるので、近くの店に行く理由が生まれます。
採用・貸切・会員の入口を、いつも置いておく
ファーストビューの下部には「Recrutement（採用）」と「Privatisation（貸切）」のリンクが、フッターには会員プログラム「Fidélité」の入口があります。どれも大きく目立たせてはいませんが、探した人がどのページからでもたどり着ける 場所に置かれています。なお、配色は訪問によって変わり、撮影時は緑、実測時は青緑でした。
チェック項目は 2026.10.24 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FEF8DD 背景（クリーム）
- #BDD0A0 店名の文字・ボタンの背景（撮影時の配色）
- #004632 イラスト・ボタンの文字（撮影時の配色）
- #00777D 別の訪問時の主色（配色は訪問によって変わる）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 店名・見出し・都市名（大文字） | Oswald | Oswald（Google Fonts） |
| 本文・リンク | Merriweather | Merriweather（Google Fonts） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 180px / 700 | 1.00 | 96px / 700 |
| h3 | 43px / 700 | 1.20 | 27px / 700 |
| 本文（p） | 14px / 300 | 1.20 | 16px / 300 |
実測値（PC 1440px・SP 375px、2026.10.24 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ファーストビュー 画面いっぱいの店名と、ピザを食べる人のイラスト。右に「MON RESTAURANT」のバッジ、下に採用・貸切・SNS。 ファーストビュー／大きな文字型
- 02 注文方法 宅配・持ち帰り・店内・SHOP の4つの大きなボタン。 行動喚起／ボタン帯型
- 03 都市の一覧 リール・ボルドー・ヴェルサイユ・パリなど9都市の名前が横に流れる。 入口／カテゴリ別スライド型
- 04 店の紹介 季節のピザ、軽い生地、都市ごとの名物、生パスタ、地元の飲み物。店内・持ち帰り・宅配に対応。 メッセージ／大きな一文型
- 05 グッズ Tシャツ・帽子・靴下などの紹介と SHOP への入口。 コンセプト／写真＋メッセージ型
- 06 WALL OF LOVE お客さんの声を並べる。 推薦／利用者の声型
- 07 都市の一覧（再掲） ページの終わりにもう一度9都市を並べる。 入口／カテゴリ別スライド型
- 08 フッター 会員プログラム、利用規約、問い合わせメール、採用・貸切。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 飲食店のトップは、宅配・持ち帰り・店内など、お客さんの目的別の入口を最初に置く
- 02 複数店舗なら店ごとにページを作り、住所・店の紹介・看板メニュー・メニュー表をそろえる
- 03 店の名物に地名をつけ、その店に行く理由をつくる
- 04 採用と貸切の入口は目立たせすぎず、どのページからも届く場所に置く
FAQ
よくある質問
Tripletta のサイトで使われているフォントは？
店名・見出し・都市名に Oswald、本文に Merriweather を使っています。どちらも Google Fonts で無料で使えます。
飲食店のサイトで、注文方法を最初に分ける意味は？
飲食店のサイトに来る人は「今夜届けてほしい」「店に行きたい」など目的がはっきりしています。Tripletta のように宅配・持ち帰り・店内の入口を最初に並べると、迷わずに次の画面へ進めます。
どんな業種の参考になりますか？
複数の店舗を持つ飲食店、パン屋、カフェ、テイクアウトや宅配にも対応する店に向きます。グッズを売る店や、採用に力を入れたい店にも使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はTriplettaおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
