海外情報の順序
食品・生活用品 / ポップ
Snackish
淡い黄色のUIと学校生活を思わせる商品映像を合わせ、味の説明より先にブランドの気分を伝えるスナックサイト。
設計の見どころ
上部の販売店案内に続き、季節企画の商品映像、全商品への入口、映像コンテンツ、メール登録が並ぶ。商品の機能を長文で積み上げるより、ブランドと接触する場面を先に作る構成。販売店を探す入口もあり、サイト内購入だけに行き先を限定していない。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
情報の順序
冒頭の商品集合と購入入口から、缶詰・ギフト・セットなどの分類へ進み、使う場面、初回向けセット、比較表、製造背景、レシピへ続く。まず何が買えるかを見せ、後から使いこなしと背景を補う順番。初めての人には専用のセット紹介がある。
視覚的な優先順位
缶の細かなイラストを主役にしつつ、見出しと購入ボタンは半透明の明るい面にまとめている。写真の情報量が多くても文章を読む場所は一つに保たれる。太いセリフ体と黄色のボタンで目線を誘導し、画面の賑やかさと判断のしやすさを両立させている。
写真と商品の伝え方
背景写真にはパッケージと食材が積み重なる。色数の多い箱をそのままブランドの模様として扱い、缶詰の保存食的な印象を華やかに見せる工夫と読める。下部にはサンドイッチやパスタなどのレシピがあり、見た目の魅力から実際の食卓へ接続している。
行動への導線
ヒーローに通常購入とギフトの二つの入口を置き、ナビゲーションにもセット組み立て・レシピ・店舗検索を並べる。用途が決まっている人と、まず食べ方を知りたい人の両方を受け止める構造。初回表示の割引案内はEscapeで閉じ、入力や注文は行っていない。
日本の事業に取り入れる条件
地域の加工食品や缶詰を日常用と贈答用の両方で売る場合に参考になる。商品分類だけでなく、初めて買う人向けの少量セットと調理例を用意するのが要点。掲載されている比較・栄養・環境の表現はそのまま移さず、自社で裏づけられる説明に限定したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
商品の種類ではなく、普段使い・贈り物・初回セットという買う理由でも入口を作る。パッケージ写真の直後に、食卓での使い方を見せると理解をつなげやすい。
そのまま真似する前に
集合写真と装飾の情報量が多いため、商品名や価格の可読性は別に確保する。割引案内を出す場合も、閉じやすさと通常閲覧への復帰を優先する。
次に見ておきたい参考
一覧へ →海外海外情報の順序
食品・生活用品 / ポップ
Graza
料理での使い分けを三本のボトルと用途ラベルで示し、オイルの違いを専門用語より台所の行動へ近づけるEC。
設計の見どころ
冒頭の購入入口の後に三本セットや新商品を紹介し、鮮度の説明から用途別のオイル比較、料理例、生産地の背景へ進む。商品を選ぶ段階と、その選び方を学ぶ段階が連続している。種類を増やすだけでなく、仕上げ・調理・高温調理という違いを明示する点が特徴だ。
詳しい解説を読む →公式サイトを見る ↗海外Noma Projects
食品・生活用品 / エディトリアル
情報の順序
食品・生活用品 / エディトリアル
Noma Projects
木の棚に並ぶ調味料から商品一覧、製法の背景、料理例へ進み、専門的な味を家庭で使う理由まで説明するEC。
設計の見どころ
キャンペーンの大きな写真の下に商品一覧を置き、続いてブランドの成り立ちや自然・製法の説明、レシピ、ニュース、ギフト商品、FAQへ進む。専門的な背景を読む前にも商品を選べる一方、用途が分からない人には後半で料理例を渡す二段構えになっている。
詳しい解説を読む →公式サイトを見る ↗