出典：caffegilli.com ↗ 確認日 2026.10.28
Editor's note
編集部の視点
「1733年から」の一文で老舗であることを伝え、菓子・チョコレート・ビストロ・カクテルバーの4つの入口と通販への導線を1ページに並べるフィレンツェのカフェ。
フィレンツェの Via Roma にある、1733年創業のカフェのサイト。ヘッダーにはメニュー、「SHOP」のボタン、中央のロゴ、言語切替、ログイン、カートが並び、上部に固定される。ファーストビューは店内の時計などを映す大きな動画で、その下に「街の中心に、街を心に。1733年から」の見出し。続いて菓子、チョコレート、届ける商品（「PURCHASE NOW」）、ビストロ、カクテルバー、店の歴史を写真と短い文で順に紹介し、フッターに住所・メール・電話。
- 01 創業年を見出しの一文に入れ、説明より先に老舗であることを伝える
- 02 菓子・チョコレート・ビストロ・カクテルバーと、業態ごとに写真と短い文の入口を分ける
- 03 店に来られない人のために、ヘッダーの「SHOP」と本文の「PURCHASE NOW」から通販へつなぐ
Conversion
集客の工夫
- 創業年 （あり） 見出しに「SINCE 1733」
- 通販への導線 （あり） ヘッダーに「SHOP」とカート、本文に「PURCHASE NOW」
- 業態別の入口 （あり） 菓子・チョコレート・ビストロ・カクテルバーの4つ
- 所在地 （あり） フッターに住所（Via Roma 1/R）
- 電話・メール （あり） tel:リンク 2か所・mailto:リンク 1か所
- 言語の切り替え （あり） イタリア語・英語
- 会員ログイン （あり） ヘッダーに Login
- 営業時間の明記 （なし） トップページには無い
創業年を、見出しの一文に入れる
動画の下の見出しは「街の中心に、街を心に。1733年から」。店の歴史を長く説明する前に、創業年を一文に入れて老舗であることを伝えています。最後の区切りでも、フィレンツェで続いてきた店の歩みを短くまとめています。
業態ごとに、入口を分ける
菓子、チョコレート、ビストロ、カクテルバー。Caffè Gilli には目的の違う4つの顔があります。トップページでは業態ごとに写真1枚と短い文、「詳しく見る」のリンクを用意し、菓子を買いたい人も、夜に一杯飲みたい人も、自分の入口を見つけられます。
来られない人を、通販につなぐ
ヘッダーには「SHOP」のボタンとカートが常に表示され、本文にも「どこにいても届ける」の一文と「PURCHASE NOW」のボタンがあります。観光で一度訪れた人や遠くに住む人を、店の外でもお客さんにする導線です。フッターには住所・電話・メールがあります。
チェック項目は 2026.10.28 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FCFCFC 背景
- #142342 見出し・本文・ロゴ（紺）
- #FBF9F1 淡い背景（クリーム）
- #A9BDCC 区切りの面（青みのグレー）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 大きな見出し | Cosen | Cormorant Garamond |
| 本文・小見出し・ボタン | Greycliff CF | Nunito Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 54px / 400 | 1.00 | 36px / 400 |
| h2 | 16px / 400 | 1.40 | 36px / 400 |
| h3 | 16px / 600 | 1.40 | 16px / 600 |
| 本文（p） | 16px / 400 | 1.40 | 16px / 400 |
| ボタン | 16px / 400 | 1.10 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.28 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー メニュー、「SHOP」のボタン、中央のロゴ、言語切替、ログイン、カート。上部に固定。 ヘッダー／カテゴリ＋カート型
- 02 ファーストビュー 店内の時計などを映す大きな動画。 ファーストビュー／全面動画＋コピー型
- 03 見出し 「街の中心に、街を心に。1733年から」の一文。 メッセージ／大きな一文型
- 04 菓子 素材と手仕事を語る短い文と写真。 コンセプト／写真＋メッセージ型
- 05 チョコレート 19世紀からのトスカーナのチョコレートの話と写真。 コンセプト／写真＋メッセージ型
- 06 通販 「どこにいても届ける」の一文と全幅の写真。 行動喚起／ボタン帯型
- 07 ビストロとカクテルバー 昼から夜までのビストロと、カクテルバーを写真つきで並べる。 一覧／カード並び型
- 08 店の歴史 1733年から続くフィレンツェの店としての歩み。 コンセプト／写真＋メッセージ型
- 09 フッター 住所・メール・電話、採用、規約、Instagram・Facebook。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 創業年は、見出しの一文に入れて最初に見せる
- 02 喫茶・物販・食事など業態が複数ある店は、業態ごとに写真と短い文の入口を作る
- 03 来店できない人向けに、ヘッダーと本文の両方から通販へつなぐ
- 04 トップページにも営業時間を書いておくと、来店前の確認が1回で済む
FAQ
よくある質問
Caffè Gilli のサイトで使われているフォントは？
大きな見出しは Cosen、本文と小見出しは Greycliff CF です。どちらも有料なので、無料で近づけるなら見出しに Cormorant Garamond、本文に Nunito Sans などが候補です。
業態が多い店は、トップページをどう分ければいいですか？
Caffè Gilli は菓子・チョコレート・ビストロ・カクテルバーを、それぞれ写真1枚と短い文、「詳しく見る」のリンクで縦に並べています。1つの区切りで1つの業態だけを語ると、目当ての人が迷いません。
どんな業種の参考になりますか？
喫茶と物販を兼ねる和菓子店・洋菓子店、老舗の甘味処、通販も手がける飲食店などに向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はCaffè Gilliおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
