ガイド

多言語ウェブサイトをデザインするための9つのヒント

執筆者
執筆者
レビュー
レビュー
多言語ウェブサイトをデザインするための9つのヒント

インターネットがますます発達する中、多言語ウェブサイトはますます一般的になりつつある。しかし、それをデザインするのは大変です。特に、あなたのサイトに必要なウェブデザインの変更を考慮すると、それはあなたが考えるよりも少し複雑です。

Weglotを使えば、5分もかからずにeコマースサイトに異なる言語を追加することができます。しかし、その後、言語スイッチャーをどこに配置するか、ユーザーが英語からRTL言語に切り替えたときにレイアウトをどのように変更するか、文化的に適切な色、画像、アイコンを使用するかなどを考えなければなりません。

このガイドでは、ベストプラクティスの多言語ウェブサイトを計画するのに役立つ、最も重要なデザイン上の考慮事項をいくつかご紹介します。

1.一貫したブランディングのためのグローバルテンプレートの使用

誰かがあなたの多言語サイトにアクセスしたとき、どの言語バージョンのサイトにアクセスしても、一貫したユーザー体験を提供したいものです。つまり、あなたの英語サイトを訪れたインド人訪問者は、ヒンディー語版と同じブランディングとデザインを目にするはずです。

バイリンガルやマルチリンガルの訪問者があなたの多言語サイトの異なるバージョンを見るのを止めることはできませんが、彼らがデフォルトの言語から切り替えたときに同じブランディング、レイアウト、ウェブデザインの要素が表示されるようにすることはできます。

WordPressなどのコンテンツ管理システムをWeglotと併用すれば、一貫性のある多言語ウェブサイトを簡単に作成できます。Weglotは、お客様のウェブサイトビルダーのテーマとシームレスに統合し、コンテンツを自動的に翻訳します。また、eコマースのプラグインなど、サイト機能の他の重要な部分とも統合されます。つまり、多言語ウェブサイトに追加する言語ごとに、異なるテーマやデザインを用意する必要はありません。

例えば、オーストラリアのような国からAirbnbのホームページにアクセスすると...。

Airbnbオーストラリアのホームページ

... その後、日本語に切り替えても、デザインとブランディングは両言語で一貫している。

Airbnb Japanホームページ

一目でわかるデザインは、ブランディングの強化に役立つだけでなく、将来的な多言語ウェブサイトの更新にも役立ち、異なる言語でUIやUXの変更が必要になった場合の頭痛の種を減らすことができます。

2.言語切り替えスイッチを見つけやすくする

言語切り替えのドロップダウンは、ホームページやサイトの各ページの目立つ場所に設置しましょう。多言語のウェブサイトでは、ページのヘッダーやフッターに言語切り替えが表示されます。

多言語サイトのためにどのような選択肢を選ぶにしても、それが本当に見つけやすいものであることを確認してください。

また、言語切り替えのオプションも明確にしておきたい。新しい言語は母国語で表記するのがベストです。例えば、"ドイツ語 "の代わりに "ドイツ語"、"日本語 "の代わりに "日本語 "を使う。

たとえばAsanaでは、ドロップダウンメニューにさまざまな言語名が表示される:

アサナホームページ

あなたの多言語ウェブサイトへの訪問者がどの言語を話していても、歓迎されていると感じさせたいものです。言語スイッチャーを見つけやすい場所に設置することで、それを実現することができます。

ウェブサイト翻訳チェックリスト ダウンロード

3.訪問者に好きな言語を選んでもらう

ユーザーが好きな言語を選べるようにするのは当然のことだと思うだろうが、実際には多くの多言語サイトでは言語を選ぶのが本当に難しい。それどころか、ユーザーに 地域を切り替えるよう強制しているのだ。

大手ブランドは最悪の犯罪者だ。デフォルトの言語を変更したいだけなのに、多言語サイトのリージョンを強制的に変更させる(例えば、www.adobe.comからwww.adobe.com/us/)ようなところもよく見かける。

誰かがヒンディー語を話せるからといって、その人が企業の多言語ウェブサイトをその地域に切り替えたいとは限らない。ニューヨークに住んでいて、米国のサイトから購入したいが、ヒンディー語のサイトを読みたいとしたらどうでしょう?彼らが多言語ウェブサイトから購入することに障壁を設けないでください - 彼らが好みの言語でコンテンツにアクセスできるようにしましょう。

Uberは、フッターに言語切り替えオプションを表示しています:

English "をクリックすると、モーダルがポップアップ表示され、英語とフランス語から好きな言語を選ぶことができる:

ウーバーの言語切り替えデザインの優れている点は、訪問者が無理に地域を切り替えることなく、好みの言語を選択できることだ。

訪問者のユーザーエクスペリエンスをさらに向上させたいのであれば、デフォルト言語を「記憶」させ、次に多言語のウェブサイトを訪問したときに、自動的に母国語で読み込まれるようにすることを検討してください。

言語の自動検出

多くの多言語ウェブサイトは、ウェブブラウザの母国語を検出し、ユーザーの主要言語を自動的に設定します。

これは、ユーザーのためのいくつかの時間を節約しますが、言語検出を使用して自動翻訳を提供することは厳密な科学ではありません。あなたの多言語ウェブサイトの「間違った」バージョンに着陸するかもしれないユーザーを心に留めておくことが重要です。

訪問者が物理的にスペインに住んでいて、あなたの多言語ウェブサイトがそれを自動検出してスペイン語を表示するかもしれませんが、彼らはスペイン語を読めない英語のネイティブ・スピーカーかもしれません。

ですから、ロケーションを自動検出するのであれば、訪問者が異なる言語を選択できるように、言語スイッチャーも提供してください。

国旗と言語名

国旗は言語を示すためによく使われるが、文脈上の問題もある:

  • 国旗は国を表すものであり、言語を表すものではない。
  • ひとつの国が複数の公用語を持つこともある。
  • ひとつの言語が複数の国で話されていることもある。
  • 訪問者は(アイコンの大きさのために)旗を認識できないかもしれないし、似たような旗に惑わされるかもしれない。

最終的には、どの言語でも理解しやすい言語切り替えオプションを提供したい。

4.テキストの拡張を考慮する

Google翻訳のように、テキストをある言語から別の言語に翻訳する場合、原文の長さと翻訳結果の長さは異なります。これは、デザインをレイアウトする際には難しいことです。

書き言葉の中には、他の言語よりも簡潔なものもある。日本語や中国語のような言語は、1つの情報を伝えるのに1つか2つの文字を使う。

スペイン語や英語のような言語は言葉が多く、異なる言語と比べて30%以上のスペースが必要になることもある。

テキスト追加

W3Cの翻訳におけるテキストサイズに関するガイドには、素晴らしいアドバイスが書かれているので、ぜひ一読されることをお勧めする。

W3Cは、機械翻訳ツールがボタン、入力フィールド、説明テキストなどの適応性のあるUI要素を持つことが重要である理由を強調している。

例えば、Flickrが異なる言語に翻訳されたとき、デザイナーは写真の下にある閲覧数を示すテキストを考慮しなければならなかった。

Flickrの写真のページ、景色が囲まれている

下の表は、異なる言語における「view」という単語の長さを、元の英語に対する比率で比較したものである:

異なる言語における「views」の長さ

これは英語からイタリア語への300%の拡大である!

ここで覚えておくべきことは、テキストは通常、幅が拡大または縮小するので、多言語ウェブサイトがそれを考慮していることを確認することです。また、原文が小さければ小さいほど、翻訳文は長くなる可能性が高いことを覚えておいてください。スペースが問題になる場合は、より直訳的でない別の翻訳を試すか、新しい言語に基づいてフォントサイズを変更してください。

文字と行の高さも考慮すべき点です。ラテン語以外のテキストでは、ラテン語のテキストよりもはるかに高い文字が一般的です。また、アラビア語のような文字は、ラテン語に比べて行間に縦方向のスペースが必要になります。

5.ウェブフォントの互換性とエンコーディングを考慮する

W3Cによると、ウェブページのエンコーディングは常に指定する必要があります。言語に関係なく特殊文字が正しく表示されるように、UTF-8の使用を推奨しています。

ここでは、ページのヘッダーでUTF宣言を行う方法を説明する:

HTMLコードスニペット

使用するウェブフォントは、WordPressの多言語サイトがサポートする英語以外の言語、特にラテン語以外の言語に対応している必要があります。これは、使用するフォントが必要なすべての文字とグリフを含んでいる必要があることを意味します。

フォントによっては、ラテン文字には対応していても、RTLやキリル文字には対応していない場合があるので、フォントの使用を決定する前に、必要な英語以外の言語が含まれているかどうかを確認してください。

例えばGoogle Fontsでは、フォントパッケージをダウンロードする前に言語を選択できる:

グーグルフォント言語スイッチャー

ひとつの言語が何百もの文字で構成されていることもあり、フォントファイルのサイズが巨大になる可能性があります。

6.右から左への言語のデザイン

右から左への言語用にページをデザインするのは難しいことです。 SteelKiwiの開発者Robert DodisがSmashing Magazineに書いているように、RTLのためのデザインは "インターフェイスを反転させる "ことを意味します。

例えば、フェイスブックの左から右へのデザインはこんな感じだ:

左から右への言語用フェイスブック

そして、フェイスブックの右から左へのデザインはアラビア語ではこうなる:

スクロールバーの位置まで変わっていることに注目してほしい!

設計のミラーリングは、LTR言語とRTL言語の両方で設計する場合に考慮しなければならないことです。

RTL設計の詳細については、ロバートのSmashing Magazineの記事を読むことを強くお勧めする。ここで車輪の再発明をしたくないので、彼のチュートリアルを読んでください。WeglotがどのようにRTL言語をサポートし、あなたの多言語ウェブサイトの翻訳プロセスを簡単にすることができるかをお見せしたいと思います。

Weglotの翻訳サービスはRTL言語をサポートしており、CSSルールで多言語サイトのレイアウトを適応させることができます。利用可能なRTL言語の一部をご紹介します:

  • アラビア語
  • ヘブライ語
  • ペルシャ語
  • ウルドゥー語

Weglotで多言語サイトにRTL言語を追加した後、レイアウトにCSSルールを適用することで表示方法をカスタマイズすることができます。WordPressの管理画面で、Weglot > Language button design (Optional) に進み、Override CSSまでスクロールダウンします。テキストエリアにお好きなCSSルールを追加してください。フォント、サイズ、行の高さなどを変更して、主言語をあなたのデザインに合うようにすることができます。

言語ボタンのデザイン

Weglot で RTL 言語を追加してスタイル設定するために必要なことはこれだけです!WeglotがどのようにRTL言語をサポートしているかについては、ドキュメントをご覧ください。

7.文化的に適切な画像やアイコンを使用する。

画像やアイコンなどのグラフィックは、どんなウェブページにも欠かせない要素です。しかし、ビジュアルはその性質上、主観的なものであり、別の文化的文脈に置かれた場合、さまざまに解釈される可能性があります。

たとえば、フランス版クラランスのホームページには白人の女性が登場する:

クラランス・フランス ホームページ

しかし、同社の日本のホームページを見ると、日本人女性の画像が掲載されている:

クラランス日本語ホームページ

ビジュアルもまた、不快感を与える可能性を秘めている。欧米の観客には無邪気に見える映像も、別の国ではタブーかもしれない。例えば、同性愛カップルや男女平等を描いた映像は、同性愛がまだ違法であり、女性の権利がまだ完全に認められていない国では受け入れられないだろう。

また、アイコンのような小さな要素についても、多言語ウェブサイトを訪問する特定の地域の人々にとって、それが何を意味するのかを考慮する必要があります。たとえば、英語を話すオーストラリア人ユーザー向けの地球儀のアイコンは、アフリカのユーザーにはまったく違って見えるでしょう:

世界のさまざまな地域を示す地球儀の絵文字

上の3つ目のアイコンは地球儀を表しているが、特定の国や地域を表していないため、多言語ウェブサイトでの使用に適している。

画像やその他のグラフィック要素については、地域的・文化的なセンシティビティを考慮に入れて見直す必要があります。

テキストが埋め込まれている画像やその他のグラフィックの使用は避けてください。Weglotのようなツールでは、埋め込まれたテキストを翻訳することはできません。

8.文化的に適切な色の使用

文化の違いによって、色の見方や解釈の仕方は世界中で大きく異なる

例えば、西洋文化では、赤は愛、エネルギー、情熱、危険を象徴します。アジア文化では、幸運、繁栄、お祝い、長寿を象徴する非常に重要な色だ。逆にアフリカの一部の国では、赤は死や攻撃性を連想させる。

青は、多くのポジティブな連想を持っているため、デザインにおいて最も安全で世界的に受け入れられている色と考えられている。悲しみや憂鬱を連想させる色であるにもかかわらず、心が落ち着き、平和になると考えられている。また、青は信頼と権威を表すため、銀行のロゴに最もよく使われる色でもある。

多言語ウェブサイト・デザインの色を選ぶ際には、 使用予定の色に関連するシンボリズムを必ずググってください。

9.日付とその他の形式

英語であっても、すべての国で同じ日付書式が使われているわけではありません。例えば、イギリスやヨーロッパでは日付の書式はdate-month-yearが一般的ですが、アメリカではmonth-date-yearです。

また、ターゲットとする読者層によっては、SEOに役立つ単位を翻訳する必要があるかもしれません。世界の90%がメートル法を採用している一方で、アメリカ、リベリア、ミャンマーではいまだに帝国度量衡法が使われています。

デザインに合ったWordPress翻訳プラグインの選択

ウェグロホームページ

WordPressの翻訳プラグインは、あらゆる形や大きさで提供され、それらがあなたの特定の設計でどのように動作するかは大きく異なります。あなたのサイトの多言語ウェブサイトとシームレスに統合することが保証されているソリューションの一つは、 Weglotです。

Weglotのビジュアルエディタを使用して、サイトのフロントエンドやサブドメイン間でコンテンツを翻訳することもできます。

Weglotでは、言語スイッチャーのデザインと位置は100%カスタマイズ可能です。デフォルトのボタンはどんなサイトにも合うようにデザインされていますが、カスタムCSSを使ってお好きなフォーマットにすることもできます。

さらに、ウェグロットはこの投稿で示された設計原則をサポートしている:

  • 一貫したブランディングのためのグローバルテンプレートの使用
  • わかりやすい言語切り替えオプションの提供
  • 訪問者が好みの言語を選択できるようにする
  • 自動UTFエンコーディング
  • RTL言語サポート
ウェグロットの社会的証明

Weglotが提供するデザイン関連の最も重要な機能である、言語スイッチャーのカスタマイズを見てみましょう。

Weglotでサイトの言語切り替えオプションをカスタマイズする

WeglotプラグインをWordPressの多言語ウェブサイトにインストールし、設定した後、APIキー、デフォルト言語、Google翻訳のようにコンテンツを翻訳したい言語を入力するよう求められます。

まだWeglotアカウントをお持ちでない場合は、APIキーを取得するためにアカウントを作成する必要があります。

WordPressダッシュボード上でのWeglotの主な設定

変更を保存したら、新しい多言語ウェブサイトのフロントエンドを更新すると、右下に新しい言語スイッチャーが表示されます。それをクリックすると、利用可能な言語が表示され、お好みの翻訳を表示することができます。

果物屋ホームページ

基本的なカスタマイズを始めるには、Weglot > Language button design (オプション)に進んでください。この画面で、あなたは選択することができます:

  • ドロップダウンを使用するかどうか
  • フラグを使うかどうか
  • 国旗の種類
  • 言語名を表示するには
  • 言語のコードだけを表示するには

Override CSSセクションは、あなたの多言語ウェブサイト上で言語スイッチャーがどのように見えるかをスタイルするCSSルールを適用する場所です。例えば

  • ボタンの矢印を消す
  • 背景色の変更
  • スクロールバーの追加
  • ボーダーを外す
  • パディングの追加

Weglotでは、言語ボタンのデザインのカスタマイズについて、いくつかの例をこの記事で紹介しています。

Weglotの設定画面を下にスクロールすると、言語スイッチャーの位置についての説明があります:

  • メニューで 外観] -> [メニュー] に移動し、Weglot Translate [カスタム] リンクを好きな場所にドラッグ&ドロップします。
  • ウィジェットとして外観」→「ウィジェット」と進み、Weglot Translate ウィジェットを好きな場所にドラッグ&ドロップします。
  • ショートコードを使ってWeglotショートコード[ weglot_switcher ](スペースなし)を使って、言語スイッチャーを好きな場所に配置してください。
  • In the source code. You can add the code <div id=”weglot_here”></div> wherever you want in the source code of your HTML page.

多言語ウェブサイト(WordPress、Shopify、その他のウェブサイトを問わず)で言語スイッチャーをどのようにカスタマイズできるかをお見せするために、Patykaがページの左上隅にどのように言語スイッチャーを表示しているかをご覧ください。

各言語はそれぞれの名前で表示され、スイッチをクリックして言語を選択すると、ページ上のコンテンツが更新され、選択した言語に翻訳される。

ケーススタディマエストルーはWeglotを使用しています

ウェグロットのマエストルー・ケーススタディ

2013年に設立されたMaestroooはフランスに拠点を置くウェブ開発会社で、From FutureやPatykaを顧客に持つ。Maestroooは現在、フランスのShopify Plusの顧客の大半を担当しています。

Maestroooは、顧客の要求に簡単に適応できる、堅実で信頼できる多言語ウェブサイトソリューションを探していました。多くのソリューションをテストし、SEOやhreflang管理に問題があることがわかった後、チームはWeglotを発見しました。

Weglotは、Maestroooのクライアントサイトの動的コンテンツ、他のアプリによって生成されたコンテンツ、チェックアウトプロセスに至るまで、多言語ウェブサイトのレイアウトに影響を与えることなく、すべてのコンテンツを翻訳します。

マエストルーはクライアントのカスタムウェブサイトのデザインに加え、Shopifyのテーマストアの公式テーマも開発しています。他の多言語ウェブサイトソリューションでは、マエストロゥのテーマのフォーマットが崩れることがよくありますが、ウェグロットは常に機能する翻訳ソリューションを提供しています。

Maestroooは、毎年8,000人から12,000人の顧客が多言語ウェブサイトにWeglotを使用してShopifyを始めるのを支援しています。

ローカライズされたデザインで完全な文化的最適化を目指す

この記事で紹介したデザインの原則は、見栄えが良く、楽しいユーザーエクスペリエンスを提供する多言語ウェブサイトを作成するための正しい道筋を示すものです。

サイト訪問者や顧客に母国語で優れた体験を提供するためには、多言語ウェブサイトの枠を超えた取り組みも必要です。マーケティング資料やカスタマーサポートの翻訳もご検討ください。

また、多言語ウェブサイトのスピードとパフォーマンスも考慮してください。インターネットの速度に恵まれていない国では、大きな言語パックをダウンロードすると、訪問者がコンテンツにアクセスするのが難しくなります。

適切な多言語ウェブサイト翻訳プラグインと、使いやすい翻訳オプションを提供するサイトデザインを使用すれば、視覚的に魅力的なUIとUXで顧客を支援することができます。

このガイドでは、次のようなことを見ていこうと思う:

Weglotとの協力についてもっと知る

無料トライアル