JavaScript、PHP、WOVN.ioを活用してフォームを多言語対応化する方法
フォームサービスを導入するときは、ひと手間かけて多言語対応化も行いましょう。
多言語対応化には、JavaScript、PHP、WOVN.ioを活用する方法があります。
この記事では、フォームの多言語対応化における需要や課題とともに、JavaScript、PHP、WOVN.ioでの設置方法を解説します。
このページの目次
（ 開く ）
フォームの多言語対応が求められる背景
デジタルビジネスのグローバル化に伴い、フォームの多言語対応は重要な戦略となっています。多言語対応が求められる主な背景は、次の3つです。
- グローバル市場の拡大
- 多様なユーザー層への対応
- ユーザーエクスペリエンス（UX）の向上
インバウンドの増加や越境通販の発展により、企業の市場は急速にグローバル化しています。日本の技術や文化に興味をもつ外国人が多い現代において、サービスの多言語対応は新規顧客の獲得に欠かせない手段となりました。
サービスがさまざまな言語に対応していれば、多くの情報を幅広いユーザー層へ発信でき、ブランディングにも役立ちます。
問い合わせの窓口となるフォームもしかり。フォームが多言語対応化されていれば、海外の潜在的な顧客に安心して商品・サービスを利用してもらえるため、認知度や信頼性の向上につながります。
通常のページであればブラウザの自動翻訳機能が有効に働きますが、特にフォームでは、フォントの関係でレイアウトが崩れたり、意図しない改行や翻訳で誤った内容が伝わるおそれがあり、安心できません。自社できちんと適切に多言語対応を行うことで、デザインの一貫性を保ちながら、正確な情報伝達が可能になるのです。
フォームの多言語対応における主な課題
多言語対応はメリットがあるものの、いくつか課題もあるため、導入に踏み切れない企業もあります。
多言語対応にともなう主な課題は、下記の3つです。
- 翻訳の手間とメンテナンスの負担
- ユーザーの入力時の利便性確保
- 言語や国ごとの住所入力フォーマットの違い
翻訳作業は単純な言語置き換えではありません。言語ごとに文字数も異なるなため、最適なフォントサイズを選択するなど、デザイン面に違いがあることを理解したうえでレイアウトも変えなくてはなりません。また、国や文化によって異なる入力フォーマット、特に住所入力の方法は大きく異なるため柔軟な対応が不可欠です。
手間とメンテナンス性に直結する翻訳方法の選択
翻訳方法には、主に以下の選択肢があります。
- 自動翻訳
- 手動翻訳
- ハイブリッド翻訳
まずは自動翻訳に任せるのか、手動翻訳を依頼するのかで、コストや手間、結果は大きく変わります。
自動翻訳は効率的ですが、ニュアンスや文脈を完全に捉えることは難しいのが現状です。重要な項目、特にエラーメッセージや説明文は、専門の翻訳者による手動翻訳を検討すべきでしょう。
ただし、翻訳する範囲や内容によっては、自動翻訳で十分な場合もあり、必ずしも手動翻訳を依頼するほどではないケースも考えられます。自動翻訳と手動翻訳のどちらを選ぶべきか迷ったときは、自社のウェブサイトと似た他社サイトで、多言語対応済みのフォームを参考にするとよいでしょう。
いずれの場合も、コストと品質のバランスを考慮し、コンテンツの重要性に応じて最適な翻訳方法を選択することが重要です。
ユーザーエクスペリエンス（UX）の最適化
フォームの多言語対応化を進めるにあたって、忘れてはならないのがUXへの影響です。
多言語対応における UX 最適化のポイントは主に次の4点。
- 文化的な違いへの柔軟な対応
- 直感的な入力フォームの設計
- エラーに対する適切なフィードバック
- 一貫したデザインの維持
文化的な違いを考慮し入力項目を設計する
例えば「氏名」の入力欄は、国によっては2つに分けるべきではない場合もあり、順番も「性・名」と「ファーストネーム・ファミリーネーム」では異なります。日本語のフォームではよく氏名のフリガナを入力する欄が設けられていますが、それも不要です。
住所の入力フォーマットも国によって大きく異なります。例えば日本では、郵便番号から始まり最後に建物名や部屋番号を記載しますが、外国語の多くは順番が逆です。参考までに、日本とアメリカ、中国の住所フォーマットの違いを比較すると、次のようになっています。
| 日本 | 郵便番号 → 都道府県 → 市区町村 → 番地 → 建物名 |
| アメリカ | ZIPコード → 州 → 都市 → ストリート → アパートメント番号 |
| 中国 | 郵便番号 → 省 → 市 → 区 → 道路 → 番地 →建物名 |
アメリカと中国では宛先がどの道路にあるのかの記載が必要なため、日本にはない「ストリート／道路」の項目があります。
日本の住所記載のルールをもとに、都道府県、市区町村、番地、建物名以降の住所で個別の項目を作成すると、不足したり余分が出てしまいます。
また、同じ英語圏でも郵便番号の書き方は国ごとに異なるため、数字のみの入力に限定しないように注意しましょう。
具体的にエラーをフィードバックする
機械的な翻訳では、「エラーが発生した」ということを伝えるのみで、個別の入力項目に対する具体的なエラーメッセージが表示されない場合がよくあります。
UXを最適化するためには、日本語のフォームと同様に、具体的な説明で分かりやすくエラーをフィードバックすることが大切です。
具体的なエラーメッセージの例：
Please enter a valid email address.（有効なEメールアドレスを入力してください）
This field is required.（この項目は必須です）
There was an error sending your message.（メッセージの送信に失敗しました）
一貫したデザインを維持する
上述のように、言語や文化の違いにより、フォントの大きさやテキストの長さ、入力欄の項目数やサイズ、表示できる文字の種類などはさまざまです。フォームを多言語対応化する際は、これらを考慮のうえ、どの言語でもレイアウトの崩れや誤った情報の伝達がないよう、デザインすることが重要です。
多言語対応の実装方法
ここからは、フォームの多言語対応に伴う多くの課題を解消しつつポイントを押さえた実装方法について、「WOVN.io」というサービスを活用する例と、JavaScriptやPHPによる実装で対応する例を見ていきます。
WOVN.ioを活用する
WOVN.ioは、複雑な多言語対応を簡略化するクラウドサービスです。
ウェブサイト・アプリを全自動で翻訳してくれるため、言語ごとに改めて開発を行う必要がありません。既存のウェブサイト・アプリに後付けできるうえ、翻訳にかかる開発・人的コストを大幅に節約でき、導入期間の短縮にもつながります。手軽かつリアルタイムで翻訳できる機能は、エンジニアに頼らずとも最適な運用を実現してくれます。
一般的な翻訳サービスとWOVN.ioの違いは、言語の翻訳のみならずコンテンツの動的変更にも対応していることです。
実装時に翻訳後の状態を確認し調整できるため、意図しないレイアウトの崩れや、エラーのリスクを回避することが可能です。
WOVN.ioの主な機能
WOVN.ioの代表的な機能は、次の4つです。
- リアルタイム翻訳機能：既存のフォームを多言語化
- エラーメッセージの自動翻訳：適切な表現での通知
- 動的コンテンツの翻訳：言語ごとにフォーム項目の出し分けが可能
- デザインの統一性確保：レイアウト崩れを防ぐ機能
リアルタイム翻訳機能なのでフォームを改めて作り直す手間がなく、エラーメッセージや動的コンテンツも翻訳してくれるので、適切な表現・項目数でユーザーを誘導することができます。レイアウト崩れを防ぐ機能により、ブランドイメージを低下する心配もありません。
WOVN.ioを使ったフォームの多言語対応手順
WOVN.ioを使って、フォームを多言語対応化する手順を見てみましょう。
- 導入：WOVN.ioのアカウント作成、初期設定
- 翻訳設定：自動翻訳 vs. カスタム翻訳の選択
- テスト：各言語での動作確認
- 運用：翻訳のメンテナンスと更新
まずはWOVN.ioでアカウントを作成し初期設定を行います。フォームの翻訳を行うときは、内容に合わせて自動翻訳またはカスタム翻訳のいずれかを選択することができます。
設定が完了したら、各言語で正常に動作するかテストを行いましょう。想定されるユーザーの国籍や地域の言語を中心に、1種類の言語ではなく、複数の言語で確認することが大切です。テストで問題がなければ、いよいよ運用開始です。
WOVN.ioの場合は、運用を開始した後にも定期的にメンテナンスや更新作業が行えるため、常に最適な状態を保つことができますね。
WOVN.ioなどのサービスを使わずに多言語対応化する方法
WOVN.ioのような包括的な多言語ソリューションを利用せず、自社で対言語対応する場合は、「翻訳の機能」と「UXを最適化する機能」のそれぞれをどのように実現するかを検討する必要があります。ここでは、手軽に導入できるものから開発が必要なものまで、4つの方法を紹介します。
1）言語ごとにフォームを作成する
1つ目は、言語ごとに素直にフォームを多数作成する方法です。
個別に作成するため手間はかかるものの、言語ごとの適切な翻訳と最適なUXを同時に叶えることができます。
この方法のポイント：
- 言語ごとに別のHTMLファイルを作成（例：
form-ja.html、form-en.html） - 言語ごとに異なるURLを設定
- 翻訳は手動（フォーム毎に作成）
個別のフォームを用意し、ユーザーが選択した言語のフォームが表示されるようにするだけで多言語に対応することができます。
| メリット | ・特別な技術がいらないため、ハードルが低い ・誤った内容に翻訳されるリスクがない ・入力項目を自由にカスタマイズできる ・各国固有の条件に対応しやすい |
| デメリット | ・言語が増えると管理コストが増大する |
言語ごとにフォームを作成すると、項目数や順番を自由にカスタマイズできるため国や地域ごとの慣習に合ったレイアウトができます。国によっては日本以上に個人情報の取り扱いに対して敏感な場合もあるため、個別に確認しつつ表示する項目を設定できる点は大きなメリットです。
一方で、対応する言語が増えると管理コストが増大するというデメリットがあります。
2）JavaScriptで動的に翻訳しUIを切り替える
2つ目は、JavaScriptを利用して多言語化する方法です。
JavaScriptを利用する場合は、「翻訳機能」と「UXの最適化機能」をそれぞれ検討する必要があります。
まず翻訳の機能には、i18next などのライブラリを利用します。
これらのライブラリを使うと、ユーザーの言語設定にもとづいて、予め用意しておいた翻訳データをページに表示させることが可能です。ただしこの方法は、WOVN.io や Google翻訳ウィジェットのような自動翻訳ではなく、事前に翻訳データを自身で用意しておく必要があるため、翻訳の精度や維持が課題になります。
次に国や地域の慣習に沿うUIを実現する処理を項目ごとに設定します。
例えば、日本以外にアメリカの住所入力に対応する場合、次のように書くことで適切なUIを表示することができます。
<select id="country">
<option value="JP">日本</option>
<option value="US">アメリカ</option>
</select>
<div id="address-jp">
<label>郵便番号:</label><input type="text">
</div>
<div id="address-us" style="display:none;">
<label>ZIPコード:</label><input type="text">
</div>
<script>
document.getElementById('country').addEventListener('change', function() {
document.getElementById('address-jp').style.display = this.value === 'JP' ? 'block' : 'none';
document.getElementById('address-us').style.display = this.value === 'US' ? 'block' : 'none';
});
</script>この方法のポイント：
- i18next などのJavaScriptライブラリを使用して動的に翻訳を行う
- 翻訳は手動（翻訳データを事前に作成）
- ユーザーの言語設定に応じてフォームのUIが切り替わるように処理する
| メリット | ・1つのフォームで多言語対応が可能 ・入力項目を自由にカスタマイズできる |
| デメリット | ・日本語に対応する各言語の翻訳データを事前に作成する必要がある ・対応する言語が増えると、フォームのソースコードが煩雑になる |
表示させる言語や切り替える必要がある項目のみを変更するため、言語ごとに個別のフォームを作成したり、URLを設定したりする必要がありません。フォームの作成コストを軽減できるものの、事前に翻訳データを用意する必要があるなど、多数の言語への対応や複雑なフォームの場合は管理コストが増大する点に注意が必要です。
3）PHPなどサーバーサイドで動的に表示を切り替える
3つ目は、PHPなどのサーバーサイド技術を用いて表示を切り替える方法です。
具体的には、フォームのページを表示する際にブラウザの言語をAccept-Languageヘッダーで送り、サーバーサイドで該当する言語のデータに切り替える、といったやり方が考えられます。この場合、予め言語ごとに用意したテンプレートを使用することで、言語に合った翻訳とUIを実現することができます。
この方法のポイント：
- 言語ごとのテンプレートを用意
- 翻訳は手動（フォーム毎に作成）
Accept-LanguageヘッダーやIPアドレスを利用して表示を切り替え
先に言語ごとのテンプレートを用意しておき、Accept-LanguageヘッダーやIPアドレスをもとに言語切替が行われるように設定します。
| メリット | ・誤った内容に翻訳されるリスクがない ・入力項目を自由にカスタマイズできる |
| デメリット | ・バックエンドの開発が必要 ・言語が増えると管理コストが増大する |
予め用意した言語別のテンプレートを利用するため、自動翻訳によるリスクがなく、言語に対応した入力項目を表示することができます。
ただし導入するためにはバックエンドの開発が必要となるため、実現にはある程度の工数が必要です。
4）Google翻訳ウィジェットを利用する
無料のGoogle翻訳ウィジェットをサイトに埋め込み、ユーザーに活用してもらう方法です。
この方法のポイント：
- Googleの翻訳ウィジェットを埋め込む
- ユーザーが利用したい言語の国旗マークをクリックすると、自動で翻訳される
- 翻訳は自動
| メリット | ・設置が簡単 ・自動で翻訳される |
| デメリット | ・翻訳精度が低く、デザインも崩れやすい ・入力項目を自由にカスタマイズできない |
手軽に設置できるため、知識や技術がなくとも導入できます。
リアルタイムで翻訳されるメリットがあるものの、翻訳精度は低く、デザインも崩れやすいデメリットがあります。
またこの方法で実装されるのは翻訳機能のみなので、UXを最適化するためには「2）Javascriptでの実装」で紹介したような設定が別途必要になります。
どの方法が最適か？選ぶポイント
フォームの多言語対応化は、どの方法を取り入れるかによって開発コスト・柔軟性・翻訳やUXの品質が異なります。
| 方法 | 開発コスト | 柔軟性 | 翻訳の品質 | UXの品質 |
|---|---|---|---|---|
| 言語ごとに作成 | 低 | 高 | 高 | 高 |
| WOVN.io | 低 | 高 | 高 | 高 |
| JavaScriptで制御 | 中 | 中 | 中 | 高 |
| サーバーサイドで制御 | 高 | 高 | 高 | 高 |
| Google翻訳 | 低 | 低 | 低 | 低 |
小規模なサイトやシンプルな翻訳のみを求める場合は、導入の手間がかからないJavaScriptやGoogle翻訳で十分と言えます。
多くの海外ユーザーが流入するウェブサイトに設置したり、海外発送も行っているECサイトに設置したりと本格的な多言語対応を求めるなら、WOVN.ioやサーバーサイド制御などのより高度な方法を検討すべきでしょう。
多言語対応は、もはや付加価値ではなく、グローバル市場で生き残るための基本的な戦略です。技術的な課題や初期投資を恐れず、ユーザー中心の視点で多言語対応に取り組むことが、企業の成長と顧客満足度向上につながります。自社のニーズ、技術的制約、予算を総合的に考慮し、最適な多言語対応戦略を選択しましょう。
Pivot-Formならすべての方法に対応可能です
Pivot-Formは、機能のカスタマイズを前提としたフォーム作成ツール。この記事で紹介したすべての方法を実装することができます。
まずは手軽に翻訳だけ、という場合はGoogle翻訳ウィジェットを試してみるのが良いですが、翻訳やUXの品質も担保したい場合は、言語ごとにフォームを作成する方法か、WOVN.io などの多言語ソリューションの導入がお勧めです。
Pivot-Formはデザインをコントロールするテーマ（テンプレートの親）を複数登録することができるため、言語ごとのテーマを作成・登録することで、多言語展開されたフォームを複数量産することが可能です。翻訳については自動とはいきませんが、「フォーム作成」の部分に時間やコストを掛けることなく、国や地域の文化・慣習の違いに応じた丁寧な翻訳・コミュニケーションに集中することができます。
もちろん、翻訳も自動化をご希望の場合はWOVN.ioとの組み合わせが可能です。
フォームの多言語対応化にはぜひ、Pivot-Formをご検討ください。