Dero：コード不要で埋め込める3D自転車ラックコンフィギュレーター

Deroは、ミネソタ州ミネアポリスに拠点を置く自転車駐車設備メーカーであり、PlayCoreの企業です。商業施設向けおよびカスタムの自転車ラック、公共用自転車修理ステーション、自転車シェルター、自転車ロッカー、サイトファニチャー、ストリートスケープ製品を製造し、単体のラックを購入する住宅所有者から数百人分の自転車室を計画する建築家まで、1995年から幅広い顧客を支援してきました。製品ページには、仕様策定者が必要とするパンフレット、提出用資料、設置ガイド、CAD、Revit、SketchUpファイル、CSI仕様書が掲載されています。

そのうち7つのページには現在、Simplio3Dで構築された3D自転車ラックコンフィギュレーターも掲載されており、見出しはシンプルに3D Viewerとなっています。機能は意図的にシンプルです。訪問者はラックの取付方法を選び、対応モデルではリーンバーを追加し、仕上げを試すことができ、ラックが3Dで変化します。価格、カート、フォームはなく、dero.comへの掲載は、コードを書くのではなく埋め込みスニペットを貼り付けるだけで完了しました。

ソリューション：7つの製品ページに3D自転車ラックコンフィギュレーターを導入

dero.comでは、すべてのラックに専用の製品ページがあり、説明、資料、ダウンロードに加え、Dero独自の購入・見積もりオプションを提供しています。Deroが自転車駐車のスタンダードと呼ぶHoop Rackから、自転車の形をしたBike Bike Rackまで、7製品のページには現在、ページ下部に3D Viewerというセクションが追加されています。

各3D Viewerは基本的なコンフィギュレーターです。ラックは淡いグレーの背景上で回転・拡大でき、その横のパネルには取付方法、リーンバー、仕上げという最大3つの選択肢だけが表示されます。価格表示、カートへの追加、送信はいずれもありません。ラックを見せることだけが目的であり、だからこそ設定作業も最小限で済みました。

取付方法、リーンバー、仕上げをラック上で3D表示

3つの選択肢は、設置後のラックの見た目を変える要素です。

• 取付方法。SurfaceとIn-Groundのドロップダウンです。Surfaceでは、ラックがボルトで固定されるベースプレート付きで表示されます。In-Groundでは、それらが地面に埋め込む長い脚に切り替わります。
• リーンバー。Hoop Rack、Hoop Rack Heavy Duty、Downtown Rack、Arc Rackで利用できるスイッチです。オンにすると、ラックを横切る水平バーが表示されます。ほかの3つのラックには、このスイッチは表示されません。
• 仕上げ。全ラック共通の22種類のスウォッチです。Galvanized、Stainless、Black、Flat Black、White、Light Gray、Red、Yellow、Bright Yellow、Orange、Blue、Sky Blue、Green、Light Green、Hunter Green、Sepia Brown、Bronze、Silver、Dark Purple、Wine Red、Beige、Iron Grayから選べます。Galvanizedのスウォッチは単色ではなく、亜鉛めっき鋼特有のまだらな質感を表現しています。

パネル下部の小さな(i)ボタンを押すと、選択内容をテキストで一覧表示するConfiguration Summaryが開きます。たとえばSwerve Rackでは、Select Mount: Surface、Select Finish: Wine Redと表示されます。訪問者はそのまま、同じページ内の購入または見積もりオプションへ進めます。

Dero独自の購入・見積もりオプションに並ぶプレビュー

Deroの製品ページには、すでに販売機能が備わっています。各ページでは、Dero独自の購入・見積もりオプションとして、仕上げ、取付方法、該当する場合はリーンバー、さらに数量、Add to cart、Add to quoteを選択できます。大量注文は見積もりリストを通じて処理されます。3D Viewerは同じページに配置され、これらの機能には一切手を加えません。

3D Viewerには価格、カート、独自のフォームはなく、どこにも情報を送信しません。訪問者は検討中の取付方法と仕上げでラックを確認した後、Deroのオプションで同じ選択を行います。このように機能を絞ったことで、迅速に公開できました。連携する製品も、同期すべき価格も、担当者へ振り分けるフォームも必要なかったためです。

コードを書かずに埋め込み

すべてのSimplio3Dコンフィギュレーターには、共有リンクとコピー用のiframeスニペットがあります。各Dero製品ページでは、そのスニペットが3D Viewer見出しの下に全幅で配置されています。プラグイン、スクリプト、ストア連携は不要なため、ビューアーを公開するには1つのページに1つのスニペットを貼り付けるだけです。

ページに含まれるのはこのスニペットだけなので、3D Viewer自体はSimplio3D内で管理されます。新しい仕上げや更新されたモデルはそこで変更でき、誰かが製品ページを編集しなくても、次回dero.comのページが読み込まれた際に反映されます。このようなビューアーの詳細は、3D製品ビューアーをご覧ください。

現在このようなプロジェクトに追加できる機能

このセクションの内容はいずれも、上記で紹介した旧バージョンのSimplio3Dで動作するDeroの3D Viewerには含まれていません。これから自転車ラックやサイトファニチャーのメーカーが導入する場合は、次のような機能を追加できます。

• 設置場所でラックを確認。拡張現実により、アプリ不要で、設定したラックをスマートフォンを通して歩道や自転車室に配置できます。iOSのAR Quick Look、AndroidのScene Viewer、デスクトップブラウザからのQRコードに対応しています。
• モデル上で詳細を表示。Hotspotsにより情報ポップアップ付きのマーカーを追加できます。たとえばチューブ径やラックに駐車できる自転車台数を示せます。Sceneryでは背景とカメラを切り替えられます。
• ビューアーと注文フォームを連動。埋め込みコンフィギュレーターは、各変更をブラウザイベントとしてsimplio3d:option.changedに通知します。そのため、必要に応じてサイト独自の数行のスクリプトで、注文フォーム内の同じ仕上げと取付方法を事前選択できます。
• ラインアップ全体をより迅速に展開。別のラック向けの最初のコンフィギュレーターは、文章による説明から生成できます。また、カテゴリ別の一括追加機能により、共有マテリアルライブラリ内の仕上げシリーズを、各スウォッチを手作業で作成することなくスウォッチセットに変換できます。
• すべてのビューアーを検証。AIアシスタントは、たとえば各仕上げにマテリアルが設定されているかといったオプションの網羅性や条件ロジックを監査し、修正案を提示できます。ClaudeのようなAIクライアントも、スコープを限定した接続でMCP経由でワークスペースに接続すれば、同じ検証を実行できます。価格やSKUの変更は常に保留中の変更として届き、担当者が適用するまで反映されません。