多言語サイトの図表対応：インラインSVG、画像のローカライズ、翻訳の境界線

多言語サイトの図表対応：インラインSVG、画像のローカライズ、翻訳の境界線

1. ページは翻訳したのに図が翻訳されていない、これが多言語サイトで最もよくある中途半端な状態

多言語サイトを公開した後、顧客が最も気づきやすい問題は文法ではなく図です。英語ページに中国語が書かれたフロー図がいくつか埋め込まれていると、顧客は一目でこれが「翻訳版」だと気づきます。

4つの中途半端な状態は、発生頻度もコストも異なります。

さらに見えにくい問題は、画像内の文字を検索エンジンもAIも読み取れないことです。1枚の図が図でしか説明できない3層構造を担っている場合、その3層の情報はどの機械から見ても存在しません。図表のローカライズは、人が理解できることと機械が取得できることを同時に解決します。

この判断が当てはまらないケース：サイトが中国語と英語の2言語のみで、英語の訪問者が主に既存顧客と販売チャネル経由の場合、図の優先度は製品ページや認証ページの後で構いません。逆に、英語サイトで新規顧客の検索流入を取り込むなら、図の中の中国語ラベルは致命的な欠点になります。

2. 図の中の文字がなぜ難しいのか：4つの方法のコスト比較

ビットマップ内の文字は書き換えられない、これがすべての面倒の始まりです。文字はすでにピクセルに圧縮されており、変更するにはデザインのソースファイルに戻って作り直すしかありません。

ビットマップ方式には3つの具体的な問題があります。

4つの処理方法の比較は以下の通りです。この表でほぼ8割の判断ができます。

方針を選ぶ判断基準は1つだけ。その画像が今後変わるかどうかです。2年以内に変わらない複雑なインフォグラフィックなら、2言語分のビットマップを用意するのが最も手間がかかりません。パラメータやフロー、名称を変える可能性があるなら、SVGの埋め込みかテキストの外部化を選びます。実物写真は4つ目の分類で、そもそも処理すべきテキストがないため、この種の画像に予算をかける必要はありません。

三、SVG埋め込みで2言語を共存：1枚の画像に2言語のテキスト

SVG埋め込みの利点は、テキストがピクセルではなくテキストのまま残ることです。同じ画像内に中国語と英語のテキストを入れ、ページの言語に応じて表示を切り替えれば、2つのファイルを管理する必要はありません。

「ブロック全体を翻訳禁止」は最も見落とされやすい項目です。マークを付けないと、翻訳プラグインが画像内の中国語ラベルを本文とみなして英語に翻訳し、英語ページに翻訳済みの英語と元からある英語が同時に表示され、2つが重なって画像が台無しになります。こうした問題は、プラグインによる自動翻訳に頼るサイトで非常によく見られます。

関連してもう1つ命名の要件があります。画像のファイル名と代替テキストに言語の接尾辞を付けないことです。接尾辞を付けると、言語が増えるたびにファイルが増え、画像ライブラリの規模が言語数とともに膨らみ、整理の際にどれがまだ使えるか判断しにくくなります。代替テキストには画像の内容を書き、言語情報は書きません。

四、英語は中国語より1.3～1.5倍長い、レイアウトはこの数値で余裕を確保

本記事で最も覚えておきたい数値です。中国語ページでちょうど1行に収まるラベルは、英語にすると通常1.3～1.5倍になり、短いラベルほど顕著です。

ドイツ語やロシア語のような言語はさらに長くなり、通常は英語より10～20%長くなります。ドイツ語版を公開する予定なら、余裕はドイツ語基準で確保し、英語だけで計算してはいけません。

倍率が分かっても、レイアウト上の余白ルールに落とし込まなければ、この数字は使えません。

余白は改行のために使い、フォントサイズを縮めるためには使いません。同じ行に収まらなければ2行目に送り、垂直方向は元のベースラインを中心に上下へ広げます。垂直にも収まらない場合に限り、フォントサイズを下げられますが、上の表の下限を下回ってはいけません。この順序は逆にしないでください。先にフォントサイズを縮めると、英語版が中国語版より一回り小さくなり、両言語の視覚的な重さが揃わなくなります。

はみ出しには3つの現れ方があり、対処法はそれぞれ異なります。

5. 表のローカライズ：列幅、数値、単位、日付

表は図より厄介です。生きた要素だからです。列幅は内容に応じて変わり、内容は言語に応じて変わります。問題が起きやすいのは次の5点です。

数値と単位の書き方は最も罠が多く、いくつかの典型的な違いについて事前にルールを決めておく必要があります。

表組みはスマホ表示を個別に検証する。横スクロールにするか、カードに置き換える。避けたいのは、表全体を画面に収まるよう縮小する方法で、文字が読めないほど小さくなる。判断基準は、スマホで拡大せずに表の見出しが読めるかどうか。

六、図の中で翻訳すべきもの、翻訳してはいけないもの

図の中身は一律に扱えない。種類ごとに対応が異なる。

一つの判断基準がある。そのテキストを翻訳したとき、顧客が他の言語で該当するものを検索できなくなるなら、翻訳しない。型番、番号、ブランドはこの極端なケースにあたる。

もう一つ一貫性の要件がある。図中の用語は用語集と一致させること。同じパラメータが中国語ページでは「行程」、英語ページではある箇所が travel、別の箇所が stroke だと、読者は二つのパラメータだと思う。多言語サイトはまず用語集を作り、その後に画像のローカライズを考える。順序を逆にすると何度も手戻りする。パラメータの扱いも同じ考え方で、対照できる。/insight/13-product-catalog-filter-search-experience/一緒に見ていきましょう。

七、品質チェックリスト：各画像×各言語の4項目チェック

品質チェックは中国語版だけでは不十分。各画像×各言語で4項目をチェックし、不合格なら公開しない。

画像を二セット用意すべきケース

判断の基準はシンプルです。図の中の情報が複雑で、人の目での確認が多く、サイト外へ配信するものであるほど、2セットの画像を作る方向になります。逆に、サイト内で使う構造図・フローカード・比較図はすべてバイリンガルSVGで統一し、保守コストを1桁下げます。納品段階の画像とファイルの要件は/site/のチェックリストで確認できます。信頼ページや資格情報の掲載では、図と文章の信頼性の書き方を/insight/09-trust-pages-ai-credibility-evidence/の記事で参照できます。既存の図表リストを/contact/に送って、言語ごとの一斉チェックを依頼することもできます。

FAQ よくある質問

最後に

図のローカライズはデザインの問題に見えて、実は構造の問題。ビットマップは文字をピクセルに固定してしまうため、言語を追加するたびに描き直しが必要になる。インラインSVGは文字を差し替え可能な位置に残すので、言語が増えてもコストはほとんど変わらない。両者の違いは今ではなく、3回目の改修時に現れる。

事前に決めておくべきことは2つだけ。この図が今後も変更されるかどうか、英語が中国語よりどれだけ長いか。前者が方式を決め、後者が余白を決める。どちらも着手前に答えが出る。公開後に気づいた場合、たいていは作り直しになる。

一言で覚えるなら、図の中の文字は差し替え可能な場所に残し、レイアウトの余白は英語が中国語より1.3〜1.5倍長くなる前提で確保する。