外部のお客様にリーチできるよう、さまざまな言語に翻訳したい Bubble.ioのウェブサイトをお持ちですか？ Bubble.io は、強力で柔軟なノーコードプラットフォームであり、Webアプリケーションを構築・管理するための強力な環境を提供します。 Bubble.ioアプリに自動翻訳を統合すると、多言語コンテンツの作成とメンテナンスを簡素化でき、時間とリソースを節約しながら、複数の言語で一貫した高品質のユーザーエクスペリエンスを確保できます。
そこで、この記事では、自動翻訳サービスを使用して Bubble.ioサイトに自動翻訳を簡単に実装する方法について説明します。.
Bubble.ioで自動翻訳を導入するメリット
Bubble.ioのウェブサイトに自動翻訳を実装すると、以下のようないくつかのメリットが得られます。.
- グローバル市場へのアクセス： 自動翻訳により、 Bubble.ioアプリが世界中のユーザーにリーチできるようになります。例えば、もともと英語で作られたレシピ共有アプリは、日本、ブラジル、フランスの料理愛好家がすぐに利用できるようになり、母国語でレシピを探したり投稿したりできるようになります。
- ユーザー満足度の向上： ユーザーが好む言語でコンテンツが表示されると、より楽しく没入感のある体験につながります。例：旅程、レビュー、地元のおすすめ情報を自動的にユーザーの言語に翻訳する旅行計画アプリは、旅行計画の体験を大幅に向上させることができます。
- コンバージョン率の向上： 情報が母国語で提示されると、ユーザーは購入やサービスへの登録を行いやすくなります。例えば、オンラインコースプラットフォームが自動翻訳を導入した後、スペイン語圏の国々からの登録が急増する可能性があります。これは、潜在的な受講生がコースの説明やメリットを完全に理解できるようになるためです。
- 検索での可視性向上： 多言語コンテンツ は、さまざまな地域や言語の検索結果にアプリが表示される可能性を高めます。たとえば、自動翻訳された求人情報や履歴書のヒントを提供する求人検索アプリは、複数の国の現地語検索に表示されるようになり、以前はプラットフォームを見つけられなかった求職者を引き付けることができます。
Bubble.ioを使った多言語ウェブサイトの例
trends.builtwith.comによると、 55,000以上のサイトが Bubble.ioを使用しています。そこで今回は、 Bubble.ioで多言語サイトの作成を検討している方に向けて、いくつかの事例をご紹介します。
ファノバ
Fanovaは、 Bubble.ioを使って構築されたウェブサイトの優れた例です。ファンとお気に入りのコンテンツクリエイターをつなぎ、限定コンテンツを購読できるようにします。このサイトは、多言語サポートなどの高度な機能を備えた、洗練されたユーザーフレンドリーなアプリケーションを作成する Bubble.ioの能力を示しています。.
左下隅にある言語切り替え機能では、英語、スペイン語、ブラジルポルトガル語のオプションを提供しています。この多言語対応により、Fanovaは北米、ラテンアメリカ、ブラジルにわたる多様な国際的オーディエンスに応えることができます。 Bubble.ioの機能を活用することで、Fanovaは一貫したデザインを維持しながら複数の言語でコンテンツを管理・表示でき、異なる言語的背景を持つ訪問者のユーザーエクスペリエンスを向上させます。.
ICアカデミー
Impact Creative Academy（ICA）は、プロフェッショナルで機能的なWebアプリケーションを作成するためのプラットフォームです。このサイトでは、無料コース、助成金コンペティション、求人応募の機会など、AIを活用したキャリアリソースを提供しています。そのクリーンなデザインは、目を引く見出し、簡潔なバリュープロポジション、そして魅力的な「Dive in」コールトゥアクションボタンを特徴としています。.
ICAウェブサイトの注目すべき機能は、右上隅にある言語切り替え機能で、ユーザーは英語とアラビア語を選択できます。この多言語サポートは、 Bubble.ioがグローバルにアクセス可能なプラットフォームを効果的に作成できることを示しています。英語とアラビア語の両方でコンテンツを提供することで、ICAは英語圏の国々とアラブ世界にわたる多様なユーザーベースにサービスを提供できます。.
Bubble.ioで自動翻訳を実装する方法
Bubble.ioで作成された多言語サイトの事例を検証した後、自動翻訳サービスを利用して自動翻訳を実装する方法を探ります。多くのサービスでは、わずか数ステップの設定でウェブサイトを迅速かつ簡単に翻訳できます。そのようなサービスの1つが Linguiseです。.
Linguise は、さまざまなCMSプラットフォームやウェブビルダーと統合されており、 以下と統合されています： Bubble.io。 以下は、 インストールする手順です： Linguise の自動翻訳を Bubble.ioに。
#1 ドメインウェブサイトを登録する
まず、 無料の 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）を追加します。追加された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 ウェブサイトを翻訳する準備はほぼ整っており、あとは国旗付きの言語切り替えスイッチャーへのリンクだけが必要です。.
#5 動的翻訳を有効にする
技術的な観点から見ると、 Bubble はJavaScriptでコーディングされたモジュール、CSS、HTMLを機能的なNode.jsアプリケーションに統合します。 Bubbleのプログラミング言語はJSONに基づいて構築されています。.
「動的翻訳」機能を使えば、 Bubble.ioのウェブサイト上のコンテンツを簡単に翻訳できます。これには、初回のページ読み込み後に非同期（動的）で読み込まれるコンテンツも含まれます。この改善により、訪問者にとってよりスムーズな多言語体験を提供できます！
この機能を利用するには、設定ページの下部にある「はい」をクリックしてください。.
#6 言語切り替えのデザインを有効化してカスタマイズする
言語切り替えは、希望の言語を選択できる旗のポップアップです。実装するには、 Bubble.io サイトのページのヘッダーに提供されたコードをコピーしてください。旗の言語切り替えは、公開ウェブサイトに自動的に表示されます。.
コピー用のリンクは、ドメイン登録プロセスの最後、またはドメイン設定内にあります。必ずリンクをクリップボードにコピーしてください。.
次に、 Bubble のウェブサイトパネルに移動します。左側のサイドバーメニューで「設定」をクリックし、「SEO / メタタグ」を選択します。
設定メニューで、少し下にスクロールして 「Advanced Settings」 の下にある 「Script/meta tags in header」
先ほどコピーした Linguise スクリプトを貼り付け、 「保存」 をクリックしてサイトを公開します。
言語切り替えは、 Linguise ダッシュボードから 「設定 > 言語フラグの表示」に移動してカスタマイズできます。 ここで行った変更はウェブサイトに反映されます。
画面の右側には、言語切り替えのプレビューが表示されます。設定できる要素は以下のとおりです。.
- 3つのレイアウト：横並び、ドロップダウン、またはポップアップ
- 言語切り替えツールの位置
- 言語切り替えツールの内容
- 言語名は英語または母国語で表示
- 旗の形とサイズ
- 色とボックスシャドウ
#7 あなたのウェブサイト Bubbleの自動翻訳
Linguiseの自動翻訳サービスを使用して自動翻訳された場合の Bubble.ioの表示例を以下に示します。.
Linguiseで Bubble.ioウェブサイトを自動翻訳
Linguise 翻訳サービス は、 Bubble.ioウェブサイト向けに自動翻訳をスムーズに統合します。業界をリードする翻訳サービスとして、80以上の言語をサポートし、 Bubble.ioを含む40以上のCMSプラットフォームに対応しています。この統合により、多言語ウェブサイトを簡単に作成でき、全体的なユーザーエクスペリエンスが向上します。
フロントエンドのライブエディター翻訳
Linguise は、 フロントエンドのライブエディター も提供しており、必要に応じて翻訳をすばやく調整できます。このツールにより、翻訳の正確性が保たれ、迅速な変更が可能になります。さらに、プロの翻訳者と連携して、文化的および文脈的な精度を確保することもできます。
Multilingual SEO support
Through its multilingual SEO features Linguise, Linguise can improve your website’s search engine visibility by optimizing its SEO. It generates multilingual sitemaps, creates hreflang codes and tags, sets up canonical URLs, and translates URLs and meta descriptions. These functionalities help boost your site’s search engine rankings and make it more accessible to users in various languages.
グローバル翻訳除外ルール
翻訳の課題に対処するため、 Linguise には、うまく翻訳されない可能性のある特定の用語を保持または除外できる除外ルールが含まれています。ルールを設定して ページを除外したり、インラインコンテンツや特定のページを除外したりすることで、翻訳の明確さと正確さを確保できます。
コラボレーションのためにプロの翻訳者を追加可能
さらに、 Linguise ではプロの翻訳者をダッシュボードに招待できるため、コンテンツの文化的・文脈的な正確さを維持するためのコラボレーションが容易になります。.
Conclusion
Bubble.ioのウェブサイトに自動翻訳を実装することで、リーチを大幅に拡大し、ユーザーエンゲージメントを高め、コンバージョン率を向上させることができます。 Linguiseを使えば、多言語コンテンツを簡単に管理でき、SEO戦略を最適化しながら、さまざまな言語のユーザーにシームレスな体験を提供できます。.
Linguise は、フロントエンドでのライブ編集、動的コンテンツの翻訳、特定の用語の除外ルール、包括的なSEOサポートなど、強力な機能を提供します。これらの機能により、 Bubble.ioとの自動翻訳統合に理想的な選択肢となります。さあ、何を待っているのですか？ 登録する Linguise 自動翻訳ウェブサイト そして、あなたの Bubble.ioウェブサイトを多言語化しましょう。
