Koji StudioはSplineで3Dの製品ショーケースをどう届けたか

医療テクノロジー企業のOriが、新しい3D歯科用スキャナーのWebサイトを立ち上げようとしたとき、課題は明確でした。物理的なデバイスの精密さと革新性を、オンラインでも同じくらい革新的に感じられるかたちで、どう伝えるか？

同社は、新しいデバイスOri Intraoral Scannerを市場に投入しようとしていました。歯科医が患者の歯の非常に正確なデジタルモデルをリアルタイムで取得できるよう設計された、3Dの歯科用スキャンデバイスです。

静止画や動画にとどまらず、この製品の技術的な進歩を顧客に示したいと考えた同社は、製品ローンチのクリエイティブチームとしてKOJI Agencyを選びました。

そこでKOJIのチームは、Webflow内のSpline連携を活用し、歯科医の手の中と同じくらいWeb上でもスキャナーを手に取れるように感じさせる、インタラクティブな3Dのデジタル体験をつくることにしました。

新しいツールを積極的に取り入れるフルスタックのデザインチーム

Ori ScanのWebプレゼンスを手がけたKOJI Agencyのチームは、Pavel、Slava、Nikita、Lizaの4人。いずれも数多くのクライアントプロジェクトを手がけてきた経験豊富なデザイナーです。

ブランディング、アイデンティティ、デジタル体験の分野で20年以上の経験をもち、モジュール型の広告システムから没入感のあるストーリー型のサイトまで、あらゆるものをつくってきました。

彼らの強みは、プロダクト思考、ビジュアルデザイン、インタラクション、コードを融合させる「フルスタックデザイナー」であることです。

私たちは常にリサーチし、新しいツールを探し続けています。そうしてたどり着いたのがSplineでした。

Splineでインタラクティブ性を実現する

Ori Scanの経営陣が求めていたのは、ありきたりな医療機器のWebサイトではありませんでした。歯科医や医療従事者という顧客層の中で際立つ体験を望んでいたのです。

KOJIのチームは、スキャナーの革新性を際立たせる最良の手段はインタラクティブな3Dだと考え、Splineを選んだのも同じく明確な意図によるものでした。

チームには、すばやく反復し、パフォーマンスを最適化し、スキャナーの製品デザインをあらゆるデバイスでインタラクティブに見せる柔軟性が必要でした。

Splineはデザインコミュニティのいたるところで話題になっていました。このプロジェクトはついにそれを使う絶好の機会で、Webflowとのシームレスな連携が決め手になりました。

デザインのプロセス：CADとポリゴンの最適化から、洗練されたWeb体験へ

プロセスは、Ori Scanの技術的なCADファイルからはじまりました。エージェンシーはそれを調整・最適化してからSplineに取り込みました。

ワークフローは反復的で、ポリゴン数、マテリアル、ライティングのバランスをとりながら、見た目の魅力とWebでのなめらかなパフォーマンスを両立させました。

Splineは、プロセスの技術的な側面とクリエイティブな側面をひとつにまとめました。パフォーマンスツールでモデルの最適化について明確な見通しが得られ、あらゆるデバイスでのスムーズな組み込みが実現しました。イベントシステムでインタラクティブな動きを簡単に設定でき、多彩なマテリアルとライティングのツールで製品の見た目を仕上げ、Web上で洗練されたリアルな印象を与えられました。

特に目を引くディテールは？歯の3Dモデルです。スキャナーが実際に動く様子を見せるため、チームはSplineで自然な見た目の歯をモデリングしました。これがデモに本物らしさを与える、欠かせない仕上げになりました。

このディテールへのこだわりが、デモを単なる技術的なショーケース以上のものにしました。リアルさとインタラクティブ性を組み合わせることで、本物らしく、魅力的で、歯科医が実際にスキャナーをどう使うかに直結した製品ストーリーが生まれました。

楽しい作業でしたが、とても重要でもありました。スキャナーの目的は歯をスキャンすることなので、3Dモデルは自然に見えて、自然に感じられなければなりませんでした。

Webflowとの連携

KOJIのチームは、Ori Scanの製品に命を吹き込むためにSplineを、そして3DアセットをWebサイトにシームレスに組み込むためにSplineのネイティブなWebflow連携を活用しました。

これにより、スクロール連動のアニメーションとインタラクティブな3Dを組み合わせ、訪問者がページを進みながらスキャナーを回転させて探索できるようになりました。

とてもシンプルで速いんです。学習コストが低いので、ジュニアデザイナーでもWebflowに3Dを組み込めます。

インタラクティブ性が大切な理由

Ori Scanにとって、インタラクティブな3Dの製品ショーケースは、見た目の美しさだけのものではありませんでした。わかりやすさとインパクトのためのものでした。顧客が製品をスクロールし、回転させ、文脈の中で機能を探れるようにしたことで、静止画や動画では到底実現できない体験が生まれました。

インタラクティブ性はすべてを変えます。製品を本物のように感じさせてくれる。そして何より、クライアントが自分たちのストーリーを革新的に感じられるかたちで伝える助けになるのです。

Splineをはじめよう

KOJIのチームは、今もSplineで実験を続けています。彼らにとってこのプロジェクトは、3Dとインタラクティブデザインが「あればうれしいもの」ではなく、製品ストーリーを伝えるうえで欠かせないものになる、新しい章のはじまりでした。

インタラクティブ性がデジタルの製品デザインを本物のように感じられる体験に変えられることを示す、ビジュアル的にも見事な事例です。

営業担当に相談