
CoffeeTech®
業務用コーヒー焙煎機メーカーのサイト。3Dヒーローと360表示を載せたWebflow製で、Site of the Day と Developer Award を同時受賞している。
- クレジット
- Or Halevi / MAKETHECUT®
- 使用技術
- WebflowGSAPJavaScript360ビュー3D
Coffee-Tech Engineering は、ショップ用から工業規模まで業務用コーヒー焙煎機を作るメーカーです。サイトは FZ94 Evo、Silon ZR7、Ghibli R90、Lab Extractor といった製品ラインを軸に、技術・効率・サステナビリティの3本柱、導入事例、ブログを並べる構成。画像CDNが cdn.prod.website-files.com なので Webflow で組まれています。
Awwwards のエントリーでは見どころとして「3D HERO」「Technology Mask」「Interactive Components」「Page Transition」が挙げられ、タグにも 360 と 3D が入っています。一方で WebFetch で取得できるトップページと /technology のHTMLからは、canvas / three.js / model-viewer / .glb / 画像シーケンスのいずれの痕跡も拾えず、静的な .avif 画像が並ぶだけでした。3Dはスクリプト実行後に生成されている可能性が高いものの、そこまでは追えていません。
【参考になるポイント】
・Site of the Day 7.18 と Developer Award 7.06 の同時受賞。Developer Award の内訳は Responsive Design 7.60、Animations/Transitions 7.40、WPO 7.20 と、動きよりレスポンシブが最高点
・逆に Accessibility 6.20、Semantics/SEO 6.60 が足を引っ張っている。3D主体サイトの弱点がそのまま数字に出ている例として読める
・Webflow の標準機能で足りない部分を GSAP と自前 JavaScript で足す構成。ノーコード基盤で Developer Award まで到達している
・※3D/360の実装方法(Three.js か model-viewer か画像シーケンスか)は未確認。取得できたHTMLに手掛かりがなかった
