Bubble .ioに言語スイッチャーを設定すると、ユーザーはより簡単に言語を切り替えることができます。この機能は、特にグローバルユーザー向けのアプリケーションで役立ちます。ユーザーは好みの言語でプラットフォームを操作できます。Bubble .ioは、組み込みのローカリゼーション機能を備えているため、開発者は高度なコーディング知識がなくても多言語アプリケーションを作成できます。
Bubble.ioに言語スイッチャーを実装するには、開発者は通常、アプリの設定でサポートする言語を定義することから始めます。次に、ユーザーが言語を変更するためのドロップダウンまたはボタン要素を作成します。この記事では、自動翻訳サービスのウェブサイトの1つを使用して、 Bubble.ioに言語スイッチャーを設定する方法について説明します。
Bubble.io ウェブサイトで言語切り替え機能が重要なのはなぜですか?
ウェブサイトに言語スイッチャーを追加するのは、当然のことです。Bubble Bubble サイトに言語スイッチャーを設置する必要がある理由をご紹介します。
- 他の国のユーザーにとってより使いやすく：言語切り替え機能により、海外のユーザーはウェブサイトを母国語で閲覧できます。例えば、スペインからオンラインストアにアクセスしたユーザーは、スペイン語に切り替えることで商品の詳細を理解し、購入手続きを完了しやすくなります。CSA Researchの調査によると、76%は、母国語で情報が提供されている商品を購入することを好み、この機能がユーザーの快適性とアクセシビリティにとって重要であることが示されています。
- 他国の検索結果におけるウェブサイトの最適化：言語切り替え機能を使用すると、 Bubble .ioウェブサイトは外国語検索で上位表示されやすくなります。例えば、フランス語版のウェブサイトは、フランス語のGoogle検索で表示される可能性が高くなります。これにより、可視性が向上し、国際的なトラフィックが大幅に増加します。
- 売上コンバージョンの向上：コンテンツを複数言語で提供することで、売上を伸ばすことができます。ユーザーが言語を切り替えられるオンラインコースプラットフォームは、より幅広いオーディエンスを獲得し、登録者数を増やすことができます。このアプローチは効果的です。消費者は母国語で情報を提供するウェブサイトから購入する可能性が高いため、コンバージョン率に直接影響します。
- ユーザーエンゲージメントとリテンションの向上：言語切り替え機能により、ユーザーのサイト滞在時間が長くなります。例えば、ソーシャルネットワーキングアプリで好みの言語でやり取りするユーザーは、サイト滞在時間が長くなる傾向があります。ユーザーが母国語のサイトで過ごす時間は、第二言語のサイトで過ごす時間の2倍にもなるため、このエンゲージメントの向上は大きなメリットとなり、ユーザーリテンションの向上につながります。
Bubble.ioで言語スイッチャーを設定する方法
Bubble.ioの多言語ウェブサイトで言語を切り替えることの重要性を理解したところで、実際にどのように実装するかについて説明しましょう。ウェブサイト翻訳サービスでは通常、この機能が提供されており、ユーザーのニーズに合わせてカスタマイズできます。
しかし、すべての翻訳サービスがカスタマイズ可能でユーザーフレンドリーな言語切り替え機能を提供しているわけではありません。そのため、様々なフレームワークと互換性があり、柔軟な言語切り替え機能を備えた自動翻訳サービスを選ぶことが非常に重要です。.
これらの基準を満たす自動翻訳サービスの一つがLinguise。LinguiseLinguise Bubble などの人気のCMSやWebビルダーと統合できる、高度にカスタマイズ可能で使いやすい言語切り替え機能を提供します。
Linguise Bubbleとのシームレスな統合を提供し、開発者は多言語アプリケーションに言語切り替え機能を簡単に組み込むことができます。Linguise Linguise高度な機能とユーザーフレンドリーなインターフェースを活用することで、 Bubble ウェブサイトにおける言語切り替え機能の設定とメンテナンスを簡素化できます。
Bubble .io ウェブサイトにLinguiseをインストールし、言語スイッチャーを設定する手順は次のとおりです
ステップ 1: Linguise アカウントを登録する
次に、ソース言語とターゲット言語を選択します。.
ステップ2: Entriを使用してDNSを自動的に追加する
Linguise ダッシュボードに Web サイトを登録すると、2 つのインストール オプションが表示されます。.
「DNSを自動的に接続」をクリックしてくださいこの機能はEntriと呼ばれ、DNSレコードを自動管理することでインストールプロセスを簡素化します。または、DNSレコードをドメインプロバイダーに手動でコピーすることもできます。
ボタンをクリックすると、Entri は登録した Web サイトの URL を分析し、パブリック DNS レコードを調べて、必要なプロバイダーと DNS レコードを識別します。.
「[ドメインプロバイダー]で承認」 をクリックします。この操作により、ドメインプロバイダーのログインページにリダイレクトされ、ログインして続行できます。
ログインすると、Entri は適切な DNS レコード (言語ごとに 1 つの DNS と検証キー用の 1 つの TXT DNS) をドメインに自動的に追加します。.
承認後、EntriからすべてのDNS設定が正常に完了した旨の通知が届きます。すべてのDNSエントリがドメインに反映されると、変換機能が使用可能になります。通常、20～30分かかります。.
手動でインストールする場合は、以下の手順に従ってください。.
ステップ3: DNSレコードをコピーする
手動インストールの場合は、fr.domain.com や es.domain.com など、多言語ページの設定に必要な DNS レコードを表示する画面にリダイレクトされます。.
これらの要素を Bubble.io DNS 構成にコピーします。
次に、ドメインマネージャーにアクセスし、DNS設定エリアに移動します。指示に従ってコピーします。
- ドメイン検証用のTXTレコード1つ
- 言語の 1 つまたは複数の CNAME レコード
各レコード タイプ (TXT および CNAME) の例を次に示します。.
すべてのレコードを追加すると、構成は次のようになります。.
ステップ4: DNSを確認する
すべてのレコードをドメイン DNS に追加したら、「DNS 構成の確認」ボタンをクリックして DNS 伝播を確認します。.
DNS検証には通常30分から1時間ほどかかります。完了すると、 Linguise ダッシュボードのDNSリストの横に緑色のインジケーターが表示されます。Bubble .io Bubbleサイトの翻訳はほぼ完了です。あとは国旗付きの言語スイッチャーへのリンクを追加するだけです。
ステップ5: 言語切り替えを有効にする
言語スイッチャーは、ユーザーが希望する言語を選択できるフラグポップアップです。実装するには、ドメイン登録プロセスの最後、またはドメイン設定内で提供されるコードを Bubble.ioサイトのページのヘッダーにコピーしてください。フラグ言語スイッチャーは、公開ウェブサイトに自動的に表示されます。
次に、 Bubbleウェブサイトパネルに移動します。左側のサイドバーメニューで「設定」を
「詳細設定の「ヘッダーのスクリプト/メタタグ」までスクロールしますLinguiseを貼り付け、「保存」をクリックしてサイトを公開します。
ステップ5: メインディスプレイを構成する
言語切り替えの設定を始めるには、 Linguiseの「設定」>「言語フラグの表示」。このページでは、いくつかの設定を調整できます。
- フラグ アイコン スタイル:並べて表示、ドロップダウン メニュー、ポップアップの 3 つのオプションから選択します。
- 位置：サイト上で言語スイッチャーを表示する場所を選択します。様々な位置オプションをご用意していますので、訪問者が簡単にアクセスできる位置に設置してください。
国旗と言語名、国旗と言語略語、または言語名のみを組み合わせて表示できます。ユーザーが簡単に認識できるように、国旗と言語名の両方を使用することをお勧めします。.
ステップ6: 旗のデザインを設定する
メインディスプレイを設定したら、表示されるフラグのデザインをさらにカスタマイズします。.
- 言語名の表示：言語名を国名に基づいて表示するか、言語名自体に基づいて表示するかを選択できます。例えば、「French」や「Français」のように表示できます。
- 英語のフラグタイプ:このオプションは、米国英語やイギリス英語など、複数のバリエーションを持つ言語に役立ちます (スペイン語、台湾語、ドイツ語、ポルトガル語にも適用されます)。
- 旗のスタイル:旗アイコンの形状を丸型または長方形型から選択します。
ステップ7: 色とサイズをカスタマイズする
旗のデザインを設定したら、旗の色とサイズをさらにカスタマイズできます。調整可能な設定は次のとおりです。
- 旗の境界線の半径:長方形の旗のスタイルの半径をピクセル単位でカスタマイズします。
- 言語名の色:言語名を表示するデフォルトのテキストの色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトルテキストの色を設定します。
- 旗のサイズ:旗のアイコンのサイズを調整します。
- 言語名のホバーカラー:ユーザーが言語名の上にマウスを移動したときに表示されるテキストの色を設定します。
- ポップアップ言語のホバーカラー:ユーザーがポップアップまたはドロップダウン領域の言語タイトルにマウスを移動したときに表示されるテキストの色を設定します。
ステップ8: フラグボックスの影を設定する
最後に、国旗ボックスの影の設定を調整できます。最初のオプションでは、ウェブサイトに表示される各国旗アイコンに影の効果を適用できます。次のオプションでは、ユーザーが言語の国旗にマウスオーバーした際の影の効果を調整できます。.
必要な調整をすべて完了したら、「保存」ボタンをクリックしてカスタマイズを適用します。その後、 Bubble のウェブサイトにアクセスして、設定が正常に適用されていることを確認してください。言語切り替えツールはこのように表示されます。
セットアップ後、 Bubble の多言語 Web サイトで言語スイッチャーがどのように機能するかを確認できます。
次に、ウェブサイトをスペイン語などの他の言語に翻訳できます。.
Bubble.io の言語スイッチャーを最適化するためのベストプラクティス
Bubble 多言語 Web サイトで言語スイッチャーを正常に設定したら、サイトと訪問者の両方に対して言語スイッチャーを最適化するためのヒントを検討することが重要です。
簡単に識別できる言語の国旗ロゴを活用する
Bubble.ioウェブサイトに言語スイッチャーを実装する際には、分かりやすい言語の国旗やアイコンを使用することが重要です。これらの視覚的な手がかりは、ユーザーが好みの言語を素早く識別し、選択するのに役立ちます。例えば、地球儀アイコンは言語の選択肢を表すものとして世界的に理解されています。国旗を使用することもできますが、言語が必ずしも単一の国に関連付けられているわけではないため、問題が発生する場合があることに注意してください。
例： Amazonのウェブサイトでは、上部のナビゲーションバーで現在選択されている言語（例：「EN」）の横に小さな地球儀アイコンが表示されています。このシンプルでありながら効果的なアプローチにより、ユーザーは現在の言語設定に関わらず、言語オプションを素早く見つけることができます。
国旗に言語名を組み込む
国旗は役立ちますが、単独で使用すべきではありません。国旗やアイコンの横に、その言語の母国語による名称を併記することで、明確さが増し、混乱を避けることができます。これは、複数の国や地域で話されている言語の場合に特に重要です。.
例： Airbnbのウェブサイトの言語切り替えボタンには、言語名と国旗が表示されています。例えば、「英語（米国）」には米国国旗が、「フランス語」にはフランス国旗が表示されます。この組み合わせにより、ユーザーは希望する言語オプションを正確に識別できます。
言語切り替えボタンを慎重に配置します
言語スイッチャーの配置は、ユーザーのアクセシビリティにとって非常に重要です。一般的な配置場所は、ヘッダーの右上、フッター、メインナビゲーションメニュー内などです。重要なのは、メインコンテンツエリアを乱雑にすることなく、簡単に見つけられるようにすることです。.
例：ウェブサイトtiffany.comでは、言語切り替えボタンはページの右下隅に配置されており、常に表示され、アクセス可能です。この一貫した配置により、ユーザーはサイトのどこにいても言語オプションを素早く見つけて使用できます。
言語スイッチャーをレスポンシブに設計する
言語スイッチャーがデスクトップパソコンからスマートフォンまで、あらゆるデバイスで適切に動作することを確認してください。画面が小さい場合は、デザインを調整する必要があるかもしれません。例えば、横並びの選択肢リストではなく、ドロップダウンメニューを使用するなどです。.
例：ユネスコウェブサイトの言語切り替え機能は、デバイスを問わず美しく適応します。デスクトップではヘッダーに横並びのリストとして表示されます。モバイルではコンパクトなドロップダウンメニューに切り替わり、モバイルレイアウトを損なうことなく使いやすさを確保しています。
言語スイッチャーがページ間で一貫していることを確認する
Bubble.ioウェブサイトの全ページで、言語スイッチャーのデザイン、機能、位置を統一してください。これにより、ユーザーは現在のページに関係なく、言語オプションがどこにあるかを正確に把握できるため、サイトをより効率的に操作できるようになります。
例：ウェブサイトでは、ホームページから商品ページ、そしてチェックアウトプロセスに至るまで、すべてのページのフッターに言語切り替えボタンを一貫して配置しています。この一貫性により、ユーザーは閲覧中やショッピング中にいつでも簡単に言語を切り替えることができます。
Linguiseを使用して、 Bubble 多言語 Web サイトで言語スイッチャーを設定します。
