言語セレクターは、ユーザーが言語を切り替えたいときに頻繁にアクセスするものであるため、多言語 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 サイトを提供しています。
言語セレクターのベスト プラクティスとヒント
Web サイトで使用できるさまざまな種類の言語セレクターを理解した後、言語セレクターを作成する際には、効果的で優れたユーザー エクスペリエンスを提供できる言語セレクターを作成できるようにベスト プラクティスを適用することが重要です。 ここではベストプラクティスをいくつか紹介します。
- 言語ボタンの明確かつ思慮深い配置:ユーザーが直感的でアクセスしやすい場所に言語ボタンを配置します。 通常、言語ボタンはページの上部 (たとえば、ヘッダーの右側または左側) またはページの下部 (たとえば、フッター) に配置します。 ボタンが他の要素で隠れておらず、ユーザーが見つけやすいようにしてください。
- フラグの有無:言語アイコンとしてフラグを使用するかどうかは、物議を醸すトピックです。 国旗は選択した言語を明確に視覚的に示すことができますが、国旗には複雑な政治的および文化的意味もあることを覚えておくことが重要です。 フラグの使用に関連する潜在的な問題を回避したい場合は、中立的でより普遍的な言語のアイコンを使用する準備をしてください。
- 言語のフルネームまたはイニシャル:ボタンの言語ラベルを選択するときは、言語のフルネーム (たとえば、「English」や「Français」) または言語のイニシャル (たとえば、「EN」) を使用できます。 」または「FR」）。 使用されている言語に対するユーザーの理解レベルを説明します。 多様な言語を使用する視聴者をターゲットにしている場合は、言語の完全名を使用すると理解しやすくなります。
- アイコンの言語ボタン:テキストやフラグの代わりに、またはそれに加えてアイコンを使用して、特定の言語を表すことができます。 明確で認識しやすい言語アイコンは、ユーザーが選択したい言語を識別するのに役立ちます。 アイコンに一貫性があり、さまざまな文化的および言語的背景を持つユーザーにとって理解しやすいものであることを確認してください。
- 関連する言語を優先する:対象ユーザーに最も関連のある言語を表示します。 Web サイトのトラフィックとユーザー人口統計を分析して、目立つように表示する必要がある言語を特定します。 最も一般的に使用されている言語、または広く使用されている言語を優先すると、ユーザー エクスペリエンスが向上し、エンゲージメントが向上します。
- 明確な言語ラベル:明確で簡潔な言語ラベルを使用して、各言語オプションを表します。 英語の場合は「English」、スペイン語の場合は「Español」など、言語名をそれぞれの言語で表示します。 これにより、ユーザーは、Web サイトで使用されている言語に慣れていない場合でも、好みの言語をすぐに特定できます。
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 か月の無料トライアル機能を忘れずに試してください
