海外のお客さんなら誰もが知っている、あの静かなフラストレーション。ストアを訪れたのに、価格が違う通貨になっていて、それを変えるボタンがどこにもない。ページの下までスクロールして、小さな旗アイコンが並ぶ行を目を凝らして見つけて、クリックしたら、見ていた商品ページじゃなくてホームページに飛ばされてしまう。クリックとページ読み込みを3回繰り返した挙句、やっと自分の通貨で価格を見られるようになる。でも、30秒前より、もう忍耐心は底をついている。
国と言語セレクターをどこに配置するかは、デザインの細部ではない。これはコンバージョン率を左右するレバーなのだ。ヘッダー配置とフッター配置では、エンゲージメント率、セッション継続時間、海外訪問者からの売上に測定可能な差が生まれる。
- ヘッダー埋め込みセレクターは、フッター限定配置よりも2.3倍高いエンゲージメント率を実現
- フッターセレクターは海外訪問者の8%未満しか使用しない。ほとんどの人がそこまでスクロールしないから
- フローティングウィジェットはクリックを集めるが、アクセシビリティとモバイルユーザビリティの問題を生じさせる
- 最もパフォーマンスの良い配置は、セレクターをメインナビゲーションメニュー自体に統合する
- どの配置を選ぶにせよ、切り替え後は現在のページURLを保持する。ホームページにリダイレクトしない
4つの一般的な配置
国と言語セレクターは、Shopifyストアでは4つの場所に表示される。それぞれ表示、ユーザビリティ、技術的複雑さのトレードオフが異なる。
フッター配置
最も一般的なデフォルト。Shopifyテーマは通常、国/通貨セレクターをフッターに配置する。ドロップダウンメニューのペアで配置されることもあれば、旗アイコンのグリッドで配置されることもある。技術的にはアクセシブルで、邪魔にならない。
問題はこうだ。大多数の訪問者はフッターまでたどり着かない。Contentsquareの2024年デジタルエクスペリエンスベンチマークのスクロール深度データによれば、eコマース訪問者の45%しかページの中点より下にスクロールしておらず、絶対的な下部までたどり着く人ははるかに少ない。商品ページに着陸して、すぐに間違った通貨に気づく海外訪問者にとって、フッターまでスクロールすることは自然な反応ではない。最初にヘッダーを見て、ナビゲーションを見て、それから去ることを検討する。
フッターセレクターのエンゲージメント率は、海外訪問者の間で一貫して8%以下だ。これは、積極的にそれを探している少数のユーザーのためのフォールバックとして機能するのであり、主なインタラクションポイントではない。
ヘッダーバーまたはユーティリティ行
フッター配置から一歩進んだもの。多くのストアは、メインナビゲーションの上に薄いユーティリティバーを追加する。「トップバー」または「アナウンスメントバー」と呼ばれることもあり、国や通貨セレクターが含まれている。それが、送料無料のメッセージや連絡先情報などの要素と一緒にある。
この配置はスクロールなしでページ読み込み時に見える。これは発見性をすぐに向上させる。Baymard Instituteのeコマースヘッダーデザインに関する研究によると、地域セレクターを含むユーティリティバーは、フッター限定配置よりも非常に高いインタラクション率を示している。特にモバイルでは、ヘッダーがデフォルトで見える唯一のナビゲーション要素だ。
トレードオフはスペースだ。モバイルでは、ユーティリティバーはロゴ、ハンバーガーメニュー、カートアイコン、検索と競合する。インターフェースを混雑させずに、その行に国セレクターを組み込むには、慎重な設計が必要。多くのストアは旗アイコンか2文字の国コードに省略して、スペースを節約するが、明確さは低下する。すべてのお客さんが16ピクセルで自分の国の旗を認識しているわけではなく、2文字コードは曖昧だ。「EN」は英語を意味するのか、それともイングランドという国を意味するのか？
フローティングウィジェット
画面の隅に浮くボタン。通常は地球アイコンまたは旗。クリックするとセレクターパネルが開く。スクロール位置に関係なく、常に表示される。
フローティングウィジェットは、発見性の問題を解決する。すべてのページで、あらゆるスクロール深度で、あらゆるデバイスで見える。しかし、新しい問題をもたらす。モバイルでは、フローティングボタンはコンテンツと重なる可能性があり、他のフローティング要素（チャットウィジェット、クッキーバナー、トップに戻るボタン）と干渉でき、スクリーンリーダーがドキュメントの通常のフロー外の予期しないインタラクティブ要素に遭遇する、アクセシビリティの問題を作る。
また、認知的なコストもある。フローティング要素は、実際のコンテンツとの注意を競う。商品説明を読んでいるユーザーが、隅でパルスしている地球アイコンを見れば、軽い気が散る。それがすべてのページで繰り返される。海外トラフィックが多いストアにとっては、それは価値があるかもしれない。訪問者の90%が国内で、海外は少数派というストアでは、フローティングウィジェットは多数派にとっての視覚的ノイズでしかない。
メインナビゲーションメニューに埋め込む
最もエンゲージメント率が高いアプローチ。国と言語セレクターをナビゲーションメニュー自体の内部に配置する。メニュー項目として、またはメガメニュー内のセクションとして。
訪問者がナビゲーションを開いてカテゴリを閲覧するときに、他のメニュー項目と一緒に現在の地域と言語が表示される。それをクリックすると、サブパネルまたはドロップダウンが開いて、切り替えができる。セレクターはコンテキスト依存的だ。訪問者がすでに「ナビゲーションモード」にあるとき、つまりどこへ行くか、次に何をするかを考えているとき、正確にそのときに表示される。
このパターンを使用しているストアのデータによると、地域設定とのエンゲージメントは、フッター限定配置と比べて2.3倍高い。理由は行動的。訪問者はほぼすべてのセッションでナビゲーションメニューと相互作用するため、セレクターをそこに埋め込むということは、それが受け身に発見されるということで、積極的な検索を必要としない。
配置がコンバージョンに影響するのはなぜか
セレクター配置とコンバージョンの関連は、訪問者がボタンを見つけるかどうかだけではない。訪問者のジャーニーのどのときにそれを見つけるかについてなのだ。
| ベルリンからのお客さんがあなたのストアに着陸して、ヘッダーナビゲーションに「USD | English」がすぐに見えるなら、そのストアが自分たちにはローカライズされていないことを知る。しかし、それを直す方法を正確に知っている。1回クリックすれば、EUR価格が見える。商品ページから離れることはない。摩擦は2秒で終わる。 |
フッター限定セレクターを持つストアの同じ訪問者は、USD価格を見る。不確かさを感じる。とにかくカートに何か追加するかもしれない。それからチェックアウトで、ドイツへの配送がそれ以上に高いことを発見する。ストアがUS最適化レートを表示していたから。カートを放棄する。摩擦は3分間続いて、失われた売上で終わる。
「予期しないコスト」からのチェックアウト放棄は、Baymard Instituteの継続的な研究に対して、グローバルに最も一般的なカート放棄理由であり、すべての放棄の48%に影響する。海外訪問者にとって、「予期しないコスト」は、最初のページでアクセシブルな国セレクターが解決していたであろう通貨の混乱と配送の驚きをしばしば意味する。
実装の詳細が重要な理由
配置だけでは十分ではない。訪問者が選択した後、セレクターがどのように動作するかは、満足度に非常に大きな影響を与える。
現在のURLを保持する。 訪問者が商品ページでUSDからEURに切り替えるときに、その商品ページの新しい通貨に留まるはずだ。地域切り替え後にホームページにリダイレクトすることは、国セレクターのユーザビリティテストでの最も一般的な苦情だ。Shopify Marketsはサブディレクトリを使用するときにデフォルトでこれを正しく処理するが、カスタム実装と一部のサードパーティアプリはルートにリダイレクトする。
選択肢を記憶する。 永続的なクッキーを設定するか、Shopify顧客メタデータを使用して、訪問者の選択を保存する。先週EURを選んだ再訪問者は、今週USDを再度見るべきではない。ここは、サーバー側の位置情報検出を使用しているストアにとって特に重要だ。クッキーはIP検出をオーバーライドすべきだ。
言語、通貨、国を分ける。 すべての訪問者が同じバンドルを望むわけではない。日本在住のアメリカ人は、英語の言語、JPY通貨、日本の配送レートが必要かもしれない。「日本 = 日本語」を強制するストアは、重要なユーザーセグメントを無視する。可能なら、訪問者がミックスアンドマッチできるようにしよう。
| 明確にラベル付けする。 旗アイコンだけではなく、国名と通貨コードを使用する。旗は曖昧だ。小さいサイズではアメリカとリベリアの旗は似ている。そして、一部の訪問者は国より言語で自分を認識する。「United States | USD | English」は曖昧ではない。16ピクセルの旗アイコンは推測ゲームだ。 |
素早い監査モバイルデバイスでストアにアクセスする。スクロールなしで、どの国または通貨が選択されているかについて何かの表示が見えるか？ 見えないなら、海外訪問者も同じ混乱を経験している可能性が高い。修正は再設計を必要としない。セレクターをヘッダーまたはナビゲーションメニューに移動または複製することは、通常、設定変更であり、開発プロジェクトではない。
ナビゲーション埋め込みアプローチの実装
最も効果的な実装は、国と言語セレクターを一流のナビゲーション要素として扱う。フッターに突然付加されたものではなく。
実際には、メインナビゲーションバー内またはメガメニューパネル内で見えるメニュー項目を追加することを意味する。訪問者の現在の地域と言語を表示する。それをクリックするとサブメニューまたはオーバーレイが開き、国、通貨、言語を独立して変更するオプションがある。
Navi+ Menu BuilderはShopifyストアのこのパターンをネイティブに支持し、マーチャントがドラッグアンドドロップインターフェースを通じてカスタムナビゲーションメニューに直接国セレクターと通貨セレクターを埋め込むことを許可する。セレクターはカテゴリとコレクションと一緒にあるため、訪問者はフッターで探す代わりに、ブラウジングしている間に自然にそれを発見する。この埋め込みアプローチを使用しているストアは、地域設定とのエンゲージメントが測定可能に高く、通貨または配送の混乱に関するサポートチケットがより少ない。
すべてのこれの背後にある原理は単純だ。人々がすでに見ている場所にセレクターを配置する。訪問者はナビゲーションメニューを見る。フッターは見ない。それに応じて設計しよう。
この記事は、より大きなガイドの一部です。訪問者の位置情報の自動検出：リダイレクトするか、またはユーザーに選択させるか