ガイド

ウェブサイト言語セレクター：デザインのベストプラクティス

効果的なウェブサイト言語セレクターの設計方法：使用するUIパターン、アルファベット順の名前の並べ替え、通貨の分離、および基本的な基礎。

オリビア・ドゥーリー Bablic

10月 15日、 2026日

皆さんはどう思うかわかりませんが、ブランドイメージに合った、すっきりとした言語セレクターには、何とも言えない満足感があります。

もしかしたら、これで私がローカライズオタクであることがバレてしまうかもしれない。でも、ちょっと聞いてください。

あの小さなボタンには、計り知れない力が秘められている。ワンクリックで、訪問者は外国語のページを凝視する状態から、サイトを離れることなく自分の言語で閲覧できるようになります。

言語セレクターは、デザインと機能が融合した場所である。うまくやれば、ブランドイメージに合致し、見つけやすく、世界中からの訪問者を歓迎していることを示すことができます。翻訳が下手だと、フッターに隠れていたり、ラベルが間違っていたり、使い勝手が悪かったりして、訪問者は翻訳されたコンテンツを見る前にページを離れてしまう。

では、この2つの違いは何でしょうか？

ほとんどのガイドは基本に忠実に従っている。つまり、セレクターを見つけやすくし、ネイティブ言語の名前を使用し、記号にフラグを使用しないようにする、ということだ。それらについても取り上げます。しかし、日本語、アラビア語、ポルトガル語が混在するドロップダウンリストをアルファベット順に並べ替えるにはどうすればよいか、といった難しい問題にも答えていきたいと考えています。 なぜインターネットの半分は、言語を物理的な場所に結びつけているのでしょうか？それは多くの場合、間違った判断なのに。

このガイドでは、どのUIパターンがあなたのサイトに適しているか、現実世界で通用するベストプラクティスは何か、そしてほとんどの人が正しく対処できない2つの課題、つまり並べ替え順序と言語・国・通貨の分割をどのように処理するかを学びます。

それでは本題に入りましょう。

Web サイトのヘッダーでダークテーマの言語セレクターのドロップダウンが開き、英語、スペイン語、ドイツ語、フランス語、イタリア語、ポルトガル語、中国語がリストされます。

言語セレクターが制御するもの（そして制御しないもの）

言語セレクタの役割はただ一つ、ページを別の言語で表示することです。通貨、送料、訪問者の所在地は設定されません。これは設定パネルでも店舗検索でもなく、サイトによってはそう扱われることが多いものの、国選択の代わりとなるものでもありません。

ここでは「少ないほど良い」という原則が当てはまる。あまりにも多くの機能を詰め込もうとする言語セレクターは、本来の目的である「訪問者がサイトを理解するのを助ける」という点で失敗することが多い。

ニールセン・ノーマン・グループが行ったeコマースのローカライゼーションに関する調査によると、海外の買い物客は、配送先や支払い通貨に関係なく、サイトの言語を変更できることを期待していることがわかった。実際の市場を見てみると、それは理にかなっている。カナダでは、英語を好む買い物客もいれば、フランス語を好む買い物客もいるが、いずれもカナダドルで支払うことを期待している。スペインでは誰もがユーロで支払うが、買い物客の中にはスペイン語よりもカタルーニャ語で商品を見ることを好む人もいる。

要するに、言語選択機能によって通貨や配送ルールが予期せず変更されるとしたら、それは誰も要求していない変更であり、せっかく歓迎しようとしている海外の顧客を遠ざけてしまう可能性があるということです。

言語セレクタの種類

ほとんどの選考委員は、以下の4つの形式のいずれかに分類される。ここでどれが最適かを問うよりも、より建設的な問いは、どの言語数が適切で、どれだけの視覚的なスペースを確保できるか、という点である。

ドロップダウン メニューは拡張性に優れています。 3つか4つ以上の言語を扱うようになったら、それらが最も安全なデフォルト設定です。
ボタン列は、 より確実で直感的な操作感を提供する。そのため、対応言語が限られているサイト、例えば二言語対応の政府機関サイトや、2つの市場向けにサービスを提供するSaaS製品などは、こうした形式を好む傾向があります。
テキストリンクは フッターでの使用に適しています。フッターに完全なコンポーネントを配置すると、見た目が重くなってしまうからです。
助動詞は 言語選択を前面に押し出すため、「フランス語がお好みですか？」といった一度限りの提案には便利ですが、ページを読み込むたびに表示されるとすぐに飽きられてしまいます。

ウェブサイトのヘッダーにある、軽くて丸みを帯びた言語選択ドロップダウンメニュー。マウスオーバー時に「Français」がハイライト表示される。

基本に立ち返る

With the different formats in mind, let’s look at the classic best practices and see which ones still hold up in 2026.

母国語の名前を使用してください。「Deutsch」と「Español」という表記は、訪問者に自分の言語がリストに含まれていることをすぐに知らせる。「ドイツ語」や「スペイン語」といった表記は、英語を母国語としない人が、自分が読みにくい言語で書かれたリストをざっと目を通すきっかけとなる。
旗をスキップします。これらは言語ではなく国を表しており、そのマッピングは頻繁に破綻する。スペイン語は約 20 カ国で公用語となっているが、英語は特定の国旗に属さず、スイスだけでも一つの国旗の下に4つの公用語が存在する。地球儀、吹き出しの記号、シンプルな「A/文」マークなど、普遍的な言語アイコンは、訪問者がどこにいても正しく読み取れます。
見つけやすくする。ほとんどのサイトでは、それはヘッダーの右上隅を意味します。コンテンツ量の多いサイトや編集サイトなど、ヘッダーのスペースが貴重な場合は、フッターを利用できます。モバイル端末では、言語のためだけに別の操作画面を作るのではなく、ナビゲーションメニューと同じメニューに配置してください。
訪問者同士の認識を統一する。 ユーザーが商品ページで言語を切り替えた場合、ホームページに戻されるのではなく、新しい言語で同じ商品ページに遷移するべきです。来店客に来た道を戻らせるのは、特に購入寸前だった客にとっては、あっという間に客を失う原因となる。
提案はするが、強制はしない。 訪問者のIPアドレスやブラウザの設定に基づいて自動的にリダイレクトされ、それを上書きする方法がないことは、多言語サイトに関する最も一般的な不満の一つです。 VPN、共有コンピュータ、そして旅行者といった要素はすべて、その推測を覆す要因となる。ユーザーの好みが推測できる場合は、それを提案として提示し、訪問者がいつでも元の設定に戻せる明確で永続的な方法を常に提供してください。
彼らの選択を覚えておいてください。 訪問者が言語を選択したら、すべてのページと再訪問時にその言語を維持する。ユーザーが意図的に選択した内容は、サイトがユーザーの所在地やブラウザから推測した内容よりも常に優先されるべきです。

基本を超えて：ソート順と言語・国・通貨の分割

そうした基礎知識は、強固な土台となる。しかし、セレクターの構築を始めると、2つのより難しい問題が浮上し、ほとんどのベストプラクティスガイドではそれらが見落とされている。

1. アルファベットが混在するリストを並べ替えるにはどうすればよいですか？

ドイツ語、日本語、アラビア語を網羅する単一のアルファベット順は存在しません。なぜなら、これらの文字体系は共通のアルファベットを持たないからです。ラテン文字言語であっても、単純なコンピュータによるソートでは誤りが発生します。例えば、アクセント付きの「Č」を「C」のような文字ではなく、別の文字として読み取ってしまうため、「Čeština」が「Türkçe」の後に表示されてしまいます。

ほとんどのサイト（数十言語程度まで）の場合、実際的な解決策は次のとおりです。

言語を文字体系ごとに分類する。 ラテン文字、キリル文字、アラビア文字、CJK（中国語、日本語、韓国語）など。
グループを、あなたが選んだ固定の順序で並べてください。 一般的なアプローチとしては、聴衆の大多数が使用しているスクリプトを最初に提示する方法があります。
各グループ内で、そのスクリプト独自のルールに従って並べ替えを行う。 ラテン語の場合、それはチェコ語がリストの最後ではなく、デンマーク語やドイツ語の隣に位置づけられることを意味する。

結果は次のようになります: Čeština、Deutsch、English、Español、Français、Português → Русский、Українська → العربية → 中文、日本語、한국어 。

リストに数百もの言語が含まれている場合、手動での並べ替えは現実的ではなくなり、代わりに各言語グループごとに地域を考慮した並べ替えツールが必要になります。

2. 言語、国、通貨は、選択肢が1つであるべきか、それとも3つであるべきか？

先ほど登場したカナダ人とスペイン人の買い物客を覚えていますか？ここからそのアイデアが実践的になる。

多くの大手ECサイトでは、言語、国、通貨を一つの「市場」セレクターに統合している。小売業者にとっての理由は、配送規則、税金、支払い方法が国によって異なるため、それらをまとめて一つの選択肢にすることで、チェックアウトが簡素化されるからです。それは妥当なトレードオフだ。

SaaSツール、メディアサイト、あるいは駐在員、リモートワーカー、または請求先の国と希望する言語が異なる人が利用するデジタル製品など、3つの言語が必ずしも一緒に必要ではない製品にとっては、これは間違ったトレードオフです。ブラジル在住のドイツ語話者は、ドイツ語のテキストとブラジルレアルでの価格表示を望んでおり、両者を強制的に一緒に表示させることを望んでいません。

経験則：

言語によって ページ上のテキストが変わります。
通貨によって 価格の表示方法が変わります。
国や地域は 言語の違いを超え、さまざまなレベルのローカライゼーションを提供する可能性がある

製品がそれらを連携させないと動作しない場合を除き、3つのコントロールはそれぞれ独立したものとして維持してください。

検出、リダイレクト、および後からの言語の追加

検出は提案に用いるべきであり、決定に用いるべきではない。

「提案はするが、強制はしない」という原則を覚えておいてください。うまくやるにはこうすればいい。

初回訪問時の最も確実なシグナルは、訪問者のブラウザまたはデバイスの言語です（Accept-Languageヘッダーで送信されるか、JavaScriptのnavigator.languageで読み取ることができます）。 IPアドレスに基づく位置情報とは異なり、これはユーザーが実際に設定した言語を反映します。

それはより良い手がかりとなるが、それでもあくまで手がかりであって、あなたが彼らのために下す決定であってはならない。そうすることで、訪問者が「はい」と言うまで何も変化しないため、自動的にリダイレクトされるのではなく、訪問者自身が電話をかけることになります。

後から追加する言語向けにビルドする

多くのサイトは、開設時の言語数にとどまらないため、現在のセレクターで設定した言語リストが足りなくなった場合はどうすればよいでしょうか？

答えは簡単です。既に公開済みの言語からセレクタの言語リストを自動的に生成し、hreflangタグも手動で管理するのではなく、同じ方法で生成すればよいのです。例えば、 Bablicこれを自動的に行います。 hreflangとx-defaultが初めての方は、 hreflang x-default の解説記事でその仕組みをご確認いただけます。

独自のセレクターを作成する

最も単純な形で言えば、言語セレクターとは、それぞれが別の言語のページを指すリンクのリストにすぎません。

HTML

<a href="/es/pricing/" hreflang="es" lang="es" aria-current="page">スペイン語</a>

</nav>

すべての細部が重要な目的を果たしている。

lang は、 スクリーンリーダーに各言語名を正しく発音する方法を指示します。
aria-current="page" は、 現在アクティブな言語を支援技術に伝えます。
各リンクはホームページではなく、別の言語の同じページ（ここでは料金ページ）を指している ため、訪問者は自分の位置を見失うことはありません。

これらをドロップダウンリストとして表示するか、ボタン列として表示するか、あるいは単なるリンクとして表示するかは、デザイン上の選択です。より重要なのは、その下にあるURL構造です。ほとんどのサイトはサブディレクトリ（/es/）またはサブドメイン（es.example.com）を使用します。クエリパラメータ（?lang=es）は機能しますが、Googleは言語バージョンに対してこれらを使用することを推奨していません。どちらを選択するにしても、ページの<head>タグ（またはサイトマップ）内のhreflangタグは、その構造と完全に一致する必要があります。検索エンジンは、適切な検索ユーザーに適切なバージョンの情報を提供するために、この情報を使用します。

サイトが Bablicで翻訳されている場合は、チームに合った方法を選択できます。

内蔵セレクターを使用してください。 Bablic ダッシュボードの 「プロジェクト」→「セレクター」 から既成のスタイルを選択し、ブランドに合わせて調整してください。コードは必要ありません。
カスタムCSSでスタイルを設定します。 Bablicのセレクターはそのまま使用しつつ、色、フォント、間隔、アイコンなどを微調整して、ご自身のデザインシステムに完全にマッチするようにしてください。
ゼロから自分で構築しよう。 チームが完全な制御を望む場合、カスタムセレクターの役割は2つだけです。それは、訪問者をセットアップ（サブディレクトリ、サブドメイン、またはパラメータ）に適したURLに誘導することと、新しい言語が表示されるようにページを再読み込みすることです。アイコンかテキストか、並べ替え順序、ドロップダウンかボタンかなど、その他のことはすべてあなた次第です。

Bablic ウェブサイトの言語セレクターのドロップダウンメニューで英語が選択されており、Deutsch、Español、Français、Italiano、Português、日本語がリストされています。

迅速なローンチを希望するチームはデフォルト設定のままで済み、ブランドイメージを隅々まで反映させたいチームはカスタマイズの余地が十分にあります。

どの道を選んだとしても、どのパターンがあなたのオーディエンスにとって最適かは、あなた自身のデータだけが教えてくれるのです。 2つのデザインで迷っている場合は、簡単なテストを実行できます。訪問者がどのくらいの頻度で言語を切り替えるか、また切り替えた後も滞在し続けるかどうかを追跡する。

セレクターの背後にあるものを選ぶ

優れたセレクターも、その背後にある翻訳が適切でなければ意味がない。 Bablic 機械翻訳とコンテキストエディターを組み合わせているため、チーム内の言語を話せる人が、最初から翻訳するのではなく、ページ上の特定の行を直接確認して修正することができます。機械翻訳だけで出版できるほど十分な品質かどうか疑問に思っているなら、 Google翻訳の信頼性に関する私たちの調査記事が参考になるでしょう。

ツールを比較していますか？ Bablicの比較ハブをご覧いただくか、 Bablic 仕組みに関する説明をお読みになり、セットアップ方法について詳しくご確認ください。クレジットカード不要で 30 日間無料でお試しいただけます。

よくある質問

HTMLに言語セレクターを追加するにはどうすればよいですか？ 最もシンプルな方法は、言語ごとに1つのリンクを持つ<nav>要素を使用することです。各リンクは、その言語の同じページを指しており、lang属性を持っています。スタイリングはあなた次第です。正確にする必要があるのは、URL構造と、ページ<head>またはサイトマップ内のhreflangタグです。これらは、検索エンジンにどのバージョンがどの言語用であるかを指示します。

言語セレクターを設置するのに最適な場所はどこですか？ ほとんどのサイトでは、ヘッダーの右上隅です。コンテンツ量の多いサイトや編集記事サイトなど、ヘッダーのスペースが限られている場合は、フッターを利用できます。モバイル端末では、メインナビゲーションと同じメニューに配置してください。

言語セレクターでフラグを使用すべきでしょうか？ いいえ。国旗は国を表すものであり、言語を表すものではありません。スペイン語は約 20 カ国で公用語として使われており、スイスには4つの公用語がある。代わりに、地球儀のような中立的な言語アイコンとともに、母国語名（「Deutsch」「Español」など）を使用してください。

異なるアルファベットで書かれた言語名をどのように分類しますか？ 言語を文字体系（ラテン文字、キリル文字、アラビア文字など）ごとにグループ分けし、グループを一定の順序で並べ、各グループ内でその文字体系の規則に従ってアルファベット順に並べ替える。複数の文字体系を横断して単一のアルファベット順で並べ替えると、読者にはランダムに見える順序になってしまう。

訪問者の所在地に基づいて自動的にリダイレクトするべきでしょうか？ いいえ。場所は言語を判断する上で適切な指標ではありませんし、VPN、旅行者、共有コンピューターなどはすべてその指標を無効にします。訪問者のブラウザ言語はより良い指標となるが、それを利用して言語を自動的に切り替えるのではなく、 提案する 言語として使用するべきである。訪問者が自分で選択できる明確な方法を常に提供しましょう。

なぜ一部のサイトでは、言語と国を一つのセレクターにまとめているのでしょうか？ 小売業者にとって、送料、税金、支払い方法は国によって異なるため、単一の「市場」を選択することで決済手続きが簡素化されます。 SaaSやメディアなどのデジタル製品の場合、訪問者の言語と請求先の国が一致しないことが多いため、通常は間違った判断となる。