「日本語のLP（ランディングページ）、反応が良いからこれをそのまま英語や中国語に翻訳して海外展開しよう！」
グローバル展開を目指すB2B企業の現場では、このような会話が頻繁に交わされています。スピード感を持って市場を開拓する姿勢は重要ですが、実はここに大きな落とし穴が存在します。日本語という言語は、世界的に見ても非常に「情報密度が高い（少ない文字数で多くの情報を伝えられる）」言語だからです。
日本語のワイヤーフレーム（WF）をそのまま翻訳に回した結果、何が起こるでしょうか？
- ボタン内のテキストが長すぎてはみ出し、クリックできない
- 美しい見出しのデザインが、改行位置のズレで台無しになる
- アラビア語圏向けなのに、視線誘導が左から右のままで違和感がある
- AI翻訳が専門用語を誤訳し、現地のエンジニアに混乱を招く
これらはすべて、ワイヤーフレーム設計段階で「翻訳とUIの関係」を論理的に定義できていれば防げる問題です。
本記事では、AI翻訳時代だからこそ知っておくべき、海外LP制作における「用語」と「設計への影響」を解説します。単なる辞書的な意味ではなく、「ワイヤーフレームを作る人がどう動くべきか」という実践的な視点でまとめました。これから海外へ挑む際の、論理的な設計の指針となれば幸いです。
1. なぜ「用語」の定義が海外LPの成否を分けるのか
まず、プロジェクトの共通認識として押さえておきたいのが、翻訳という行為の解像度です。「翻訳（Translation）」と「ローカライズ（Localization）」の違い、そしてAI翻訳エンジンの特性を理解することは、手戻りのないワイヤーフレーム設計の第一歩となります。
翻訳（Translation）とローカライズ（L10n）の決定的な違い
多くのプロジェクトで混同されがちですが、この2つは似て非なるものです。
- 翻訳（Translation）: 原文の意味を他言語に変換すること。情報の等価性を重視します。
- ローカライズ（Localization / L10n）: 対象地域の文化、習慣、法規制に合わせて、製品やサービスを最適化すること。通貨、日付フォーマット、色使い、画像の選定、そしてUIの調整までを含みます。
ワイヤーフレーム設計への影響：
ワイヤーフレーム上では、単にテキストを流し込む場所を作るだけでなく、「ローカライズ可能な余地」を残す必要があります。例えば、欧米では「お客様の声」よりも「導入企業のロゴ一覧」が信頼の証として重視される傾向があります。ユーザー視点とローカライズの観点を持つと、日本語版にはない「Certification（認証・受賞歴）」セクションをワイヤーフレームに追加すべきだ、という論理的な判断が可能になります。
AI翻訳導入時の「用語統一」がUIに与える影響
DeepLやGoogle翻訳などのAIエンジンは飛躍的に進化しましたが、文脈のない単語の処理は課題が残ります。例えば「Home」という単語。Webサイトなら「トップページ」ですが、不動産なら「家」です。
もしワイヤーフレーム上のラベル定義が曖昧だと、AIは文脈を推測してバラバラな訳を出力します。結果、ナビゲーションメニューでは「Home」、フッターでは「House」と訳され、ユーザーを混乱させるUIになってしまいます。
ワイヤーフレーム設計への影響：
ワイヤーフレームの各要素には、単なるダミーテキストではなく、一貫性のある「ラベルID」や「用語定義」を意識したメモ書きが必要です。「ここは『資料請求』、あちらは『お問い合わせ』」と日本語で使い分けているなら、英語でも「Request Demo」と「Contact Us」のように明確に区別する意図を設計図に落とし込む必要があります。
開発者・デザイナーとの共通言語を持つメリット
海外展開プロジェクトでは、現地の制作会社や翻訳パートナーと連携することもあります。その際、「文字があふれるから直して」という曖昧な指示では的確に伝わりません。「テキストエクスパンション（文字数増加）によるレイアウト崩れが発生しているため、コンテナの可変幅を調整してほしい」と論理的に言語化できれば、解決はスムーズです。
次章からは、こうした具体的な専門用語を、実際の設計プロセスに沿って解説していきます。
2. レイアウト崩れを防ぐ「UI/UX設計」関連用語
ワイヤーフレーム設計時に最も懸念すべきは、実装後の「表示崩れ」です。言語が変われば、物理的な長さも、読む方向さえも変わります。ここではUI/UXデザインの観点から絶対に知っておくべき概念を定義します。
テキストエクスパンション（Text Expansion）
概要定義：
翻訳によってテキストの量（文字数や単語数）が増減し、表示領域が変化すること。一般的に、日本語や中国語などの「表意文字」から、英語やドイツ語などの「アルファベット圏」へ翻訳すると、テキスト量は横に伸びます。
具体的な目安（対英語）：
- 日本語 → 英語：約1.2〜1.5倍
- 英語 → ドイツ語：約1.1〜1.3倍（ドイツ語は複合語が多く、単語が長くなりやすい）
- 英語 → フランス語/スペイン語：約1.15〜1.2倍
- 英語 → 日本語/中国語：約0.5〜0.8倍（短くなる）
ワイヤーフレーム設計への影響/注意点：
ボタン、ナビゲーション、カードUIの高さ設計に直結します。
- 固定幅を避ける: 「詳しくはこちら」というボタンを日本語の文字数ギリギリで設計すると、英語の "Click here for more details" は確実にはみ出します。ワイヤーフレームでは、テキストエリアに余裕を持たせるか、文字数に応じて伸縮するデザインを指示します。
- 改行ルールの想定: ドイツ語のように1単語が長い言語では、想定外の位置で改行が入ったり、単語の途中でハイフネーション（単語の分割）が必要になったりします。見出しは2行になっても破綻しないレイアウトを前提にしましょう。
RTL（Right-to-Left）言語対応
概要定義：
アラビア語、ヘブライ語、ペルシャ語など、右から左へ文字を書く言語のこと。これに対し、英語や日本語はLTR（Left-to-Right）と呼ばれます。
ワイヤーフレーム設計への影響/注意点：
単に文字寄せを変えるだけでは不十分です。UI全体を「鏡写し（ミラーリング）」にする必要があります。
- 視線誘導の反転: 日本語では左上にロゴ、右上にメニュー、左から右へコンテンツを配置しますが、RTLではこれが全て逆になります。F型視線誘導も「逆F型」になります。
- アイコンの向き: 進行方向を示す矢印（→）や、戻るボタン（←）の意味が逆転します。ただし、再生ボタン（▶）など物理的な動作を表すアイコンは反転しないケースもあり、細かな定義が必要です。
- ワイヤーフレーム作成: RTL言語を含める場合、最初から「反転可能なグリッドシステム」を採用しているかをエンジニアと確認してください。
Webフォントとフォールバック（Fallback）
概要定義：
- Webフォント: サーバーからフォントデータを読み込み、どの端末でも同じ書体を表示する技術。
- フォールバック: 指定したフォントが表示できない場合に、代替として表示する予備のフォント設定。
ワイヤーフレーム設計への影響/注意点：
- 読み込み負荷: 日本語や中国語のフォントファイルは数MBと重く、海外からのアクセスでは表示速度の低下（レイテンシ）を招きがちです。Google Fontsなどで、多言語対応かつ軽量なフォントを選定する必要があります。
- 「豆腐」化の防止: 翻訳した言語に対応していないフォントを指定すると、文字が「□□（通称：豆腐）」のように表示されます。ワイヤーフレームの段階で「見出し用フォント」「本文用フォント」がターゲット言語をサポートしているかを確認し、未対応時のフォールバックフォント（例：Noto Sansなど）を指定しておきましょう。
ビューポート（Viewport）とレスポンシブ
概要定義：
ブラウザの表示領域のこと。国によって主流となるデバイスの画面サイズや通信環境は異なります。
ワイヤーフレーム設計への影響/注意点：
- モバイルファーストの徹底: アジアやアフリカ諸国では、PCを持たずスマートフォンのみでインターネットにアクセスするユーザーが大多数を占める地域もあります。複雑なマウスオーバーアクションや、横幅の広いテーブル（表組）は、モバイル環境では機能しない可能性があります。
- 通信環境への配慮: 通信インフラが弱い地域をターゲットにする場合、高解像度の動画や画像を多用するLPは離脱の原因になります。ワイヤーフレーム段階で「動画の自動再生はWi-Fi接続時のみ」「軽量モードへの切り替え」といったUIを検討すべきです。
3. AI翻訳の精度を最大化する「言語資産・技術」関連用語
次に、AI翻訳ツールを導入する際に頻出する技術用語です。これらは単なる翻訳ツールの機能ではなく、サイトの品質とコストをコントロールするための重要な「資産」となります。
翻訳メモリ（Translation Memory: TM）
概要定義：
原文と翻訳文のペアをデータベースとして蓄積し、再利用する仕組みです。「この文章は以前こう訳した」という履歴をAIが参照します。
ワイヤーフレーム設計への影響/注意点：
- コンポーネントの共通化: ワイヤーフレーム上で「お問い合わせ」への誘導文言をページごとに微妙に変えてしまう（例：「ご連絡はこちら」「今すぐ相談する」「フォームへ進む」）と、TMの効果が薄れ、翻訳コストが嵩みます。
- 定型文の統一: ボタン、エラーメッセージ、フォームのラベルなどは、サイト全体で統一された文言を使用するように設計することで、TMのヒット率（再利用率）が上がり、翻訳の一貫性とスピードが向上します。
用語集（Glossary）と禁止用語リスト
概要定義：
- 用語集: 特定の単語（製品名、ブランド固有の表現）に対し、訳語を固定するルールリスト。
- 禁止用語: 使用してはいけない表現（競合他社の商標、差別的表現、旧製品名など）のリスト。
ワイヤーフレーム設計への影響/注意点：
- ブランド名の保護: AI翻訳は高度な処理が可能ですが、固有名詞を一般的な意味で直訳してしまうことがあります。ワイヤーフレーム上の製品名やサービス名は、翻訳対象外（Do Not Translate）とするか、用語集で固定する指示が必要です。
- UI上の変数扱い: ワイヤーフレームで
{Product Name}のように変数として記述しておけば、開発段階で誤訳を防ぎやすくなります。
ニューラル機械翻訳（NMT）とPE（ポストエディット）
概要定義：
- NMT: 脳の神経回路を模したAIによる翻訳技術（DeepLやGoogle翻訳の基盤）。流暢だが、たまに不正確な出力（訳抜けや意味の取り違え）をすることがある。
- PE（Post-editing）: AIが翻訳した結果を、人間の翻訳者が修正・仕上げを行う工程。
ワイヤーフレーム設計への影響/注意点：
- 品質レベルの定義: 全てのページを人間が完璧に翻訳する必要はありません。ワイヤーフレーム上で「重要度」を論理的にランク付けすることが効果的です。
- Tier 1（トップページ、CV地点）: 人間によるしっかりしたPE（Full PE）を入れる。
- Tier 2（ブログ記事、FAQ）: AI翻訳＋軽いチェック（Light PE）でコストを抑える。
- Tier 3（ユーザーレビューなど）: AI翻訳のみ（Raw MT）で即時性を優先する。
プレースホルダーと変数（Variables）
概要定義：
文章の一部を動的に置き換えるための記号。例：「こんにちは、{User Name}さん」の {User Name} 部分。
ワイヤーフレーム設計への影響/注意点：
- 語順の違い: 「{Number}件の検索結果」という文言は、英語では "{Number} search results" ですが、言語によっては語順が変わり、変数の位置が移動します。
- 分割禁止: ワイヤーフレームやデザインデータ上で、変数を挟んだ文章を別々のテキストボックスに分けてはいけません（例：「こんにちは、」と「さん」を別のレイヤーにする）。これをやると、翻訳ツールが文脈を理解できず、正しい語順で翻訳できなくなります。必ず「1つの文章の中に変数が含まれる」状態で実装できるよう指示してください。
4. 検索流入と計測を支える「多言語SEO・実装」関連用語
LPを作っても、現地の検索結果に表示されなければ意味がありません。多言語SEO（International SEO）に関わる実装用語を理解し、ワイヤーフレームの要件に盛り込むことが重要です。
hreflangタグと正規化（Canonical）
概要定義：
Googleなどの検索エンジンに対し、「このページは〇〇語/〇〇国のユーザー向けです」と伝えるためのHTMLタグ。
ワイヤーフレーム設計への影響/注意点：
- 言語間のリンク構造: 全ての言語バージョンが相互にリンクされている必要があります。ワイヤーフレームには直接現れない裏側の設定ですが、「言語切り替え機能」の仕様として定義しておく必要があります。
- 重複コンテンツ対策: 米国英語（en-us）と英国英語（en-gb）でコンテンツがほぼ同じ場合、Googleに「コピーサイト」と判定されないよう、hreflangで関係性を明示することが必須です。
ccTLD vs サブディレクトリ vs サブドメイン
概要定義：
多言語サイトのURL構造の選択肢。
- ccTLD（国別コード）:
example.fr,example.de（現地での信頼性は最高だが、管理・コストが大変） - サブディレクトリ:
example.com/fr/,example.com/de/（ドメインパワーを共有でき、管理しやすい。現在の主流） - サブドメイン:
fr.example.com,de.example.com（大規模サイト向け）
ワイヤーフレーム設計への影響/注意点：
- リンク設計: ワイヤーフレーム内のリンク先URLルールを決定します。特にCMSを導入する場合、どの構造を採用するかで開発工数が大きく変わります。データ分析やSEO評価を集約しやすい「サブディレクトリ」が推奨されるケースが多く見られます。
言語切替スイッチャー（Language Switcher）のUI
概要定義：
ユーザーが言語を選択するためのUIパーツ。
ワイヤーフレーム設計への影響/注意点：
- 国旗アイコンの是非: 国旗を使うのは慎重な判断が求められます。「英語＝アメリカ国旗」とすると、イギリスのユーザーは疎外感を感じる可能性があります。「スペイン語」はスペインだけでなく中南米でも使われます。基本的には「English」「日本語」「Français」のように、その言語自身の言葉（母国語表記）でテキスト表示するのが、ユーザー視点に立ったベストプラクティスです。
- 配置場所: グローバルスタンダードでは、ヘッダーの右上かフッターに配置されます。見つけにくい場所に置くと、誤って別言語のページに来たユーザーが即離脱します。
ジオターゲティング（Geo-targeting）
概要定義：
ユーザーのIPアドレスなどから位置情報を特定し、自動的に適切な言語ページへリダイレクトしたり、コンテンツを出し分けたりする技術。
ワイヤーフレーム設計への影響/注意点：
- 強制リダイレクトの弊害: 勝手にリダイレクトすると、海外出張中の日本人が日本語ページを見られないといった問題が起きます。ワイヤーフレームでは、強制移動ではなく「日本からアクセスしているようですが、日本語版を表示しますか？」というポップアップや通知バー（Language Suggestion）を設計するのが親切です。
5. 運用フェーズを見据えた「管理・ワークフロー」関連用語
最後に、LP公開後の運用をスムーズにするための用語です。スプレッドシート等で手動の翻訳管理をしていると、更新のたびに多大な工数が発生します。
TMS（Translation Management System）
概要定義：
翻訳プロジェクトを一元管理するシステム。翻訳メモリ、用語集、発注管理、進捗管理などを統合したもの（Phrase, Lokalise, Smartlingなどが有名）。
ワイヤーフレーム設計への影響/注意点：
- CMSとの連携: ワイヤーフレームで定義したコンテンツが、WordPressなどのCMSに入稿された後、API経由で自動的にTMSへ送られ、翻訳されて戻ってくるフローが理想です。手動コピペを排除する設計を目指しましょう。
i18n（国際化）とl10n（地域化）のプロセス
概要定義：
- i18n (Internationalization): ソフトウェアやサイトを、多言語対応できるように技術的に設計・準備すること（翻訳の前段階）。
- l10n (Localization): 実際に特定の言語や文化に合わせて翻訳・調整すること。
ワイヤーフレーム設計への影響/注意点：
- 順序の理解: ワイヤーフレーム作成は「i18n」の一部です。ここでしっかり「拡張性のあるUI」を作っておくことが、後の「l10n」を効率化します。
インコンテキスト・レビュー（In-context Review）
概要定義：
翻訳者が、実際のWebページのレイアウトやデザインを見ながら翻訳・修正を行う作業。
ワイヤーフレーム設計への影響/注意点：
- 確認フローの設計: 従来はリスト化されたテキストだけで翻訳するケースもありましたが、これでは「Save（保存）」なのか「Save（節約）」なのか文脈が分かりません。実際の画面プレビューを見ながら修正できる環境（またはその時間をスケジュールに組み込むこと）を要件定義に入れておくことが実践的です。
まとめ：言語の壁を越えるのは、翻訳技術ではなく「設計の思いやり」
海外LP制作における専門用語を解説してきましたが、いかがでしたでしょうか。
これら全ての用語を暗記する必要はありません。重要なのは、「言葉が変われば、デザインも技術も変わる必要がある」という事実を、ワイヤーフレーム設計の段階で論理的に意識することです。
- UI設計: テキストの伸縮や書字方向の変化を受け入れる柔軟なレイアウトを作る。
- 言語資産: 翻訳メモリや用語集を活用し、AIを賢くコントロールする。
- 実装・SEO: 検索エンジンとユーザーの両方に、正しい言語情報を届ける。
これらを考慮したワイヤーフレームは、単なる設計図を超え、開発者、翻訳者、そして未来の海外顧客への「ユーザー視点」が詰まったコミュニケーションツールになります。
AI翻訳は非常に便利ですが、その技術を最大限に活かすのは、人間の論理的な設計力です。ぜひ、設計プロセスをアップデートして、世界に通用するLPを作り上げてください。
継続的にグローバルデザインを学びたい方へ
多言語サイトのトレンドやAI翻訳の最新技術は、日々進化しています。最新の多言語UIトレンドの把握、AI翻訳ツールの比較検証、実務で使えるワイヤーフレーム設計の知識など、継続的な情報収集とデータ分析が重要です。常にユーザー視点を持ち、言葉の壁を越える論理的なデザインを探求していくことが求められます。
コメント