出典：burritomadre.rs ↗ 確認日 2026.10.20
Editor's note
編集部の視点
注文ボタンから配達アプリ2社を選ばせ、メニュー・店舗・会員アプリ・ケータリング・採用の入口をトップにまとめた、セルビアのブリトー店チェーン。
ベオグラード・ノヴィ・サド・パンチェヴォなどセルビアの6都市に店を持つブリトー店 Burrito Madre の英語版サイト。PC のヘッダーにはメニュー・品質へのこだわり（Real Deal）・会員・ケータリング・会社紹介・採用・店舗と、赤橙の「ORDER」ボタンが常に表示される。ORDER を押すと Glovo と Wolt の2つの配達アプリを選ぶ画面が開く。ファーストビューは料理の動画で、その下にブリトー・タコスなど8つの分類を写真で並べ、店の考え方、セットメニューと採用の2枚のカード、会員アプリの案内へと続く。
- 01 「ORDER」を押すと配達アプリ2社（Glovo・Wolt）を選ぶ画面が開き、使い慣れたアプリでそのまま注文に進める
- 02 メニューを8つの分類に分け、料理写真1枚ずつで入口をつくる
- 03 会員アプリ・ケータリング・採用・フードトラックなど、来店以外の入口もヘッダーとトップに並べる
Conversion
集客の工夫
- 注文ボタンの常設 （あり） ヘッダー右に「ORDER」（PC）
- 注文先 （あり） Glovo・Wolt の2つを選ぶ画面
- メニューの入口 （あり） 8分類を写真つきで
- 店舗一覧 （あり） ベオグラード・パンチェヴォ・ノヴィ・サド・チャチャク・クラグイェヴァツ・シャバツ
- 会員プログラム （あり） 会員アプリ（App Store・Google Play）
- 採用の入口 （あり） ヘッダーに CAREERS、中段に「JOIN THE CREW」
- 言語の切り替え （あり） セルビア語・英語（国旗のアイコン）
- 電話・メールのリンク （なし） トップにはなし（CONTACT ページへ）
注文ボタンの先で、配達アプリを選ばせる
PC のヘッダー右端には、赤橙の 「ORDER」ボタンが常に表示されています。押すと Glovo と Wolt の2つを選ぶ画面が開き、それぞれのアプリの Burrito Madre のページにつながります。自社の注文システムを作らなくても、お客さんが普段使っているアプリへの入口を並べるだけで、サイトを見て食べたくなった人を注文に送れます。
メニューは、写真1枚ずつの入口にする
ファーストビューの動画のすぐ下に、ブリトー・タコス・ナチョスなど 8つの分類を料理写真と名前だけで並べています。説明文や価格はトップに置かず、「何があるか」を一目で見せて、分類ごとのメニューへ1クリックで進ませる作りです。最後に「メニューをすべて見る」ボタンを置き、全体を見たい人の入口も残しています。
来店以外の売上と人集めの入口も並べる
ヘッダーには会員・ケータリング・採用が、トップの中段には採用の「JOIN THE CREW」と会員アプリの案内があります。ケータリングのページでは誕生日・会議・チームの催しへの配達を、会員アプリでは注文するほど得をする仕組みを案内しています。店に来てもらう以外の売上と、働く人を集める入口を、メニューと同じ重さで扱っているのが特徴です。
チェック項目は 2026.10.20 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FAE8DF 背景（薄いピーチ）
- #F83E1C 注文ボタン・大きな見出し（赤橙）
- #5F0E00 本文・ナビ（こげ茶）
- #053626 フッター（深緑）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・見出し・本文 | Figtree | Figtree（Google Fonts） |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 22px / 600 | 1.00 | 18px / 600 |
| h3 | 16px / 600 | 0.06 | 16px / 600 |
| 本文（p） | 22px / 500 | 1.40 | 18px / 500 |
実測値（PC 1440px・SP 375px、2026.10.20 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左にメニュー・Real Deal・会員・ケータリング、中央にロゴ、右に会社紹介・採用・店舗と「ORDER」、言語の国旗。PC は上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー ブリトーやタコスの動画を、角丸の枠で画面幅いっぱいに。左上に「AI」の表示。 ファーストビュー／全面動画＋コピー型
- 03 メニューの分類 ブリトー・ブリトーグランデ・チップス＆サルサ・セット・ナチョス・ケサディーヤ・サラダ・タコスの8つを写真で。「メニューをすべて見る」。 商品／グリッド型
- 04 店の考え方 画面いっぱいの「ROLL WITH THE REAL」と写真、「OUR STORY, OUR VIBE」の文章。 コンセプト／写真＋メッセージ型
- 05 セットと採用 「CHOOSE YOUR MEAL」（セットメニュー）と「JOIN THE CREW」（採用）の2枚。 一覧／カード並び型
- 06 会員プログラム 「PROVE HOW LOYAL YOU ARE」のイラストと、注文するほど得をする会員アプリの案内、App Store・Google Play のボタン。 コンセプト／写真＋メッセージ型
- 07 フッター メニュー・ケータリング・採用・フードトラック・FAQ・ニュースレターのリンク、都市の選択、Instagram・TikTok、大きなロゴ。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 配達アプリで注文を受けている店は、注文ボタンから使っているアプリを並べて選ばせる
- 02 メニューは分類ごとに写真1枚で入口をつくり、トップから1クリックで届くようにする
- 03 店舗が複数あるなら、都市名をフッターと店舗ページの両方に並べる
- 04 会員アプリ・ケータリング・採用など、来店以外の入口もトップの中段に置く
FAQ
よくある質問
Burrito Madre のサイトで使われているフォントは？
ナビ・見出し・本文に Figtree を使っています。Google Fonts で無料で使える書体なので、そのまま同じものを使えます。
自社で注文システムを持たない店でも、注文ボタンは置くべきですか？
Burrito Madre は「ORDER」を押すと Glovo と Wolt の2つを選ぶ画面を開き、それぞれの店のページにつないでいます。自社の仕組みがなくても、使っている配達アプリへの入口をヘッダーに置けば、メニューを見て食べたくなった人をそのまま注文に送れます。
どんな業種の参考になりますか？
テイクアウト・デリバリーのある飲食店、複数店舗を持つチェーン、ケータリングや会員制度を持つ飲食店に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBurrito Madreおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
