E-commerceOverseas / USPicked 2026.09.26

Partake Foods

ECのWebデザイン参考 — 食品・アレルギー対応スナック

出典: partakefoods.com

Editor's note — 編集部の視点

ボタンも見出しも、ぜんぶお菓子のステッカー。

アレルギー対応クッキーのPartake FoodsのECサイトは、影を落とした色ブロックと斜めのラベルをUI全体に貼り、パッケージの陽気さを買い物の手触りにしている。

IrisColor & Brand

地が真っ白じゃなくて、#fff6eb のクリーム色なのがすき。青もマゼンタも原色なのに、焼きたてのクッキー缶を開けたときみたいな、あったかい甘さが残ってるの。

1ボタンは濃い影を落とした立体の色ブロック。押したくなる手触りが、お菓子売り場のノリをつくる
2落ちてくるクッキーの周りに「ALWAYS GLUTEN FREE」の斜めラベル。安心の情報を、楽しい言葉で先に配る
3商品カードは味ごとにパッケージと同系色の背景。横に流すだけで、フレーバーの違いが色で伝わる

Color

Partake Foodsの配色

Typography

使用フォントと無料の代替

大見出し

Aa あア

使用: Bunch Bold
代替: Bricolage Grotesque

ボタン・ラベル・ナビ

Aa あア

使用: Toroka Condensed Bold
代替: Barlow Semi Condensed

本文

Aa あア

使用: Gilroy Medium
代替: Outfit

強調テキスト

Aa あア

使用: Gellix
代替: Manrope

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型86.4px · 1 · 400
小見出しKatapick 型13px · 1.3 · 400
本文The quick brown fox — 参考を型にする32.5px · 1.2 · 400
ボタンKatapick 型27px · 1 · 400
注釈The quick brown fox — 参考を型にする20px · 1.5 · 400

Structure

ページ構成（上から順）

01
告知バー・ヘッダー
マゼンタの告知バーの下に、影付きの青いブロックでロゴ・メニュー・SHOP・FIND IN STORE・検索・カートを並べる。
02
ヒーロー
クッキーとパッケージ、スプリンクルを散らした全面写真。左に「Partake in Daily Sweetness」と EXPLORE FLAVORS、右に「BETTER FOR YOU」などの斜めラベルを貼る。
03
マーキー帯・商品カルーセル
黄色の帯に DELICIOUS などの言葉を流し、「All the Tasties, None of the FOMO」の下に味ごとの色背景を持つ商品カードを矢印付きで横に並べる。
04
取扱店
青い角丸パネルに「11,000+ Retailers Are Totally Sweet On Us」と小売チェーンのロゴを並べ、FIND US IN STORE へ誘導する。
05
Leave No Taste Buds Behind
黄色いタイルの上に落ちて砕けるクッキーの写真を中央に置き、周りに WHOLESOME INGREDIENTS / TOP 9 ALLERGEN FREE / ALWAYS GLUTEN FREE / SAFE FOR SCHOOL のラベルを散らす。
06
A Recipe For Inclusivity
マゼンタのパネルに創業者と娘の写真、手書き風の名札、ブランドの成り立ちと LEARN MORE。
07
Certified Tasty
クッキーを敷き詰めた写真を背景に、星付きレビューを色違いのカードでカルーセル表示する。
08
SNS・フッター
「Daily Dimple-Popping Joy」とSNS投稿のカード、SNSアイコン、再びマーキー帯。紺のフッターにナビ、メール登録、認証マークを並べる。

Interaction

アニメーション・インタラクション

技術スタックに GSAP があり、ラベルやクッキーが画面に入るときに動く演出に使われていると思われる。ScrollTrigger でラベルを回転・拡大させながら出すと再現可能
ヘッダーのボタン群はスクロール中も固定表示。左下の「GET 20% OFF」も常時表示の固定CTAになっている
黄色の帯は同じ文字列を2つ並べて translateX でループさせる無限マーキーで再現できる
商品とレビューは左右の矢印で送るカルーセル。Shopify テーマなら Swiper などのスライダーを組み込むと作りやすい

スクロールのコマ撮り100–2000ms

検出された技術:GSAPShopifyGoogle Fonts

Reproduce

再現するときのポイント

01ボタンは角をわずかに丸めた色ブロックに、ずらした濃色の box-shadow（ぼかしなし）を付けて立体感を出す
02ラベルは2〜3行を少しずつずらして重ね、全体を -10〜15度ほど傾けてステッカーのように貼る
03背景は純白ではなく #fff6eb のクリーム色にし、原色の多い配色でも焼き菓子の温かさを残す
04見出しは太いグロテスク体に淡い色の影を付け、パッケージの印刷っぽさを出す

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

partake-foods.katapick.md

1---
2title: "Partake Foods 再現用デザイン仕様書"
3source: https://partakefoods.com/
4katapick: https://katapick.com/sites/partake-foods
5category: EC
6region: 海外 (US)
7tags: [ビビッド, 写真主体, 大胆なタイポ, カルーセル, マーキー, 固定CTA]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# Partake Foods — 再現用デザイン仕様書
17 
18> ボタンも見出しも、ぜんぶお菓子のステッカー。アレルギー対応クッキーのPartake FoodsのECサイトは、影を落とした色ブロックと斜めのラベルをUI全体に貼り、パッケージの陽気さを買い物の手触りにしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22