海外情報の順序
食品・生活用品 / ポップ
Fishwife
カラフルな缶詰の集合写真に用途と買い方を重ね、日常の食材と贈り物の両方として案内する食品EC。
設計の見どころ
冒頭の商品集合と購入入口から、缶詰・ギフト・セットなどの分類へ進み、使う場面、初回向けセット、比較表、製造背景、レシピへ続く。まず何が買えるかを見せ、後から使いこなしと背景を補う順番。初めての人には専用のセット紹介がある。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
情報の順序
上部の販売店案内に続き、季節企画の商品映像、全商品への入口、映像コンテンツ、メール登録が並ぶ。商品の機能を長文で積み上げるより、ブランドと接触する場面を先に作る構成。販売店を探す入口もあり、サイト内購入だけに行き先を限定していない。
視覚的な優先順位
淡い黄色のヘッダーと茶色の細い縁取り、丸みのある文字・ボタンが画面全体で揃っている。商品パッケージの黄色も同じ配色に接続する。可愛い装飾を点在させるだけでなく、ナビゲーションまで商品の表情と合わせることで一貫性を生んでいる。
写真と商品の伝え方
冒頭の映像では袋単体に加え、衣類や小物と一緒に商品を置いた場面が見える。棚の中の食品というより、持ち歩く生活の一部として示していると読める。パッケージが十分大きく写るため、気分の演出と実物の認識が離れすぎない。
行動への導線
季節企画へのボタンと全商品へのボタンを分け、上部には販売店を探す導線を残している。見えている商品の続きへ進む入口と、品揃えを俯瞰する入口の役割が異なる。DOMには購入準備中を示す文言もあり、決済の稼働状態は今回の確認範囲に含めない。
日本の事業に取り入れる条件
若い層向けの菓子や雑貨なら、商品色をナビゲーションとボタンへ展開する設計が使える。映像を作る場合も生活場面と商品名が一緒に見えるカットを用意したい。雰囲気だけで選べない食品では、味・量・アレルゲンなどの詳細へ近い入口を残す。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
パッケージの基調色と文字の丸みをUIにも引き継ぎ、季節企画と全商品を別のボタンで案内する。ブランドの気分と買い方を同じ画面で両立させる。
そのまま真似する前に
遊びのある名称や映像は初見の商品理解を遅らせる場合がある。販売中の商品、店頭への外部リンク、サイト内で買える商品を利用者が区別できる表示が必要。
次に見ておきたい参考
一覧へ →海外海外情報の順序
食品・生活用品 / ポップ
Graza
料理での使い分けを三本のボトルと用途ラベルで示し、オイルの違いを専門用語より台所の行動へ近づけるEC。
設計の見どころ
冒頭の購入入口の後に三本セットや新商品を紹介し、鮮度の説明から用途別のオイル比較、料理例、生産地の背景へ進む。商品を選ぶ段階と、その選び方を学ぶ段階が連続している。種類を増やすだけでなく、仕上げ・調理・高温調理という違いを明示する点が特徴だ。
詳しい解説を読む →公式サイトを見る ↗海外Noma Projects
食品・生活用品 / エディトリアル
情報の順序
食品・生活用品 / エディトリアル
Noma Projects
木の棚に並ぶ調味料から商品一覧、製法の背景、料理例へ進み、専門的な味を家庭で使う理由まで説明するEC。
設計の見どころ
キャンペーンの大きな写真の下に商品一覧を置き、続いてブランドの成り立ちや自然・製法の説明、レシピ、ニュース、ギフト商品、FAQへ進む。専門的な背景を読む前にも商品を選べる一方、用途が分からない人には後半で料理例を渡す二段構えになっている。
詳しい解説を読む →公式サイトを見る ↗