Duda Web サイトで言語スイッチャーをセットアップすると、ユーザーが言語を変更するプロセスを簡素化できます。この機能は、世界中の視聴者に対応するプラットフォームにとって特に有益であり、ユーザーは好みの言語でコンテンツにアクセスできます。
Duda Web サイトに言語スイッチャーを実装するには、言語スイッチャー オプションをサポートする翻訳ツールを使用する必要があります。そこで、彼の記事では、自動翻訳サービス ツールの 1 つを使用して、 Duda で言語スイッチャーをセットアップする手順について説明します。
Duda Web サイトの重要な言語スイッチャー
Duda Web サイトに言語スイッチャーを設定すると、いくつかの重要な目的が得られます。以下はその中にあります。
- 世界中のユーザー向けのアクセシビリティの強化:言語スイッチャーを使用すると、さまざまな国の訪問者が好みの言語でサイトを閲覧できるようになります。この機能により、ユーザー エクスペリエンスが大幅に向上します。
- 国際的な SEO パフォーマンスの向上:複数の言語バージョンを提供することで、 Dudaサイトは外国語の検索結果でより良いランキングを達成できます。たとえば、ドイツ語版の Web サイトはドイツ語の Google 検索に表示される可能性が高くなります。
- コンバージョン率の向上:さまざまな言語でコンテンツを提供すると、売上にプラスの影響を与えることができます。たとえば、顧客が言語を切り替えることができる電子商取引プラットフォームは、より幅広い顧客ベースを引き付け、購入を増やすことができます。
- ユーザー エンゲージメントと維持の強化: 言語スイッチャーを使用すると、サイトでのユーザー セッションを延長できます。たとえば、好みの言語でコミュニティ フォーラムと対話するユーザーは、長期間関与し続ける傾向があります。ユーザーは通常、第 2 言語のサイトに比べて母国語のサイトに 2 倍の時間を費やし、ユーザー維持率の向上につながるため、このエンゲージメントの増加は重要です。
Duda Web ビルダーで言語スイッチャーをセットアップする方法
多言語 Duda Web サイトにおける言語切り替えの重要性を理解することは非常に重要です。多くの Web サイト翻訳サービスがこの機能を提供していますが、特定の要件に合ったサービスを選択することが重要です。
すべての翻訳サービスが、カスタマイズ可能でユーザーフレンドリーな言語スイッチャーを提供しているわけではありません。したがって、さまざまなフレームワークと互換性があり、柔軟な言語切り替え機能を備えた自動翻訳サービスを選択することが重要です。
Linguiseこれらの基準を満たす自動翻訳サービスです。 Dudaなどの人気のある CMS および Web ビルダーとシームレスに統合する、適応性が高く直感的な言語切り替え機能を提供します。
Linguiseと Duda の統合はスムーズで、開発者は多言語サイトに言語切り替えを簡単に組み込むことができます。 Linguiseの高度な機能とユーザーフレンドリーなインターフェイスを利用することで、 Duda Web サイトでの言語スイッチャーのセットアップと保守のプロセスを合理化できます。
ステップ 1: Linguise アカウントを登録する
まず、 Linguise アカウントを作成します。これには、使い始めるのに役立つ 30 日間の無料トライアルが含まれています。サインアップして Linguise ダッシュボードに入ったら、ドメインを登録して翻訳を有効にする必要があります。
これを行うには、ドメイン URL (https:// を含む) をコピーし、プラットフォームとして「その他のクラウド ホスト型 CMS」を選択します。
次に、ソース言語とサイトを翻訳するターゲット言語を選択します。
ステップ 2: entri を使用して DNS を自動的に追加する
Linguiseに正常に登録すると、2 つのインストール オプションが表示されます。自動 DNS 構成の場合は、 「DNS を自動的に接続する」をクリックします。これは、DNS の変更を処理することでセットアップを簡素化する Entri 機能を利用します。あるいは、DNS レコードを手動でコピーしてドメイン プロバイダーに追加することもできます。
自動オプションを選択すると、Entri は Web サイトの URL をスキャンし、パブリック DNS レコードを確認して必要な設定を決定します。
次に、「[ドメイン プロバイダー] で認証」 (Cloudflare など) をクリックすると、ドメイン プロバイダーのログイン ページにリダイレクトされます。
ログイン後、Entri は正しい DNS レコード (言語ごとに 1 つ) と検証キーの TXT レコードを自動的に挿入します。
DNS レコードがドメインに追加されていることが確認できます。DNS 構成が完了すると、Entri によって確認されます。変換機能は、DNS エントリが伝播した後、通常は 20 ～ 30 分以内にアクティブになります。
手動セットアップを選択する場合は、以下の手順を参照してください。
ステップ 3: DNS レコードをコピーする
ドメインが正常に検証されると、必要な DNS レコードをコピーできる画面が表示されます。これらのレコードは、fr.domain.com、es.domain.com などの多言語ページを読み込むために不可欠です。
次に、ドメイン マネージャーにログインし、DNS 設定セクションに移動します。以下を追加する必要があります。
- ドメイン検証用のTXTレコード
- ターゲット言語の 1 つ以上の CNAME レコード
以下は、TXT レコードと CNAME レコードがどのように表示されるかを示す例です。
すべてのレコードが追加されると、構成はこのセットアップのようになります。
ステップ 4: DNS を確認する
すべての DNS レコードをドメインに追加した後、 [DNS 構成を確認する]ボタンをクリックして DNS の伝達を確認できます。 DNS 検証には通常 30 分から 1 時間かかります。完了すると、 Linguiseダッシュボードの DNS エントリの横に緑色の点が表示されます。最後のステップは、国旗を含む言語スイッチャーを追加して、 Duda Web サイトの翻訳設定を完了することです。
ステップ 5: 言語スイッチャーを有効にする
言語スイッチャーは、ユーザーが優先言語を選択できるフラグ ポップアップです。これを有効にするには、提供されたコードを Duda サイト ページのヘッド セクションにコピーします。これにより、ライブ Web サイトに国旗ベースの言語スイッチャーが自動的に表示されます。
コードはドメイン登録プロセスの最後、またはドメイン設定にあります。それをクリップボードにコピーします。
次に、Web サイトエディターを開き、左側のメニューから [設定] に移動し、 [HEAD HTML] を選択します。
Linguiseを貼り付け、 [保存]サイトを公開します。
Linguise 言語スイッチャーが Duda Web サイトのフロントエンドに表示されます。
ステップ 6: メインディスプレイを構成する
言語スイッチャーの設定を開始するには、 Linguiseの[設定] > [言語フラグの表示]。ここで、いくつかのオプションをカスタマイズできます。
- フラグ アイコン スタイル:並べて表示、ドロップダウン メニュー、またはポップアップから選択します。
- 位置:言語スイッチャーを Web サイト上のどこに表示するかを決定します。複数の配置オプションが利用できるため、ユーザーが簡単にアクセスできるようにしてください。
フラグと言語名の組み合わせ、フラグと言語の略語、または言語名のみを表示するオプションがあります。ユーザーの認識を高め、ナビゲーションを容易にするために、フラグと言語名の両方を使用することをお勧めします。
ステップ 6: 旗のデザインを設定する
メイン表示を設定したら、フラグの外観をさらにカスタマイズできます。
- 言語名の表示:国または言語自体に基づいて言語名を表示するように選択できます。たとえば、「French」または「Français」を表示できます。
- 英語の国旗タイプ:このオプションは、米国英語やイギリス英語など、複数の地域バリエーションがある言語に役立ち、スペイン語、台湾語、ドイツ語、ポルトガル語などの他の言語にも適用されます。
- 旗のスタイル: 旗アイコンの形状を円形または長方形から選択します。
ステップ 7: 色とサイズをカスタマイズする
旗のデザインを設定した後、旗の色とサイズをさらにカスタマイズできます。調整できるオプションは次のとおりです。
- Flag border-radius:長方形のフラグの角の半径をピクセル単位でカスタマイズします。
- 言語名の色:言語名を表示するデフォルトのテキストの色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン メニューの言語タイトル テキストの色を設定します。
- 旗のサイズ:デザインに合わせて旗アイコンのサイズを調整します。
- 言語名のホバー色:ユーザーが言語名の上にマウスを置いたときに表示されるテキストの色を選択します。
- ポップアップ言語のホバー色:ポップアップまたはドロップダウン メニューの言語タイトルのホバー テキストの色を設定します。
ステップ 8: フラグ box-shadow を設定する
最後に、フラグボックスのシャドウ設定を変更できます。最初のオプションでは、Web サイトに表示される各フラグ アイコンに影効果を適用できます。一方、2 番目のオプションでは、ユーザーが言語フラグの上にマウスを置いたときの影効果を管理します。
必要な調整をすべて行ったら、「保存」ボタンをクリックして変更を適用します。次に、 Duda Web サイトをチェックして、構成が正常に実装されていることを確認します。言語スイッチャーは次のようになります。
セットアップが完了したら、多言語 Duda Web サイトで言語スイッチャーがどのように動作するかを観察できます。
次に、Web サイトをロシア語などの他の言語に翻訳できます。
Duda Web サイトの言語スイッチャーを最適化するためのベスト プラクティス
Dudaに言語スイッチャーを正常に実装した後は、サイトと訪問者の両方にとってその機能を最適化するためのヒントを検討することが重要です。
簡単に認識できる言語フラグまたはアイコンを使用する
Duda Web サイトに言語スイッチャーを追加する場合、簡単に識別できる言語フラグまたはアイコンを利用することが重要です。これらの視覚要素は、ユーザーが好みの言語をすばやく認識して選択するのに役立ちます。たとえば、地球のアイコンは言語オプションを表すものとして広く理解されています。国旗を使用することもできますが、すべての言語が 1 つの国に関連付けられているわけではないため、混乱が生じる可能性があることを覚えておくことが重要です。
例: Amazon Web サイトには、上部ナビゲーション バーの現在選択されている言語 (例: 「EN」) の横に小さな地球アイコンが表示されます。この単純かつ効果的な設計により、ユーザーは現在の言語設定に関係なく、言語オプションをすぐに見つけることができます。
フラグの横に言語名を含める
フラグは役に立ちますが、単独で使用すべきではありません。言語の名前を国旗やアイコンの横にネイティブ スクリプトで表示すると、明確さが増し、潜在的な誤解が減ります。これは、複数の国または地域で話されている言語の場合に特に重要です。
例: Airbnb 言語スイッチャーは、言語名と対応する国旗の両方を表示します。たとえば、「英語 (UK)」には英国の国旗が表示され、「イタリア語」にはイタリアの国旗が表示されます。この組み合わせにより、ユーザーは好みの言語オプションを正確に選択できます。
言語切り替えボタンを慎重に配置する
言語スイッチャーの配置は、ユーザーのアクセシビリティにとって非常に重要です。一般的な場所には、ヘッダーの右上隅、フッター内、またはメイン ナビゲーション メニュー内などがあります。重要なのは、主要なコンテンツ領域を乱雑にせずに、簡単に見つけられるようにすることです。
例: linguise では、言語スイッチャーがページの右上隅に配置されているため、常に表示され、アクセスできます。この戦略的な配置により、ユーザーはサイト上のどこにいても、言語オプションをすぐに見つけて利用できることが保証されます。
言語スイッチャーを応答性良く設計する
言語スイッチャーがデスクトップ コンピューターからスマートフォンまで、すべてのデバイスで適切に機能することを確認してください。画面が小さい場合は、オプションの水平リストの代わりにドロップダウン メニューを使用するなど、デザインの調整が必要になる場合があります。
例:ユネスコ Web サイトの言語スイッチャーは、デバイス間でシームレスに適応します。デスクトップではヘッダーの水平リストとして表示されますが、モバイルではコンパクトなドロップダウン メニューに変換され、モバイルのレイアウトを犠牲にすることなく使いやすさが確保されます。
ページ間で言語スイッチャーの一貫性を確保する
Duda Web サイトのすべてのページにわたって、言語スイッチャーのデザイン、機能、位置を同じに維持します。この一貫性により、ユーザーは、どのページにいるかに関係なく、言語オプションの場所を正確に知ることができるため、サイトをより効率的にナビゲートすることができます。
例: Web サイトでは、ホームページから製品ページに至るまで、およびチェックアウト プロセス中に、すべてのページのフッターに言語スイッチャーを一貫して配置しています。この均一性により、ユーザーはブラウジング中やショッピング中にいつでも簡単に言語を切り替えることができます。
Linguiseを使用して、 Duda Web サイトに言語スイッチャーをセットアップします。
