2011 年 9 月 11 日（日曜日）
ビジネスを世界展開しようとしているなら、ウェブサイトも世界に対応させる必要があるでしょう。テキストを翻訳するだけの簡単なことだと思う方もいるかもしれませんが、実は、気をつけることは他にもあります。Google ウェブマスター チームが作成するサイトは、40 を超える言語にローカライズ（現地語化）されることも頻繁にあります。今回はその経験を基に、ページを多言語そして多地域向けに公開するにあたっての注意点を紹介します。
（外国語のコンテンツは発信しないから関係ないと思うかもしれませんが、もしかしたら他の国の人が、Google 翻訳のようなツールを使ってあなたのページを自分の母国語で見ているかも知れません。サイトを本来の表示言語以外の言語で見ているユーザーの割合は、アナリティクスのマイレポートに表示されるトラフィックを参照することでわかります）
「言語が増える＝ HTML テンプレートが増える」ではない
これについてはいくら強調しても足りないくらいですが、同じテンプレートをすべての言語バージョンで再利用すること、そしてテンプレートの HTML はシンプルにしておくことを強くおすすめします。
HTML コードがどの言語でも同じであることは、メンテナンスの観点から非常に重要です。言語ごとに HTML コードに手を加えてバグを修正するのでは、拡張性に欠けます。ページのコードはできるだけシンプルなままにしておいて、スタイルについては CSS を使うのがよいでしょう。コードをクリーンにしておくもう 1 つの利点は、翻訳のしやすさです。ほとんどの翻訳ツールは HTML ドキュメントを解析して翻訳可能な文字列を抽出しますので、この作業は、HTML の構造が正しければ、非常に容易になります。
文字列の長さに注意
要素のサイズを固定したときにテキストがきれいに見えるようなデザインの場合は、テキストを翻訳すると大変なことになるおそれがあります。たとえば、ページの左側に置いたナビゲーション用のテキストが、翻訳するとかなり長くなってしまうことがあります。同じコンテンツの英語バージョンとオランダ語バージョンで比較してみてください。ナビゲーション用のタイトルが 2 行にまたがってしまう可能性も考えて、全体が収まるように行の高さを決定する必要があります（ナビゲーション テキストを最初に母国語で作るときもこのことは考慮する価値があります）。
テキストの長さが変動することが特に問題となるのは、フォームのラベルやレイアウトです。たとえば、フォームのラベルを左側に、入力フィールドを右側に配置したデザインの場合は、テキストが長いと 2 行になってしまい、短いと入力フィールドとの間が開きすぎて関連がないように見えてしまいます。どちらの場合もデザインが台無しになり、フォームの可読性が損なわれます。さらに、右から左（RTL）にテキストを記述する言語のレイアウトについてもスタイルを考慮する必要があります（詳しくは後ほど）。このような理由から、Google では、ラベルをフィールドの上に置くようにフォームをデザインしています。フォームが読み取りやすくなり、さまざまな言語に翻訳したときもスタイルの維持が容易だからです。
また、テキストを表示する領域の高さを固定するのも避けたほうがよいでしょう。高さを揃えたいくつかのボックスを背景としてレイアウトすると、母国語のテキストはぴったり収まっても、テキストが翻訳されたときにあふれ出てしまうことがあります。デザインの中で使う UI 要素が、テキストの長さの増減によって影響を受けるかどうかも考える必要があります。たとえば、タブを横に並べるか、縦に並べるかといったことです。
右から左へ記述する言語への対応
双方向 HTML のソース編集には問題が起こりがちですが、その理由は、エディタの多くが Unicode の双方向アルゴリズムをサポートしていないことです（問題と解決策に関する詳しい情報（英語））。たとえば下の例のように " と > の順序を間違えてしまうということが起きえます:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
双方向のテキストを適切に編集できるエディタは Coda のほか、Dreamweaver、IntelliJ IDEA、JEditX などがあります。
RTL 言語用にページをデザインするときは、必要なサポートのほとんどをコア CSS に組み込み、html 要素の dir 属性（下位互換性のため）とともに body 要素にも CSS クラスを用意するのがよいでしょう。他の場合と同様に、すべてのスタイルを 1 つのコア スタイルシートに集めておくと、メンテナンスがしやすくなります。
スタイルに関しては、右側にフロートする要素は左側にもフロートする必要があり、その逆も同じであることに注意してください。要素の一方の側に設定されているパディングやマージン幅は反対側に置かれ、テキストの整列属性は反対向きに設定されます。
Google が通常採用しているアプローチの 1 つに、html[dir=rtl] CSS セレクタではなく body タグのクラスを使用するというものがありますが、これは古いブラウザとの互換性のためです。
要素:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
左から右への（デフォルトの）スタイル:
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
右から左へのスタイル:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
最後にもう 1 つ、右から左へ記述する言語のページに表示するためのコンテンツは、ほとんどの場合、純粋な RTL ではなく双方向となります。テキストによっては、左から右という方向を維持する必要があるからです（会社名の英語表記や電話番号など）。RTL を主とするドキュメントの中に会社名の英語表記や電話番号のようなテキストがある場合に、ブラウザで正しく処理されるようにするには、インライン要素で埋め込まれたテキスト文字列を、方向を設定する属性を使って折り返します。
<h2>עוד ב- <span dir="ltr">Google</span></h2>
dir 属性を入れる HTML コンテナがない場合（title 要素や、メッセージ プロンプト用に JavaScript によって生成されたソースコードなど）は、次のようにすると同じことを実現できます。‫ と ‬ は、Unicode 制御文字です:
<title>‫הפוך את Google לדף הבית שלך‬</title>
JavaScript コードでの使用例:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
（詳細については、アラビア語やヘブライ語などの右から左へ記述する言語の HTML ページの作成（英語）とRTL 言語でのスクリプトの作成（英語）に関する W3C の記事を参照してください）
文字化け
ラテン文字以外の外国語の文字セット（キリル文字、ギリシャ文字、アジアやインドのさまざまな言語の文字）をこれまでに一度も使用したことがない場合は、エディタとブラウザのどちらも、コンテンツが意図したとおりに表示されない場合があります。
エディタとブラウザのエンコードが UTF-8（推奨）に設定されていることを確認するとともに、HTML テンプレートに html 要素の <span> 要素と lang 属性を追加することを検討してください。これによって、ブラウザがページを正しくレンダリングできるようになります。このことには、すべての Unicode 文字が正しく表示されるという利点もあります。つまり、é（é）のような HTML 実体参照を使う必要がなくなるので、貴重なバイト数を節約できます。エンコードをうまく解決できないときは、W3C の 文字エンコードに関するチュートリアル（英語）を参照してください。この問題の詳しい説明があります。
標準規格に従った命名
最後に、複数の言語バージョンを作るときの命名規則に関する実務的なヒントを紹介します。ISO 639-1 言語コードなどの標準規格に従って名前を付けておくと、同じドキュメントのさまざまな言語バージョンを扱うときに便利です。
標準の命名規則が使用されていれば、ユーザーがサイトの構造を理解しやすくなることに加えて、サイトを構築するウェブマスターにとってもメンテナンスしやすくなります。また、サイトのその他の要素（ロゴ画像や PDF ドキュメントなど）に言語コードを使うと、ファイルの識別がしやすくなります。
ウェブマスター セントラルの記事で、URL 構造に関するヒントと、多地域向けウェブサイトや多言語ウェブサイトに関する問題について紹介していますので、参考にしてください。
ここで紹介したことについては、Google 自身も日々苦戦していますが、確かに言えることは、十分な計画を立てて適切な構造の HTML としっかりとした CSS を作成すれば、ローカライズが格段に楽になるということです。