オンライン購入者の 4 人に 3 人が、母国語で情報が記載された商品を購入することを好むことをご存知ですか? （ソース）。 多言語 Web サイトを持つことには、次のような独自の利点があります。
- パーソナライズされたユーザー エクスペリエンスを提供します。
- ローカライズされた情報により売上が増加します。
- 地理的な制限なく、より多くの視聴者にリーチできます。
- グローバル企業であることを示すことでブランドイメージを向上させます。
- コンバージョンの増加と直帰率の減少を確認します。
しかし、多くの企業は多言語 Web サイトを正しい方法で作成する方法を知りません。
そのため、多言語 Web サイトを設計する際に念頭に置くことをお勧めする 18 の実践的な UX のヒントをここで紹介します。
多言語ウェブサイトのための UX に関する 18 のヒント
多言語 Web サイトをデザインするときは、さまざまな言語や文化にわたってシームレスなユーザー エクスペリエンスを確保するために、さまざまな要素を考慮することが不可欠です。 ここでは、多言語 Web サイトのための UX に関する 18 のヒントを紹介します。
計画と構造
多言語 Web サイトのデザインを開始する前に、いくつかのことを計画して決定する必要があります。
1. ターゲット言語を特定する
多言語 Web サイトに最適な言語を選択するには、まず視聴者の所在地と人口統計を分析します。 現在の Web サイトのトラフィックと顧客データを調べて、どの言語と地域が最も一般的かを確認してください。
国勢調査データ、市場レポート、競合他社の分析を使用して、ターゲット市場で話されている言語を調査します。
たとえば、米国国勢調査局、スペイン語は米国で 2 番目に話されている言語です。 したがって、米国の顧客がターゲット ユーザーである場合、Web サイトの英語版とともにスペイン語版を用意することは非常に理にかなっています。
最も広く話されている言語から始めて、Web サイトの成長に合わせて拡張してください。 視聴者データを分析し、言語の選択をビジネス目標に合わせることにより、多言語 Web サイトに最も関連性の高い言語を選択できます。
2. 明確な URL 構造を使用する
多言語 Web サイトでは、明確な URL 構造が重要です。 検索エンジンがサイトのさまざまな言語バージョンに簡単にインデックスを付けてランク付けできるため、SEO が向上し、ローカル検索での可視性が高まります。
サブディレクトリ構造は、最も一般的で推奨される方法です。 英語の場合は www.example.com/en/、スペイン語の場合は www.example.com/es/、フランス語の場合は www.example.com/fr/ のように、言語ごとにメイン ドメインの下に独自のサブディレクトリが作成されます。
Web サイト全体で一貫して維持できる構造を選択してください。 異なる構造を混在させないでください。 明確さと標準化を確保するには、ISO 639-1 言語コード (英語の場合は「en」、スペイン語の場合は「es」など) を使用します。
特に複数の言語で同様のコンテンツがある場合は、正規タグを使用して、ページの優先バージョンを検索エンジンに示します。 HTML に hreflang タグを実装すると、検索エンジンがページの言語と地域ターゲティングを理解できるようになります。
3. グローバル テンプレートを使用する
Web サイトの訪問者が別の言語を選択した場合、まったく異なる Web サイトにアクセスしてはなりません。 翻訳されたすべての Web ページに同じ Web サイト テンプレートを使用します。
こちらはCanvaの例です。 Web サイトを英語からスペイン語に翻訳すると、見出しと段落の間のスペース、ボタンの配置、メニューとアイコン、料金プランの形式などはすべて同じままになります。
グローバル テンプレートは、一貫したブランディングに役立ち、どの言語に切り替えてもシームレスなユーザー エクスペリエンスを提供します。 デフォルト言語から切り替えるときに、ユーザーに同じレイアウト、デザイン要素、ブランド、色が表示されるようにします。
WordPressなどのコンテンツ管理システム (CMS) とLinguiseLinguise、ブランド化された多言語 Web サイトの作成は簡単です。 LinguiseWeb サイトのテーマと緊密に統合し、追加のデータベース要求や過剰なサーバー負荷なしでコンテンツを自動翻訳します。 こうすることで、Web サイトのパフォーマンスが損なわれることはありません。
WooCommerce などのe コマース プラグインを使用している場合 Linguise製品が更新されるたびにメイン ページと翻訳されたページを自動更新します。
4. テキスト展開の間隔を考慮する
多言語 Web サイトを設計する際の最も重要な UX のヒントの 1 つは、テキストの拡張を考慮することです。 各言語には異なる書き方と単語の長さがあり、それらを考慮する必要があります。
この Etsy の例を見てください。 左側には Web サイトのコンテンツが日本語で表示され、右側には同じコンテンツがドイツ語で表示されます。
より多くのスペースを必要とする言語もあれば、より少ないスペースを必要とする言語もあります。 Web サイトのレイアウトは、翻訳されたコンテンツが読みやすい状態に保たれるように、間隔を調整できる必要があります。
ここでは、さまざまな言語でテキストがどのように拡大または縮小するかをデモンストレーションします。 W3Cによると、「ビュー」という単語は英語からイタリア語まで 300% 拡張されています。
行の高さや文字のスタイルも考慮してください。 一部の言語では他の言語よりも文字の高さが高く、一部のスクリプトでは他のスクリプトよりも多くのスペースが必要です。
たとえば、アラビア文字はラテン語よりも行間に垂直方向のスペースを多く必要とします。
5. コンテンツをデザインから切り離す
更新や翻訳を容易にするために、テキストをマルチメディア要素から分離してください。
、 、など
のHTML 要素内にテキスト コンテンツを保持しますスタイル設定に CSS を使用して、デザインの変更がコンテンツに影響しないようにします。
テキスト文字列を JSON、XML、PHP などの別の言語ファイルに保存します。
これにより、メインのコードベースに触れることなく、簡単に更新と翻訳が可能になります。 JavaScript 用の i18next などのローカリゼーション ライブラリを使用して、翻訳を動的に管理します。
デザインとコンテンツを分離しておくと、翻訳後にレイアウトが崩れる可能性が低くなります。
6. 言語切り替えオプションを提供する
多言語 Web サイトには、明確でアクセスしやすい言語切り替えオプションを提供することが不可欠です。 簡単にアクセスできるようにスイッチャーを右上隅に配置し、コントラストのある色と明確なタイポグラフィを使用して目立つようにします。 わかりやすくするために、ネイティブ スクリプトに言語名を含めます (例: スペイン語の場合は「Español」)。
ドロップダウン メニューでは、スペースをあまり占有せずに複数の言語オプションを効率的に表示できます。 フラグを使用すると視覚的な手がかりを提供できますが、フラグは誤解を招く可能性があるため注意してください。
たとえば、国旗は複数の国で話されている言語を表す場合があります。 多くの場合、わかりやすくするためにフラグを言語名と組み合わせることが最善です。
選択した言語を別の色または太字のフォントを使用して明確に表示します。 AJAX などの技術を使用して、言語を選択すると、ページを更新せずにコンテンツがすぐに変更されるようにします。 言語スイッチャーをモバイル デバイスに対応させて、ネイティブ スピーカーによる使いやすさをテストします。
内容と翻訳
ユーザー エクスペリエンスを向上させるためのコンテンツと翻訳に関するヒントをいくつか紹介します。
7. 慣用句やスラングを避ける
すべてのスラングが広く受け入れられるわけではありません。 実際、一部のスラングは、一部の国では許容され、他の国では非常に攻撃的であると考えられています。 文化を超えてうまく翻訳できる、常に明確で率直な言葉を使用する必要があります。
たとえば、これはロシアの人気の慣用句です – Хоть кол на голове тези です。 この慣用句はロシア語で「彼はとても頑固な人だ」という意味です。
しかし、この慣用句を直訳すると、「この頭の上にある斧で研ぐことができる」ということになります。 😂
ここでは、一般的な英語の単語を適度に自動翻訳すると悲惨な結果を招く可能性があることを示すもう 1 つの例を示します。 英語のサルサという言葉は、韓国語で「下痢」を意味する설사（ソルサ）に似ています。
そのため、特定の文化や人口統計にのみ関連するスラングや慣用句を避けることをお勧めします。 代わりに、他の言語に簡単に翻訳できる簡単な言語を使用してください。
8. 文化的に適切な画像とアイコンを使用する
コンテンツ、画像、アイコン、その他のマルチメディアを現地の習慣や文化的参照を反映するように調整します。
たとえば、世界中のユーザーを対象とするスキンケア ブランドである Clarins は、ヨーロッパの Web サイト版で白人女性を紹介しています。
しかし、そのウェブサイトの日本語版では、日本人女性が地元の顧客とより良い関係を築く方法を示しています。
アイコン、特に言語切り替えアイコンには、普遍的に見える地球アイコンを使用してください。 たとえば、下の画像では、最初のアイコンは南米と北アメリカの視聴者にはアピールするかもしれませんが、アフリカやアジアの視聴者にはアピールしない可能性があります。
2 番目のアイコンはアフリカの聴衆には魅力的かもしれませんが、他の人には魅力的ではありません。
この混乱を避けるには、誰にでもアピールできる普遍的な地球のアイコン (3 番目のアイコン) を使用してください。 特定の地域や国を強調するものではないため、多言語 Web サイトに適しています。
9. マルチメディア向けの字幕の提供
マルチメディアの場合は、ビデオを変更せずに、ビデオ翻訳に字幕ファイルを使用します。 画像とマルチメディア要素には、ビジュアル コンテンツとは別に翻訳できる説明的な代替テキストが含まれていることを確認します。
ここでは、翻訳がより幅広い聴衆に届けるのにどのように役立つかを示すもう 1 つの例を紹介します。 私たちは、イタリア人旅行者のジュゼッペが運営する YouTube チャンネル、プロジェクト ハピネスの熱心な視聴者です。
作者はイタリア人です。 彼はイタリア語で録音し、ビデオを英語で吹き替えていますが、提供するさまざまな字幕のおかげで、彼のチャンネルは世界中で視聴されています。
10. 翻訳を定期的に更新する
Linguise 使用すると、ユーザーフレンドリーなインターフェイスを使用して、フロントエンドで翻訳されたページを編集できます。 翻訳を自分で評価し、必要に応じて変更を加えることができます。
ECサイトでは、商品の在庫切れやタイムセール、商品情報の変更など、頻繁に変化が起こります。
ただし、 Linguise、翻訳されたコンテンツを簡単に更新できます。 専用の翻訳サーバーとキャッシュ システムにより、翻訳プロセスが高速化され、翻訳されたページが視聴者に表示されます。
11. 右から左へ記述する言語を考慮する
ほとんどの言語は左から右に書かれます。 ただし、アラビア語、ヘブライ語、ペルシア語など、右から左に書かれる言語もあります。
Instagram ホームページの英語版とアラビア語版の比較は次のとおりです。 ご覧のとおり、アラビア語バージョンでは、画像、ボタン、テキスト、さらには検索バーに至るまで、すべてが右から左に反転されています。
Linguiseの翻訳サービスは、右から左に記述する言語をネイティブにサポートしており、多言語サイトのレイアウトをそれらの言語に対応できるように調整できます。
利用可能な右から左へ記述する言語の一部を次に示します。
- アラビア語 (ar)
- ヘブライ語（彼）
- ペルシア語 (ファ)
- パシュトゥー語 (ps)
- ウルドゥー語 (ウル)
これらの言語を含めたい場合は、そのような大きな変更に対応できる Web サイトのレイアウトを使用してください。
SEOとパフォーマンス
効果を最大限に高めるために、多言語 Web サイトを国際的な検索エンジン用に最適化することを強くお勧めします。
各ターゲット言語でキーワード調査を実施し、言語と地域のターゲティングに hreflang タグを使用して、パフォーマンスを監視します。
12. ローカル SEO 向けに最適化する
各言語と地域のローカライズされたキーワード調査から始めます。 Google キーワード プランナー、SEMrush、Ahrefs などのツールを使用して、ターゲット ユーザーが検索している関連キーワードを見つけます。
地域の方言や用語のバリエーションを考慮してください。 たとえば、メキシコのスペイン語はヨーロッパのスペイン語とは異なるため、それに応じてキーワードを調整します。
ローカライズされたキーワードを組み込んで、ページの各言語バージョンに固有のタイトル タグを作成します。 簡潔かつ関連性のあるものにし、理想的には 60 文字未満にしてください。
たとえば、英語では次のようになります。「オーガニック コーヒーをオンラインで購入 | 「ベストプライス」、スペイン語では「Compra Café Orgánico en Línea | メホレス・プレシオスだ。」
ローカライズされたキーワードや明確な行動喚起など、各言語バージョンの説得力のあるメタ説明を 160 文字以内で記述します。
たとえば、英語では次のようになります。「最高の農場から調達した、厳選されたオーガニック コーヒーをお買い求めください。 50ドル以上のご注文で送料無料！」 そしてスペイン語では「Compra nuestra selección de Cafe orgánico、proveniente de las mejores fincas。 「50 ドルを無料で購入できます!」
13. hreflang タグを活用する
HTML で hreflang 属性を使用して、ページの言語と地域ターゲティングについて検索エンジンに通知します。 これにより、重複コンテンツの問題が防止され、ユーザーが正しい言語バージョンに誘導されるようになります。
14. 言語間でのパフォーマンスの監視
Google Analytics や Google Search Console などのツールを使用して、各言語バージョンのパフォーマンスを監視します。 トラフィック ソース、ユーザーの行動、キーワード ランキングを分析して、改善すべき領域を特定します。
さまざまなキーワード、メタタグ、コンテンツ戦略を試して、各言語の視聴者の心に最も響くものを見つけてください。
メンテナンスとサポート
ウェブサイトと顧客の維持とサポートに関しても考慮すべき点があります。
15. メンテナンス計画の作成
多言語 Web サイトの包括的なメンテナンス プランを作成すると、すべての言語バージョンが一貫性があり、正確で、最新の状態に保たれます。
綿密に構成された計画は、コンテンツを効果的に管理し、ユーザーのフィードバックに対処し、変化する市場状況に適応するのに役立ちます。
コンテンツ監査を実行して、すべての言語の既存コンテンツの関連性と正確性を評価します。 古い情報、リンク切れ、言語バージョン間での不一致がないか確認してください。
言語スイッチャー、ナビゲーション、その他のインタラクティブな要素を定期的にテストして、それらが正しく動作することを確認してください。
16. 複数の言語でカスタマーサポートを提供する
複数の言語でカスタマー サポートを提供することで、ユーザー エクスペリエンスが向上し、多様なユーザーとの信頼を構築できます。
サポートする言語に堪能なカスタマー サービス担当者を雇いましょう。 これには、フルタイムのスタッフまたはパートタイムの請負業者が含まれる場合があります。
どの言語を優先すべきかを理解するには、Web サイトのトラフィックと顧客層を分析したり、アンケートやフィードバック フォームを実施したりできます。 この結果を使用して、既存の顧客の言語の好みを理解します。
17. フィードバックの仕組み
シンプルでユーザーフレンドリーなフィードバック フォームを作成し、ユーザーが翻訳やユーザビリティに関する問題を報告できるようにします。 これらのフォームはすべてのページから (理想的にはフッターまたは専用のサポート セクションを通じて) アクセスできるようにしてください。
フィードバック フォームがサポートされているすべての言語で利用できるようにし、ユーザーが好みの言語でフィードバックを提供できるようにします。
ユーザーが具体的なフィードバックを提供できるよう、構造化された質問を含めます。 例えば：
- 翻訳の精度を評価します (1 ～ 5 段階)。
- 翻訳の際にどのような問題に遭遇しましたか?
- あなたの言語でサイトを閲覧するのは簡単でしたか?
フィードバック フォームに記入することに興味がない人のために、翻訳されたコンテンツにクイック フィードバック ボタン (例: 親指を立てる/親指を下げる) を実装します。 これにより、ユーザーは翻訳が役に立ったか、正確だったかを簡単に示すことができます。
18. 更新にステージング サイトを使用する
中断を避けるために、本番環境に移行する前に、ステージング環境で新しいコンテンツと更新をテストしてください。 ZipWPのような AI Web サイト ビルダーを使用すると、完全な Web サイトを数秒で作成できます。
Web サイトには、すべての重要なページ、関連する画像、魅力的な Web サイトのコピー、埋め込まれた CMS および SEO 機能が含まれます。
世界中の視聴者にリーチする準備はできていますか?
多言語 Web サイトに関する 18 の UX ヒントは、顧客が Web サイトをより適切にナビゲートし、好みの言語でコンテンツにアクセスするのに役立ちます。
優れた多言語 UX デザインは、ユーザー エンゲージメントとコンバージョンの可能性を大幅に高めることができます。 ただし、シームレスなエクスペリエンスを備えた多言語 Web サイトを作成するには、時間と労力がかかります。
ここでLinguise役に立ちます。
Linguise WordPress 、 Shopify 、 Webflow 、 Squarespaceなどの 40 以上の CMS とネイティブに統合します 80 以上の言語と 10,000 以上の言語ペアをサポートし、最高の多言語 Web サイト体験を提供します。
すべての翻訳は SEO に最適化されており、手動翻訳サービスの 10% の手頃な価格です。
Linguiseでグローバル展開する準備はできていますか?
