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