3M正規代理店 · B2B2Cマーケットプレイス

BondingCenter

産業用テープ・接着剤をオンラインで取引するB2B/B2C ECプラットフォーム — AI製品推薦からCAD裁断図面ビューア、オンライン決済まで、ウェブとモバイルアプリを単一コードベースで提供します。

B2B2C ECAI推薦CADビューアウェブ + iOS/Android

プロジェクト概要

BondingCenterは、3M産業用接着剤・テープ(IATD)製品をオンラインで販売するコマースプラットフォームで、3M正規代理店が運営しています。

図面に合わせた裁断が必要な産業顧客(B2B)と、一般の小売顧客(B2C)の双方を対象とします。

電話・見積もり中心だった産業財の取引を、製品検索・図面アップロード・決済・配送追跡までオンラインで完結する自社販売チャネルへ転換するために構築しました。

ウェブとiOS/Androidアプリを単一コードベースで運用し、すべての接点で一貫した体験を提供します。

自然言語のクエリをLLMで解析し、上位の製品を推薦します。高速検索とAI推薦メッセージ生成を分離し、応答遅延を最小化しました。

顧客がPDF/DXF/DWGの図面をアップロードすると、ブラウザでインラインプレビューを確認し、そのまま注文に反映します。

PG決済、注文作成、配送追跡まで購入フロー全般を扱います。

マイレージの付与/利用と、Bronze〜Diamondの5段階のランク別特典を提供します。

TipTapリッチテキストエディタによるブログ・技術資料・FAQで、製品の検索と学習を支援します。

製品の問い合わせをリアルタイムでやり取りできるチャットを提供します。

単一コードベースでiOS/Androidをリリースし、動的サイトマップ・robotsで検索最適化を適用しました。

状況: ウェブとiOS/Androidの提供が必要でしたが、個別のネイティブ開発はコスト・保守の負担が大きいものでした。
課題: 単一コードベースで3つのプラットフォームを一貫して運用する必要がありました。
行動: Next.jsウェブアプリをCapacitorでラップしてiOS/Androidにパッケージ化し、プッシュ通知を連携し、レスポンシブでアクセシブルなUIシステムを構築しました。
結果: 単一コードベースでウェブ・iOS・Androidを同時運用し、機能とデザインの一貫性を確保しました。

フレームワーク・言語Next.js 15 (App Router, Turbopack) · React 19 · TypeScript

データ・バックエンドSupabase (PostgreSQL) · Next.js API Routes (サーバーレス)

決済国内オンライン決済(PG) · 注文 · 配送追跡

AILLM自然言語推薦(2段階) · 技術データシート(TDS) PDF自動要約

CAD・図面dxf-viewer · three.js (PDF/DXF/DWG インラインビューア)

モバイルCapacitor (iOS/Android) · プッシュ通知

UITailwindCSS 4 · shadcn/ui · Radix UI · HeadlessUI · Framer Motion · lucide-react

エディタ・ドキュメントTipTap · pdf.js · jsPDF

データ・フォームTanStack Table · Recharts · react-hook-form · Zod · dnd-kit