SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 海外

Madie

焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。

公式サイトを見る ↗
公式サイト / 掲載確認用
Madieの公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

焼き菓子と一杯を一つの写真にする

冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。

02

輪郭文字と太い文字で二つの背景を語る

左下ではフランスの菓子を表す言葉を輪郭文字、マドリードの朝を表す言葉を太い白文字で組み合わせる。商品の由来と店のある街が一つの見出しに収まる。写真の主役を避けた位置に短い説明とピンクのボタンを置き、雰囲気から味選びへ視線をつないでいる。

03

波形で伝統の話から商品へ切り替える

本文はクリーム色の背景に店の物語を中央寄せで置き、下辺を波形にして深い赤色の区画へ移る。輪郭文字と斜体の見出しも、冒頭と共通の表情を持つ。読み物と写真を見せる領域を色で分けながら、菓子らしい柔らかさを境界線にも取り入れている。

04

味と用途をメニューの分類にする

公開テキストのメニューは定番、特別な味、コーヒー、飲み物、持ち帰りの箱などに分かれる。同じ焼き菓子でも味の選択と買い方の選択を区別できる。初めての商品を扱う店では、名前だけを並べるより、どんな味かを短い言葉で添える構造が参考になる。

05

日常来店と特別注文の入口を分ける

ケータリングには注文への入口、日常の新作情報にはInstagram、来店には地図と曜日別営業時間が用意される。目的の違う客を一つの連絡先だけへ集約しない構成だ。写真で関心を持った後に、買う量や利用場面に合う次の行動を選べるようにしている。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

商品の由来と店舗のある街を短い見出しで結び、組み合わせて楽しむ写真を主役にできる。定番購入、箱詰め、特別注文、来店で入口を分けたい。

そのまま真似する前に

評価やレビュー数の表示は画面上の店側の掲載であり、内容や集客効果は検証していない。日替わりの味や曜日別営業時間は更新負担も考えて採用する必要がある。

次に見ておきたい参考

一覧へ →
Madieの公式サイト画面