# Apocalypse Coffee Roasters｜ECのWebデザイン参考

> コーヒー豆の袋まで、終末ネタで振り切ってる。フロリダの焙煎所Apocalypse Coffee RoastersのECは、手書きのオレンジと極太の見出し、UFOが舞う袋で、オーガニックの真面目さをB級SFのノリで包む。

- URL: https://apocalypsecoffee.com/
- 解説ページ: https://katapick.com/sites/apocalypse-coffee-roasters
- カテゴリ: EC / 地域: 海外（US）/ 業種: コーヒーロースター
- テイスト: 大胆なタイポ、手書き文字、等幅フォント、カルーセル、レトロ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

## 編集部のひとこと（Iris）
明るいベージュと真っ黒を、破ったようなギザギザでつなぐのがすき。コーヒー豆にだけピンクや青の影をずらして付けてて、焙煎所なのにステッカーみたいな軽さが出てるの。

## デザインの見どころ
- 見出しは手書きのオレンジと極太の黒を1行ずつ。ボケとツッコミの間で、店の人柄が先に届く
- 売れ筋は1袋だけに青い網点のスポットライト。商品を棚ではなく、舞台の上で見せている
- 年表は新聞の切り抜きを糸でつなぐ陰謀論ボード風。家族の創業史が、笑える読み物に変わる

## 配色
- #f0ede8 Bone Paper（背景（ヒーロー） / ダーク面のテキスト）
- #0d0d0d Doomsday Black（ダークセクション背景）
- #e06d2d Burnt Orange（アクセント / CTA）
- #3aaae0 Fallout Blue（スポットライト / 差し色）
- #3d3830 Roast Brown（本文テキスト）
- #9673b1 Precision Purple（見出しの差し色）

## フォント
- 手書き風の見出し（IT'S THE END… など）: Lovely Mess（代替: Permanent Marker）
- 極太の見出し: Arnel（代替: Anton）
- ラベル・ボタン: Akzidenz Grotesk BE（代替: Archivo）
- 本文・バッジ: DM Mono（代替: DM Mono）

## よくある質問
### Apocalypse Coffee Roastersのサイトのフォントは？
手書き風の見出しに Lovely Mess、極太の見出しに Arnel、ラベルやボタンに Akzidenz Grotesk BE、本文に DM Mono が使われています。無料で近づけるなら Permanent Marker、Anton、Archivo、DM Mono の組み合わせがおすすめです。

### 中央の商品だけにスポットライトが当たるカルーセルはどう作る？
Swiper などのスライダーで中央のスライドにクラスを付け、それ以外に filter: brightness(0.4) と scale(0.85) をかけます。中央の背面に網点パターン（radial-gradient の繰り返し）を clip-path で台形に切った要素を置くと、スポットライトの見た目になります。

### どんな業種の参考になる？
コーヒー・クラフトビール・食品などのD2Cブランドや、個性の強い小規模ブランドのオンラインストアの参考になります。ユーモアのあるコピーを軸にECを組みたいときに向いています。

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