# Onyx Coffee LabはECサイトのためのインタラクティブな3Dをどうつくっているか - Spline customers (https://spline.design/ja/customers/onyx-coffee-lab)

> Onyx Coffee Labは、Shopifyでインタラクティブな3Dを使い、職人技と製品の細やかな違いを、パフォーマンスやコンバージョンを損なうことなく、高速でモダンなWeb体験として届けています。

[導入事例](https://spline.design/ja/customers)

2026年3月2日 · 導入事例 · Onyx Coffee Lab

# Onyx Coffee LabはECサイトのためのインタラクティブな3Dをどうつくっているか

Onyx Coffee Labは、Shopifyでインタラクティブな3Dを使い、職人技と製品の細やかな違いを、パフォーマンスやコンバージョンを損なうことなく、高速でモダンなWeb体験として届けています。

コーヒーは五感で味わう体験です。けれども、オンラインショッピングはそうではありません。

[Onyx Coffee Lab](https://onyxcoffeelab.com/)にとって、オンラインでの存在感は、その隔たりをどう埋められるかにかかっていました。

コーヒー豆はどれも同じように見え、製品の違いは香り、味、口当たりにある。そんな競争の激しいカテゴリーでは、言葉だけでストーリーを伝えるには限界があります。

Onyxに必要だったのは、焙煎に注ぐのと同じ職人技へのこだわりを、パフォーマンスやコンバージョンを落とすことなく伝えられるデジタル体験でした。

そこで彼らは限界に挑みました。**Spline**でつくり、少人数のチームで公開する、Webでのインタラクティブな3Dです。

[Onyx Coffee Labの2025年のアドベントカレンダー](https://onyxcoffeelab.com/products/2025-advent-calendar)のための、スクロール連動の3D体験

## 五感に頼らないブランドの差別化

コーヒーのブランディングは、オンラインでは難しいことで知られています。

- **ほとんどの製品は見た目が似ている。**浅煎りと深煎りを並べても、どちらもコーヒー豆に見えます。
- **香りも味もない状態で食品を売っている。**五感からのフィードバックがありません。
- **市場は飽和している。**「おいしいコーヒー」は、もはや差別化の要素ではありません。

Onyxのサイトは、見た目がよいだけでは足りませんでした。すばやく伝わる必要があったのです。そうでなければ、ターゲットの顧客はすぐに興味を失って離れてしまいます。

## 職人技を、目に見えるブランドのシグナルに

Onyx Coffee LabのCTO、Michael Mahlerは、ブランドを定義する2つの柱について語ります。

1. **できる限り新鮮なコーヒー**コーヒーは注文を受けてから焙煎し、すぐに発送します。焙煎所から玄関先まで、24〜48時間で届くことも珍しくありません。
2. **インセンティブを変える倫理的な調達**Onyxは生産者にコモディティ市場価格の4〜6倍を支払い、長期的な関係を築いています。それによって、生産者は最高のロットをOnyxに売りたいと思い、その過程で地域社会も恩恵を受けるという、欠かせない好循環が生まれています。

同じ考え方は、彼らのWeb体験にも受け継がれています。

> 私たちのスローガンは「そこそこで満足しない」です。常に、何を改善できるか。その姿勢が止まることはありません。

**Michael Mahler**, Onyx Coffee Lab CTO

インタラクティブな3Dシーンを使った、Onyx Coffee Labの[Circadianの製品ページ](https://onyxcoffeelab.com/products/circadian)

## プロシューマーのためのデザイン

Onyxは、すべての人に向けてデザインしているわけではありません。細部を気にかける人のためにデザインしています。

Michaelは彼らをプロシューマーと呼びます。ブランドが細かいところで手を抜くと気づき、製品の品質を反映した一貫性のあるデジタル体験を期待する顧客です。

そこから、意図的なデザインのアプローチが生まれました。サイトはひと目でわかるものでなければならない一方で、ECサイトとして「普通」とされるものの境界ぎりぎりに位置していなければならないのです。

Onyxは、その差別化の切り札をひとつの場所に見いだしました。**Splineによる3Dデザイン**です。

> その境界線を見つけて、できるだけそのぎりぎりを攻めたかった……その境界線が、3Dアニメーションでした。

Onyx Coffee Labの[Circadianの製品ページ](https://onyxcoffeelab.com/products/circadian)のディテール

## Splineのランタイムを活用したShopifyのサイト

OnyxはShopifyで運営していますが、ストアの体験は完全にカスタムのフロントエンドで、Shopifyを限界まで活用しています。

モデルをエクスポートしたり専用の連携に頼ったりする代わりに、OnyxはSpline Viewerを使ってSplineを埋め込み、SplineのCode APIでシーンをプログラムから制御しています。

これにより、単なる静的なビジュアルではなく、製品の機能のように振る舞うインタラクティブな瞬間をつくれます。

## ストーリーボードからSplineのインタラクションへ

Onyxの3D制作のフローは、スピード、認識のすり合わせ、効率のために組み立てられています。

1. **高品質な製品のレンダリング**多くの場合、切り抜いたPNGとしてデザインチームに渡されます。
2. **ストーリーボード**デザインチームが動きの「キーフレーム」を決めます。何が、いつ、なぜ動くのか。
3. **Splineでのアニメーション**チームがストーリーボードを、実際のインタラクティブなシーンとして再現します。
4. **開発への引き渡し**Splineの埋め込みがサイトに組み込まれ、ランタイムのロジックで制御されます。

変数の変化によって動くステートベースのアニメーション

## 顧客が予想していないことを、3Dで説明する

[Circadian](https://onyxcoffeelab.com/products/circadian)は、よくあるコーヒーの製品ページではありません。

「浅煎りか深煎りか」や「テイスティングノート」といった一般的なコーヒーの説明の代わりに、Circadianはカフェインの量に基づくバリエーションを用意し、顧客が1日を通じた摂取量を調整できる計算ツールも備えています。

Onyxは3Dのビジュアルを説明のための仕組みとして使い、この情報をわかりやすく、より魅力的に伝えています。

- 背景がコンセプトをビジュアルで紹介する
- シーンが操作に反応する
- バリエーションをクリックすると、Splineのシーンでそれぞれ異なる動きがトリガーされる

「私たちにとってバリエーションの違いは、文字どおり製品に含まれるカフェインの量です。背景のアセットは、どの体験を見ているかによって動きが変わります」

そして重要なのは、Onyxのチームがインタラクティブなアセットを、必要なときには邪魔にならないように、必要なときには主役としてインタラクティブになるように設計したことです。たとえば、重要なテキストがページを横切るときは、埋め込んだ3Dアセットのライティングを落とします。

インタラクティブな3Dのビジュアライゼーションを使ったカフェイン量の説明

## 最大の成果：公開までの時間

Onyxにとっての最大の利点は、ビジュアルの品質だけではありません。チームにとっての実現可能性とスピードです。

サイトのコードやクリエイティブに関わるのは、およそ10人。3D専任のエンジニアやデザイナーを雇うのは、コーヒー会社にとって大きなコミットメントと出費です。

Splineはスケジュールを短縮し、3Dを誰にとっても手の届くものにすることで、そのリスクを下げてくれます。

> 最大の利点は、公開までの時間です……Splineのおかげで、3Dでこうしたことをはじめるリスクが下がります。

## Splineをはじめよう

Onyx Coffee Labが3Dを取り入れたのは、派手さのためではありません。ECサイトの現実の課題を解決するためでした。

**スピード、わかりやすさ、コンバージョンを犠牲にせず、五感で味わう製品をオンラインで本物のように感じさせるには？**

Splineによって、彼らは少人数のチームに合い、モバイルでもなめらかに動き、インタラクティブなストーリーテリングをすばやく公開できるワークフローを見つけ、競争の激しい市場でブランドを差別化できるようになりました。

[営業担当に相談](https://spline.design/ja/enterprise)

## ほかの導入事例

[2026年4月13日 · 導入事例LynksenはSplineで複雑なB2BプラットフォームのWebサイトにどう命を吹き込んだか](https://spline.design/ja/customers/lynksen)[2026年2月24日 · 導入事例Hermeticaは3Dデザインでフィンテックのブランドをどう引き上げたか](https://spline.design/ja/customers/hermetica)[2025年10月20日 · 導入事例OscilarはSplineでAIリスクプラットフォームのブランドをどうつくっているか](https://spline.design/ja/customers/oscilar)

[Spline](https://spline.design/ja)

チームとそのエージェントのための3D・2Dエディター。Web、iOS、Androidに公開できます。

#### SplineについてAIに聞く

#### 製品

- [3Dデザイン](https://spline.design/ja/3d-design)
- [Hana](https://spline.design/ja/hana)
- [Omma](https://omma.build)
- [AI 3D生成](https://spline.design/ja/ai-generate)
- [Spline MCP](https://spline.design/ja/mcp)
- [Spline Arena](https://spline.design/ja/arena)
- [料金](https://spline.design/ja/pricing)
- [Enterprise](https://spline.design/ja/enterprise)

#### ランタイム

- [Web](https://spline.design/ja/web)
- [iOS](https://spline.design/ja/ios)
- [Android](https://spline.design/ja/android)

#### アプリ

- [ダウンロード](https://spline.design/ja/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirrorをダウンロード](https://spline.design/download-mirror)

#### 学ぶ

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ja/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [ソリューション](https://spline.design/solutions)

#### コミュニティ

- [Splineコミュニティ](https://community.spline.design)
- [Blog](https://spline.design/ja/blog)
- [更新履歴](https://spline.design/ja/changelog)
- [教育](https://spline.design/ja/education)
- [Contra](https://spline.design/contra)
- [アフィリエイト](https://spline.design/ja/affiliate)

#### 会社

- [導入事例](https://spline.design/ja/customers)
- [採用情報](https://www.ycombinator.com/companies/spline/jobs)
- [セキュリティ](https://spline.design/ja/security)

#### 法的情報

- [利用規約](https://spline.design/terms)
- [プライバシー](https://spline.design/privacy)

#### お問い合わせ

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.