言語セレクターは、ユーザーが言語を切り替えたいときに頻繁にアクセスするものであるため、多言語 Web サイト
効果的な言語切り替えボタンは、Web の最適化から売上の増加まで、Web サイトにいくつかのメリットをもたらします。
この記事では、言語セレクターを設計するためのベスト プラクティスについて説明します。 次の記事でさらに詳しく説明します。
言語セレクターは、ユーザーが Web サイト、アプリケーション、またはデジタル プラットフォームと対話する言語を選択できるようにするユーザー インターフェイス要素または機能です。 これは、さまざまな言語を話すユーザーに合わせて、Web サイト、ソフトウェア アプリケーション、その他のデジタル インターフェイスでよく見られます。
通常、言語セレクターには使用可能な言語のリストが表示され、ユーザーはそのリストから希望の言語を選択できます。 選択すると、テキスト、ラベル、場合によっては画像などのインターフェイス コンテンツが、選択した言語で表示されます。 これは、世界中の視聴者や多様なユーザー ベースにサービスを提供する Web サイトやアプリにとって特に重要です。
言語セレクターは、言語スキル レベルに関係なく、幅広い視聴者がデジタル コンテンツにアクセスできるようにすることで、ユーザー エクスペリエンスの向上に貢献します。 これらはローカリティへの取り組みの重要な要素であり、開発者やデザイナーが製品をさまざまな言語的および文化的背景に適応させることができます。
多言語 Web サイトで言語スイッチャーをカスタマイズすると、いくつかの重要な利点があります。
すべての Web サイト所有者は、言語セレクターがどのようなものであるかを慎重に検討するでしょう。もちろん、各 Web サイトには異なる好みがあります。 使用できる言語セレクターの種類を探している方のために、ここにいくつかの言語セレクターを示します。
これは、一般的に使用されるタイプの言語スイッチャーの 1 つです。 言語ボタンは通常、表示されている言語を示すアイコンまたはテキストです。たとえば、英語の場合は「EN」、特定の言語を表す国旗などです。 ユーザーが言語ボタンをクリックすると、適切な言語の Web サイトのバージョンにリダイレクトされます。
言語ボタンについては、表示が乱雑になるのを避けるために、表示する言語の数を制限することをお勧めします。 一般に、4 ～ 5 つ以上の言語を使用すると、煩雑な視覚効果を生み出すことができます。 ユーザーが簡単に見つけられるように、ボタンを目に見える場所に配置することが重要です。 これらの側面については、この記事の次のセクションで詳しく説明します。
言語ボタンは、特定の市場をターゲットにしたり、特定の場所で国際コミュニティにサービスを提供したりする企業に適している場合があります。 WHO Web サイトの言語ボタンの使用例は次のとおりです。
テキスト リンクは、言語名の形式のテキストをリンクとして使用する言語スイッチャーの一種です。 たとえば、「英語」、「フランス語」、「スペイン語」などのテキスト リンクを表示して、選択した言語の Web サイトのバージョンにユーザーを誘導できます。 このテキスト リンクは通常、ユーザーが目的の言語を選択しやすくするためにリストまたはドロップダウン メニューに配置されます。
リンク言語セレクターの 1 つのタイプは、大手企業 Facebook によって使用されており、リストされている言語に加えて、(+) アイコンを押してさらに多くの言語を見つけることもできます。
その後、ページは前に選択した言語にすぐに翻訳されます。
選択メニューは、ドロップダウン メニューまたはオープン メニューを使用して言語を選択する一種の言語スイッチャーです。 ユーザーがオプション メニューをクリックすると、利用可能な言語のリストが表示され、希望の言語を選択できます。 オプション メニューには、言語インジケーターとして国のアイコンや国旗、およびテキスト内の言語名を含めることができます。
選択メニューは言語ボタンとはまったく異なり、このタイプは単なるボタンよりも複雑です。 ポルシェのウェブサイトから引用した以下の例のように。
ユーザーが自分の言語または目的地の国を直接書き留めることができる言語選択 Web サイトを提供しています。
Web サイトで使用できるさまざまな種類の言語セレクターを理解した後、言語セレクターを作成する際には、効果的で優れたユーザー エクスペリエンスを提供できる言語セレクターを作成できるようにベスト プラクティスを適用することが重要です。 ここではベストプラクティスをいくつか紹介します。
この時点で、言語セレクターのベスト プラクティスがわかりました。 この翻訳は、Web サイト翻訳サービスを利用した後に行うことができます。 ただし、すべての翻訳サービスが言語セレクター設定に柔軟性を提供しているわけではありません。
しかし、 Linguiseそのようなものではないので、心配する必要はありません。 Linguiseは、ユーザーによる言語スイッチャーのカスタマイズを提供する自動翻訳サービスです。 Linguise使用すると次のようなメリットが得られます。
このチュートリアルでは、使用する CMS の例としてWordPressを使用します。
Linguiseの言語スイッチャーにアクセスするには、最初にLinguiseにアカウントを登録する。 Linguise、さまざまな機能を利用できる 1 か月の無料トライアルも提供しています。
2 番目のステップは、既に所有しているLinguiseの Web サイト ドメインをLinguiseダッシュボードに追加することです。 から始めて、入力する必要があるものがいくつかあります。
その後、API キーを有効化し、言語 URL を設定する必要があります。 Web サイトのドメインを追加するための完全なガイドについては、ドキュメントを読むことができます。特にWordPress WordPressLinguise自動翻訳をインストールすることで確認できます。
Web サイトを正常に追加したら、 WordPressLinguiseをインストールします。これを行うには、 「プラグイン」>「新規追加」> Linguise >「インストール」>「アクティブ化」を選択します。
プラグインがすでにインストールされている場合は、 Linguiseダッシュボードに移動して API キーをコピーします。
次に、 Linguiseプラグインを開き、 Linguiseダッシュボードから取得した API コードを次の列に貼り付けます。
Linguiseダッシュボードのを使用します。
初期セットアップ中に、さまざまなコンポーネントを考慮してメイン ディスプレイを調整します。
最初に考慮すべきことの 1 つは、言語リストの表示形式の構成です。これには、サイドバイサイド、ドロップダウン、またはポップアップの 3 つのオプションから選択できます。 左側には各形式のプレビュー表示があります。
以下に示すように、最初の形式は並列レイアウトです。
次の形式は、下の図に示すようにドロップダウン スタイルを採用しています。
最後に、最後のオプションとしてポップアップ形式があります。
次に、言語スイッチャーの位置を構成する次のステップに進みます。 さまざまな位置オプションから柔軟に選択できるため、訪問者の目に留まりやすい位置を選択することが重要です。
最後に、言語オプションを表示するための組み合わせ設定を決定する必要があります。 フラグ + 言語名、フラグ + 短い名前、または単純にフラグを単独で表示するなどのオプションから選択できます。 この決定は、特定のデザインの好みと対象ユーザーの好みによって異なります。
その後、メイン表示セクションの下に、旗専用のデザイン構成が表示されます。 以下の画像は、利用可能な設定オプションの一部を示しています。
国旗のデザインが決まったら、次は色や大きさなどさまざまな要素を調整していきます。 次のインターフェイスには、次のような多数のカスタマイズ可能な設定があります。
最終段階では、旗の影の設定をカスタマイズできます。 初期設定では、Web サイトに表示される各フラグの影を指定できます。その後の設定は、言語フラグの上にマウスを移動したときの影の効果に関係します。
言語スイッチャーに対して行ったカスタマイズ設定を保存するには、[保存]をクリックしてください これにより、シャドウ効果用に選択した構成が確実に実装され、将来使用できるように保存されます。
すべての構成を実行した後、右上隅に配置され、イニシャルを使用したポップアップを使用した言語セレクターの表示例を次に示します。 これは単なる例であり、Web サイトのニーズに応じて残りを自由にカスタマイズできます。
WordPress とは別に、他の Web サイト プラットフォームを使用して、 OpenCartのセットアップ スイッチャー、 Drupalの言語スイッチャー、 PrestaShopの設定スイッチャー。
ここでは、言語セレクターを設計するためのベスト プラクティスと、 Linguiseを使用してそれを行う方法についての洞察を得ることができました。 信じてください。言語スイッチャーを作成すると、多くの利点が得られ、上記の点に基づいて最適化を確実に行うことができます。
言語セレクターを作成するときは、アイコンの使用、関連言語の選択から配置まで、上で説明したヒントとベスト プラクティスに従ってください。
次に、 Linguiseアカウントを登録し、Web サイトを追加し、言語セレクターを微調整してユーザー エクスペリエンスを向上させます。 Linguiseの優れた機能を楽しむために、1 か月の無料トライアル機能を忘れずに試してください
ウェブサイトの自動翻訳、国際SEOなどのニュースを受け取る！
メールを共有せずに終了しないでください。
宝くじに当たるという保証はできませんが、翻訳に関する興味深い情報ニュースや、時折割引を受けることはお約束できます。
