言語切り替え機能を Bubble.io のウェブサイトに設定すると、ユーザーが簡単に言語を切り替えられるようになります。この機能は、グローバルなユーザーを持つアプリケーションにとって特に価値があり、ユーザーが自分の好みの言語でプラットフォームを利用できるようになります。 Bubble.ioは、ノーコード開発プラットフォームとして人気があり、開発者が広範なコーディング知識なしに多言語アプリケーションを作成できるようにする組み込みのローカリゼーション機能を提供します。
Bubble.ioで言語切り替えを実装するには、開発者は通常、アプリの設定でサポートしたい言語を定義することから始めます。次に、ユーザーが言語を変更できるようにドロップダウンまたはボタンの要素を作成します。この記事では、 Bubble.ioで自動翻訳サービスウェブサイトの1つを使用して言語切り替えを設定する方法について説明します。.
Bubble.ioのウェブサイトで言語切り替えが重要なのはなぜですか？
ウェブサイトに言語スイッチャーを追加するのは理由がないわけではありません。ここでは、 Bubble ウェブサイトで言語スイッチャーを設定する必要がある理由を紹介します。.
- 他の国のユーザーにとって使いやすくなります: 言語切り替え機能により、国際ユーザーはネイティブ言語でウェブサイトを閲覧できます。たとえば、スペイン語のユーザーがオンラインストアにアクセスし、スペイン語に切り替えることで、商品の詳細を理解しやすく、購入手続きもスムーズに行えます。CSA Researchの調査によると、 76% のオンラインショッパーは、情報が自国語で提供されている場合に商品を購入する傾向があり、この機能がユーザーにとっての快適さとアクセシビリティの向上に重要な役割を果たしていることが強調されています。
- 他の国々の検索結果におけるウェブサイトの最適化: 言語切り替え機能を使用すると、 Bubble.ioのウェブサイトは外国語検索でより高いランキングを得ることができます。たとえば、あなたのサイトのフランス語版はフランス語のGoogle検索で表示されやすくなります。このように可視性を高めることで、国際的なトラフィックが大幅に増加する可能性があります。
- 販売コンバージョンの向上: 多言語でのコンテンツ提供は売上を促進します。言語切り替えが可能なオンラインコースプラットフォームは、より広範なオーディエンスを引き付け、登録数を増やすことができます。このアプローチは効果的です。なぜなら、消費者はネイティブ言語で情報を提供するウェブサイトから購入する可能性が高いため、直接的にコンバージョン率に影響を与えるからです。
- ユーザーエンゲージメントとリテンションの向上: 言語切り替え機能により、ユーザーはサイトに長く滞在できます。たとえば、ソーシャルネットワーキングアプリでユーザーが好みの言語で操作すると、より長くエンゲージする傾向にあります。このエンゲージメントの向上は重要です。ユーザーは通常、第2言語のサイトよりもネイティブ言語のサイトで2倍の時間を費やすため、ユーザー維持率が向上します。
Bubble.ioで言語スイッチャーを設定する方法
多言語 Bubble.ioウェブサイトでの言語切り替えの重要性を理解したので、実装方法について説明します。ウェブサイト翻訳サービスは通常、この機能を提供しており、ユーザーのニーズに合わせてカスタマイズできます。.
ただし、すべての翻訳サービスがカスタマイズ可能でユーザーフレンドリーな言語切り替えを提供しているわけではありません。したがって、さまざまなフレームワークと互換性があり、柔軟な言語切り替え機能を提供する自動翻訳サービスを選択することが非常に重要です。.
これらの基準を満たす自動翻訳サービスの一つは Linguiseです。 Linguise の自動翻訳は、カスタマイズ性が高く、使いやすい言語切り替え機能を提供しており、 人気のCMSやウェブサイトビルダーである Bubble.ioなどと統合できます。
Linguise は、 Bubbleとのシームレスな統合を提供し、開発者が多言語アプリケーションに言語切り替えを簡単に組み込めるようにします。 Linguiseの高度な機能とユーザーフレンドリーなインターフェイスを活用することで、 Bubble Webサイトでの言語切り替えの設定とメンテナンスを簡素化できます。.
ここでは、 install Linguise を Bubble.ioウェブサイトにインストールし、言語スイッチャーを設定する手順を示します。
ステップ1： Linguise アカウントを登録する
まずは無料の creating a free Linguise アカウントを作成 し、ウェブサイトのドメインを追加します。サブスクリプションプランを選択する前に、30日間の無料トライアルを利用できます。
次に、翻訳を認証するためにドメインを登録する必要があります。「https://」を含むドメイン名をコピーし、「その他」をプラットフォームとして選択します。.
次に、元の言語とターゲット言語を選択します。.
ステップ2：Entriを使用してDNSを自動的に追加する
ウェブサイトを Linguise ダッシュボードに登録した後、2つのインストールオプションが表示されます。.
DNSレコードを自動で追加するには、 「DNSを自動で接続する」 をクリックします。Entriと呼ばれるこの機能は、DNSレコードを管理することでインストールプロセスを簡素化します。あるいは、DNSレコードを手動でドメインプロバイダーにコピーすることもできます。
ボタンをクリックすると、Entriは登録されたウェブサイトの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設定領域に移動します。指示に従ってコピーしてください:
- ドメイン検証用のTXTレコード1件
- 言語用の1つまたは複数のCNAMEレコード
各レコードタイプ（TXTとCNAME）の例を次に示します。.
すべてのレコードを追加したら、構成は次のようになります。.
ステップ4: DNSを検証する
ドメインDNSにすべてのレコードを追加した後、「DNS構成の確認」ボタンをクリックしてDNSプロパゲーションを確認します。.
DNS検証には通常約30分から1時間かかります。完了すると、 Linguise ダッシュボードのDNSリストの横に緑色のインジケーターが表示されます。 Bubble.ioウェブサイトを翻訳する準備はほぼ整っています。残っているのは、国旗付きの言語スイッチャーへのリンクだけです。.
ステップ5: 言語スイッチャーを有効にする
言語切り替え機能は、ユーザーが好みの言語を選択できるようにするフラグポップアップです。これを実装するには、ドメイン登録プロセスの最後またはドメイン設定内に提供されているコードを、 Bubble.ioサイトページのヘッダーにコピーします。フラグ言語切り替え機能は、パブリックWebサイトに自動的に表示されます。.
次に、 Bubble のウェブサイト管理画面に移動します。左側のサイドバーメニューで 「設定」 をクリックし、「SEO / メタタグ」を選択します。
下にスクロールして 「ヘッダー内のスクリプト/メタタグ」 の 「詳細設定」 を開きます。先ほどコピーした Linguise スクリプトを貼り付け、「保存」をクリックしてサイトを公開してください。
ステップ5：メインディスプレイの設定
言語スイッチャーの設定を開始するには、 「設定」>「言語フラグの表示」 セクションに移動します。 Linguise ダッシュボードで、このページでいくつかの設定を調整できます。
- フラグアイコンのスタイル： 3つのオプションから選択：横並び、ドロップダウンメニュー、またはポップアップ。
- 位置： 言語切り替えツールをサイト上のどこに表示するかを選択します。さまざまな位置オプションが利用可能です。訪問者が簡単にアクセスできるようにしてください。
国旗と言語名、国旗と言語の略称、または言語名のみを表示することができます。両方のフラグと言語名を使用することをお勧めします。ユーザーにとってより認識しやすくなります。.
ステップ6: フラグのデザインを設定する
メインディスプレイを設定した後、表示される国旗のデザインをさらにカスタマイズします。.
- 言語名の表示： 国名または言語名自体に基づいて言語名を表示するかを選択できます。たとえば、「French」または「Français」と表示できます。
- 英語のフラグタイプ: このオプションは、米国英語または英国英語などの複数のバリエーションを持つ言語に役立ちます（スペイン語、台湾、中国語、ドイツ語、ポルトガル語にも適用されます）。
- フラグスタイル: フラグアイコンの形状を丸または長方形から選択します。
ステップ7: 色とサイズをカスタマイズする
フラグのデザインを設定した後、フラグの色とサイズをさらにカスタマイズできます。調整できる設定は次のとおりです:
- フラグの境界線の半径: 長方形のフラグスタイルの半径をピクセル単位でカスタマイズします。
- 言語名の色: 言語名を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色: ポップアップまたはドロップダウン領域の言語タイトルのテキストの色を設定します。
- フラグのサイズ: フラグアイコンのサイズを調整します。
- 言語名のホバー色: ユーザーが言語名にマウスを重ねたときに表示されるテキストの色を設定します。
- ポップアップ言語のホバー色: ユーザーがポップアップまたはドロップダウン領域の言語タイトルにマウスオーバーしたときに表示されるテキストの色を設定します。
ステップ8: フラグボックスのシャドウの設定
最後に、フラグボックスのシャドウ設定を調整できます。最初のオプションでは、Webサイトに表示される各フラグアイコンにシャドウ効果を適用できます。次のオプションでは、ユーザーが言語フラグにマウスを重ねたときのシャドウ効果を制御します。.
必要な調整を行ったら、[保存] ボタンをクリックしてカスタマイズの変更を適用します。次に、 Bubble ウェブサイトにアクセスして、構成が正常に適用されたことを確認します。これが言語スイッチャーの表示方法です。.
セットアップ後、 Bubble 多言語ウェブサイトで言語スイッチャーがどのように機能するかを確認できます。.
次に、スペイン語などの他の言語にウェブサイトを翻訳することができます。.
Bubble.ioでの言語スイッチャー最適化のベストプラクティス
多言語ウェブサイトで言語切り替えを正常に設定した後、サイトと訪問者の両方にとって言語切り替えを最適化するためのヒントを検討することが重要です。.
簡単に識別できる言語フラグのロゴを利用する
Bubble.ioウェブサイトに言語スイッチャーを実装する場合、簡単に認識できる言語フラグまたはアイコンを使用することが重要です。これらの視覚的な手がかりは、ユーザーが好みの言語を迅速に識別して選択するのに役立ちます。たとえば、地球儀のアイコンは、言語オプションを表すものとして広く理解されています。あるいは、国旗を使用することもできますが、言語は常に単一の国に関連付けられているわけではないため、問題が生じる可能性があることに注意してください。.
例： Amazon’s website uses a small globe icon next to the currently selected language (e.g., “EN”) in the top navigation bar. This simple yet effective approach allows users to quickly locate the language options regardless of their current language setting.
フラグとともに言語名を組み込む
フラグは役に立ちますが、単独で使用するべきではありません。フラグまたはアイコンの横に、その言語のネイティブスクリプトで言語名を表示することで、明確さが増し、潜在的な混乱を避けることができます。これは、複数の国または地域で話されている言語にとって特に重要です。.
例： Airbnbのウェブサイトの言語切り替え機能では、言語名と国旗が表示されます。たとえば、米国の国旗とともに「English (US)」、フランスの国旗とともに「Français」と表示されます。この組み合わせにより、ユーザーは希望する言語オプションを正確に識別できます。
言語切り替えボタンの位置は慎重に検討してください
言語スイッチャーの配置は、ユーザーのアクセシビリティにとって非常に重要です。一般的な場所としては、ヘッダーの右上、フッター内、またはメインのナビゲーションメニュー内などがあります。重要なのは、メインコンテンツ領域を乱雑にすることなく、簡単に発見できるようにすることです。.
例： tiffany.comのウェブサイトでは、言語スイッチャーはページの右下隅にあり、常に表示されアクセス可能です。この一貫した配置により、ユーザーはサイト上のどこにいても、言語オプションをすばやく見つけて使用できます。
言語スイッチャーをレスポンシブにデザインする
言語スイッチャーがデスクトップコンピューターからスマートフォンまで、すべてのデバイスでうまく機能するようにします。小さい画面では、デザインを適応させる必要があります。たとえば、水平リストの代わりにドロップダウンメニューを使用します。.
例： UNESCOのウェブサイトの言語切り替え機能は、さまざまなデバイスに美しく適応します。デスクトップでは、ヘッダー内に横並びのリストとして表示されます。モバイルでは、コンパクトなドロップダウンメニューに変わり、モバイルレイアウトを損なうことなく使いやすさを確保します。
言語スイッチャーがページ間で一貫していることを確認します
言語スイッチャーのデザイン、機能、および配置を、 Bubble.ioウェブサイトのすべてのページで一貫して維持します。この一貫性により、ユーザーは現在のページに関係なく、言語オプションを正確に見つけることができるため、サイト内をより効率的にナビゲートできます。.
例: このウェブサイトは、ホームページから製品ページやチェックアウト処理まで、すべてのページのフッターに言語切り替えを一貫して表示しています。これにより、ユーザーは閲覧やショッピング体験の際に、いつでも簡単に言語を切り替えることができます。
Bubble 多言語ウェブサイトで言語スイッチャーをLinguiseを使用して設定します!
これで、 Bubble.ioの多言語ウェブサイトの言語を選択する方法がわかりました。言語セレクターを読み上げることで、さまざまな利点が得られ、前に述べた点に基づいてさらに最適化できます。.
言語セレクターを効果的に最適化すると、ユーザーエクスペリエンスが大幅に向上します。 Linguise Linguise アカウントにサインアップし、 あなたの Bubble.ioウェブサイトと統合し、言語セレクターをカスタマイズしてユーザーエクスペリエンスを向上させます。
