言語セレクターは、 多言語ウェブサイト を作成する際に細心の注意を払うべき重要な要素です。なぜなら、言語スイッチャーはユーザーが言語を切り替えたいときによく訪れるものだからです。
効果的な言語切り替えボタンは、ウェブ最適化の向上から売上の増加まで、ウェブサイトにいくつかの利点をもたらすことができます。.
この記事では、言語セレクターを設計するためのベストプラクティスについて説明します。次の記事でさらに詳しく説明します。.
キーポイント：言語セレクターをデザインするためのベストプラクティス
戦略的な配置で使用率を最大化
ヘッダー/デスクトップとハンバーガー/モバイルメニューの配置は、ユーザー体験やページ速度を損なうことなくアクセシビリティを確保します。.
上書き可能なスマート自動検出
ブラウザの言語を検出しますが、常に簡単な手動での上書きを提供し、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/ は、ドイツ語に翻訳されるページのためのものです。
- ページに言語バリエーションがある場合、検索エンジンでの重複コンテンツを回避するために、自動的に正規URLを作成します。.
- アイコンや色から言語名まで、ウェブサイトのニーズに合わせて 言語スイッチャーを柔軟に設定 できます。
- 言語セレクターに追加された各言語について、言語ごとの訪問者ページビュー統計を表示できます。.
このチュートリアルでは、使用するCMSの例として WordPress を使用します。.
ステップ1: Linguise 無料アカウントの登録
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：旗のデザインを設定
その後、メイン表示セクションの下に、旗専用のデザイン設定が表示されます。以下に示す画像は、利用可能な設定オプションの一部を示しています。.
- 言語名の表示: 言語名を国名または言語自体のどちらに基づいて表示するかを選択できます。たとえば、「ドイツ語」または「Deutsch」のいずれかを表示するように選択できます。
- 英語の旗の種類： このオプションは、「English USA」や「English Britain」など、複数のバリエーションがある言語を扱う場合に適用されます。スペイン語、台湾語、ドイツ語、ポルトガル語などの言語でも同様の選択が可能です。
- フラグのスタイル： この設定では、フラグアイコンの形状を丸型または四角形（長方形）から選択できます。
ステップ6：フラグの色とサイズを設定する
フラグのデザインを設定したら、次のステップでは色、サイズ、その他のさまざまな要素を調整します。以下のインターフェースには、以下を含む多数のカスタマイズ可能な設定があります：
- 国旗の角丸: 長方形の国旗を使用する際に、ピクセル単位で角丸をカスタマイズできます。
- 言語名の色： 言語名のデフォルトのテキスト色を選択できます。
- ポップアップ言語の色： この設定は、ポップアップまたはドロップダウンエリア内の言語タイトルの色を決定します。
- 旗のサイズ： 好みに合わせて旗のサイズを変更するオプションがあります。
- 言語名のホバーカラー： この設定は、言語名にマウスをホバーしたときのテキストの色を制御します。
- ポップアップ言語のホバーカラー： 同様に、この設定はポップアップまたはドロップダウン内の言語タイトルにマウスをホバーしたときのテキストカラーを決定します。
ステップ7：フラグのボックスシャドウを設定する
最終フェーズでは、フラグの影の設定をカスタマイズする機会があります。初期設定では、ウェブサイトに表示される各フラグに影を指定できますが、次の設定は言語フラグにホバーしたときの影の効果に関するものです。.
言語スイッチャーに加えたカスタマイズ設定を保存するには、 保存 ボタンをクリックすることを忘れないでください。これにより、影の効果に対して選択した設定が実装され、将来の使用のために保存されます。
すべての設定が完了した後、ポップアップを使用した言語セレクターの表示例を以下に示します。右上隅に配置され、イニシャルを使用しています。これは単なる例であり、残りはウェブサイトのニーズに応じて自由にカスタマイズできます。.
WordPress WordPress CMS以外にも、他のウェブサイトプラットフォームを使用し、詳細なガイドに従うことができます。例えば、 OpenCart用のスイッチャーの設定 OpenCart、 Drupal用の言語スイッチャー Drupal、そして PrestaShop用のスイッチャーの設定 PrestaShopなどです。
Linguiseでシームレスな多言語体験を実現するために、言語セレクターをデザインしましょう！
ここでは、言語セレクターを設計するためのベストプラクティスと、 Linguiseを使用してそれを行う方法についての洞察を得ました！信じてください、言語スイッチャーを作成することは多くの利点を提供し、上記のポイントに基づいた最適化を保証します。.
言語セレクターを作成する際は、アイコンの使用から関連する言語の選択、配置に至るまで、上記で説明したヒントとベストプラクティスに従ってください。.
次に、 Linguise アカウントを登録し、ウェブサイトを追加して、言語セレクターを微調整し、より良いユーザー体験を提供しましょう。1ヶ月間の無料トライアル機能を試して、 Linguiseの優れた機能をお楽しみください！
