海外情報の順序
食品・生活用品 / ポップ
Snackish
淡い黄色のUIと学校生活を思わせる商品映像を合わせ、味の説明より先にブランドの気分を伝えるスナックサイト。
設計の見どころ
上部の販売店案内に続き、季節企画の商品映像、全商品への入口、映像コンテンツ、メール登録が並ぶ。商品の機能を長文で積み上げるより、ブランドと接触する場面を先に作る構成。販売店を探す入口もあり、サイト内購入だけに行き先を限定していない。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
情報の順序
冒頭の購入入口の後に三本セットや新商品を紹介し、鮮度の説明から用途別のオイル比較、料理例、生産地の背景へ進む。商品を選ぶ段階と、その選び方を学ぶ段階が連続している。種類を増やすだけでなく、仕上げ・調理・高温調理という違いを明示する点が特徴だ。
視覚的な優先順位
クリーム色の地にライムグリーンの大きな面を置き、濃い緑の文字で見出しを立てている。三本セットの部分は左に大見出しとボタン、右にボトル写真という明快な二分構成。商品色と背景色を重ねることで、パッケージを見た時の印象がUIへ続いている。
写真と商品の伝え方
セット写真ではキャップの色と容器の大きさが比較でき、個別商品には用途・味の方向・容量が添えられている。写真でブランドを覚え、文字で使い分けを判断する設計と読める。料理の動詞を並べたレシピ入口もあり、商品の種類から調理の場面へ自然に移れる。
行動への導線
セットには専用の購入ボタン、新商品のチップスには販売先を探す入口、個別の油には商品への入口が用意される。全てを同じ購入ボタンにせず、販売方法に合わせて動詞を変えている。補充用の商品にも上部から進めるが、注文や定期購入の操作までは行っていない。
日本の事業に取り入れる条件
用途の異なる調味料、茶葉、洗剤などに応用するなら、素材名だけで分類せず、いつ何に使うかを比較軸にする。三つ程度の代表商品を同じ項目で並べると違いを説明しやすい。色だけに依存せず、日本語の用途ラベルと容量も読み取れる構成を維持したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
商品を素材名だけで分けず、仕上げ・普段の調理・高温調理のような行動で比較する。容器の違い、用途、容量を同じ位置に置いて選びやすくする。
そのまま真似する前に
強い配色と遊びのある文字は長い説明には向きにくい。大きな色面は商品紹介に限定し、原材料・保存方法・購入条件は落ち着いて読める別の領域に置く。
次に見ておきたい参考
一覧へ →海外海外情報の順序
食品・生活用品 / ポップ
Fishwife
カラフルな缶詰の集合写真に用途と買い方を重ね、日常の食材と贈り物の両方として案内する食品EC。
設計の見どころ
冒頭の商品集合と購入入口から、缶詰・ギフト・セットなどの分類へ進み、使う場面、初回向けセット、比較表、製造背景、レシピへ続く。まず何が買えるかを見せ、後から使いこなしと背景を補う順番。初めての人には専用のセット紹介がある。
詳しい解説を読む →公式サイトを見る ↗海外Noma Projects
食品・生活用品 / エディトリアル
情報の順序
食品・生活用品 / エディトリアル
Noma Projects
木の棚に並ぶ調味料から商品一覧、製法の背景、料理例へ進み、専門的な味を家庭で使う理由まで説明するEC。
設計の見どころ
キャンペーンの大きな写真の下に商品一覧を置き、続いてブランドの成り立ちや自然・製法の説明、レシピ、ニュース、ギフト商品、FAQへ進む。専門的な背景を読む前にも商品を選べる一方、用途が分からない人には後半で料理例を渡す二段構えになっている。
詳しい解説を読む →公式サイトを見る ↗