オンライン購入者の4人中3人が、母国語で情報が提供された商品を購入したがることをご存知ですか？（出典). マルチリンガルウェブサイトを持つことには、次のような利点があります：
- パーソナライズされたユーザー体験を提供する。.
- ローカライズされた情報により売上を向上させる。.
- 地理的制限なしでより大きなオーディエンスにリーチする。.
- グローバル企業として自社を示すことでブランドイメージを向上させる。.
- コンバージョンの増加と直帰率の低減が見られる。.
しかし、多くの企業は多言語ウェブサイトを正しく作成する方法を知らない。
それが理由で、マルチリンガルウェブサイトを設計する際に覚えておくべき実用的なUXヒント18項目をご紹介します。.
マルチリンガルウェブサイトのための18のUXヒント
多言語ウェブサイトを設計する際には、さまざまな要因を考慮し、異なる言語や文化間でシームレスなユーザー体験を確保することが不可欠です。 こちらは多言語ウェブサイト向けのベスト18 UXヒントです。
計画と構造
多言語ウェブサイトの設計を開始する前に、いくつかのことを計画し決定する必要があります。.
1. 対象言語を特定する
多言語ウェブサイトに最適な言語を選ぶには、まず audience’ の所在地と人口統計を分析してください。現在のウェブサイトのトラフィックと顧客データを確認し、どの言語と地域が最も一般的かを把握しましょう。.
国勢調査データ、マーケットレポート、競合分析を活用して、ターゲット市場で話されている言語を調査してください。.
例えば、以下によれば、 United States Census Bureau、スペイン語は米国で2番目に話されている言語です。したがって、米国の顧客がターゲットである場合、英語版と併せてウェブサイトのスペイン語版を用意することは非常に理にかなっています。
最も広く話されている言語から始め、ウェブサイトが成長するにつれて拡大してください。オーディエンスデータを分析し、言語選択をビジネス目標と合わせることで、多言語ウェブサイトに最も適した言語を選択できます。.
2. 明確なURL構造を使用する
明確なURL構造は多言語ウェブサイトにとって重要です。検索エンジンがサイトの異なる言語バージョンを簡単にインデックスし、ランク付けできるため、SEOが向上し、ローカル検索での可視性が高まります。.
サブディレクトリ構造は最も一般的で推奨される方法です。各言語はメインドメインの下に独自のサブディレクトリを持ちます。例えば、英語は www.example.com/en/、スペイン語は www.example.com/es/、フランス語は www.example.com/fr/ のようになります。.
ウェブサイト全体で一貫して維持できる構造を選択してください。異なる構造を混在させないでください。明確さと標準化を確保するために、ISO 639-1 言語コード（例：英語は “en”、スペイン語は “es”）を使用してください。.
検索エンジンにページの推奨バージョンを示すためにカノニカルタグを使用します。特に、複数言語で類似したコンテンツがある場合に有効です。HTMLに hreflang タグを実装して、検索エンジンがページの言語と地域ターゲティングを理解できるようにします。.
3. グローバルテンプレートを使用する
ウェブサイト訪問者が別の言語を選択したときに、全く別のサイトに遷移しないようにします。翻訳されたすべてのページで同じウェブサイトテンプレートを使用してください。.
Here’s の例です。ウェブサイトが英語からスペイン語に翻訳されても、見出しと段落の間隔、ボタンの配置、メニューとアイコン、料金プランの形式、その他すべては同じままです。.
グローバルテンプレートは、一貫したブランディングを支援し、言語が切り替わってもシームレスなユーザー体験を提供します。デフォルト言語から切り替える際にも、ユーザーが同じレイアウト、デザイン要素、ブランディング、カラーを見ることができるようにしてください。.
もしコンテンツ管理システム（CMS）を、WordPress のように Linguise と共に使用しているなら、ブランド化された多言語ウェブサイトの作成はとても簡単です。 Linguise はあなたのウェブサイト’のテーマと深く統合し、追加のデータベースリクエストや過剰なサーバーロードなしでコンテンツを自動翻訳します。この方法で、ウェブサイトのパフォーマンスが損なわれることはありません。
もし eコマースプラグイン のような WooCommerce を使用している場合、Linguise は各製品の更新ごとにメインページと翻訳ページを自動的に更新します。
4. テキスト拡張のための余白を考慮する
多言語ウェブサイトを設計する際の最も重要なUXヒントのひとつは、テキスト拡張を考慮することです。各言語は異なる書き方や文字数があり、これらを考慮する必要があります。.
Etsyの例をご覧ください。左側には日本語のウェブサイトコンテンツが表示され、右側には同じコンテンツのドイツ語版が表示されています。.
一部の言語はより多くのスペースを必要とし、他の言語は少ないスペースで済みます。ウェブサイトのレイアウトは、翻訳されたコンテンツが読みやすさを保つように間隔を調整できる必要があります。.
これは、テキストが異なる言語で拡大または縮小する様子のデモです。以下によると W3C、“view”という単語は、英語からイタリア語へ300％の拡張があります！
行間や文字スタイルも考慮してください。いくつかの言語は他の言語よりも文字が高く、またいくつかのスクリプトは他のスクリプトよりも多くの間隔が必要です。.
例えば、アラビア文字はラテン文字よりも行間により多くの垂直スペースが必要です。.
5. コンテンツをデザインから分離する
テキストをマルチメディア要素から分離して、更新や翻訳を容易にします。.
HTML要素内にテキストコンテンツを保持してください のように
これにより、メインのコードベースに手を加えることなく、簡単に更新や翻訳が可能になります。JavaScript 用の i18next のようなローカリゼーションライブラリを使用して、翻訳を動的に管理します。.
デザインとコンテンツを分離しておくことで、翻訳後にレイアウトが乱れる可能性が低くなります。.
6. 言語切替オプションを提供する
多言語ウェブサイトにとって、明確でアクセスしやすい言語切替オプションを提供することは不可欠です。 スイッチャーは簡単にアクセスできるように右上隅に配置し、コントラストのある色と明瞭なタイポグラフィを使用して目立たせます。明確さのために、言語名は母国語表記で含めます（例：“Español” スペイン語の場合）。
ドロップダウンメニューは、あまりスペースを取らずに複数の言語オプションを効率的に表示できます。 旗を使用すると視覚的な手がかりを提供できますが、旗は時に誤解を招くことがあるため注意が必要です。
例えば、旗は複数の国で話されている言語を表すことがあります。明確さのために、旗とその言語名を組み合わせるのが最善です。.
選択された言語を異なる色や太字で明確に表示します。AJAX のような手法を使用し、言語を選択した際にページをリロードせずにコンテンツが即座に変更されるようにします。 モバイルデバイス向けに言語切替スイッチャーをレスポンシブにし、ネイティブスピーカーで使いやすさをテストします。
コンテンツと翻訳
より良いユーザー体験のために、コンテンツと翻訳に関するいくつかのヒントをご紹介します。.
7. イディオムやスラングを避ける
すべてのスラングが普遍的に受け入れられるわけではありません。実際、一部のスラングはある国では受け入れられ、他の国では極めて攻撃的と見なされます。You は常に明確で率直な言語を使用すべきです。文化を超えてうまく翻訳できるように。
例えば、こちらは人気のロシア語の慣用句です – Хоть кол на голове теши。 この慣用句はロシア語で“He’s a very stubborn person.”という意味です。
しかし、その慣用句の文字通りの訳は、“この頭の上で斧で研げます”となります。 😂
Here’は、一般的な英単語が自動翻訳で適度に訳されるとどれほど災害的になるかの別の例です。英単語の Salsa は韓国語の 설사 (seolsa) と同じ音で、“下痢” を意味します。.
That’は、特定の文化や人口統計にのみ関連するスラングや慣用句を避けることを推奨します。その代わりに、他の言語に簡単に翻訳できるシンプルな言語を使用してください。.
8. 文化的に適切な画像とアイコンを使用する
コンテンツ、画像、アイコン、その他のマルチメディアをローカルの慣習や文化的参照に合わせて調整します。.
例えば、グローバルな顧客層に対応するスキンケアブランドのクラランスは、欧州版ウェブサイトで白人女性を掲載しています。.
しかし、同社の日本語版ウェブサイトでは、現地の顧客とより良くつながるために日本人女性を掲載しています。.
アイコン、特に言語切替アイコンには、普遍的に見える地球儀のアイコンを使用してください。例えば、以下の画像では、最初のアイコンは南北アメリカのユーザーには訴求するかもしれませんが、アフリカやアジアのユーザーには訴求しません。.
2番目のアイコンはアフリカのユーザーには訴求するかもしれませんが、他のユーザーには訴求しません。.
この混乱を避けるために、誰にでも訴求するユニバーサルな地球儀アイコン–3番目のものを選びましょう。それは’特定の地域や国を強調せず、多言語対応のウェブサイトにより適しています。.
9. マルチメディア向け字幕の提供
マルチメディアの場合、動画を変更せずにビデオ翻訳用の字幕ファイルを使用してください。画像やマルチメディア要素には、視覚コンテンツとは別に翻訳可能な説明的な alt テキストを設定してください。.
Here’は翻訳がより広いオーディエンスに届く手助けになる別の例です。私たちは、イタリア人旅行者ジュゼッペが運営するYouTubeチャンネル「Project Happiness」の熱心な視聴者です。.
クリエイターはイタリア人です。彼はイタリア語で録画し、英語で吹き替えを行いますが、提供する多様な字幕のおかげで彼のチャンネルは世界中で視聴されています。.
10. 定期的に翻訳を更新する
Linguiseは、ユーザーフレンドリーなインターフェースでフロントエンド上の翻訳済みページを編集できるようにします。自分で翻訳を評価し、必要に応じて変更を加えることができます。.
Eコマースサイトは頻繁に多くの変更があります—商品が在庫切れになったり、期間限定セールが行われたり、商品情報が変更されたりといったことが頻繁に起こります。.
しかし、 Linguise を使用すると、翻訳されたコンテンツの更新が簡単になります。その専用の翻訳サーバーとキャッシュシステムは、翻訳プロセスを高速化し、翻訳ページをオーディエンスに表示します。
11. 右から左への言語を考慮する
ほとんどの言語は左から右へ書かれます。しかし、アラビア語、ヘブライ語、ペルシア語のように右から左へ書かれる言語もあります。.
’以下はInstagramホームページの英語版とアラビア語版の比較です。ご覧のとおり、アラビア語版は右から左へすべてを反転させており、画像、ボタン、テキスト、さらには検索バーまでが逆になっています。.
Linguiseの翻訳サービスは右から左への言語をネイティブにサポートし、マルチリンガルサイトのレイアウトをそれらに合わせて調整できます。.
利用可能な右から左への言語の一部をご紹介します：
- アラビア語 (ar)
- ヘブライ語 (he)
- ペルシア語 (fa)
- パシュトー語 (ps)
- ウルドゥー語 (ur)
これらの言語を含めたい場合は、こうした大幅な変更に対応できるウェブサイトレイアウトを使用してください。.
SEO とパフォーマンス
インパクトを最大化するために、マルチリンガルウェブサイトを国際的な検索エンジン向けに最適化することを強く推奨します。.
各ターゲット言語でキーワードリサーチを実施し、言語と地域のターゲティングのために hreflang タグを使用し、パフォーマンスを監視します。.
12. ローカル SEO を最適化する
まず、各言語と地域向けにローカライズされたキーワードリサーチから始めます。Google Keyword Planner、SEMrush、Ahrefs などのツールを使用して、ターゲットオーディエンスが検索している関連キーワードを見つけます。.
地域の方言や用語のバリエーションを考慮してください。例えば、メキシコのスペイン語はヨーロッパのスペイン語と異なるため、それに合わせてキーワードを調整します。.
ページの各言語バージョン向けに、ローカライズされたキーワードを組み込んだユニークなタイトルタグを作成します。簡潔で関連性のあるものにし、理想的には60文字未満に保ちます。.
例として、英語では「Buy Organic Coffee Online | Best Prices」、スペイン語では「Compra Café Orgánico en Línea | Mejores Precios」となります。
各言語バージョン向けに、ローカライズされたキーワードと明確な行動喚起を含む魅力的なメタディスクリプションを書き、160文字未満に保ちます。.
For example, in English: “最高の農園から調達したオーガニックコーヒーのセレクションをご購入ください。$50以上のご注文で送料無料です！” and in Spanish: “最高の農園から調達したオーガニックコーヒーのセレクションを購入してください。$50以上のご注文で送料無料です！”
13. hreflang タグを利用する
HTMLでhreflang属性を使用して、検索エンジンにページの言語と地域ターゲティングを知らせます。これにより、重複コンテンツの問題を防ぎ、ユーザーが正しい言語バージョンに誘導されます。.
14. 言語別のパフォーマンスを監視する
Google AnalyticsやGoogle Search Consoleなどのツールを使用して、各言語バージョンのパフォーマンスを監視します。トラフィックソース、ユーザー行動、キーワード順位を分析し、改善すべき領域を特定します。.
さまざまなキーワード、メタタグ、コンテンツ戦略を試して、各言語でオーディエンスに最も響くものを見つけましょう。.
保守とサポート
ウェブサイトや顧客の保守・サポートに関しても考慮すべき点があります。.
15. メンテナンス計画を作成する
多言語ウェブサイトの包括的なメンテナンス計画を作成することで、すべての言語バージョンが一貫性・正確性・最新性を保つことができます。.
よく構築された計画は、コンテンツを効果的に管理し、ユーザーのフィードバックに対応し、変化する市場状況に適応するのに役立ちます。.
すべての言語で既存のコンテンツの関連性と正確性を評価するためにコンテンツ監査を実施してください。古い情報、壊れたリンク、言語バージョン間の不整合をチェックします。.
言語切替スイッチ、ナビゲーション、その他のインタラクティブ要素が正しく機能することを確認するために、定期的にテストしてください。.
16. 複数言語でカスタマーサポートを提供する
複数の言語で顧客サポートを提供することで、ユーザー体験が向上し、多様なオーディエンスとの信頼が築かれます。.
サポート対象の言語に堪能なカスタマーサービス担当者を雇用してください。フルタイムのスタッフやパートタイムの契約者を含めることができます。.
どの言語を優先すべきかを把握するために、ウェブサイトのトラフィックや顧客層を分析したり、アンケートやフィードバックフォームを実施したりできます。結果を活用して既存顧客の言語嗜好を理解しましょう。.
17. フィードバックメカニズム
シンプルでユーザーフレンドリーなフィードバックフォームを作成し、ユーザーが翻訳や使いやすさに関する問題を報告できるようにします。これらのフォームはすべてのページからアクセスできるようにし、理想的にはフッターまたは専用のサポートセクションから利用できるようにしてください。.
フィードバックフォームがすべての対応言語で利用可能であることを確認し、ユーザーが好みの言語でフィードバックを提供できるようにします。.
ユーザーが具体的なフィードバックを提供できるように導く構造化された質問を含めます。例：
- 翻訳の正確さを評価してください（1〜5 のスケール）。.
- 翻訳でどのような問題が発生しましたか？
- ご自身の言語でサイトをナビゲートするのはどれくらい簡単でしたか？
フィードバックフォームの記入に興味がない方のために、翻訳されたコンテンツ上にクイックフィードバックボタン（例：サムズアップ/サムズダウン）を実装します。これにより、ユーザーは翻訳が役に立ったか正確だったかを簡単に示すことができます。.
18. 更新のためにステージングサイトを使用する
本番環境に移行する前に、ステージング環境で新しいコンテンツや更新をテストし、障害を防ぎましょう。AIウェブサイトビルダーとして ZipWP を使用して、数秒で完全なウェブサイトを作成できます。
このウェブサイトには、すべての必須ページ、関連画像、魅力的なコピー、そして組み込みのCMSとSEO機能が含まれます。.
グローバルなオーディエンスに届く準備はできましたか？
多言語ウェブサイト向けの18のUXヒントは、顧客がサイトをより使いやすくナビゲートし、好みの言語でコンテンツにエンゲージできるよう支援します。.
優れた多言語UXデザインは、ユーザーエンゲージメントとコンバージョンの可能性を大幅に向上させます。ただし、シームレスな体験を備えた多言語ウェブサイトを作成するには時間と労力がかかります。.
ここが Linguise が助けになる場所です！
Linguiseは、40以上のCMSとネイティブに統合されます。例えば WordPress、 Shopify、 Webflow、 Squarespace、その他です。80以上の言語と10,000以上の言語ペアをサポートし、最高の多言語ウェブサイト体験を提供します。
すべての翻訳はSEO最適化されており、手頃な価格で、手動翻訳サービスの10％のコストです。.
Linguiseでグローバル展開する準備はできていますか？
