オンライン購入者の4人に3人が、母国語で情報が提供されている商品を購入することを好むことをご存知ですか？(出典) 多言語ウェブサイトには、次のような独自のメリットがあります：
- パーソナライズされたユーザー体験を提供しましょう。.
- ローカライズされた情報により売上を伸ばす。.
- 地理的な制限なく、より多くの視聴者にリーチできます。.
- グローバル企業としての姿を示すことで、ブランドイメージを向上させます。.
- コンバージョンの増加と直帰率の低下が見られます。.
しかし、多くの企業は多言語ウェブサイトを正しく作成する方法を知りません。
だからこそ、多言語ウェブサイトを設計する際に心に留めておくことをおすすめする18の実践的なUXのヒントをここにご紹介します。.
多言語ウェブサイトのためのUXのヒント18選
多言語ウェブサイトを設計する際には、異なる言語や文化にわたってシームレスなユーザー体験を確保するために、さまざまな要素を考慮することが不可欠です。 ここでは、多言語ウェブサイト向けのUXのベストプラクティスを18個ご紹介します。
計画と構造
多言語ウェブサイトの設計を始める前に、いくつかの事項を計画し決定する必要があります。.
1. ターゲット言語を特定する
多言語ウェブサイトに最適な言語を選ぶには、まずオーディエンスの所在地と人口統計を分析することから始めましょう。現在のウェブサイトのトラフィックと顧客データを確認し、どの言語と地域が最も一般的かを把握してください。.
国勢調査データ、市場レポート、競合分析を使用して、ターゲット市場で話されている言語を調査しましょう。.
たとえば、 米国国勢調査局によると、スペイン語は米国で2番目に多く話されている言語です。したがって、米国の顧客がターゲット層であるなら、英語版とともにスペイン語版のウェブサイトを用意することは非常に理にかなっています。
最も広く話されている言語から始めて、ウェブサイトの成長に合わせて拡大していきましょう。オーディエンスデータを分析し、言語の選択をビジネス目標に合わせることで、多言語ウェブサイトに最適な言語を選定できます。.
2. 明確なURL構造を使用する
明確なURL構造は、多言語ウェブサイトにとって極めて重要です。検索エンジンがサイトの異なる言語バージョンを簡単にインデックスしてランク付けできるためSEOが向上し、ローカル検索での可視性が高まります。.
サブディレクトリ構造は最も一般的で推奨される方法です。各言語はメインドメインの下に独自のサブディレクトリを持ちます。例えば、英語なら www.example.com/en/、スペイン語なら www.example.com/es/、フランス語なら www.example.com/fr/ です。.
ウェブサイト全体で一貫して維持できる構造を選びましょう。異なる構造を混在させるのは避けてください。明確さと標準化を確保するために、ISO 639-1言語コード（英語なら「en」、スペイン語なら「es」など）を使用してください。.
検索エンジンに対して、ページの優先バージョンを示すためにcanonicalタグを使用してください。特に、言語をまたいで類似したコンテンツがある場合に重要です。HTMLにhreflangタグを実装して、検索エンジンがページの言語と地域ターゲティングを理解できるようにしましょう。.
3. グローバルテンプレートを使用する
ウェブサイトの訪問者が別の言語を選択したとき、まったく異なるウェブサイトに移動してしまうようなことがあってはなりません。翻訳されたすべてのウェブページには、同じウェブサイトテンプレートを使用してください。.
Canvaの例を紹介します。ウェブサイトを英語からスペイン語に翻訳しても、見出しと段落の間隔、ボタンの配置、メニューとアイコン、料金プランの形式など、その他すべては同じままです。.
グローバルテンプレートは一貫したブランディングを実現し、ユーザーがどの言語に切り替えてもシームレスなユーザー体験を提供します。デフォルト言語から切り替えた際に、ユーザーが同じレイアウト、デザイン要素、ブランディング、色を目にするようにしてください。.
WordPressなどのコンテンツ管理システム（CMS）を WordPressと共に使用している場合、 Linguiseでブランド化された多言語ウェブサイトを作成するのは朝飯前です。 Linguise はウェブサイトのテーマと深く統合され、追加のデータベースリクエストや過剰なサーバー負荷なしにコンテンツを自動翻訳します。これにより、ウェブサイトのパフォーマンスが損なわれることはありません。
WooCommerceのような eコマースプラグイン を使用している場合、 Linguise は商品が更新されるたびにメインページと翻訳されたページを自動更新します。
4. テキスト拡張のためのスペースを考慮する
多言語ウェブサイトを設計する際の最も重要なUXのヒントの1つは、テキストの拡張を考慮することです。各言語には異なる文体や単語の長さがあり、それらを考慮する必要があります。.
Etsyの例をご覧ください。左側にはウェブサイトのコンテンツが日本語で表示されており、右側には同じコンテンツがドイツ語で表示されています。.
言語によってはより多くのスペースを必要とし、またある言語はより少なくて済みます。翻訳されたコンテンツが読みやすい状態を保つために、ウェブサイトのレイアウトはスペースを柔軟に調整できる必要があります。.
テキストが言語によってどのように伸縮するかの例を以下に示します。W3Cによると、 W3C「view」という単語は英語からイタリア語に翻訳すると300%拡張します！
行の高さや文字のスタイルも考慮しましょう。言語によっては文字が他の言語より背が高いものもあれば、他のスクリプトより多くのスペースを必要とするスクリプトもあります。.
例えば、アラビア文字はラテン文字よりも行間により多くの垂直スペースが必要です。.
5. コンテンツとデザインを分離する
更新や翻訳を容易にするため、テキストはマルチメディア要素から分離して保持してください。.
テキストコンテンツはHTML要素内に保持する 例：
これにより、メインのコードベースに触れることなく、簡単に更新や翻訳が行えます。JavaScript用のi18nextのようなローカライゼーションライブラリを使用して、翻訳を動的に管理しましょう。.
デザインとコンテンツを分離しておくと、翻訳後にレイアウトが崩れる可能性が低くなります。.
6. 言語切り替えオプションを提供する
多言語ウェブサイトでは、明確でアクセスしやすい言語切り替えオプションを提供することが不可欠です。 切り替えボタンはアクセスしやすいように右上隅に配置し、目立たせるためにコントラストの強い色と明確なタイポグラフィを使用してください。明確にするために、言語名はその言語のネイティブ表記で記載してください（例：スペイン語の場合は「Español」）。
ドロップダウンメニューを使えば、スペースを取りすぎずに複数の言語オプションを効率的に表示できます。 国旗を使うと視覚的な手がかりになりますが、国旗は時に誤解を招くことがあるため注意が必要です。
例えば、旗は複数の国で話されている言語を表すことがあります。明確にするために、旗と語学名を組み合わせるのがしばしば最善です。.
選択された言語は、異なる色や太字フォントを使って明確に表示しましょう。AJAXなどの技術を活用し、言語を選択するとページを更新することなく即座にコンテンツが切り替わるようにしてください。 言語切り替え機能をモバイルデバイスに対応させ、ネイティブスピーカーとともに使いやすさをテストしましょう。
コンテンツと翻訳
より良いユーザー体験のために、コンテンツと翻訳に関するいくつかのヒントをご紹介します。.
7. 慣用句や俗語を避ける
すべてのスラングが普遍的に受け入れられるわけではありません。実際、ある国では許容されるスラングが、別の国では非常に不快に感じられることもあります。Y文化を超えてうまく翻訳できる、明確でわかりやすい言葉を常に使うべきです。
たとえば、こちらはロシアでよく使われる慣用句です – Хоть кол на голове теши。 この慣用句はロシア語で「彼はとても頑固な人だ」という意味です。
しかし、このイディオムを直訳すると、「この頭の上で斧を研ぐことができる」となります。😂
よくある英単語がモデレーション付きの自動翻訳で大惨事になりうる、もう一つの例をご紹介します。英単語のSalsaは、韓国語の설사（seolsa）と発音が似ており、「下痢」という意味になります。.
だからこそ、特定の文化や層にしか通じないスラングやイディオムを避けることをおすすめします。代わりに、他の言語に簡単に翻訳できるシンプルな言葉を使いましょう。.
8. 文化的に適切な画像やアイコンを使用する
コンテンツ、画像、アイコン、その他のマルチメディアを現地の習慣や文化的な参照に合わせて適応させましょう。.
たとえば、グローバルな視聴者を対象とするスキンケアブランドのクラランスは、ヨーロッパ版のウェブサイトで白人女性を表示しています。.
しかし、同社のウェブサイトの日本語版では、地元の顧客とよりよくつながるために日本人女性を表示しています。.
アイコン、特に言語切り替えアイコンには、普遍的に見える地球儀のアイコンを使用してください。たとえば、下の画像では、最初のアイコンは南米および北米のユーザーには魅力的かもしれませんが、アフリカおよびアジアのユーザーにはそうではありません。.
2番目のアイコンはアフリカのオーディエンスには響くかもしれませんが、他の人にはそうではないかもしれません。.
この混乱を避けるには、誰にでも馴染みのある普遍的な地球アイコン、つまり3番目のものを使用しましょう。これは特定の地域や国を強調するものではなく、多言語ウェブサイトにより適しています。.
9. マルチメディアに字幕を提供する
マルチメディアの場合、動画を変更せずに動画翻訳用の字幕ファイルを使用してください。画像やマルチメディア要素には、視覚的なコンテンツとは別に翻訳できる説明的な代替テキストを必ず付けてください。.
翻訳がより多くのオーディエンスにリーチするのにどのように役立つかの別の例を紹介します。私たちは、ジュゼッペというイタリア人旅行者が運営する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文字以内で作成しましょう。.
例えば、英語では「最高の農園から仕入れたオーガニックコーヒーのセレクションをご購入ください。50ドル以上のご注文で送料無料！」、スペイン語では「Compra nuestra selección de café orgánico, proveniente de las mejores fincas. ¡Envío gratis en pedidos superiores a $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でグローバル展開する準備はできていますか?
