DevNJ Make your business ease

Awwwards ·オランダ(デン・ハーグ) ·Picked 2026.10.28

Pizza Amici

ピザ・パスタのフードトラック(企業の催し・フェス・個人のパーティーへの出張ケータリング)のサイトデザイン参考 — 飲食店・ケータリング・実績の数字・申し込みの流れ
Pizza Amiciのトップページ(PC)
PC(1440px)
Pizza Amiciのトップページ(スマホ)
スマホ(375px)

Editor's note

編集部の視点

「3000件以上のケータリング・評価4.6・1時間480〜600枚」を画面上部に固定し、料金の目安と申し込みの4ステップまで見せるオランダのピザのフードトラック。

デン・ハーグのピザ・パスタのフードトラックのサイト。画面上部には「3000件以上のケータリング」「評価4.6」「1時間に480〜600枚」の帯が固定され、その下のヘッダーに黄色の「Boek een truck(トラックを予約)」。ファーストビューは店員5人の写真に「現地でピザのフードトラックを借りる」の見出し、レビュー4.6の星、「1人€10から」の一文。続いて取引先のロゴ、3人の友人で始めた店の話、6台のトラックの能力と大きさ、申し込みから焼き上げまでの4ステップ、Google の評価と受賞、名前つきの利用者の声、5つの強み、ピザとパスタのメニュー、求人。予約ページは人数・場所・日付・時間を入れるフォーム。

  1. 01 実績の数字(件数・評価・1時間の枚数)を画面上部の帯に固定し、どこまで読んでも目に入るようにする
  2. 02 「1人€10から」と料金の目安をファーストビューに書き、見積もり前の不安を減らす
  3. 03 見積もり→仕込み→設営→焼き上げの4ステップと「24時間以内に連絡」で、頼んだ後の流れを先に見せる

Conversion

集客の工夫

  • 予約ボタンの常設 (あり) ヘッダーに「Boek een truck」(SPは「Boeken」)
  • 実績の数字 (あり) 上部の帯に3000件以上・評価4.6・1時間480〜600枚
  • 料金の目安 (あり) ファーストビューに「1人€10から」
  • 申し込みの流れ (あり) 見積もり・仕込み・設営・焼き上げの4ステップ
  • 返信の目安 (あり) 「24時間以内に連絡」と明記
  • 利用者の声 (あり) Google の評価4.6と、名前・会社名つきの声4件
  • 電話・メール (あり) tel:リンク 1か所・mailto:リンク 1か所
  • 言語の切り替え (なし) オランダ語のみ

比べられる数字を、画面の一番上に置く

画面の一番上には「3000件以上のケータリング」「評価4.6」「1時間に480〜600枚」の帯があり、スクロールしても消えません。フードトラックを探す人は何社かを比べます。件数・評価・処理能力という、比べられる数字を常に見せています。

料金の目安と、頼んだ後の流れを先に見せる

ファーストビューの説明には「1人€10から」とあります。その下には、見積もりの依頼、72時間前からの生地の仕込み、開始1〜2.5時間前の設営、焼き上げという4つのステップが並び、問い合わせには24時間以内に連絡すると書かれています。金額と段取りが分かるので、初めての人でも頼みやすくなります。

名前つきの声と、窓口がひとつという約束

Google の評価4.6と2つの受賞に続き、名前と会社名つきの利用者の声が4件。強みの欄には「窓口は1人」「食器と2.5時間のスタッフ込み」「初期費用なし」と、頼む側が気にする条件がはっきり書かれています。予約ページは人数・場所・日付・時間を入れるだけのフォームです。

チェック項目は 2026.10.28 に実ブラウザで描画したトップページ(PC 1440px・SP 375px)を確認したものです。

Colour

配色

  • #F2EDE9 背景(生成り)
  • #0F2C56 見出し・本文・上部の帯(紺)
  • #E3AF04 予約ボタン(黄)
  • #C0DEEE 説明文のカード(水色)
  • #4F3C2C 写真まわりの濃い面(茶)

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

Typography

フォント

用途 使用フォント 無料で近いもの
見出し・数字 Salo Anton
本文 Azeret Mono Azeret Mono(Google Fonts)
ボタン・小見出し Awesome Serif Fraunces(Italic)
手書きの添え書き La Belle Aurore La Belle Aurore(Google Fonts)
要素 PC サイズ / 太さ PC 行間 SP サイズ / 太さ
h1 66px / 400 0.78 47px / 400
h2 96px / 400 0.78 31px / 400
h3 60px / 400 0.78 44px / 400
本文(p) 12px / 500 1.30 9px / 500
ボタン 12px / 500 1.30 16px / 700

実測値(PC 1440px・SP 375px、2026.10.28 計測)。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

Structure

ページ構成(上から順に)

  1. 01 ヘッダー 上部に実績の帯(3000件以上・評価4.6・1時間480〜600枚)。ピザ・パスタのトラック、事例、店について、連絡先と「トラックを予約」のボタン。上部に固定。 ヘッダー/ロゴ+横並びナビ型
  2. 02 ファーストビュー トラックに並ぶ店員5人の写真に「現地でピザのフードトラックを借りる」。レビュー4.6、「1人€10から」の説明と「トラックを見る」のボタン。 ファーストビュー/全面写真+コピー型
  3. 03 取引先 「このお客さまが先に利用しました」と取引先のロゴ。 信頼/ロゴ帯型
  4. 04 店の話 3人の友人で始めたこと、ナポリ風ピザの特徴、2台の窯で4分に12枚焼けること。1250以上のフェスと3000以上のケータリング。 コンセプト/写真+メッセージ型
  5. 05 6台のトラック トラックごとに1時間に焼ける枚数(275〜600)と大きさ、「このトラックについて」のリンク。 一覧/カード並び型
  6. 06 申し込みの流れ 見積もりの依頼、72時間前からの生地の仕込み、開始1〜2.5時間前の設営、焼き上げの4ステップ。 進め方/番号つきステップ型
  7. 07 評価と利用者の声 Google の評価4.6、2つの受賞、名前と会社名つきの声4件。 推薦/利用者の声型
  8. 08 5つの強み 焼く速さ、受賞、経験、材料、窓口が1人で食器と2.5時間のスタッフ込み・初期費用なし。 機能・強み/左右交互型
  9. 09 ピザとパスタ 50人からのピザのケータリングとパスタのメニュー。 一覧/カード並び型
  10. 10 求人 認定の職業訓練先であることと、97人のチーム。 コンセプト/写真+メッセージ型
  11. 11 フッター トラック・事例・店について・連絡先のリンク、住所・電話・メール。 フッター/ナビ+会社情報型

Download

ワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

Pizza Amiciの構成を DevNJ の部品で組んだワイヤーフレーム(PC)
PC(1440px)
Pizza Amiciのワイヤーフレーム(スマホ)
スマホ(375px)

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ&ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります(フォントは Noto Sans JP)。

Reproduce

このサイトを参考にするときのポイント

  1. 01 件数・評価・処理能力など、比べられる数字を画面上部の帯に固定する
  2. 02 「1人◯円から」など料金の目安を最初の画面に書く
  3. 03 申し込みから当日までの流れを番号つきで見せ、返信までの時間も書く
  4. 04 持っている設備(車両や機械)を、能力と大きさつきのカードで並べる

FAQ

よくある質問

Pizza Amici のサイトで使われているフォントは?

見出しと数字は細長い Salo、本文は等幅の Azeret Mono、ボタンは Awesome Serif、添え書きは手書き風の La Belle Aurore です。Azeret Mono と La Belle Aurore は Google Fonts にあり、Salo の代わりには Anton などの縦長の書体が候補です。

出張サービスのサイトで、料金を最初に見せてもいいですか?

Pizza Amici は「1人€10から」とだけ書き、詳しい金額は見積もりで出しています。目安が分かると「高すぎて頼めないかも」という心配が減り、見積もりの依頼につながりやすくなります。

どんな業種の参考になりますか?

キッチンカー、ケータリング、出張料理、イベントの機材レンタルなど、日時と場所を決めて頼まれる仕事に向きます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はPizza Amiciおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention

More

ほかの Awwwards の参考サイト

Tandjung Sariのトップページ ワイヤーDL

Awwwards ·インドネシア(バリ島サヌール) ·2026.11.01

Tandjung Sari

「客室の予約」と「席の予約」の2つのボタンを常に見せ、食事の予約は WhatsApp で受けるバリ島サヌールの家族経営のホテル。

Health+のトップページ ワイヤーDL

Awwwards ·チェコ(プラハ) ·2026.10.31

Health+

申し込みボタンと会員ページの入口をヘッダーに置き、拠点数・対象別の入口・利用者の声で迷わず選べるようにしたプラハの総合クリニック。

デザイン参考をすべて見る →

From reference to your site

Pizza Amiciのような構成を、御社のサイトに。

「このサイトのような構成で」とお伝えいただくだけで構いません。現状のサイトを拝見し、業種と読み手に合わせた構成案をお持ちします。

無料で相談する →