多言語サイトにおいて、言語切り替えUI（ランゲージスイッチャー）はユーザーが最初に触れるインターフェースの一つです。しかし、多くのWebサイトで言語切り替えUIが見つけにくかったり、使いにくかったりするのが現状です。

この記事では、言語切り替えUIの設計パターン、配置場所のベストプラクティス、アクセシビリティ対応を解説し、ユーザーがストレスなく言語を切り替えられるUIの作り方を紹介します。

言語切り替えUIの重要性

なぜ言語切り替えUIが重要なのか

多言語サイトを訪れたユーザーが適切な言語でコンテンツを閲覧できなければ、せっかくの翻訳投資が無駄になります。以下のデータが重要性を物語っています。

自動言語検出だけでは不十分

ブラウザの言語設定やIPアドレスから自動的に言語を判定するサイトもありますが、自動検出だけに頼るのは危険です。

自動検出はあくまで初期表示言語の提案に使い、ユーザーがいつでも明示的に言語を切り替えられるUIを提供することが不可欠です。

主要なデザインパターン

パターン1: ドロップダウンメニュー

最も一般的なパターンです。現在の言語名が表示され、クリック/タップするとドロップダウンで他の言語が表示されます。

パターン2: インラインリスト（テキストリンク）

すべての対応言語をテキストリンクとして横並びに表示するパターンです。「日本語 | English | 中文」のような形式です。

パターン3: 国旗アイコン付きドロップダウン

ドロップダウンメニューに国旗のアイコンを追加するパターンです。視覚的にわかりやすいのが利点ですが、後述するアンチパターンとの関連に注意が必要です。

パターン4: フローティングボタン

画面の隅に常に表示される浮遊型のボタンです。地球のアイコン（Globe icon）が使われることが多いです。

デザインパターン比較表

パターン 対応言語数 視認性 操作性 スペース効率
ドロップダウン 4〜30+ 中 2クリック 高い
インラインリスト 2〜3 高い 1クリック 低い
国旗付きドロップダウン 4〜15 高い 2クリック 中
フローティングボタン 2〜30+ 中〜高 2クリック 非常に高い

配置場所のベストプラクティス

ヘッダー右上（推奨）

最も一般的で推奨される配置場所です。ユーザーの期待に合致しており、多くの大手サイト（Google、Apple、Microsoft等）がこの配置を採用しています。

フッター

フッターへの配置は補助的な位置づけとして有効です。ヘッダーに配置する場合でも、フッターにも併設すると見つけやすさが向上します。

モバイルでの配置

モバイルデバイスでは画面スペースが限られるため、以下の点に注意が必要です。

避けるべき配置

やってはいけないアンチパターン

アンチパターン1: 国旗 = 言語

最も多いアンチパターンが、国旗を言語のシンボルとして使うことです。これには以下の問題があります。

W3Cは「国旗を言語の識別に使うべきではない」と明確に推奨しています。国旗は国を表すものであり、言語を表すものではありません。

代わりに、言語名をその言語自体で表記するのがベストプラクティスです（例: 「English」「日本語」「Deutsch」「Espanol」）。

アンチパターン2: 現在の言語でのみ表記

言語名を現在表示中の言語でのみ表記するのは避けましょう。例えば、日本語ページで「英語」「中国語」と表記しても、英語話者や中国語話者には読めません。

各言語名は、その言語自体で表記するのが鉄則です。

悪い例 良い例
英語 English
Japanese 日本語
Chinese 中文
Korean 한국어
French Francais

アンチパターン3: 自動リダイレクトのみ

IPアドレスやブラウザの言語設定で自動的にリダイレクトし、手動での切り替えUIを提供しないサイトがあります。これはユーザー体験を大きく損ないます。

多言語SEOへの影響については多言語SEOの基本も参照してください。

アンチパターン4: ページ全体のリロード

言語を切り替えるたびにページ全体がリロードされ、ユーザーの現在位置（スクロール位置、フォーム入力内容など）がリセットされるのは避けるべきです。可能であれば、言語の切り替えはページ遷移なしで行うか、同じセクションに遷移するようにしましょう。

アクセシビリティ対応

WAI-ARIAによるマークアップ

言語切り替えUIは、スクリーンリーダーなどの支援技術からも適切にアクセスできるようにする必要があります。以下のARIA属性を活用しましょう。 

<nav aria-label="言語の選択">
  <button
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-label="言語を変更: 現在は日本語"
  >
    日本語
  </button>
  <ul role="listbox" aria-label="利用可能な言語">
    <li role="option" aria-selected="true" lang="ja">日本語</li>
    <li role="option" aria-selected="false" lang="en">English</li>
    <li role="option" aria-selected="false" lang="zh">中文</li>
  </ul>
</nav>

キーボード操作への対応

マウスやタッチだけでなく、キーボードでも操作できるようにします。

lang属性の設定

各言語名を表示する要素には、適切なlang属性を設定します。これにより、スクリーンリーダーが各言語名を正しい発音で読み上げます。 

<li lang="en">English</li>
<li lang="ja">日本語</li>
<li lang="ko">한국어</li>
<li lang="zh">中文</li>

十分なコントラストとタップ領域

アクセシビリティガイドライン（WCAG 2.1）に従い、以下の点を確認しましょう。

blaidの言語切り替えUI

自動生成されるランゲージスイッチャー

blaidでは、多言語化スクリプトを設置するだけで、サイトのデザインに合わせた言語切り替えUIが自動的に生成されます。上記で解説したベストプラクティスがすべて適用済みです。

カスタマイズオプション

blaidの言語切り替えUIは、以下の項目をカスタマイズできます。

カスタマイズ項目 オプション
配置場所 ヘッダー右上、フッター、フローティング
表示形式 ドロップダウン、インラインリスト
言語名の表記 ネイティブ名、英語名、言語コード
デザイン サイトのテーマカラーに自動適応、CSSでカスタマイズ可能

ノーコードで多言語サイトを構築する他のツールとの比較はノーコード多言語化ツール比較で紹介しています。多言語化全般の進め方についてはウェブサイト多言語化の方法と費用比較もご参照ください。

まとめ

言語切り替えUIの設計は、多言語サイトのユーザー体験に直結する重要な要素です。以下のポイントを押さえましょう。

  1. デザインパターン — 対応言語数に応じて、ドロップダウン（4言語以上）またはインラインリスト（2〜3言語）を選択
  2. 配置場所 — ヘッダー右上が最も推奨。モバイルではアイコン表示やハンバーガーメニュー内に配置
  3. 言語名の表記 — 各言語名はその言語自体で表記する（「English」「日本語」「中文」）
  4. 国旗は使わない — W3Cの推奨に従い、国旗を言語のシンボルとして使わない
  5. アクセシビリティ — ARIA属性、キーボード操作、十分なコントラストとタップ領域を確保
  6. 自動検出+手動切り替え — 自動言語検出は初期表示の提案のみ。手動切り替えUIは必ず提供

blaidを使えば、これらのベストプラクティスをすべて満たした言語切り替えUIがスクリプト1行で自動生成されます。デザインのカスタマイズも管理画面から簡単に行えます。無料プランから始められるので、まずはお試しください。