
Aardvark Book Club
月額の本のサブスクを Webflow で作り直した事例。スクロールで本が立ち上がる3D演出を、260冊超のCMSの上に載せている。
- クレジット
- FUTURE THREE®
- 使用技術
- WebflowGSAPBarba.js3Dスクロール連動
米国・カナダ向けの月額書籍サブスクリプション Aardvark Book Club のサイトリニューアル。月17.99ドル(カナダは25.99カナダドル)で新刊ハードカバーが1冊、追加は1冊10.99ドルという料金体系で、毎月のセレクションから最大3冊を選ぶサービスです。制作した FUTURE THREE® のケーススタディによると、デザイン・開発・コピー・英仏2言語のローカライズまで含めた作り直しで、CMS側は260冊以上のタイトル、520以上のタグ、47回分の月次リリースを Webflow で管理しています。
Awwwards のタグは 3D / GSAP / BARBA.js / Webflow で、挙げられているインタラクションはイントロアニメーション、スクロール連動で本が立ち上がる3D演出、ホバーによるジャンル探索、BARBA.js のページ遷移です。ただし公開されているケーススタディ側に3Dライブラリの名指しはなく、掲載されていたのは3Dの本を写した .mp4 でした。Webflow の制約下で3D表現をどう組み込むかという観点で見るサイトです。
【参考になるポイント】
・Awwwards スコア9.27(15票)はこのバッチで最も高い。多言語・大量CMSというECの実務要件と演出が両立している
・OGP画像は Webflow のCDN(cdn.prod.website-files.com)配信で、ファイル名が aardvark-seo-cover.png と用途で命名されている
・Webflow + BARBA.js というページ遷移の組み合わせ。Webflow標準の遷移では足りない部分を外部ライブラリで補っている
・※3D演出がリアルタイムWebGLなのか、動画や連番画像なのかは未確認。ケーススタディにライブラリ名の記載がなく、掲載アセットは .mp4 だった
