# Partake Foods｜ECのWebデザイン参考

> ボタンも見出しも、ぜんぶお菓子のステッカー。アレルギー対応クッキーのPartake FoodsのECサイトは、影を落とした色ブロックと斜めのラベルをUI全体に貼り、パッケージの陽気さを買い物の手触りにしている。

- URL: https://partakefoods.com/
- 解説ページ: https://katapick.com/sites/partake-foods
- カテゴリ: EC / 地域: 海外（US）/ 業種: 食品・アレルギー対応スナック
- テイスト: ビビッド、写真主体、大胆なタイポ、カルーセル、マーキー、固定CTA
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

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

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

## 配色
- #fff6eb Cookie Cream（背景）
- #00559b Blueberry Navy（見出し / フッター）
- #009ede Pool Blue（ロゴ / ナビボタン）
- #be008b Berry Magenta（CTA / 告知バー / パネル）
- #82d8e7 Frosting Aqua（商品カード / ラベル）
- #ffcd78 Butter Yellow（マーキー帯 / ラベル）

## フォント
- 大見出し: Bunch Bold（代替: Bricolage Grotesque）
- ボタン・ラベル・ナビ: Toroka Condensed Bold（代替: Barlow Semi Condensed）
- 本文: Gilroy Medium（代替: Outfit）
- 強調テキスト: Gellix（代替: Manrope）

## よくある質問
### Partake Foodsのサイトで使われているフォントは？
大見出しに Bunch Bold、ボタンやラベルに Toroka Condensed Bold、本文に Gilroy Medium が使われています。無料で近づけるなら Bricolage Grotesque、Barlow Semi Condensed、Outfit の組み合わせがおすすめです。

### Partake Foodsのような影付きの立体ボタンはどう作る？
背景色を塗ったボタンに、ぼかし0で右下にずらした濃い色の box-shadow を付けます。ホバー時に translate で影の方向へ少し沈ませると、押した手応えが出ます。

### Partake Foodsのデザインはどんなサイトの参考になる？
お菓子や飲料などの食品D2C、子ども向け商品、カラフルなパッケージを持つブランドのECサイトや商品LPの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/partake-foods からダウンロードできます。
出典: Katapick（https://katapick.com）