E-commerceOverseas / USPicked 2026.09.26

Aardvark Book Club

ECのWebデザイン参考 — 本のサブスクリプション

出典: aardvarkbookclub.com

Editor's note — 編集部の視点

黄色い波の上を、ハードカバーが宙に舞ってる。

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

IrisColor & Brand

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

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

Color

Aardvark Book Clubの配色

Typography

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

見出し

Aa あア

使用: Champ
代替: Bricolage Grotesque（ExtraBold）

本文・ナビ・ボタン

Aa あア

使用: Degular
代替: Figtree

手書きの添え書き

Aa あア

使用: Hello Organichand
代替: Caveat

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

特大見出しKatapick 型120px · 0.8 · 700
見出しKatapick 型78px · 0.8 · 700
小見出しKatapick 型30px · 0.88 · 700
本文The quick brown fox — 参考を型にする15px · 1.2 · 600
ボタンKatapick 型15px · 1.5 · 700

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ「Aardvark BOOK CLUB」、中央に All Books / Gifting / Merch / FAQ のピル型ナビとオレンジの Log-in / Sign-up、右に英国向けストアへの切替とSNSアイコン。ピルナビはスクロール中も上部に表示。
02
ヒーロー
黄色の地にうねる淡黄とオレンジの色面を重ね、極太3行の「Unbox stories worth talking about」、ピンクのCTA、宙に浮かぶハードカバー、手書きの配送エリア表記を置く。
03
Our Sept books
「毎月1日に新刊を出す」というリードの下に、表紙・ジャンルタグ・あらすじを載せた色違いの角丸カードを横に並べ、矢印ボタンで送る。
04
How it works
淡いピンクの角丸パネルに、Explore our books / Build your box / Check your doorstop / Share your reads の4ステップを、色違いのカードと線画イラストで傾けて並べる。
05
ボックス紹介
水色の角丸パネルの中央に、うねる柄のオリジナル配送箱を開いた画像を置く。
06
Choose from
マゼンタの角丸パネルに、Horror から Contemporary Fiction までのジャンル名を極太で中央揃えに積み上げ、「and more!」で締める。
07
Why Aardvark?
円形のロゴを中心に、「Range of genres」「Free shipping」「Affordable」などの利点を色違いのピル型ラベルに入れて散らす。
08
Common questions・ギフト
水色のアコーディオンで3問を見せ「Show all FAQ」へ。続いて弧を描く「A gift outside of the box」の見出しとギフト用ボックス。
09
会員の選書・限定本・フッター
「Members’ Choice Winners」「Aardvark Exclusive」を経て、「Join our mailing list」のフッターで締める。

Interaction

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

宙に浮かぶハードカバーは、スクロールに合わせて回転・移動する GSAP のアニメーションと思われる。本の画像を transform で動かすだけでも近い動きを再現可能
スタックに Barba.js があり、ページ遷移はリロードせずにトランジションでつないでいると思われる
「A gift outside of the box」の弧を描く見出しは、SVG の textPath で文字を曲線に沿わせている（raw のフォント使用箇所に textpath あり）
Lenis の慣性スクロールで、色の違うパネルが続く長いページを滑らかに見せている

スクロールのコマ撮りLenis · 150–950ms

検出された技術:GSAPLenisBarba.jsWebflow

Reproduce

再現するときのポイント

01見出しは極太のディスプレイ体、本文はクセの少ないサンセリフ、添え書きは手書き体と3役に分ける
02セクションごとに黄・ピンク・水色・マゼンタと地の色を変え、角丸の大きなパネルで区切る
03背景に有機的なうねりのSVGシェイプを重ね、平面でも動きのある地を作る
04CTAは「ラベルのボタン＋矢印だけのボタン」の2連の形に統一する

再現MDに含まれるもの

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

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

aardvark-book-club.katapick.md

1---
2title: "Aardvark Book Club 再現用デザイン仕様書"
3source: https://www.aardvarkbookclub.com/
4katapick: https://katapick.com/sites/aardvark-book-club
5category: EC
6region: 海外 (US)
7tags: [ビビッド, 大胆なタイポ, 手書き文字, 角丸, 固定ナビ, イラスト]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# Aardvark Book Club — 再現用デザイン仕様書
17 
18> 黄色い波の上を、ハードカバーが宙に舞ってる。米国の本の定期便Aardvark Book Clubのサイトは、極太の見出しとうねる色面、宙に浮かぶ本で、“今月の一冊を選ぶ”ことをお祭りみたいに楽しく見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22