海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
素材の前に使う場面を選ばせる
冒頭はデスクでストールを着ける人物を大きく見せ、本文では室内外の温度差を説明してから商品へ進む。ナビゲーションには商品分類のほか、仕事、ソファ、移動、旅行という用途も用意する。素材に詳しくない人も自分の場面から探せる構造だ。
淡い背景色で布の輪郭を残す
人物写真の背景は青みのある淡いグレーで、ベージュや緑の布が過度なコントラストなく浮かぶ。白い商品一覧では価格と商品名を小さく揃え、写真の下に丸い色見本を置く。大きな着用写真と、比較に使う情報の位置が整理されている。
着用と単品の写真を同じ列で見比べる
商品列には椅子に座って布を掛けた人物と、ストール単体の写真が並ぶ。巻いた時の大きさや暮らしの場面を想像しつつ、形そのものも確認できる見せ方だ。カードには色、名前、価格が添えられ、写真だけで選択させない構成になっている。
一覧から先へ進める入口を複数にする
冒頭には全商品を見る入口があり、商品列では詳細への移動とカートへ追加するボタンが見える。上部の検索・アカウント・バッグは小さなアイコンにまとめる。割引の購読案内も表示されたが、閉じた後に商品閲覧を続けられることを確認した。
生活用品は困る場面の言葉で分類する
国内の衣料品や生活雑貨でも、素材・商品名だけでなく、在宅仕事、外出、贈り物といった選択軸を重ねる方法が使える。用途別に同じ商品が登場しても、サイズや素材の表記を統一することが条件だ。日本語では着用寸法も具体的に添えたい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
素材別の分類に加え、仕事・移動・贈り物など使う場面の入口を設ける。商品カードは着用写真、色、商品名、価格を同じ順に揃えて比較させる。
そのまま真似する前に
用途の分類を増やしすぎると同じ商品を何度も探すことになる。主要な場面に絞り、実寸・素材・手入れの説明へ一貫して到達できるようにする。
次に見ておきたい参考
一覧へ →海外海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗国内THE BUTTER
飲食 / 写真中心
素材と料理を二枚でつなぐ
飲食 / 写真中心
THE BUTTER
バターの接写とトーストを二分画面で並べ、素材と提供体験を同時に見せる店舗サイト。
設計の見どころ
冒頭はバターの表面を写した接写と、皿に盛られたトーストを左右に配置する。中央に大きな店名を重ねることで、何を使い、どんな状態で提供する店かを一画面で伝えている。食材の写真と完成品の写真を一組にする方法が明快だ。
詳しい解説を読む →公式サイトを見る ↗