Webサイトやアプリケーションで海外ユーザーを獲得するには、多言語対応が欠かせません。
しかし、国際化（i18n）対応は専門的な知識が必要で、実装には多くの時間とコストがかかるのが現実です。
もし、そんな複雑な多言語対応を、AIとの対話だけで高速に実装できるとしたらどうでしょうか。
この記事では、AIソフトウェアエンジニア「Lovable」を活用して、本格的な多言語対応サイトを構築するための具体的なアプローチを解説します。</
i18nライブラリの導入から、AIによる動的な自動翻訳機能の実装まで、明日から使える実践的なノウハウをお届けします。
Lovableにおける多言語対応の基本戦略
Lovableは、自然言語の指示でReactベースのモダンなWebアプリケーションを自動構築するAIプラットフォームです。その柔軟なアーキテクチャは、多言語対応（i18n）の実装と非常に相性が良いのが特徴です。なぜなら、生成されるコードが標準적인React + TypeScript構成であるため、既存の豊富なi18nライブラリ資産をスムーズに導入できるからです。
Lovableで多言語サイトを実装するアプローチは、大きく分けて2つ考えられます。
- 静的翻訳ファイル方式（ライブラリ活用）:
react-i18nextのような実績のあるライブラリを導入し、言語ごとに翻訳テキストを定義したJSONファイルを用意する方法です。翻訳の品質を完全にコントロールしたい場合や、対応言語が限定されている場合に適しています。 - 動的自動翻訳方式（API連携）: DeepLやGoogle Cloud Translationなどの機械翻訳APIと連携し、テキストをリアルタイムで翻訳する方法です。多言語展開を迅速に行いたい場合や、ユーザー生成コンテンツなど、事前に翻訳を用意できない内容を扱う場合に強力な選択肢となります。
- 静的翻訳ファイル方式（ライブラリ活用）:
どちらのアプローチも一長一短がありますが、Lovableの強みは、これらをハイブリッドで実装できる点にあります。例えば、主要なUIコンポーネントは静的ファイルで品質を担保しつつ、ユーザーのコメントのような動的な部分はAPIで自動翻訳するといった高度な使い分けも可能です。この記事では、まず基本となる静的翻訳ファイル方式の実装方法から見ていきましょう。
Lovableが生成するコードはVite + React + TypeScriptが基本となっているため、これらの技術スタックに対応したi18nライブラリであれば、簡単なプロンプトで導入から設定までを自動化できます。エンジニアが手動で行っていたパッケージのインストール、設定ファイルの作成、コンポーネントへの組み込みといった定型作業をAIに任せることで、開発者はより本質的な翻訳内容の検討やUIの微調整に集中できるのです。
実践①：i18nextを使った基本的なi18n対応
それでは、具体的なプロンプトを使って、多言語対応の基盤を構築していきましょう。ここでは、Reactにおけるi18nライブラリのデファクトスタンダードであるreact-i18nextを導入する手順を解説します。
Lovableにi18nライブラリを導入するプロンプト
Lovableのチャットインターフェースで、以下のようなプロンプトを送信します。重要なのは、何をしたいか（多言語対応）、どの技術を使うか（react-i18next）、具体的な要件（対応言語、UIの変更点）を明確に伝えることです。
プロンプト例:
react-i18nextとi18nextをプロジェクトに導入して、多言語対応機能を実装してください。対応言語は日本語（ja）と英語（en）の2つとします。ヘッダー部分に、言語を切り替えるためのドロップダウンメニューを設置してください。翻訳内容は、ひとまずサンプルテキストで構いません。
この指示により、Lovableは以下のタスクを自動的に実行します。
npmoryarnを使い、react-i18next,i18next,i18next-browser-languagedetectorといった必要なパッケージをインストールします。- 翻訳設定を記述する
src/i18n.tsのような設定ファイルを生成します。 - 翻訳テキストを格納する
public/locales/ja/translation.jsonとpublic/locales/en/translation.jsonを作成します。 - アプリケーションのエントリーポイント（例:
main.tsx）でi18n設定をインポートし、初期化します。 - ヘッダーコンポーネントを修正し、言語切り替え用のUI（ドロップダウンなど）を追加・実装します。
- 既存のコンポーネント内のテキストを、i18nの
t関数を使った形式に書き換えます。（例:Hello
→
{t(‘greeting’)}
）
生成されたコードの解説と調整
Lovableは、標準的なベストプラクティスに沿ったコードを生成します。例えば、i18n.tsファイルは以下のようになっているはずです。
（※このコードはLovableが生成するであろう一般的な例です）
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n .use(Backend) .use(LanguageDetector) .use(initReactI18next) .init({ fallbackLng: 'en', debug: true, interpolation: { escapeValue: false, }, backend: { loadPath: '/locales/{{lng}}/{{ns}}.json', }, });
export default i18n;この設定により、ブラウザの言語設定を自動で検知し、適切な言語の翻訳ファイルを非同期で読み込むようになります。開発者はtranslation.jsonファイルにキーと翻訳テキストのペアを追加していくだけで、サイト全体の文言を管理できます。もしUIの微調整が必要な場合は、LovableのVisual Edits機能が役立ちます。言語切り替えボタンのデザインや配置を、プレビュー画面を見ながら直感的に修正できるため、コーディングの手間なく見た目を整えることが可能です。
独自の視点：翻訳ファイルの効率的な管理
プロジェクトが大規模になると、translation.jsonファイルが肥大化し、管理が煩雑になるという問題が発生します。数百、数千ものキーが1つのファイルに混在すると、キーの衝突や修正箇所の特定が困難になります。これを解決するアプローチとして、「Namespace」の活用が挙げられます。例えば、「common（共通）」、「header」、「userProfile」のように、関心事やコンポーネント単位で翻訳ファイルを分割するのです。Lovableに「i18nextのnamespace機能を使って、commonとprofileの2つの翻訳ファイルに分割してください」と指示すれば、設定ファイルを適切に更新し、ファイル構造を整理してくれます。AIに定型作業を任せつつ、人間はスケールしやすい設計を考える、という協力体制が理想的です。
実践②：AIを活用した自動翻訳機能の実装
次に、より高度なアプローチとして、翻訳APIと連携した動的な自動翻訳機能の実装方法を探ります。これにより、対応言語の追加が容易になるだけでなく、ユーザーが投稿したコンテンツなどもリアルタイムで翻訳できるようになります。
Lovable Cloud Edge Functionsの活用
DeepLやGoogle Translateのような外部APIを利用する際、APIキーをフロントエンドのコードに直接埋め込むのは非常に危険です。そこで活躍するのが、Lovableが提供するサーバーレス環境「Lovable Cloud Edge Functions」です。これはSupabaseのEdge Functionsをベースにしており、APIキーのような機密情報を安全に保管しつつ、サーバーサイドで外部APIを呼び出すロジックを実行できます。
フロントエンドからのリクエストをトリガーにしてEdge Functionを実行し、そこで翻訳APIを叩き、結果をフロントエンドに返す、という流れを構築します。これにより、APIキーが外部に漏洩するリスクをなくし、安全な連携が実現します。
自動翻訳機能を実装するプロンプト
ここでも具体的なプロンプトが重要です。API連携のような複雑なタスクは、ステップを分けて指示すると成功率が高まります。
ステップ1：Edge Functionの作成プロンプト
Lovable Cloud (Supabase) Edge Functionを使って、DeepL APIと連携する翻訳関数を作成してください。関数名は'translate-text'とします。この関数は、'text'と'target_lang'を引数として受け取り、翻訳結果をJSON形式で返すようにします。DeepLのAPIキーは環境変数'DEEPL_API_KEY'から読み込むようにしてください。
この指示で、LovableはDenoランタイムで動作するTypeScriptベースのEdge Functionを生成し、デプロイまで行います。
ステップ2：フロントエンドからの呼び出し実装プロンプト
先ほど作成した'translate-text' Edge Functionを呼び出すReactのカスタムフック'useTranslationAPI'を作成してください。このフックは、翻訳したいテキストを引数に取り、翻訳結果とローディング状態を返すようにします。
これにより、Reactコンポーネントから簡単にEdge Functionを呼び出すための仕組みが整います。あとは、このフックを任意のコンポーネントで使い、翻訳したいテキストを表示するだけです。
実装のポイントと注意点
自動翻訳機能は非常に強力ですが、いくつかの注意点があります。第一に、APIコストの管理です。翻訳APIは従量課金制が多いため、無駄な呼び出しが発生しないように、一度翻訳した結果をキャッシュするなどの工夫が必要です。Lovableに「翻訳結果をクライアントサイドでキャッシュする仕組みを追加してください」と指示すれば、useStateやlocalStorageを使った簡単なキャッシュ機構を実装してくれるでしょう。
第二に、翻訳品質です。機械翻訳の精度は向上していますが、完璧ではありません。特に専門用語や微妙なニュアンスが重要な文章では、誤訳のリスクが伴います。重要な部分については、機械翻訳の結果をベースにしつつ、専門家が手動でレビュー・修正するプロセスを組み合わせるのが現実的な解決策です。
Lovableだからできる！多言語サイト開発の高速化と最適化
Lovableの真価は、単にコードを生成するだけでなく、開発プロセス全体を高速化し、最適化できる点にあります。多言語サイト開発においても、その恩恵を最大限に活用できます。
UI/UXの最適化とVisual Editsの活用
多言語対応でよくある問題が、言語によってテキストの長さが大きく変わり、レイアウトが崩れてしまうことです。例えば、英語の “Settings” は日本語では「設定」と短いですが、ドイツ語では “Einstellungen” と長くなります。LovableのVisual Edits機能を使えば、このようなレイアウト崩れを言語ごとにプレビューしながら、ノーコード感覚で修正できます。特定の言語で表示したときにだけ、文字サイズや余白を微調整するといった作業が、プロンプトを何度も送ることなく直感的に完了します。これは、デザインの最終調整フェーズで絶大な効果を発揮します。
GitHub連携によるハイブリッド開発
Lovableは、AIが生成したコードをGitHubリポジトリと同期できます。これにより、「AIに任せる部分」と「人間が深く関わる部分」を明確に分けたハイブリッドな開発スタイルが実現します。i18n対応の初期設定や定型的なコンポーネント実装はLovableに任せて時間を節約し、エンジニアはAPI連携の高度なエラーハンドリングや、パフォーマンスチューニングといった、より専門的な領域に集中できます。AIが土台を作り、人間がそれを洗練させていく。Lovableは、このような未来の開発スタイルを現実のものにします。
Lovableの基本をマスターするために
この記事では多言語対応に焦点を当てましたが、Lovableには今回紹介しきれなかった機能がまだまだたくさんあります。Lovableの料金プラン、クレジットの仕組み、基本的な使い方から応用テクニックまでを網羅的に学びたい方は、別途まとめた「【2026年完全版】Lovable(ラバブル)とは？AIでWebアプリを自動生成する使い方・料金・特徴を徹底解説」もぜひご覧ください。この完全ガイド記事を読めば、Lovableを最大限に活用するための知識が身につくはずです。
まとめ：Lovableでグローバル展開を加速させよう
この記事では、AIソフトウェアエンジニア「Lovable」を使って、多言語対応サイトを構築するための2つの実践的なアプローチを解説しました。
- 静的翻訳ファイル方式:
react-i18nextを使い、翻訳品質を完全にコントロールする堅実な方法。 - 動的自動翻訳方式: 翻訳APIとEdge Functionsを連携させ、迅速かつスケーラブルな多言語展開を実現する方法。
- 静的翻訳ファイル方式:
かつては専門家チームが数週間かけて行っていたような多言語サイトの基盤構築が、Lovableを使えばわずか数時間、あるいは数分で完了する可能性があります。Visual Editsによる直感的なUI調整や、GitHub連携による柔軟な開発スタイルも、他のツールにはない大きな魅力です。
グローバル市場への挑戦は、もはや一部の大企業だけのものではありません。LovableのようなAIツールを賢く活用することで、スタートアップや個人開発者でも、世界中のユーザーに届くサービスをスピーディーに展開できます。まずは無料プランで、その驚異的な開発体験を試してみてはいかがでしょうか。
Lovableで、あなたのアイデアを今すぐ世界に届けましょう。