ビジネスを世界展開しようとしているなら、ウェブサイトもそれにあわせる必要があるでしょう。テキストを翻訳するだけの簡単なことだと思う方もいるかもしれませんが、実は気をつけることは他にもあります。Google ウェブマスター チームが作成するサイトは、40 を超える言語にローカライズ（現地語化）されることも頻繁にあります。今回はその経験を基に、ページを多言語そして多地域向けに公開するにあたっての注意点を紹介します。
（外国語のコンテンツは発信しないから関係ないと思うかもしれませんが、もしかしたら他の国の人が、
Google 翻訳のようなツールを使ってあなたのページを自分の母国語で見ている かも知れません。サイトを本来の表示言語以外の言語で見ているユーザーの割合は、アナリティクスのマイレポートに表示されるトラフィックを参照することでわかります）
「言語が増える=HTML テンプレートが増える」ではないこれについてはいくら強調しても足りないくらいですが、同じテンプレートをすべての言語バージョンで再利用すること、そしてテンプレートの HTML はシンプルにしておくことを強くおすすめします。
HTML コードがどの言語でも同じであることは、メンテナンスの観点から非常に重要です。言語ごとに HTML コードに手を加えてバグを修正するのでは、拡張性に欠けます。ページのコードはできるだけシンプルなままにしておいて、スタイルについては CSS を使うのがよいでしょう。（コードをシンプルしておくもう 1 つの利点は、翻訳のしやすさです。ほとんどの翻訳ツールは HTML ドキュメントを解析して翻訳可能な文字列を抽出しますので、この作業は、HTML の構造が正しければ、非常に容易です）
文字列の長さに注意要素のサイズを固定したときにテキストがきれいに見えるようなデザインの場合は、テキストを翻訳すると大変なことになるおそれがあります。たとえば、ページの左側に置いたナビゲーション用のテキストが、翻訳するとかなり長くなってしまうことがあります。ナビゲーション用のタイトルが 2 行にまたがってしまう可能性も考えて、全体が収まるように行の高さを決定する必要があります（ナビゲーション テキストを最初に母国語で作るときもこのことは考慮する価値があります）。
テキストの長さが変動することが特に問題となるのは、フォームのラベルやレイアウトです。たとえば、フォームのラベルを左側に、入力フィールドを右側に配置したデザインの場合は、テキストが長いと 2 行になってしまい、短いと入力フィールドとの間が空きすぎて関連がないように見えてしまいます。どちらの場合もデザインが台無しになり、フォームの可読性が損なわれます。さらに、右から左（RTL）にテキストを記述する言語のレイアウトについてもスタイルを考慮する必要があります（詳しくは後ほど）。このような理由から、Google では、ラベルをフィールドの上に置くようにフォームをデザインしています。フォームが読み取りやすくなり、さまざまな言語に翻訳したときもスタイルの維持が容易だからです。
クリックで拡大表示
また、テキストを表示する領域の高さを固定するのも避けたほうがよいでしょう。高さを揃えたいくつかのボックスを背景としてレイアウトすると、母国語のテキストはぴったり収まっても、テキストが翻訳されたときにあふれ出てしまうことがあります。デザインの中で使う UI 要素が、テキストの長さの増減によって影響を受けるかどうかも考える必要があります。たとえば、
タブを横に並べる か、
縦に並べる かといったことです。
右から左へ記述する言語への対応右から左へ記述する言語のページに表示するためのコンテンツは、ほとんどの場合、純粋な RTL ではなく双方向となります。テキストによっては、左から右という方向を維持する必要があるからです（会社名の英語表記や電話番号など）。双方向 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 タグのクラスを使用するというものがありますが、これは古いブラウザとの互換性のためです。例えば以下のように HTML, CSS を記述します。
要素:
<body class="rtl">
<h1><a href="http://www.blogger.com/"><img alt="Google" src="http://www.google.com/images/logos/google_logo.png" /></a> 見出し</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;
}
（実際の例を
英語版 と
アラビア語版 で比較できます。）
また、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 要素の lang 属性を追加することを検討してください。これによって、ブラウザがページを正しくレンダリングできるようになります。このことには、すべての Unicode 文字が正しく表示されるという利点もあります。つまり、é（é）のような HTML 実体参照を使う必要がなくなるので、貴重なバイト数を節約できます。エンコードをうまく解決できないときは、
W3C の文字エンコードに関するチュートリアル （英語）を参照してください。この問題の詳しい説明があります。
標準規格に従った命名最後に、複数の言語バージョンを作るときの命名規則に関する実務的なヒントを紹介します。
ISO 639-1 言語コード などの標準規格に従って名前を付けておくと、同じドキュメントのさまざまな言語バージョンを扱うときに便利です。
標準の命名規則が使用されていれば、ユーザーがサイトの構造を理解しやすくなることに加えて、サイトを構築するウェブマスターにとってもメンテナンスしやすくなります。また、サイトのその他の要素（ロゴ画像や PDF ドキュメントなど）に言語コードを使うと、ファイルの識別がしやすくなります。
また、ウェブマスター セントラルの記事で、URL 構造に関するヒントと、
多地域向けウェブサイト （英語）や
多言語ウェブサイト に関する問題について紹介していますので、参考にしてください。
ここで紹介したことについては、Google 自身も日々苦戦していますが、確かに言えることは、十分な計画を立てて適切な構造の HTML としっかりとした CSS を作成すれば、ローカライズが格段に楽になるということです。
Posted by Kathryn Cullen, Google Webmaster Team
Original version:
Îñţérñåţîöñåļîžåţîöñ
このページは、外部サイト Google ウェブマスター向け公式ブログ の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
