次に、ウェブサイトエディタを開き、左側のメニューから「設定」に移動し、 「HEAD HTML」を選択します。
Linguise Linguise スクリプトを貼り付け、 ‘保存’ をクリックしてサイトを公開してください。
その後、 Linguise の言語スイッチャーが Duda ウェブサイトのフロントエンドに表示されます。.
ステップ6:メインディスプレイを設定する
言語スイッチャーの設定を開始するには、 “設定” > “言語フラグの表示” セクションに移動します。 Linguise ダッシュボードで、ここでいくつかのオプションをカスタマイズできます。
- 国旗アイコンのスタイル: 並列表示、ドロップダウンメニュー、ポップアップから選択できます。
- 位置: 言語切り替えボタンをウェブサイトのどこに表示するかを決めます。複数の配置オプションがあるので、ユーザーが簡単にアクセスできるようにしてください。
国旗と言語名の組み合わせ、国旗と言語の略称、または言語名のみを表示するオプションがあります。ユーザーが認識しやすく、ナビゲーションを容易にするために、国旗と言語名の両方を使用することをお勧めします。.
ステップ6: フラグのデザインを設定する
メイン表示を設定したら、フラグの外観をさらにカスタマイズできます。.
- 表示言語名: 国名または言語自体に基づいて言語名を表示するか選択できます。例えば、「French」または「Français」と表示できます。
- 英語の国旗タイプ: このオプションは、アメリカ英語やイギリス英語など、複数の地域変種がある言語に役立ち、スペイン語、台湾語、ドイツ語、ポルトガル語などの他の言語にも適用されます。
- 旗のスタイル:旗アイコンの形状(丸型または長方形)を選択します
ステップ7: 色とサイズをカスタマイズする
旗のデザインを設定した後、旗の色とサイズをさらにカスタマイズできます。調整できるオプションは以下のとおりです。.
- 旗の角丸: 長方形の旗の角丸をピクセル単位でカスタマイズします。
- 言語名の色: 言語名を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色: ポップアップまたはドロップダウンメニュー内の言語タイトルテキストの色を設定します。
- 旗のサイズ: デザインに合わせて旗アイコンのサイズを調整します。
- 言語名のホバーカラー: ユーザーが言語名にホバーしたときに表示されるテキストの色を選択します。
- ポップアップ言語のホバーカラー: ポップアップまたはドロップダウンメニュー内の言語タイトルのホバーテキストカラーを設定します。
ステップ8: フラグのボックスシャドウの設定
最後に、フラッグボックスのシャドウ設定を変更できます。最初のオプションでは、ウェブサイトに表示される各フラッグアイコンにシャドウ効果を適用でき、2番目のオプションでは、ユーザーが言語フラッグにマウスをホバーしたときのシャドウ効果を管理します。.
必要な調整をすべて行ったら、保存ボタンをクリックして変更を適用します。その後、 Duda のウェブサイトを確認して、設定が正常に実装されたことを確かめてください。言語切り替え機能はこのように表示されます。.
設定が完了すると、多言語対応の Duda ウェブサイトで言語切り替えボタンがどのように動作するかを確認できます。.
次に、ロシア語など他の言語にウェブサイトを翻訳できます。.
Duda ウェブサイトで言語切り替え機能を最適化するためのベストプラクティス
言語切り替え機能を Duda 多言語ウェブサイトに正常に実装した後は、サイトと訪問者の両方にとってその機能を最適化するためのヒントを検討することが重要です。 訪問者。
認識しやすい言語の旗やアイコンを使用する
Duda のウェブサイトに言語切り替え機能を追加する際には、誰にでもわかりやすい言語の旗やアイコンを使用することが重要です。これらの視覚的な要素は、ユーザーが好みの言語をすばやく認識して選択するのに役立ちます。たとえば、地球儀のアイコンは言語オプションを表すものとして広く理解されています。国旗も使用できますが、すべての言語が単一の国と結びついているわけではなく、混乱を招くことがある点に注意が必要です。.
例: Amazonのウェブサイトでは、上部ナビゲーションバーに現在選択されている言語(例:「EN」)の隣に小さな地球アイコンが表示されています。このシンプルながら効果的なデザインにより、ユーザーは現在の言語設定に関係なく、言語オプションを素早く見つけることができます。
フラッグと一緒に言語名を表示する
国旗は役立ちますが、それだけでは不十分です。国旗やアイコンの横に言語名をその言語のネイティブスクリプトで表示することで、明確さが増し、誤解を減らすことができます。これは、複数の国や地域で話されている言語にとって特に重要です。.
例: Airbnbの言語切り替えでは、言語名と対応する国の旗の両方が表示されます。たとえば、「English (UK)」には英国の旗が、「Italian」にはイタリアの旗が表示されます。この組み合わせにより、ユーザーは希望する言語オプションを正確に選択できます。
言語切り替えボタンを思慮深く配置する
言語切り替えボタンの配置は、ユーザーのアクセシビリティにとって非常に重要です。一般的な場所としては、ヘッダーの右上隅、フッター内、またはメインナビゲーションメニュー内が挙げられます。重要なのは、主要なコンテンツエリアを煩雑にすることなく、簡単に見つけられるようにすることです。.
例: linguise.comでは、言語切り替えボタンはページの右上隅に配置されており、常に表示されアクセスしやすくなっています。この戦略的な配置により、ユーザーはサイト内のどこにいても、言語オプションをすばやく見つけて利用できることが保証されています。
言語スイッチャーをレスポンシブにデザインする
言語切り替え機能が、デスクトップコンピューターからスマートフォンまで、すべてのデバイスで適切に動作することを確認してください。小さい画面では、横並びのオプションリストの代わりにドロップダウンメニューを使用するなど、デザインを調整する必要があるかもしれません。.
例: UNESCOのウェブサイトの言語切り替え機能は、デバイスを問わずシームレスに対応します。デスクトップではヘッダー内に横並びのリストとして表示され、モバイルではコンパクトなドロップダウンメニューに変わり、モバイルレイアウトを損なうことなく使いやすさを確保しています。
ページ間で言語切り替えの一貫性を確保する
Duda ウェブサイトのすべてのページで、言語切り替え機能のデザイン、機能、位置を同じに保ちます。この一貫性により、ユーザーはどのページにいても言語オプションの場所を正確に把握できるため、サイトをより効率的にナビゲートできます。.
例: このウェブサイトでは、ホームページから商品ページ、チェックアウトプロセスに至るまで、すべてのページのフッターに言語切り替え機能を一貫して配置しています。この統一性により、ユーザーは閲覧やショッピングの体験中いつでも簡単に言語を切り替えることができます。
新しい市場を開拓する準備はできていますか?リスクフリーの1ヶ月トライアルで、当社の自動翻訳サービスを無料でお試しください。クレジットカードは不要です!
Linguiseを使用して、 Duda ウェブサイトに言語切り替えボタンを設定しましょう!
Duda 多言語ウェブサイトの言語を選択する方法を理解したところで、言語セレクターを理解することで、多くの利点が得られ、前述のポイントに基づいた最適化が容易になります。.
言語セレクターを効果的に最適化することで、ユーザーエクスペリエンスを大幅に向上させることができます。 Linguise Linguise アカウントを作成し、 Duda ウェブサイトと統合して、言語セレクターをカスタマイズし、ユーザー満足度を高めましょう。