多言語ウェブサイトレイアウト:7つのパターンとデザインルール

この投稿を次のように要約します: 11分で読めます

チャットGPT 困惑 グロック Google AI

優れた多言語 Web サイト レイアウトには 3 つの機能があります。言語スイッチャーをすべてのページの同じ目に見える場所（通常はヘッダーの右上、フッターで繰り返されます）に配置すること、各言語にラベルを付けるのではなく独自の名前でラベルを付けることです。フラグがあり、翻訳されたテキストのためのスペースが残ります 短いラベルでは英語の 2 倍または 3 倍の長さになる場合があります。ナビゲーションからヒーロー画像に至るまで、他のすべては、長い単語、他のスクリプト、右から左への読み取りに耐えられるように構築される必要があります。

主なポイント

• スイッチャーをすべてのページのヘッダーに配置し、フッターで繰り返します。ユーザーはデスクトップとモバイルのメニューで右上でそれを探します。
• 言語名は独自の言語で記述してください（「Deutsch」、「Español」、「日本語」など）。W3Cは言語に国旗を使用することに反対しています。
• 言語を提案してください。強制しないでください。Google は、ユーザーの言語に基づいて自動的にリダイレクトしないようアドバイスしています。
• 拡張のための設計: W3C が引用した IBM のガイドラインでは、ヨーロッパ言語における最大 10 文字の英語文字列の平均成長率は 200-300% であるとされています。
• 各ページを 1 つの言語で保持し、各言語に独自の URL を与え、画像からテキストを除外します。

多言語サイトの7 つのレイアウトパターン

これらは実際に機能するパターンです。ほとんどのサイトでは、そのうちの 2 つまたは 3 つを組み合わせています。

1。ヘッダースイッチャー、右上

最も一般的なレイアウトでは、メイン ナビゲーションの最後にコンパクトなスイッチャーを配置します。買い物客や読者がそこを見るのは、そこにアカウント、カート、検索コントロールがあるからです。チェックアウト、ヘルプ ページ、ブログ投稿など、すべてのテンプレートでまったく同じ場所に保管してください。W3Cのガイダンスでは、“代替言語バージョンへのリンクを追加するのが常に最善であり、すべてのページでそうすることが”、“それらのリンクを見つけやすいほど良い”(W3C 国際化).

良い詳細:

• 一般的な地球儀アイコンだけではなく、現在の言語をボタン ラベル (“English ▾”) として表示します。
• ホバー時だけでなくクリック時にもリストを開くため、タッチスクリーンやキーボードでも機能します。
• 約 8 つ以上の言語がある場合は、長いドロップダウンの代わりにスクロール可能なリストまたは検索可能なパネルを使用してください。

2。バックアップとしてのフッタースイッチャー

フッター内の 2 番目のスイッチャーは、フッターを探して一番下までスクロールする人々をキャッチします。これは、多くのサイトがフッターを探すように訓練している場所でもあります。費用はかからず、“言語メニューが見つかりません”苦情が軽減されます。ヘッダーに最も人気のある言語のみが表示されている場合、フッターは完全なリストの保存場所としても適しています。

3。モバイルメニューエントリ

携帯電話では、ヘッダーにスイッチャーを入れるスペースがほとんどありません。言語オプションをスライドアウト メニューの上部に配置し、20 個のリンクの後に下部に埋め込まず、メニュー アイコンの横に小さな言語コード（EN、DE）を考慮して、現在の言語が表示されたままになるようにします。

4。リダイレクトの代わりに提案バナー

訪問者のブラウザ言語を検出し、一致するバージョンに直接送信したくなります。Google はこれに対して警告しています: “推測に基づいてリダイレクトすると ” ユーザー（および検索エンジン）がサイトのすべてのバージョンを表示できなくなる可能性があるため、ユーザーをサイトの 1 つの言語バージョンから別の言語バージョンに自動的にリダイレクトしないでください“(Google検索セントラル)。Googlebot は通常、米国からクロールし、no を送信します Accept-Language ヘッダーなので、強制リダイレクトにより翻訳が検索から隠される可能性があります。

丁寧な代替案としては、ページ上部に、推奨言語で書かれた細いバナーを配置する方法があります: “Diese Seite ist auch auf Deutsch verfügbar。[ヴェクセルン]”。訪問者が選択し、その選択が記憶されます。

5。言語ゲートウェイページ

一部のブランドは、フルページ セレクターで開きます。入力する前に言語（場合によっては国）を選択してください。言語によってコンテンツや価格が大きく異なるサイトに適しています。欠点は、誰にとってもクリックが増えることです。そのため、ルート URL でのみ使用し、ディープ リンクのバリアとして使用しないでください。1 つを使用する場合は、hreflang をポイントします x-default Googleによるとx-default “言語セレクターページ用に設計された” (Google検索セントラル).

6。国と言語セレクター

複数の市場で販売する小売業者は、多くの場合、どこにいるか（通貨、配送、法的条件）とどの言語を読むかという 2 つの選択肢を必要とします。これらを 2 つの明確なフィールドとして、または “Canada（Français）” のような結合されたエントリとして表示します。ここでは、言語ではなく国を表すため、旗は受け入れられます。W3C も同じ区別をしています。フラグは “ページの地理的に調整されたバージョン” に適している可能性がありますが、“は単なる翻訳であるページへのリンクには適していません”。

7。コンテンツ内言語リンク

すべての記事が翻訳されているわけではないドキュメント、ヘルプ センター、ブログの場合、翻訳された各記事の上部にある小さな行 (“Espanol、Francais でも入手可能”) は読者に何が存在するかを伝え、存在しない翻訳を約束するものではありません。

スイッチャー自体の設計

ネイティブ名を使用します。 ペルシャ語話者が英語のページに直面した場合、「Persian」を探してそこから抜け出す必要はありません。彼らは「فارسی」を探します。W3Cは、リンクを「リンク先のページの言語」で記述し、オプションで現在のページの言語を括弧またはツールチップで追加することを推奨しています：「français(French）」.

言語のフラグを削除します。 “一部の国には複数の言語があり、一部の言語は複数の国で話されています。” W3C は指摘しています。スペイン語コンテンツのスペイン国旗は、メキシコ、アルゼンチン、コロンビアの読者には奇妙に見えます。英語の米国国旗は、英国、カナダ、オーストラリアにも同じことをします。

現在の言語をマークします。 太字にしたり、チェックマークを追加したり、ボタンラベルとして表示したりできます。ユーザーは、切り替える前に、自分がどのバージョンを使用しているかを知る必要があります。

アクセスできるようにしてください。 本物を使う <button> 各言語のメニューと実際のリンクを開くには、 を追加します lang 各オプションの属性(<a lang="de" hreflang="de" href="/de/">Deutsch</a>) スクリーンリーダーが名前を正しく発音し、キーボードで操作できることを確認します。

選択を覚えておいてください。 誰かが言語を選択するときは、その言語をそのままにしてナビゲートしてください。ドイツのサイト上のすべての内部リンクはドイツの URL を指す必要があります。

テキスト拡張の余地を残す

翻訳されたテキストが英語用に設計されたスペースに収まることはほとんどありません。W3Cのテキストサイズに関する記事では、IBMの英語からヨーロッパ言語への平均拡張率(W3C):

弦が短いほど悪くなります。これは、ボタン、タブ、メニュー項目、フォーム ラベル、バッジなど、デザイナーがしっかりと作成する要素に正確に当てはまります。W3C 独自の例: “views” の Flickr ラベルはイタリア語で “visualizzazioni” になり、3 倍長くなります。

それを吸収するレイアウトルール:

• テキストコンテナに固定幅はありません。 ボタンとタブを大きくしましょう； 設定します min-width むしろ width.
• ナビゲーションをラップまたは折りたたむことを許可します。 メイン メニューをドイツ語やフィンランド語などの長単語言語でテストし、固定ピクセル幅ではなくコンテンツに応じたプラン (“More” メニュー、小さなギャップ、またはハンバーガー ブレークポイント）を用意します。
• 設計上、1 行にテキストを入れることは避けてください。 英語の 1 行に収まる必要がある見出しは、他の言語では中断されます。ヒーローがまだバランスが取れているように見えることをラップして確認させてください。
• 垂直スペースにも注目してください。 W3Cは、多くの非ラテン文字にはより高い行が必要であり、中国語、日本語、韓国語の文字は、たとえ文字数が少なくても、それぞれより多くの水平方向のスペースを占める可能性があると指摘しています。
• 収縮を忘れないでください。 一部の言語では出力が短くなるため、英語向けに調整されたレイアウトにぎこちない空白が残る可能性があります。

さまざまなスクリプトと指示を計画します

フォント。 追加するすべてのスクリプトが Web フォントでカバーされていることを確認してください。そうでない場合、ブラウザはページの途中でシステム フォントに戻り、壊れているように見えます。各スクリプトを、そのために設計され、重量とサイズが類似したフォントと組み合わせます。

右から左への言語。 アラビア語、ヘブライ語、ペルシア語、ウルドゥー語のページが必要です dir="rtl"ミラーレイアウトと、どのアイコンを反転するかの決定。私たちの RTLデザインガイド ルールを詳しくカバーします。

テキスト付きの画像。 画像にベイクされたテキストはどのツールでも翻訳できないため、HTML 内のテキストを画像の上に重ねて保持するか、言語ごとに画像のバージョンを作成します。

各ページを 1 つの言語で保管してください

Google は、表示されているコンテンツからページの言語を決定し、“各ページのコンテンツとナビゲーションに単一の言語を使用し、並べて翻訳することを避けることによって” を推奨しますGoogle検索セントラル)。英語とスペイン語を 2 つの列に表示したり、本文を英語のままメニューのみを翻訳したりするレイアウトは、読者と検索エンジンの両方を混乱させます。

各言語に次のような独自の URL を与えます /de/ サブフォルダーまたは de. サブドメインを作成し、バージョンを hreflang にリンクします。Google は、Cookie やブラウザの設定でコンテンツを切り替えるのではなく、個別の URL を推奨しています。構造を選択している場合は、を参照してください 多言語SEOにおけるサブディレクトリとサブドメイン.

レイアウトが運ぶ詳細をローカライズします

レイアウトには、市場によって変化するデータも保持されます:

• 日付と番号: 03/04 は英国では 4 月 3 日、米国では 3 月 4 日です。
• 通貨と価格: 通貨記号またはコードを明確に表示します。価格が現地価格ではない場合でも、現地価格であることを意味しないでください。
• 住所と電話フィールド: 米国の住所（州、郵便番号）用に作成されたフォームは、他のユーザーを妨げます。フィールドをオプションにするか、国ごとに適応させます。
• 法的および信頼コンテンツ: Cookie に関する通知、返品ポリシー、連絡先の詳細は、その言語がサービスを提供する市場と一致している必要があります。

ConveyThis がレイアウトにどのように適合するか

ConveyThis ダッシュボードからスタイルを設定できる言語スイッチャーをサイトに追加します。丸みを帯びた角または正方形の角、独自の背景、ホバーとテキストの色、カスタム CSS です。デフォルトでは、ネイティブ名で言語がリストされ、フラグなしで表示できます； 地域バージョンにフラグを使用する場合は、できます フラグを変更します たとえば、英語に英国国旗を使用するなど、言語に対して表示されます。各言語は、hreflang が自動的に追加された独自のサブフォルダーまたはサブドメイン URL で公開されます。

訪問者を彼らの言語に誘導したい場合は、 自動リダイレクト設定 訪問者の IP アドレスではなくブラウザ言語を使用し、有効にしない限りオフになります。どちらにしてもスイッチャーを表示したままにしておくと、人々の考えが変わる可能性があります。翻訳されたテキストがデザインにどのように適合するかを確認するには、ビジュアル エディターを使用して文字列を確認してその場で短縮し、一貫性を保つ必要がある用語の用語集を設定します。の 機能ページ 利用可能なすべてのものと私たちのものをリストします 多言語ウェブサイトレイアウトの例 他のサイトがスイッチャーをどのように配置するかを示します。

よくある質問

言語スイッチャーは Web サイトのどこに配置すればよいですか？

ヘッダーには通常、各ページの右上にあり、フッターに 2 番目のコピーがあります。モバイルでは、メニューの上部に配置し、メニュー アイコンの横に現在の言語を表示したままにします。

言語スイッチャーでフラグを使用する必要がありますか？

言語のためではありません。W3C は、多くの国が複数の言語を持っており、複数の国で多くの言語が話されているため、これに反対することを推奨しています。国や地域の店舗を選ぶ場合は旗でも大丈夫です。

私のサイトは訪問者を自動的に彼らの言語にリダイレクトする必要がありますか？

Google は、ユーザーや検索エンジンが他のバージョンにアクセスできなくなる可能性があるため、ユーザーの言語に関する推測に基づく自動リダイレクトは推奨していません。バナーを使用して言語を提案するか、代わりに訪問者の選択を覚えておいてください。

翻訳されたテキストのためにどのくらいのスペースを残すべきですか？

長い弦よりも短い弦の方がはるかに多いです。W3C が引用した IBM のガイダンスでは、10 文字までの英語文字列では平均拡張率が 200-300%、70 文字を超える文字列では約 130% であるとされています。

多言語 Web サイトでは言語ごとに個別の URL を使用する必要がありますか？

はい。Google は、Cookie やブラウザの設定でコンテンツを切り替えたり、hreflang を使用して接続したりするのではなく、言語バージョンごとに異なる URL を推奨しています。

独自のレイアウトで試してみてください

デザインが他の言語にどのように対処するかを確認する最も早い方法は、デザインを翻訳することです。できる ConveyThis アカウントを作成します言語を追加し、スイッチャーを所定の位置に置いて翻訳されたページを確認します。