言語セレクターは、ユーザーが言語を切り替えたいときに頻繁にアクセスするものであるため、多言語 Web サイト
効果的な言語切り替えボタンは、Web の最適化から売上の増加まで、Web サイトにいくつかのメリットをもたらします。
この記事では、言語セレクターを設計するためのベスト プラクティスについて説明します。 次の記事でさらに詳しく説明します。
言語セレクターとは何ですか?
言語セレクターは、ユーザーが Web サイト、アプリケーション、またはデジタル プラットフォームと対話する言語を選択できるようにするユーザー インターフェイス要素または機能です。 これは、さまざまな言語を話すユーザーに合わせて、Web サイト、ソフトウェア アプリケーション、その他のデジタル インターフェイスでよく見られます。
通常、言語セレクターには使用可能な言語のリストが表示され、ユーザーはそのリストから希望の言語を選択できます。 選択すると、テキスト、ラベル、場合によっては画像などのインターフェイス コンテンツが、選択した言語で表示されます。 これは、世界中の視聴者や多様なユーザー ベースにサービスを提供する Web サイトやアプリにとって特に重要です。
言語セレクターは、言語スキル レベルに関係なく、幅広い視聴者がデジタル コンテンツにアクセスできるようにすることで、ユーザー エクスペリエンスの向上に貢献します。 これらはローカリティへの取り組みの重要な要素であり、開発者やデザイナーが製品をさまざまな言語的および文化的背景に適応させることができます。
言語スイッチャーをカスタマイズする必要があるのはなぜですか?
多言語 Web サイトで言語スイッチャーをカスタマイズすると、いくつかの重要な利点があります。
- ブランドの調整とビジュアル スタイル:言語スイッチャーをカスタマイズすることで、使用される言語の外観とスタイルが Web サイトのブランドおよびビジュアル スタイルと確実に一致するようにすることができます。 Web サイトの全体的なデザインに合わせて言語切り替えボタンやメニューをカスタマイズして、ユーザー エクスペリエンスに一貫性を持たせることができます。
- 表示言語の制御の強化:場合によっては、言語スイッチャーに表示される特定の言語を制限したい場合があります。 たとえば、いくつかの言語で限定されたバージョンの Web サイトがあり、言語スイッチャーではそれらの言語のみを表示したいとします。 言語スイッチャーをカスタマイズすると、表示する言語を選択できるため、利用可能なコンテンツをより詳細に制御できるようになります。
- 最適化されたユーザー エクスペリエンス:言語スイッチャーをカスタマイズすることで、最適化されたユーザー エクスペリエンスを作成できます。 たとえば、言語スイッチャーのレイアウトや位置を調整して、ユーザーが見つけやすいようにすることができます。 また、ユーザーが機能の使用方法を簡単に理解できるように、通知や言語切り替えの指示などの機能を追加することもできます。
- さまざまなユーザーのニーズに対応:ユーザーごとに言語の好みが異なります。 言語切り替えをカスタマイズすることで、さまざまな言語背景を持つユーザーのニーズを満たすことができます。 これには、地元のユーザー、海外からの訪問者、または別の言語の方が慣れているユーザーが含まれる可能性があります。
- 販売コンバージョンの増加:言語スイッチャーを適切にカスタマイズすると、販売コンバージョンが増加するという利点もあります。 効果的な言語スイッチャーがあれば、Web サイトを操作する際にユーザーが快適に操作できるからです。 CSA Research のデータによると、消費者の 72.4% が、母国語で情報が掲載されている製品を購入する可能性が高いと回答しました。 したがって、あなたの売上レベルも上がることは不可能です。
さまざまな種類の言語セレクター
すべての Web サイト所有者は、言語セレクターがどのようなものであるかを慎重に検討するでしょう。もちろん、各 Web サイトには異なる好みがあります。 使用できる言語セレクターの種類を探している方のために、ここにいくつかの言語セレクターを示します。
言語ボタン
これは、一般的に使用されるタイプの言語スイッチャーの 1 つです。 言語ボタンは通常、表示されている言語を示すアイコンまたはテキストです。たとえば、英語の場合は「EN」、特定の言語を表す国旗などです。 ユーザーが言語ボタンをクリックすると、適切な言語の Web サイトのバージョンにリダイレクトされます。
言語ボタンについては、表示が乱雑になるのを避けるために、表示する言語の数を制限することをお勧めします。 一般に、4 ～ 5 つ以上の言語を使用すると、煩雑な視覚効果を生み出すことができます。 ユーザーが簡単に見つけられるように、ボタンを目に見える場所に配置することが重要です。 これらの側面については、この記事の次のセクションで詳しく説明します。
言語ボタンは、特定の市場をターゲットにしたり、特定の場所で国際コミュニティにサービスを提供したりする企業に適している場合があります。 WHO Web サイトの言語ボタンの使用例は次のとおりです。
テキストリンク
テキスト リンクは、言語名の形式のテキストをリンクとして使用する言語スイッチャーの一種です。 たとえば、「英語」、「フランス語」、「スペイン語」などのテキスト リンクを表示して、選択した言語の Web サイトのバージョンにユーザーを誘導できます。 このテキスト リンクは通常、ユーザーが目的の言語を選択しやすくするためにリストまたはドロップダウン メニューに配置されます。
リンク言語セレクターの 1 つのタイプは、大手企業 Facebook によって使用されており、リストされている言語に加えて、(+) アイコンを押してさらに多くの言語を見つけることもできます。
その後、ページは前に選択した言語にすぐに翻訳されます。
選択メニュー
選択メニューは、ドロップダウン メニューまたはオープン メニューを使用して言語を選択する一種の言語スイッチャーです。 ユーザーがオプション メニューをクリックすると、利用可能な言語のリストが表示され、希望の言語を選択できます。 オプション メニューには、言語インジケーターとして国のアイコンや国旗、およびテキスト内の言語名を含めることができます。
選択メニューは言語ボタンとはまったく異なり、このタイプは単なるボタンよりも複雑です。 ポルシェのウェブサイトから引用した以下の例のように。
ユーザーが自分の言語または目的地の国を直接書き留めることができる言語選択 Web サイトを提供しています。
ドロップダウンvs.リスト対ポップアップ：どちらが最適ですか？
言語セレクターに適切なインタラクションモデルを選択することは、シームレスで直感的なユーザーエクスペリエンスを提供するために重要です。ドロップダウン、インラインリスト、またはポップアップであろうと、各方法は、ウェブサイトのレイアウト、サポートされている言語の数、ユーザーの動作に応じて、さまざまな利点を提供します。以下は、UX、アクセシビリティ、および実装コンテキストに焦点を当てた言語選択の3つの主要な相互作用モデルの比較です。
タイプ | strenghts | 制限 | ベストユースケース |
落ちる | 多くの言語を備えたコンパクト、クリーン、スケーラブル | インタラクションが必要（クリック/タップ）、すべてのユーザーには明らかではない場合があります | スペースの制約を備えた多言語Webサイト |
テキストリスト | 相互作用なしで表示され、主要言語のアクセスが高速です | UIが乱れ、多くの言語ではスケーラブルではありません | 2〜4個の主要な言語オプションを備えたサイト |
ポップアップ | 検索フィールド、柔軟なUIデザインを含めることができます | ユーザーのフローを混乱させる可能性があり、明確な近いボタンとアクセシビリティが必要です | 10以上の言語を持つグローバルサイト |
言語セレクターのベスト プラクティスとヒント
効果的な言語セレクターを設計するには、すべてのデバイスでシームレスなエクスペリエンスを提供し、さまざまなバックグラウンドを持つユーザーのアクセシビリティを確保することが含まれます。ますますグローバルな視聴者がいるため、言語スイッチャーは、ユーザーが好みの言語で快適に対話できるように、直感的でアクセスしやすく、レスポンシブでなければなりません。
以下は、言語セレクターがすべてのユーザーにとって明確で便利で、アクセス可能であることを確認するために適用できるベストプラクティスです。
レスポンシブデザインに優先順位を付けます
ほとんどのユーザーはモバイルデバイスからWebサイトにアクセスするため、言語セレクターはレスポンシブでモバイルに優しいものでなければなりません。ボタンまたはメニューをタップしやすく、重要なコンテンツをカバーせず、小さな画面に表示されたままであることを確認してください。
たとえば、言語セレクターのウェブサイトは次のようになります。
その後、モバイル側から見ると、言語セレクターに簡単にアクセスでき、移動したり消えたりしません。
ドロップダウンまたは拡張可能なメニューを使用して、レイアウトをきれいに保ち、タッチターゲットに快適な対話に十分な間隔があることを確認します。これにより、ユーザーは、cr屈またはクリックしにくい要素によって引き起こされるフラストレーションなしに、優先言語を簡単に選択できます。
インターフェイスへの思慮深い配置
言語セレクターを、ヘッダーの右上コーナーやボトムフッターなどの非常に目に見える予想される領域に配置します。これらは、ユーザーが通常言語オプションを探している直感的な場所です。
あいまいなアイコンやセカンダリメニュー内にセレクターを隠すことは避けてください。すべてのページにわたって配置を一貫させてください。そうすれば、言語を切り替えるユーザーが頻繁にいつでも簡単に見つけることができます。
アクセシビリティ属性（ARIA）を使用する
障害のあるユーザーが言語セレクターにアクセスできるようにするには、ARIA-Label、Aria-Haspopup、Aria-ExpandedなどのARIA（アクセス可能なリッチインターネットアプリケーション）属性を使用してください。これらは、スクリーンリーダーのような支援技術が要素の役割と機能を理解するのに役立ちます。
アクセシビリティの実装はWCAG標準を満たし、サイトがより多くの視聴者によって包括的で使用可能であることを保証します。包括的デザインは、特定のニーズを持つユーザーだけでなく、すべての人に利益をもたらします。
明確で認識可能な言語ラベルを使用します
ネイティブラベルを使用して各言語オプションを表示します。たとえば、「ドイツ語」ではなく「スペイン語」または「Deutsch」の代わりに「Español」。これにより、ユーザーは現在のサイト言語を理解していなくても、優先言語をすばやく認識できます。
ネイティブラベルはより包括的であり、特に国際的なユーザーにとって認知負荷を軽減します。視聴者が知っていない限り、あいまいな略語や言語コードを使用しないでください。
あまりにも多くのオプションで過負荷を避けてください
あまりにも多くの言語オプションを一度に表示すると、インターフェイスが乱雑になり、ユーザーを混乱させることができます。最初に最も関連性のあるまたは一般的に使用される言語のみを表示し、残りをドロップダウンメニューまたは「その他の言語」セクションに配置します。
これにより、インターフェイスを清潔に保ち、特にモバイルでの使いやすさが向上します。 Webサイトトラフィック分析を使用して、どの言語を優先順位付けまたは非表示にするかを決定します。
適切なアイコンと視覚的な手がかりを使用します（フラグに依存することなく）
グローブアイコン（🌐）、下向きの矢印（▾）、またはアクティブな状態のハイライトなどの視覚的な手がかりは、ユーザーが要素がクリック可能であることを理解するのに役立ちます。ただし、複数の国で1つの言語が話される可能性があるため、国旗を使用して言語を表すことは避けてください。
旗はまた、文化的または政治的な意味を持ちます。ビジュアルを使用する場合は、テキストラベルとペアリングして明確さを確保し、デザイン全体でアイコンを一貫した文化的にニュートラルに保ちます。
ウェブサイトのデザインとブランディングと一致してください
言語セレクターは、ウェブサイトの全体的なスタイルに視覚的に整合する必要があります。ボタン、テキストリンク、またはアイコンを使用するかどうかにかかわらず、タイポグラフィ、色、およびホバー状態がブランディングに一致するようにします。これにより、信頼が向上し、ユーザーエクスペリエンスが強化されます。
カスタムセレクターを構築する場合は、さまざまなブラウザとデバイスでテストして、意図したとおりに機能するようにします。一貫した設計と信頼できる機能は、シームレスな多言語ユーザーの旅に貢献します。
Linguise で言語セレクターを 7 つのステップで設定する
この時点で、言語セレクターのベスト プラクティスがわかりました。 この翻訳は、Web サイト翻訳サービスを利用した後に行うことができます。 ただし、すべての翻訳サービスが言語セレクター設定に柔軟性を提供しているわけではありません。
しかし、 Linguise そのようなものではないので、心配する必要はありません。 Linguise は、ユーザーによる言語スイッチャーのカスタマイズを提供する自動翻訳サービスです。 Linguise 使用すると次のようなメリットが得られます。
- Linguise 40 以上の CMS ( WordPress 、 Joomla 、 Drupalなど)使用および統合できます
- ウェブサイト上の言語スイッチャーに言語を追加すると、わずか数秒でさまざまな言語への翻訳が自動的に行われます。
- 言語セレクターに追加できる言語は 80以上あります
- Linguise翻訳先の言語に応じて独自のURLを自動で用意します。 、ドイツ語に翻訳されるページのURL linguise .com/de/ など
- ページに言語のバリエーションがある場合、検索エンジンでのコンテンツの重複を避けるために正規 URL が自動的に作成されます。
- アイコンや色から言語名まで、ウェブサイトのニーズに合わせて柔軟に言語スイッチャーを設定できます
- 言語セレクターに追加された言語ごとに、訪問者のページビュー統計を言語ごとに表示できます。
このチュートリアルでは、使用する CMS の例として WordPress を使用します。
ステップ 1: Linguise 無料アカウントを登録する
Linguiseの言語スイッチャーにアクセスするには、最初にLinguiseにアカウントを登録する。 Linguise、さまざまな機能を利用できる 1 か月の無料トライアルも提供しています。
ステップ 2: 多言語 Web サイトにドメインを追加する
2 番目のステップは、既に所有しているLinguiseの Web サイト ドメインをLinguiseダッシュボードに追加することです。 から始めて、入力する必要があるものがいくつかあります。
- アカウント
- URL
- プラットホーム
- 言語
- 翻訳言語
- URLを翻訳
ステップ 3: プラグイン Linguiseをインストールする
Web サイトを正常に追加したら、 WordPressLinguiseをインストールします。これを行うには、 「プラグイン」>「新規追加」> Linguise >「インストール」>「アクティブ化」を選択します。
プラグインがすでにインストールされている場合は、 Linguise ダッシュボードに移動して API キーをコピーします。
次に、 Linguise プラグインを開き、 Linguise ダッシュボードから取得した API コードを次の列に貼り付けます。
ステップ 4: メインディスプレイのセットアップ
Linguiseダッシュボードのを使用します。
初期セットアップ中に、さまざまなコンポーネントを考慮してメイン ディスプレイを調整します。
最初に考慮すべきことの 1 つは、言語リストの表示形式の構成です。これには、サイドバイサイド、ドロップダウン、またはポップアップの 3 つのオプションから選択できます。 左側には各形式のプレビュー表示があります。
以下に示すように、最初の形式は並列レイアウトです。
次の形式は、下の図に示すようにドロップダウン スタイルを採用しています。
最後に、最後のオプションとしてポップアップ形式があります。
次に、言語スイッチャーの位置を構成する次のステップに進みます。 さまざまな位置オプションから柔軟に選択できるため、訪問者の目に留まりやすい位置を選択することが重要です。
最後に、言語オプションを表示するための組み合わせ設定を決定する必要があります。 フラグ + 言語名、フラグ + 短い名前、または単純にフラグを単独で表示するなどのオプションから選択できます。 この決定は、特定のデザインの好みと対象ユーザーの好みによって異なります。
ステップ5: 旗のデザインを設定する
その後、メイン表示セクションの下に、旗専用のデザイン構成が表示されます。 以下の画像は、利用可能な設定オプションの一部を示しています。
- 言語名の表示: 国または言語自体に基づいて言語名を表示するオプションがあります。 たとえば、「ドイツ語」または「ドイツ語」を表示するように選択できます。
- 英語の国旗タイプ:このオプションは、「English USA」や「English Britain」など、複数のバリエーションがある言語を扱う場合に適用できます。 スペイン語、台湾語、ドイツ語、ポルトガル語などの言語でも同様の選択ができます。
- 旗のスタイル:この設定では、旗のアイコンの形状を円形にするか正方形 (長方形) にするかを定義できます。
ステップ 6: フラグの色とサイズを設定する
国旗のデザインが決まったら、次は色や大きさなどさまざまな要素を調整していきます。 次のインターフェイスには、次のような多数のカスタマイズ可能な設定があります。
- Flag border-radius:これにより、長方形のフラグを使用するときに、境界線の半径をピクセル単位でカスタマイズできます。
- 言語名の色:言語名のデフォルトのテキストの色を選択できます。
- ポップアップ言語の色:この設定は、ポップアップまたはドロップダウン領域の言語タイトルの色を決定します。
- フラグのサイズ:好みに応じてフラグのサイズを変更するオプションがあります。
- 言語名のホバー色:この設定は、言語名の上にマウスを置いたときのテキストの色を制御します。
- ポップアップ言語のホバー色:同様に、この設定は、ポップアップまたはドロップダウンの言語タイトルの上にマウスを置いたときのテキストの色を決定します。
ステップ 7: フラグ box-shadow を設定する
最終段階では、旗の影の設定をカスタマイズできます。 初期設定では、Web サイトに表示される各フラグの影を指定できます。その後の設定は、言語フラグの上にマウスを移動したときの影の効果に関係します。
言語スイッチャーに対して行ったカスタマイズ設定を保存するには、[保存]をクリックしてください これにより、シャドウ効果用に選択した構成が確実に実装され、将来使用できるように保存されます。
すべての構成を実行した後、右上隅に配置され、イニシャルを使用したポップアップを使用した言語セレクターの表示例を次に示します。 これは単なる例であり、Web サイトのニーズに応じて残りを自由にカスタマイズできます。
WordPress とは別に、他の Web サイト プラットフォームを使用して、 OpenCartのセットアップ スイッチャー、 Drupalの言語スイッチャー、 PrestaShopの設定スイッチャー。
Linguiseを使用して、シームレスな多言語体験を実現するための言語セレクターを設計してください。
ここでは、言語セレクターを設計するためのベスト プラクティスと、 Linguiseを使用してそれを行う方法についての洞察を得ることができました。 信じてください。言語スイッチャーを作成すると、多くの利点が得られ、上記の点に基づいて最適化を確実に行うことができます。
言語セレクターを作成するときは、アイコンの使用、関連言語の選択から配置まで、上で説明したヒントとベスト プラクティスに従ってください。
次に、 Linguiseアカウントを登録し、Web サイトを追加し、言語セレクターを微調整してユーザー エクスペリエンスを向上させます。 Linguiseの優れた機能を楽しむために、1 か月の無料トライアル機能を忘れずに試してください
