Apocalypse Coffee Roasters

1. 01

   ヘッダー

   左にオレンジのメニューボタン、中央に砂時計入りの円形エンブレム、右にカートボタン。ボタン類は黒いオフセット影付き。

2. 02

   ヒーロー

   「CERTIFIED ORGANIC」などのバッジ2つ、「IT'S THE END… OF BAD COFFEE.」の2段見出し、等幅の本文、SHOP COFFEE / VISIT OUR CAFES の導線。右に3袋のパッケージと「BUY BUNDLE」のラベル、周囲に色付きの影を持つコーヒー豆を散らす。下端は破れたようなギザギザで黒へ切り替わる。

3. 03

   REVIEWS（Tasted and Approved）

   黒地に角丸のレビューカードを横に並べ、手書き風の下線付きの一文で締める。

4. 04

   WHY APOCALYPSE（What Sets Us Apart）

   オーガニック・少量焙煎・家族経営など6つの価値を、色違いの線画アイコンと短文で3列2段に並べる。

5. 05

   BEST SELLERS（Fuel For Survival）

   中央の1袋だけを青い網点のスポットライトで照らし、左右の袋を暗く沈めたカルーセル。価格タグ、フレーバーのタグ、焙煎度のゲージを添える。

6. 06

   ピラー（Organic / Traceable / Precision）

   手書きの色付き単語と極太見出し、等幅の本文を縦に積み、角を崩した枠の焙煎写真を添える3つの約束。

7. 07

   タイムライン

   新聞の切り抜きを色糸でつないだボードの上に、線画イラスト付きの年表カードを横に並べる。

8. 08

   CTA / 定期便

   見出し「Ready for the Coffee Revolution?」の締めのCTAと、「Get Coffee on Your Schedule.」の定期便の案内が続く。

9. 09

   フッター

   ナビゲーションとショップ情報。右端には「SAVE 10%」のタブが常に表示される。

• ヒーローのコーヒー豆は、色付きの影をずらした切り抜き画像を散らしたもの。ロードやスクロールに合わせた transform のアニメーションで再現可能
• Lenis による慣性スクロールで、長いダークセクションも滑らかに流れる
• ボタンやバッジは黒いオフセットの box-shadow。ホバーで translate して影を縮めると、押し込む手触りが出せる
• ベストセラーは中央の1枚だけ明るくするカルーセル。左右のスライドは filter: brightness と scale を下げ、中央に網点の円錐形スポットライトを重ねる
• 右端の「SAVE 10%」は position: fixed のタブで、どのセクションでも割引の入口が見える

スクロールのコマ撮りLenis · 160–900ms

検出された技術:LenisShopifyGoogle Fonts

• 01見出しは手書き風の書体と極太のコンデンス書体を1行ずつ組み合わせ、色もオレンジと黒で分ける
• 02本文は DM Mono の等幅にして、タイプライターのような語り口にそろえる
• 03ボタン・バッジ・カードは黒いオフセット影で統一し、ステッカーのような立体感を出す
• 04明るいベージュのヒーローから黒のセクションへは、SVG のギザギザで破ったようにつなぐ

1---
2title: "Apocalypse Coffee Roasters 再現用デザイン仕様書"
3source: https://apocalypsecoffee.com/
4katapick: https://katapick.com/sites/apocalypse-coffee-roasters
5category: EC
6region: 海外 (US)
7tags: [大胆なタイポ, 手書き文字, 等幅フォント, カルーセル, レトロ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# Apocalypse Coffee Roasters — 再現用デザイン仕様書
17 
18> コーヒー豆の袋まで、終末ネタで振り切ってる。フロリダの焙煎所Apocalypse Coffee RoastersのECは、手書きのオレンジと極太の見出し、UFOが舞う袋で、オーガニックの真面目さをB級SFのノリで包む。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22