Bubble .ioに言語スイッチャーを設定すると、ユーザーはより簡単に言語を切り替えることができます。この機能は、特にグローバルユーザー向けのアプリケーションで役立ちます。ユーザーは好みの言語でプラットフォームを操作できます。Bubble .ioは、組み込みのローカリゼーション機能を備えているため、開発者は高度なコーディング知識がなくても多言語アプリケーションを作成できます。
Bubble.ioに言語スイッチャーを実装するには、開発者は通常、アプリの設定でサポートする言語を定義することから始めます。次に、ユーザーが言語を変更するためのドロップダウンまたはボタン要素を作成します。この記事では、自動翻訳サービスのウェブサイトの1つを使用して、 Bubble.ioに言語スイッチャーを設定する方法について説明します。
Bubble.io ウェブサイトで言語切り替え機能が重要なのはなぜですか?
ウェブサイトに言語スイッチャーを追加するのは、当然のことです。Bubble Bubble サイトに言語スイッチャーを設置する必要がある理由をご紹介します。
- 他の国のユーザーも簡単に:言語スイッチャーを使用すると、海外のユーザーは Web サイトを母国語で表示できます。 たとえば、オンライン ストアにアクセスしているスペイン語のユーザーはスペイン語に切り替えることができるため、製品の詳細を理解し、購入を完了することが容易になります。 CSA Research の調査によると、76%は情報が自分の言語で入手できるときに商品を購入することを好み、ユーザーの快適さとアクセシビリティにとってこの機能の重要性が強調されています。
- 他国の検索結果におけるウェブサイトの最適化：言語切り替え機能を使用すると、 Bubble .ioウェブサイトは外国語検索で上位表示されやすくなります。例えば、フランス語版のウェブサイトは、フランス語のGoogle検索で表示される可能性が高くなります。これにより、可視性が向上し、国際的なトラフィックが大幅に増加します。
- 売上コンバージョンの増加:複数の言語でコンテンツを提供すると、売上が増加します。 ユーザーが言語を切り替えることができるオンライン コース プラットフォームは、より幅広い聴衆を引きつけ、登録者数を増やすことができます。 消費者は母国語で情報を提供する Web サイトから購入する可能性が高く、コンバージョン率に直接影響を与えるため、このアプローチは効果的です。
- ユーザー エンゲージメントと維持率の向上:言語スイッチャーを使用すると、ユーザーをサイトに長く留めておくことができます。 たとえば、ソーシャル ネットワーキング アプリ上で好みの言語で対話するユーザーは、エンゲージメントを長く続ける傾向があります。 ユーザーは通常、第二言語のサイトよりも母国語のサイトに 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 レコードを自動的に追加するには、 「DNS を自動的に接続する」をクリックします。 Entri と呼ばれるこの機能は、DNS レコードを管理することでインストール プロセスを簡素化します。 あるいは、DNS レコードをドメイン プロバイダーに手動でコピーすることもできます。
ボタンをクリックすると、Entri は登録された Web サイトの URL を分析し、パブリック DNS レコードを調べて、必要なプロバイダーと DNS レコードを特定します。
次に、 「[ドメインプロバイダー]で認証」 (例：Cloudflare)をクリックします。 この操作により、ドメイン プロバイダーのログイン ページにリダイレクトされ、ログインして続行できます。
ログインすると、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 セットアップ領域に移動します。 指示に従ってコピーします。
- ドメイン検証用の 1 つの TXT レコード
- 言語の 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: フラグ ボックスの影を設定する
最後に、フラグ ボックスの影の設定を調整できます。 最初のオプションでは、Web サイトに表示される各旗アイコンにシャドウ効果を適用できます。 次のオプションは、ユーザーが言語フラグの上にマウスを置いたときの影の効果を制御します。
必要な調整をすべて完了したら、「保存」ボタンをクリックしてカスタマイズを適用します。その後、 Bubble のウェブサイトにアクセスして、設定が正常に適用されていることを確認してください。言語切り替えツールはこのように表示されます。
セットアップ後、 Bubble の多言語 Web サイトで言語スイッチャーがどのように機能するかを確認できます。
次に、Web サイトをスペイン語などの他の言語に翻訳できます。
Bubble.io の言語スイッチャーを最適化するためのベストプラクティス
Bubble 多言語 Web サイトで言語スイッチャーを正常に設定したら、サイトと訪問者の両方に対して言語スイッチャーを最適化するためのヒントを検討することが重要です。
識別しやすい言語の国旗ロゴを使用する
Bubble.ioウェブサイトに言語スイッチャーを実装する際には、分かりやすい言語の国旗やアイコンを使用することが重要です。これらの視覚的な手がかりは、ユーザーが好みの言語を素早く識別し、選択するのに役立ちます。例えば、地球儀アイコンは言語の選択肢を表すものとして世界的に理解されています。国旗を使用することもできますが、言語が必ずしも単一の国に関連付けられているわけではないため、問題が発生する場合があることに注意してください。
例: Amazon の Web サイトでは、上部のナビゲーション バーで現在選択されている言語 (例: 「EN」) の横に小さな地球アイコンが使用されています。 このシンプルかつ効果的なアプローチにより、ユーザーは現在の言語設定に関係なく、言語オプションをすばやく見つけることができます。
フラグと一緒に言語名を組み込む
フラグは便利ですが、単独で使用すべきではありません。 ネイティブ スクリプトに言語の名前をフラグやアイコンと一緒に含めると、明確になり、潜在的な混乱を回避できます。 これは、複数の国または地域で話されている言語の場合に特に重要です。
例: Airbnb Web サイトの言語スイッチャーには、言語名と国旗が表示されます。 たとえば、「English (US)」には米国の国旗が表示され、「Français」にはフランスの国旗が表示されます。 この組み合わせにより、ユーザーは好みの言語オプションを正確に識別できます。
言語切り替えボタンを慎重に配置する
言語スイッチャーの配置は、ユーザーのアクセシビリティにとって重要です。 一般的な場所には、ヘッダーの右上隅、フッター内、またはメイン ナビゲーション メニュー内などがあります。 重要なのは、メイン コンテンツ領域を乱雑にせずに、簡単に見つけられるようにすることです。
例: Web サイト tiffany.com では、言語スイッチャーがページの右下隅にあり、常に表示され、アクセスできます。 この一貫した配置により、ユーザーはサイトのどこにいても言語オプションをすぐに見つけて使用できます。
言語スイッチャーを応答性良く設計する
言語スイッチャーがデスクトップ コンピューターからスマートフォンまで、すべてのデバイスで適切に動作することを確認します。 小さい画面では、オプションの水平リストの代わりにドロップダウン メニューを使用するなど、デザインを調整する必要がある場合があります。
例:ユネスコ Web サイトの言語スイッチャーは、さまざまなデバイスに美しく適応します。 デスクトップでは、ヘッダーに水平のリストとして表示されます。 モバイルでは、コンパクトなドロップダウン メニューに変換され、モバイルのレイアウトを損なうことなく使いやすさを確保します。
言語スイッチャーがページ間で一貫していることを確認する
Bubble.ioウェブサイトの全ページで、言語スイッチャーのデザイン、機能、位置を統一してください。これにより、ユーザーは現在のページに関係なく、言語オプションがどこにあるかを正確に把握できるため、サイトをより効率的に操作できるようになります。
例: Web サイトでは、ホームページから製品ページ、チェックアウト プロセスに至るまで、すべてのページのフッターに言語スイッチャーが一貫して配置されています。 この一貫性により、ユーザーはブラウジング中やショッピング中にいつでも簡単に言語を切り替えることができます。
Linguiseを使用して、 Bubble 多言語 Web サイトで言語スイッチャーを設定します。
