ストリートマップ機能では、CustomixとMapboxを連携して、地図を使ったパーソナライズ商品を作成できます。お客様は商品をデザインする際に、自分の場所を入力でき、必要に応じて、用意したカスタムマップスタイルから選ぶこともできます。
1. CustomixをMapboxアカウントに接続する
まず、Mapboxアカウントにログインします：https://console.mapbox.com/。次に、Tokenセクションでパブリックトークンを作成してコピーします。
設定 → サービスに移動し、利用可能なサービスの中からMapboxを見つけて、Mapboxのアクセストークンを入力します。接続が完了すると、カードに緑色の接続済みステータスが表示されます。
2. マップスタイルをアセットライブラリに保存する
この手順は、ストアフロントでお客様に複数のマップスタイルから選んでもらいたい場合のみ行ってください。スタイルが1つだけの場合はスキップしてかまいません。
- アセット → マップに移動します。
- マップを追加 → フォルダを追加をクリックし、フォルダに名前（例：Map Styles）を付けて開きます。
- マップを追加をクリックし、マップを追加オプションを選択します
- Mapbox Studioで使いたいスタイルを開き、Share → Productionに進み、Developer resourcesまでスクロールしてStyle URL（
mapbox://styles/...）をコピーします。
- CustomixのマップスタイルのURLフィールドに貼り付けて、保存をクリックします。
提供したいスタイルごとに、同じ手順を繰り返します。
3. ストリートマップ要素をテンプレートに追加する
- テンプレートを開き、左側のサイドバーにある要素アイコンをクリックします。
- ストリートマップを選択します。要素がキャンバスに追加され、右側に設定が表示されます。
- コンテンツで、初期位置を設定します。座標を入力するか、マップで選択をクリックします。
- マップスタイルでは、デフォルトのスタイル（Streets、Satellite、Outdoors、Light、Dark）を選ぶか、カスタムを選択します。
カスタムを選んだ場合は、Mapbox Studioに戻ってスタイルを開き、Shareに進んでPreview onlyのURL（https://api.mapbox.com/styles/v1/...）をコピーします。それをカスタムマップスタイルのURLフィールドに貼り付けて、スタイルを適用をクリックします
4. お客様によるパーソナライズを有効にする
ストリートマップ設定のパーソナライズセクションで次の設定を行います。
- 場所でパーソナライズ：オンにすると、お客様がストアフロントで自分の住所を検索して選択できるようになります。ラベル（例：Your address）と、任意でヘルプテキストを設定できます。
- マップスタイルでパーソナライズ：オンにすると、お客様が複数のマップスタイルから選べるようになります。表示されるポップアップで、手順2で作成したフォルダ（例：Map Styles）を選択し、完了をクリックします
テンプレートを保存します。これでストリートマップ要素がストアフロントで使えるようになり、お客様は自分の場所を入力でき、有効にしている場合は好みのマップスタイルも選べます。
5. ストリートマップのマスク
ストリートマップを好きな形で表示したい場合は、マスク機能を使えます。マスクをアップロードすると、地図がアップロードしたマスクの形に合わせて自動的に整形されます。
更新日：2026/09/23