Bubble 日本語対応ガイド【2026年版】エディタUI・翻訳設定・多言語化のやり方

はじめに

Bubbleを使ってアプリを作りたいものの、エディタを開いた瞬間に英語が多くて不安になる方は少なくありません。「Bubbleは日本語で使えますか」「Bubbleで作ったアプリを日本語表示できますか」という質問は似ていますが、実務ではまったく別の論点として整理する必要があります。開発者が操作する管理画面の言語と、ユーザーが見る完成アプリの言語は分けて考えるべきだからです。

2026年9月22日時点で、Bubble公式Docsで確認できる日本語対応は、主に完成アプリ側の言語設定と翻訳管理です。Application primary language、Application texts、Userの言語フィールド、URLの`lang`パラメータ、CSVによる一括編集などを使えば、日本向けのアプリや多言語アプリを構築できます。一方で、公式Docs上ではエディタUI全体を日本語化する公式機能は確認できません。開発画面は英語前提で、必要に応じてブラウザ翻訳や日本語教材を併用するのが現実的です。

本記事では、Bubbleの日本語対応の現状、アプリ画面を日本語化する設定、Bubbleで翻訳する方法、料金プランを確認するポイントまで整理します。混同しやすい「英語UIの不安」と「完成アプリの日本語化」を切り分け、発注担当者や初学者が判断しやすい形で解説します。

日本語の文字化けやフォント、CSV編集で起きる失敗も取り上げます。設定だけで翻訳できる範囲と、文言の準備・動作確認が必要な範囲を理解し、まずは小さな画面で試してみましょう。

Bubbleの日本語対応で最初に分けるべき2つの論点

開発画面と完成アプリの言語は別々に考えます。2026年9月22日に確認した公式Docsでは、エディタ全体を日本語UIへ切り替える設定は確認できません。完成アプリは日本語で設計できますが、外部サービスやプラグインの表示も個別に確認します。

対象	日本語対応の考え方	作業
開発者向けエディタ	英語の操作項目を前提にする	ブラウザ翻訳・教材を補助にする
利用者向けアプリ	ボタン・フォーム・通知などを日本語で作れる	固定文言とシステムメッセージを整える
商品説明や投稿内容	言語設定だけでは内容まで翻訳されない	言語別データや翻訳処理を設計する

操作用語	意味・用途
Text / Button / Image	文字・ボタン・画像の要素
Workflow	クリックなどをきっかけに動く処理
Data / Settings	データ管理・アプリ設定
Repeating Group	複数データを一覧表示する要素

Bubbleアプリを日本語化する基本設定

LanguagesとApp textsを設定する手順

公式のLanguages設定で、標準言語とシステムメッセージを設定します。ボタンに直接入力した英文まで自動で翻訳されるわけではありません。

Settings → Languagesを開き、Application primary languageで日本語を選びます。
Currently editing messages and texts forで編集言語を選び、COREの案内文・エラー文を確認します。
自作の文言はApp textsにIDと訳文を登録します。
TextやButtonの動的データでApp textを選び、登録した文言を参照します。
会員登録・入力エラー・通知をプレビューし、確認後に本番へデプロイします。

App textsは短い固定文言向けです。変更後には再デプロイが必要で、利用者へ配信されるため機密情報は置きません。長い本文や頻繁に変わる情報はデータベースで管理します。App texts公式ガイドに用途と制約が説明されています。

日本語のシステムメッセージが表示されても、独自に作った確認メールや外部決済画面まで同じ設定が届くとは限りません。利用者が目にする文言を画面外まで確認することが大切です。メール本文、入力ヒント、処理中の表示も確認対象に含めてください。

ユーザーの言語設定に応じた表示切り替え

多言語にする場合は、Userに言語用フィールドを作り、LanguagesのLanguage field on the user typeで指定します。保存値は言語ドロップダウンに表示されるコードに合わせます。

言語選択欄で選んだ値をUserの言語フィールドへ保存します。Option setならコードを持つテキスト属性も指定します。
保存後にページを再読み込みし、画面文言を確認します。
WebではURLの`lang`パラメータでも切り替えて検証します。

詳細ガイドのWebでの優先順位は「URLのlang → Userの言語 → アプリ標準言語 → 英語」です。ただしLanguagesリファレンスとは説明に差があるため、両方に異なる値を入れた場合を実機で確認します。OSやブラウザの言語が自動採用される前提にはしません。

翻訳テーブル・CSV・外部APIの使い分け

言語別テキストの管理例とCSVの注意点

固定文言と動的データを分けることで、翻訳更新の管理がしやすくなります。次は文言管理の設計例です。実際のインポートには、BubbleからExportしたCSVを使います。

キー	日本語	英語	フランス語
greeting	こんにちは	Hello	Bonjour
welcome_message	ようこそ！	Welcome!	Bienvenue !

方法	適した内容	注意点
App texts	ボタン・メニュー・短い案内	変更時に再デプロイ
CSV一括編集	複数言語の訳文管理	ID・列構造・空欄を点検
翻訳テーブル	商品説明・FAQ・記事本文	言語別レコードと未翻訳時の代替表示を設計
外部API翻訳	投稿内容などの下訳	誤訳確認・利用料・送信データの管理

Languagesから対象言語をExportし、元ファイルを保存します。
表計算ソフトのインポート機能で開き、文字と列区切りを確認します。
文字列IDや列構造を変えずに訳文を編集します。CSVの空欄も上書き対象なので、残す文言は消しません。
Importで区切り文字を合わせ、Validate dataの結果を確認してUpload dataへ進みます。

多言語対応プラグインとAPIの選び方

Bubble純正のAPI Connectorは外部APIとの接続に使えます。外部API翻訳をプラグインで実装する場合も、対応言語、更新状況、Web・モバイルの対応範囲、APIの別料金、データ送信先を確認します。

設計対象	実装例	確認事項
日英の予約画面	App textsで文言を切り替える	予約・取消の表現を統一
頻繁に変わる案内文	キーと言語を持つ翻訳テーブル	訳文がない場合の代替表示
海外からの問い合わせ	APIで下訳し担当者が確認	個人情報の送信範囲と誤訳修正

英語の操作画面を読む翻訳ツールと学習支援

Chromeのページ翻訳は、英文を読む補助になります。Google公式ヘルプに沿って、必要な部分から試してください。翻訳できない画面要素もあるため、設定名は原文と照合します。

Chromeで対象ページを開き、アドレスバーの翻訳アイコン、または右クリックの翻訳を選びます。
日本語を選びます。翻訳されない場合は再読み込みして確認します。
操作名が教材と一致しないときは原文へ戻します。
AIに英文の説明を頼む場合は、秘密情報を除いたエラー文と操作を示します。質問例は「この英文を日本語で説明し、設定名は英語のまま残してください」です。回答の設定名・対処法は公式Docsと照合します。

日本語で相談する場合は、Bubbleフォーラムの日本語投稿のような情報源もあります。古い投稿は現在の仕様と照合し、質問には期待する動作・実際の動作・再現手順を添えます。

日本語対応アプリ開発で起きやすい失敗と対策

日本語データ・CSV・APIの文字化けを切り分ける

日本語表示の不具合は、データ自体が壊れている場合と表示上の問題を分けます。BubbleのDBで文字コードを選び直す操作を探すより、入力・保存・外部送信・表示のどこで変わったかを追います。

症状	確認・対策
CSVを開くと文字が崩れる	インポート時に元ファイルと一致する文字コードを指定。UTF-8ならUTF-8で読み込み、元データを上書きしない
API受信後だけ崩れる	API提供元の仕様とJSONの実データを確認。ヘッダーを一律に追加せず送受信形式を照合
特定文字が四角になる	フォントの日本語字形対応と読込状況を確認
名前で検索できない	全角/半角スペース、前後の空白、入力ルールを確認
`&`などが文字として見える	元データと表示処理を調べ、二重のエスケープを避ける

同じ日本語を画面に直接入力した場合と、データベースやAPIから表示した場合で比べると、問題の発生箇所を絞れます。元データのコピーを残し、一度に複数の設定を変えないようにします。

日本語フォントの選び方と設定

日本語フォントは見た目だけでなく、読みやすさと利用条件で選びます。公式の要素スタイル設定ではフォント・太さ・サイズを調整できます。

日本語の字形、商用利用・配信のライセンス、必要な太さを確認します。
Text要素や共通スタイルでフォントを選び、サイズ・行間とスマホ幅での改行を確認します。
新規カスタムフォントは、2026年6月の公式告知に従い`.ttf`・`.otf`ファイルを追加します。従来のCSSリンク方式は既存Web用途に残りますが、新規追加はファイル方式です。
モバイルでの反映も確認し、必要なビルドを配信します。

予約アプリで確認する日本語UIの設計例

以下は実績紹介ではなく、予約アプリを想定した確認例です。翻訳できていても操作を誤る画面は残るため、利用者の流れに沿ってテストします。

画面・項目	確認例
予約ボタン	「申し込む」「予約する」「確定する」の段階が明確か
氏名・住所入力	日本語の長い氏名、全半角スペース、入力途中の変換で崩れないか
日時と通知	日付形式・タイムゾーン・メール内の日時が一致するか
スマホ画面	長いラベル、行間、文字サイズ、エラー文が読めるか
言語切り替え	未翻訳の欄、ログイン前後、再読込後を確認したか

翻訳レビューや実機検証の時間も開発費に含めます。ノーコード総合研究所では、文言や外部連携を含めた要件整理と開発を相談できます。開発会社選びの確認事項も参考にしてください。

料金プランと導入前に確認すべきこと

2026年9月22日に公式プラン資料と料金ページを確認しました。次は米ドルの月額表示です。年払い欄は年間契約時の月額換算で、月払いとは異なります。

プラン	Webのみ年払い/月払い	Mobileのみ年払い/月払い	Web＋Mobile 年払い/月払い	課金・税等の前提
Starter	$29 / $32	$42 / $49	$59 / $69	1プロジェクト単位。税区分・初期費用の明示なし、決済時に確認
Growth	$119 / $134	$169 / $199	$209 / $249	1プロジェクト単位。税区分・初期費用の明示なし、決済時に確認
Team	$349 / $399	$449 / $529	$549 / $649	1プロジェクト単位。税区分・初期費用の明示なし、決済時に確認
Enterprise	個別見積もり	個別見積もり	個別見積もり	契約・税等の条件を個別確認

最小契約ユーザー数で掛け算する料金表ではなく、プロジェクト単位です。開発・試用のFreeと本番公開の有料プランを分け、Workloadや有料プラグイン、外部翻訳APIの費用も見積もります。詳細はBubble料金の解説と無料プランの範囲を参照してください。

日本語対応のアップデートを確認する方法

将来の日本語UI提供を前提にせず、公式フォーラムの新機能告知とDocsを確認します。フォントのように仕様が変わることもあるため、教材の公開日だけで判断せず、現在のエディタで小さく試してから本番へ反映します。

まとめ

Bubbleの日本語対応は、「エディタUIを日本語で操作できるか」と「完成アプリを日本語・多言語化できるか」を分けると判断しやすくなります。2026年9月22日時点で公式Docsから確認できるのは、主に完成アプリ側のLanguages、App texts、User言語フィールド、URL `lang`、CSV import/exportです。エディタUIは英語前提で考え、ブラウザ翻訳や日本語教材を補助的に使うほうが実務では安定します。英語が不安な場合でも、操作用語を最小限に絞って覚えれば、初期開発の負担は下げられます。

アプリ側の日本語化では、短い固定文言はApp texts、更新頻度の高い本文や商品説明はデータベースの翻訳テーブル、下書き翻訳や問い合わせ文の一次変換は外部APIというように、用途ごとに分けます。レビューなしで自動翻訳を公開すると、誤訳や表現の揺れがサービス品質に直結するため、承認フローも設計してください。

ノーコード総合研究所では、Bubbleの設計、開発、外部API連携、日本語UIの文言整理、内製化支援までまとめて相談できます。英語UIが不安な段階でも、要件、画面、データ、翻訳運用を一緒に整理すれば、文字化けやフォント、通知文面の課題も具体的に検討できます。まずは作りたいアプリの対象ユーザー、必要な言語、公開方法、料金プランの前提を整理するところから始めてください。最初からすべてを多言語化する必要はありません。MVPでは日本語だけで公開し、利用データを見てから英語や他言語へ広げる進め方も現実的です。