コマースUIはMapbox GL JSとジオコーディングで構築されています

事例一覧に戻る

Mapboxは、Commerce-UIが最高品質のストアロケーターマップを構築できるよう支援し、あらゆるクライアントのニーズに合わせて地図機能を柔軟にカスタマイズできます。

Mapbox を使用して構築する主な利点

Mapbox Geocodingは、あらゆる種類の地名検索をサポートし、オートコンプリート機能で検索を高速化します。
あらゆる画面サイズで最適なユーザーエクスペリエンスを実現するための、高性能なインタラクティブマップの実装の容易さ
Mapbox StudioとGL JSを使用すると、デザイナーと開発者は、クライアントのブランドに沿ったカスタムマップを容易に共同作成できます。

‍

これはレイアウト確認用のダミーテキストです。

使用された製品

Studio

Mapbox GL JS

検索

Commerce-UIについて

Commerce-UIは、ブランドの成長を支援するためにヘッドレスeコマースを構築する世界クラスの開発者チームです。美学とテクノロジーを組み合わせたカスタムeコマースサイトにより、Commerce-UIはeコマースの未来を定義しています。

コマースUIは、デザインの品質とパフォーマンスに対する高い基準を維持しながら、クライアントに最適なテクノロジープロバイダーを選択します。大手eFoilサーフボード会社であるLiftfoilsのeコマースサイトを構築する際、コマースUIは、オンラインストアロケーターが製品コンフィギュレーターと同じくらい重要であると認識しました。Liftfoilsのボードのような製品では、ほとんどの顧客が購入前に試乗を希望するため、近くの販売店を見つけることができることが、顧客体験の重要な部分となります。

既製のストアロケーター地図の課題

既製のロケーターアプリには、機能、パフォーマンス、インターフェースデザインに制限があります。Commerce-UIは、Liftfoilsのeコマースおよび300を超えるデモ拠点のグローバルネットワークにとって、ロケーター機能の重要性を考慮し、カスタムマップがクライアントにとって適切なソリューションであり、Mapboxがその仕事に適した地図エンジンであることを認識していました。

弊社のeコマースクライアントは、最高水準のデザインとサイトパフォーマンスを期待しています。Mapboxは、最大手のブランドが使用する地図および位置情報サービスであり、当社が選ぶロケーションプロバイダーです。Mapboxは、当社の開発者と設計者が求める信頼できる品質と創造的な柔軟性を提供します。
Simon Wesierski, Co-founder, Commerce-UI

これはレイアウト確認用のダミーテキストです。

Mapboxは、直感的な位置情報体験と、完全にカスタマイズ可能な機能を提供します。

Commerce-UIがeコマースサイトを構築する際、目標は、レスポンシブWebサイトというよりもモバイルアプリのように感じられるユーザーエクスペリエンスです。ロケーターマップは、ロード時間がほぼゼロで、結果を瞬時に表示する必要があります。Mapbox GL JSは、画面サイズに関係なく洗練された印象を与える、高性能なインタラクティブマップを簡単に構築できるようにします。Liftfoilのディーラーロケーションのカスタムデータポイントは、Sanity CMSで管理され、マップとシームレスに統合されます。

Liftfoilsの場合、世界中に販売店の所在地があるため、Commerce-UIには、グローバルおよびローカルの地図ビューの両方で美しく表示され、スムーズに読み込まれるロケーター地図が必要でした。Commerce-UIと連携するデザイナーは、Mapbox Studioを使用して地図の視覚スタイルを形成し、顧客マーカーのデザインを試しました。これにより、フィードバックのやり取りにかかる時間を節約し、最終的な地図スタイルがデザイナーの期待を満たしていることを確認しながら、開発者は地図のインタラクションの構築に集中できました。

最高のストアロケーターは、ユーザーの期待を予測し、場所の検索を摩擦なく直感的にします。Mapbox Geocodingを使用すると、Commerce-UIは、国、通り、またはPOIなど、あらゆる種類の地名クエリを迅速にサポートし、オートコンプリートで検索エクスペリエンスを高速化できます。

地図は、関心のあるエリアへのフライトゥアニメーションで検索に即座に応答し、特定のエリア内の場所の数に基づいて地図のズームレベルを自動的に調整します。顧客は検索エリアに最も近いディーラーの場所を知りたいので、ロケーターは常に少なくとも1つの結果を表示するようにする必要があります。Commerce-UIは、Turf.jsを使用して、ユーザーの場所と最寄りの利用可能な店舗に基づいてカスタムバウンディングボックスを構築することでこれを実現しました。

Mapboxを使用すると、デザイナーの期待に正確に沿ったカスタムエクスペリエンスを構築し、複雑な機能をすぐに含めることができます。Mapboxは、SaaS製品の「既製」の性質と、ゼロから構築する柔軟性の間で、歓迎すべきバランスを提供します。
Michal Wołczecki-Klim, Developer, Commerce-UI

コマースUIの開発者とクライアントは感銘を受けています

コマースUIは、わずか2週間の開発期間で最初のカスタムMapboxストアロケーターを構築しました。Mapbox Geocoding APIのような製品は、開発者のニーズを予測し、位置検索のようなコア機能の追加を迅速かつ容易にしました。

eコマースサイトの位置情報機能は、オンライン小売業者と顧客を結び付ける重要なリンクであり、顧客が新しいブランドを発見し、注文をスムーズに行い、受け取ることができるようにします。Commerce-UIのチームは、地図の国際化や地球儀ビューなど、クライアントを魅了する最新の位置情報機能にアクセスできることを知っているため、Mapboxを使用して構築しています。