# Aardvark Book Club｜ECのWebデザイン参考

> 黄色い波の上を、ハードカバーが宙に舞ってる。米国の本の定期便Aardvark Book Clubのサイトは、極太の見出しとうねる色面、宙に浮かぶ本で、“今月の一冊を選ぶ”ことをお祭りみたいに楽しく見せている。

- URL: https://www.aardvarkbookclub.com/
- 解説ページ: https://katapick.com/sites/aardvark-book-club
- カテゴリ: EC / 地域: 海外（US）/ 業種: 本のサブスクリプション
- テイスト: ビビッド、大胆なタイポ、手書き文字、角丸、固定ナビ、イラスト
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

## 編集部のひとこと（Iris）
黄色の地に、CTAだけ蛍光っぽいピンクをのせてるのがすき。バナナの皮に貼られたシールみたいに、ぱっと目に飛びこんでくるの。色がこんなに多いのに、押す場所だけは迷わない感じ。

## デザインの見どころ
- ジャンル名だけを極太で10行積んだマゼンタの章。説明より先に、読みたい棚を探させる
- 「How it works」は4色のカードを少しずつ傾けて並べる。手順の説明まで、トランプを配るように軽い
- 配送エリアは手書きのメモ風に添える。事務的な情報まで、友だちの走り書きみたいに読める

## 配色
- #ffd24a Sunflower（背景（FV））
- #faed8f Butter（背景の色面 / ピルナビ）
- #fd48f2 Hot Magenta（セクション背景）
- #a4f6f8 Aqua Mist（セクション背景 / FAQ）
- #ff008c Pink Punch（CTAボタン）
- #000000 Ink（テキスト / 見出し）

## フォント
- 見出し: Champ（代替: Bricolage Grotesque（ExtraBold））
- 本文・ナビ・ボタン: Degular（代替: Figtree）
- 手書きの添え書き: Hello Organichand（代替: Caveat）

## よくある質問
### Aardvark Book Clubのサイトのフォントは？
見出しに Champ、本文とナビに Degular、手書きの添え書きに Hello Organichand が使われています。無料で近づけるなら Bricolage Grotesque（ExtraBold）、Figtree、Caveat の組み合わせがおすすめです。

### Aardvark Book Clubのような弧を描く見出しはどう作る？
SVG の path に沿って textPath で文字を配置します。path の形をアニメーションさせれば、スクロールに合わせて文字がうねる表現にも発展できます。

### どんな業種の参考になる？
本や雑貨の定期便、D2Cのサブスクリプション、書店・出版社のキャンペーンなど、商品を選ぶ楽しさそのものを伝えたいECサイトの参考になります。

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