言語セレクターは、 多言語ウェブサイト を作成する際に細心の注意を払うべき重要な要素です。なぜなら、言語スイッチャーはユーザーが言語を切り替えたいときによく訪れる場所だからです。
効果的な言語切り替えボタンは、ウェブ最適化の向上から売上の増加まで、ウェブサイトにいくつかのメリットをもたらします。.
この記事では、言語セレクターをデザインするためのベストプラクティスについて説明します。次の記事でさらに詳しく見ていきましょう。.
重要ポイント：言語セレクターを設計するためのベストプラクティス
戦略的な配置が使用率を最大化する
ヘッダー/デスクトップとハンバーガー/モバイルメニューの配置により、ユーザー体験やページ速度を損なうことなくアクセシビリティを確保できます。.
上書き可能なスマート自動検出
ブラウザの言語を検出しますが、常に簡単に手動で上書きできるようにし、Cookieを介してユーザーの設定を記憶します。.
SEO + アクセシビリティが不可欠
hreflangタグ、スクリーンリーダー向けのARIAラベル、タッチ操作に適したデザイン、クローラー向けのJavaScript不要のフォールバックを実装しましょう。.
言語セレクターとは？
言語セレクターとは、ユーザーがウェブサイト、アプリケーション、その他のデジタルプラットフォームとやり取りする際に使用したい言語を選択できるようにするユーザーインターフェース要素または機能です。異なる言語を話すユーザーに対応するため、ウェブサイト、ソフトウェアアプリケーション、その他のデジタルインターフェースで一般的に見られます。.
言語セレクターは通常、利用可能な言語のリストを表示し、ユーザーはそのリストから希望する言語を選択できます。選択されると、テキスト、ラベル、時には画像を含むインターフェースのコンテンツが、選択された言語で表示されます。これは、グローバルなオーディエンスや多様なユーザーベースにサービスを提供するウェブサイトやアプリにとって特に重要です。.
言語セレクターは、言語スキルのレベルに関係なく、より幅広いオーディエンスがデジタルコンテンツにアクセスできるようにすることで、より良いユーザー体験に貢献します。これらはローカリティへの取り組みの重要な要素であり、開発者やデザイナーが自社製品をさまざまな言語的・文化的文脈に適応させることを可能にします。.
言語スイッチャーをカスタマイズする必要がある理由
多言語ウェブサイトで言語切り替え機能をカスタマイズすることには、いくつかの重要なメリットがあります。.
- ブランドの一貫性とビジュアルスタイル： 言語スイッチャーをカスタマイズすることで、使用される言語の見た目やスタイルを、ウェブサイトのブランディングやビジュアルスタイルと一致させることができます。言語切り替えボタンやメニューをウェブサイト全体のデザインに合わせてカスタマイズし、ユーザー体験に一貫性を持たせることができます。
- 表示言語のより詳細な制御： 言語スイッチャーに表示される特定の言語を制限したい場合があります。たとえば、複数の言語で限定版のウェブサイトを提供しており、言語スイッチャーにはそれらの言語のみを表示したい場合などです。言語スイッチャーをカスタマイズすることで、表示する言語を選択でき、利用可能なコンテンツをより細かく制御できます。
- 最適化されたユーザー体験： 言語スイッチャーをカスタマイズすることで、最適化されたユーザー体験を実現できます。たとえば、言語スイッチャーのレイアウトや位置を調整して、ユーザーが見つけやすいようにすることができます。また、通知や言語切り替えの手順など、ユーザーがこの機能を簡単に使いこなせるようにする機能を追加することもできます。
- さまざまなユーザーニーズへの対応： ユーザーごとに言語の好みは異なります。言語切り替えをカスタマイズすることで、異なる言語背景を持つユーザーのニーズに応えることができます。これには、地元のユーザー、海外からの訪問者、または別の言語の方が快適に感じるユーザーが含まれる場合があります。
- 売上コンバージョンの向上： 適切な言語切り替え機能のカスタマイズは、売上コンバージョンの向上というメリットももたらします。効果的な言語切り替え機能は、ユーザーがウェブサイトとやり取りする際の快適さを提供できるからです。CSA Researchのデータによると、消費者の72.4%が、自分の言語で情報が提供されている製品をより購入しやすいと回答しています。したがって、売上レベルも向上しないはずがありません。
言語セレクターのさまざまな種類
ウェブサイトの所有者は誰でも、自分の言語セレクターがどのような見た目になるかを慎重に検討するでしょう。もちろん、各ウェブサイトには異なる好みがあります。利用可能な言語セレクターの種類をお探しの方のために、いくつかご紹介します。.
言語ボタン
これはよく使われる言語切り替えのタイプの一つです。言語ボタンは通常、表示されている言語を示すアイコンまたはテキストで、たとえば英語なら「EN」、特定の言語を表す国旗などです。ユーザーが言語ボタンをクリックすると、適切な言語のウェブサイトのバージョンにリダイレクトされます。.
言語ボタンについては、表示が煩雑になるのを避けるため、表示する言語の数を限定することをおすすめします。一般的に、4～5言語を超えると、視覚的にごちゃごちゃした印象を与える可能性があります。ボタンはユーザーが簡単に見つけられるよう、目立つ位置に配置することが重要です。これらの点については、この記事の次のセクションでさらに詳しく説明します。.
言語ボタンは、特定の市場をターゲットにしている企業や、特定の地域で国際的なコミュニティにサービスを提供している企業に適しているかもしれません。WHOのウェブサイトで言語ボタンを使用している例は以下の通りです。.
テキストリンク
テキストリンクは、言語名をテキストとしてリンクに使用するタイプの言語切り替え機能です。たとえば、「English」「Français」「Español」などのテキストリンクを表示し、ユーザーが選択した言語のウェブサイトのバージョンに移動できるようにします。このテキストリンクは通常、ユーザーが目的の言語を選択しやすいように、リストまたはドロップダウンメニューに配置されます。.
リンク型の言語セレクターの一例は大手企業のFacebookで採用されており、リストに表示されている言語に加えて、（+）アイコンを押すとさらに多くの言語を見つけることができます。.
その後、ページは先に選択した言語にすぐに翻訳されます。.
選択メニュー
選択メニューは、ドロップダウンメニューまたはオープンメニューを使用して言語を選択するタイプの言語切り替え機能です。ユーザーがオプションメニューをクリックすると、利用可能な言語のリストが表示され、希望する言語を選択できます。オプションメニューには、言語インジケーターとして国アイコンや国旗、およびテキストでの言語名を含めることができます。.
選択メニューは言語ボタンとはかなり異なり、このタイプは単なるボタンよりも複雑です。以下のポルシェのウェブサイトからの例のように。.
ユーザーが自分の言語や目的地の国を直接入力できる言語セレクターのウェブサイトを提供します。.
ドロップダウン vs. リスト vs. ポップアップ：どれが最適？
言語セレクターに適切なインタラクションモデルを選ぶことは、シームレスで直感的なユーザー体験を提供するために極めて重要です。ドロップダウン、インラインリスト、ポップアップなど、それぞれの方法は、ウェブサイトのレイアウト、対応言語数、ユーザー行動に応じて異なる利点をもたらします。以下では、言語選択における3つの主要なインタラクションモデルを、UX、アクセシビリティ、実装コンテキストに焦点を当てて比較します。.
タイプ | 強み | 制限事項 | 最適なユースケース |
ドロップダウン | コンパクトでクリーン、拡張性があり、多言語に対応 | 操作（クリック/タップ）が必要で、すべてのユーザーにとって分かりやすいとは限りません | スペースに制約がある多言語ウェブサイト |
テキストリスト | 操作なしで表示され、主要言語へのアクセスが迅速 | UIが煩雑になりやすく、多言語にはスケールしません | 主要な言語オプションが2～4つあるサイト |
ポップアップ | 検索フィールドを含めることができ、柔軟なUIデザインが可能 | ユーザーフローを妨げる可能性があり、明確な閉じるボタンとアクセシビリティが必要 | 10以上の言語を提供するグローバルサイト |
言語セレクターのベストプラクティスとヒント
効果的な言語セレクターを設計するには、すべてのデバイスでシームレスな体験を提供し、さまざまな背景を持つユーザーにとってのアクセシビリティを確保することが重要です。オーディエンスがますますグローバル化する中、ユーザーが好みの言語で快適に操作できるよう、言語スイッチャーは直感的で、アクセシブルで、レスポンシブであるべきです。.
以下は、言語セレクターがすべてのユーザーにとって明確で便利、かつアクセシブルであることを保証するために適用できるベストプラクティスです。.
レスポンシブデザインを優先する
ほとんどのユーザーはモバイルデバイスからウェブサイトにアクセスするため、言語セレクターはレスポンシブでモバイルフレンドリーである必要があります。ボタンやメニューがタップしやすく、重要なコンテンツを覆わず、小さな画面でも表示され続けるようにしてください。.
たとえば、言語セレクターのウェブサイトはこのようになります。.
そして、モバイル側から見た場合でも、言語セレクターに簡単にアクセスでき、移動したり消えたりすることはありません。.
ドロップダウンや展開可能なメニューを使用してレイアウトを整頓し、タッチターゲットに快適な操作のための十分な間隔を確保してください。これにより、ユーザーは窮屈な要素やクリックしにくい要素によるストレスなく、希望の言語を簡単に選択できます。.
インターフェース内での配慮ある配置
言語セレクターは、ヘッダーの右上隅やフッターの下部など、目立つことが予想される場所に配置してください。これらは、ユーザーが言語オプションを探す際に通常目にする直感的な場所です。.
セレクターを曖昧なアイコンや二次メニューの中に隠さないでください。頻繁に言語を切り替えるユーザーがいつでも簡単に見つけられるよう、すべてのページで配置を一貫させてください。.
アクセシビリティ属性（ARIA）を使用する
言語セレクターを障がいのあるユーザーが利用できるようにするには、aria-label、aria-haspopup、aria-expanded などの ARIA（Accessible Rich Internet Applications）属性を使用します。これらは、スクリーンリーダーなどの支援技術が要素の役割と機能を理解するのに役立ちます。.
アクセシビリティを実装することでWCAG基準を満たし、サイトがより幅広いユーザーにとって包括的で使いやすいものになります。インクルーシブデザインは、特定のニーズを持つユーザーだけでなく、すべての人に利益をもたらします。.
明確で認識しやすい言語ラベルを使用する
各言語オプションは、その言語のネイティブ表記で表示しましょう。たとえば「Spanish」ではなく「Español」、「German」ではなく「Deutsch」と表示します。これにより、ユーザーは現在のサイト言語を理解していなくても、自分の好みの言語をすぐに認識できます。.
ネイティブのラベルはより包括的で、特に国際的なユーザーの認知負荷を軽減します。視聴者が理解している場合を除き、不明瞭な略語や言語コードの使用は避けてください。.
オプションが多すぎて過負荷にならないようにする
一度にあまりに多くの言語オプションを表示すると、インターフェースが煩雑になり、ユーザーが混乱する可能性があります。最も関連性の高い、またはよく使われる言語のみを最初に表示し、残りはドロップダウンメニューまたは「その他の言語」セクションに配置しましょう。.
これによりインターフェースがすっきりと保たれ、特にモバイルでの使いやすさが向上します。ウェブサイトのトラフィック分析を活用して、どの言語を優先するか、または非表示にするかを判断しましょう。.
適切なアイコンと視覚的な手がかりを使用する（国旗に頼らずに）
地球アイコン（🌐）、下向き矢印（▾）、アクティブ状態のハイライトなどの視覚的な手がかりは、要素がクリック可能であることをユーザーが理解するのに役立ちます。ただし、1つの言語は複数の国で話されている可能性があるため、言語を表すのに国旗を使用することは避けてください。.
国旗には文化的または政治的な意味合いが含まれることもあります。ビジュアルを使用する場合は、明確さを確保するためにテキストラベルと組み合わせ、デザイン全体を通してアイコンを一貫性があり文化的に中立なものにしてください。.
ウェブサイトのデザインとブランディングとの一貫性を保つ
言語セレクターは、ウェブサイト全体のスタイルと視覚的に調和させる必要があります。ボタン、テキストリンク、アイコンのいずれを使用する場合でも、タイポグラフィ、色、ホバー状態がブランディングと一致するようにしてください。これにより信頼が高まり、ユーザーエクスペリエンスが強化されます。.
カスタムセレクターを構築する場合は、意図したとおりに動作することを確認するために、さまざまなブラウザやデバイスでテストしてください。一貫したデザインと信頼性の高い機能は、シームレスな多言語ユーザー体験に貢献します。.
Linguise で言語セレクターを設定する7つのステップ
この時点で、言語セレクターのベストプラクティスはご理解いただけたかと思います。この翻訳は、ウェブサイト翻訳サービスを使用した後に行うことができます。ただし、すべての翻訳サービスが言語セレクター設定の柔軟性を提供しているわけではありません。.
しかし、 Linguise はそのようではないのでご安心ください。 Linguise は、言語スイッチャーのユーザーカスタマイズを提供する自動翻訳サービスです。 Linguise を使用する際に得られるメリットには、以下のようなものがあります。.
- Linguise は、 40以上のCMSに統合して使用できます （WordPress、 Joomla、 Drupalなど）。
- ウェブサイトの言語切り替えに言語を追加すると、わずか数秒でさまざまな言語への翻訳が自動的に行われます。.
- 言語セレクターに追加できる言語は 80以上 あります。
- Linguise は、翻訳先の言語に応じて自動的に一意のURLを準備します。例えば、ドイツ語に翻訳されるページのURLは linguise.com/de/ となります。
- ページに言語バリエーションがある場合、検索エンジンでの重複コンテンツを回避するために、自動的にcanonical URLを作成します。.
- 言語スイッチャーは、 アイコンや色から言語名まで 、ウェブサイトのニーズに合わせて柔軟に設定できます。
- 言語セレクターに追加された各言語について、言語ごとの訪問者ページビュー統計を表示できます。.
このチュートリアルでは、使用するCMSの例として WordPress を使用します。.
ステップ1： Linguise の無料アカウントを登録する
Linguiseの言語スイッチャーにアクセスするには、最初に行う必要があるのは Linguiseで、 アカウントを登録することです。 Linguise。 Linguise では、1か月間の無料トライアルも提供しており、さまざまな機能を利用できます。
ステップ2：多言語ウェブサイトにドメインを追加する
2番目のステップは、 すでに所有しているウェブサイトのドメインを Linguise に追加し、 Linguise ダッシュボードに登録することです。入力する必要がある項目がいくつかあり、まずは以下から始めます。
- アカウント
- URL
- プラットフォーム
- 言語
- 翻訳言語
- URLを翻訳
その後、APIキーを有効化し、言語URLを設定する必要があります。ウェブサイトドメインの追加に関する完全なガイドについてはドキュメントをお読みください。特に WordPressの場合は、 インストール Linguise の自動翻訳を WordPress で行う方法を確認するか、以下のビデオチュートリアルをご覧ください。
ステップ3： Linguiseプラグインをインストールする
ウェブサイトの追加が完了したら、 WordPress ダッシュボードを開き、 Linguise プラグインをインストールします。手順は プラグイン > 新規追加 > Linguise > インストール > 有効化です。
プラグインがすでにインストールされている場合は、 Linguise ダッシュボードに移動して API キーをコピーしてください。.
次に、 Linguise プラグインを開き、 Linguise ダッシュボードから取得したAPIコードを次の列に貼り付けます。.
ステップ4：メインディスプレイの設定
言語切り替えツールや言語フラグを表示するための設定は、 Linguise ダッシュボードの 設定 > 言語フラグ表示メニューから行います。
初期設定では、さまざまなコンポーネントを考慮して、メイン表示を調整します。.
最初に検討すべき点は、言語リストの表示形式の設定です。横並び、ドロップダウン、ポップアップの3つのオプションから選択できます。左側には、各形式のプレビュー表示があります。.
以下に示す最初の形式は、左右に並べたレイアウトです。.
以下の形式は、下の画像に示すようにドロップダウンスタイルを採用しています。.
最後に、最終オプションとしてポップアップ形式があります。.
次に、言語切り替えボタンの位置を設定する次のステップに進みます。さまざまな位置オプションから柔軟に選択できるため、訪問者に気づきやすい位置を選ぶことが重要です。.
最後に、言語オプションを表示する際の組み合わせ設定を決定する必要があります。国旗＋言語名、国旗＋短縮名、または国旗のみを表示するなど、オプションから選択できます。この決定は、あなたの具体的なデザインの好みと、ターゲットオーディエンスの好みによって異なります。.
ステップ5：旗のデザインを設定する
その後、メイン表示セクションの下に、フラグ専用のデザイン設定が表示されます。以下に示す画像は、利用可能な設定オプションの一部を説明しています。.
- 言語名の表示: 言語名を国名または言語自体のどちらに基づいて表示するかを選択できます。たとえば、「German」または「Deutsch」のいずれかを表示するよう選択できます。
- 英語の旗の種類： このオプションは、「英語（アメリカ）」や「英語（イギリス）」など、複数のバリエーションがある言語を扱う場合に適用されます。スペイン語、台湾語、ドイツ語、ポルトガル語などの言語でも同様の選択が可能です。
- 旗のスタイル： この設定では、旗アイコンの形状を丸型または四角形（長方形）から選択できます。
ステップ6：旗の色とサイズを設定する
旗のデザインを設定したら、次のステップでは色、サイズ、その他さまざまな要素を調整します。以下のインターフェースには、次のような多数のカスタマイズ可能な設定があります：
- 国旗の角丸: 長方形の国旗を使用する際に、角丸をピクセル単位でカスタマイズできます。
- 言語名の色： 言語名のデフォルトのテキスト色を選択できます。
- ポップアップ言語の色： この設定は、ポップアップまたはドロップダウン領域の言語タイトルの色を決定します。
- 旗のサイズ： 好みに合わせて旗のサイズを変更できます。
- 言語名のホバーカラー： この設定は、言語名にマウスをホバーしたときのテキストカラーを制御します。
- ポップアップ言語のホバー色： 同様に、この設定はポップアップまたはドロップダウンで言語タイトルにマウスをホバーしたときのテキスト色を決定します。
ステップ7：旗のボックスシャドウを設定する
最終フェーズでは、旗の影の設定をカスタマイズする機会があります。最初の設定では、ウェブサイトに表示される各旗に影を指定できます。次の設定は、言語の旗にカーソルを合わせたときの影の効果に関するものです。.
言語スイッチャーに加えたカスタマイズ設定を保存するには、 保存 ボタンをクリックするのを忘れないでください。これにより、影の効果に対して選択した設定が適用され、今後の使用のために保存されます。
すべての設定が完了した後、ポップアップを使用し、右上隅に配置され、イニシャルを使用した言語セレクター表示の例を次に示します。これは単なる例であり、残りはウェブサイトのニーズに応じて自由にカスタマイズできます。.
WordPressの WordPress CMS以外にも、他のウェブサイトプラットフォームを使用でき、詳細なガイドに従って設定できます。例えば、 OpenCartのスイッチャー設定 OpenCart、 Drupalの言語スイッチャー Drupal、そして PrestaShopのスイッチャー設定 PrestaShopなどがあります。
Linguiseでシームレスな多言語体験を実現する言語セレクターをデザインしましょう！
ここでは、言語セレクターを設計するためのベストプラクティスと、 Linguiseを使ったその方法についての知見を得ました。信じてください、言語スイッチャーを作成することは多くのメリットをもたらし、上記のポイントに基づいた最適化を確実にします。.
言語セレクターを作成する際は、アイコンの使用から関連する言語の選択、配置に至るまで、上記で説明したヒントとベストプラクティスに従うようにしてください。.
次に、 Linguise アカウントを登録し、ウェブサイトを追加して、言語セレクターを微調整し、より良いユーザー体験を提供しましょう。1か月間の無料トライアル機能を試して、 Linguiseの優れた機能をお楽しみください！
