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