10年以上にわたり、企業が財務目標とブランディング目標を達成できるよう支援しています。 Onumは、価値を重視するSEOエージェンシーです。

連絡先
私達の旅

多言語のウェブサイトのデザインのヒント

現在、多くのWebサイトに多くの言語オプションがあり、世界中からの訪問者が快適に閲覧できます。インターネットは市場をグローバルな体験にするのに役立ったので、ウェブサイトを持つことで、インターネットに接続しているすべての人にあなたのビジネスへの扉を開いたのです。しかし、彼らが言語を理解しない場合、彼らはとどまりません。

幸いなことに、あなたのウェブサイトを多言語に変えるプロセスはかなり簡単です。ConveyThisは、数分で翻訳されたバージョンのサイトを作成し、言語スイッチャーの外観と配置をカスタマイズし、単語や右から左の言語に対応するようにレイアウトを変更し、オリジナルがターゲットカルチャに適さない場合に色や画像を変更することができます。

プロセスは完全に自動化されていないため、事前に調査を行う必要があります。このガイドでは、多言語のWebサイトと優れたデザインの世界に快適に足を踏み入れるのに役立つWebサイトデザインのいくつかの側面について説明します。

一貫したブランディング

ユーザーエクスペリエンスは、アクセスしている言語バージョンに関係なく一貫している必要があります。ルックアンドフィールはすべてのバージョンで非常に似ているはずです。言語や文化の違いにより、いくつかの違いが必要になる場合がありますが、言語を切り替えても、まったく別のサイトにリダイレクトされたように感じることはありません。

したがって、レイアウトやビジネスの特定のブランディングスタイルなどのデザイン要素は、すべての言語で同じである必要があります。

これは、ConveyThisでWordPressに行うのは非常に簡単です、それはあなたが選択したテーマに関係なくテキストを完全に識別し(カスタマイズされている場合でも!)、他のプラグインを使用していても自動的に翻訳します。

これにより、すべての言語で同じテーマのグローバルテンプレートを作成できるため、ユーザーエクスペリエンスが同じになります。

Airbnbのホームページは例としてうまく機能します。オーストラリア版を見てみましょう。

そして、これが日本語版です:

間違いなくこれは同じウェブサイトです。背景は同じで、検索機能も同じです。統一されたデザインを持つことはあなたのブランドアイデンティティを助け、新しい言語を追加したり更新したりするときの時間と労力を節約します。

明確な言語スイッチャー

ウェブサイトの四隅のように、言語スイッチャーの目立つ場所を選び、ホームページだけでなくすべてのページに配置します。簡単に見つけられる必要があり、隠されたボタンを探したがる人は誰もいません。

言語名は自国語にすることを強くお勧めします。たとえば、「スペイン語」の代わりに「Español」を使用すると、驚異的に機能します。 Asanaはこれを行い、彼らのサイトには利用可能な言語オプションを含むドロップダウンボックスがあります。

このようにして、訪問者が歓迎されていると感じるのに役立ちます。あなたのウェブサイトが翻訳されている場合、言語リストはそれを反映する必要があります。英語のウェブサイトで「ドイツ語、フランス語、日本語」を読んでも、ナビゲーションがしやすくなるわけではなく、英語版が最も重要な印象を与えます。

「言語」は「地域」よりも優れています

多くの大手国際ブランドは、あなたの言語でウェブサイトを読むことができるようにするためにあなたに地域を切り替えさせます。これは、訪問者のブラウジングを困難にするひどい考えです。これらのWebサイトは、その言語が話されている地域を閲覧していることを前提に動作しているため、自分の言語でテキストを取得できますが、関心のある地域のコンテンツを取得できない場合があります。

次の画像は、AdobeWebサイトから取得したものです。

言語はその地域から切り離せないものであってはなりません。たとえば、ニューヨーク、ロンドン、パリなどの国際都市を例にとってみましょう。たぶん、英国に住んでいるベルギー人は、英国のサイトから購入したいが、フランス語で閲覧したいと思っています。彼らは自分たちの言語でベルギーのサイトから購入するか、英語で英国のサイトから購入するかを選択する必要があり、どちらもしたくありません。したがって、誤ってバリアを作成しました。言語と地域を別々に指定できるウェブサイト、Uberのウェブサイトを見てみましょう。

これは優れたデザインです。この場合、言語切り替えオプションは左側のフッターに配置されており、ドロップダウンボックスの代わりに、多数のオプションがあるためモーダルがあります。言語名も独自の言語で参照されます。

ボーナスとして、ユーザーが選択した言語を「覚えておく」ことができるので、最初の訪問以降、ユーザーはそれ以上切り替える必要がありません。

場所の自動検出

この機能は非常に便利なので、訪問者が間違った言語でアクセスすることはありません。また、ユーザー側の時間を節約して、言語スイッチャーを探す必要がないようにします。これがその仕組みです。Webサイトはブラウザが使用されている言語またはその場所を識別します。

ただし、ユーザーが観光客で現地の言語に慣れていない場合は、切り替えを行うために言語ボタンが必要になるため注意してください。このため、ツールは常に正確であるとは限りません。

多言語サイトを設計するときは、自動検出言語と言語スイッチャーのどちらかを選択しないでください。後者は必須ですが、前者はオプションです。

フラグは言語名の適切な代替ではありません

スペイン語を話す国が21か国、英語を話す国が18か国あり、中国には8つの主要な方言があるため、旗は言語名の代わりにはなりません。さらに、フラグは、フラグを認識しない人を混乱させる可能性があるため、有用な指標ではない場合があります。

テキストスペースに柔軟に対応する

これは難しい場合がありますが、翻訳が元のテキストと同じスペースを占めないことは否定できません。短いものもあれば、長いものもあり、さらに垂直方向のスペースが必要なものもあります。

漢字には多くの情報が含まれているため、スペースはあまり必要ありませんが、イタリア語とギリシャ語はより言葉が多く、2倍の行が必要です。経験則として、一部の翻訳では30%を超える余分なスペースが必要になる可能性があるため、レイアウトに柔軟性を持たせ、テキストに十分なスペースを割り当てることをお勧めします。元のウェブサイトのこれらのタイトなスクイーズは、翻訳のための十分なスペースがまったくない可能性があります。英語は特にコンパクトな言語です。コンテンツが収まるように英語で短縮する必要がある場合は、間違いなく問題が発生します。翻訳する時間。

テキストを伸ばすための肘のスペースがあることに加えて、ボタンや入力フィールドも大きくできるようにアダプティブUI要素を用意することもお勧めします。また、フォントサイズを小さくすることもできますが、あまり大きくしないでください。

FlickrのWebサイトは多言語です。元の「ビュー」ボタンを見てみましょう。

見た目は素晴らしく、すべてが素晴らしいですが、「ビュー」は他の言語では長い単語であることが判明し、より多くのスペースが必要になります。

イタリア語では3倍のスペースが必要です!

アラビア語などの多くの非ラテン文字は、翻訳を適合させるためにより高い高さを必要とします。要約すると、Webサイトのレイアウトは、さまざまな言語要件に適応するのに十分な柔軟性を備えている必要があります。これにより、スイッチで元の洗練された外観が失われることはありません。

Webフォントの互換性とWebサイトのエンコーディング

W3Cによると、特殊文字を使用できるUTF-8を使用してWebページをエンコードすることを強くお勧めします

とても簡単です。UTF宣言は次のようになります。

また、フォントがさまざまな言語と互換性があることを確認してください。互換性がないと、テキストが判読できなくなる可能性があります。基本的に、フォントを決定する前に、必要なすべてのスクリプトとの互換性を確認してください。ロシア市場に参入したい場合は、キリル文字がサポートされていることを確認してください。

次の画像はGoogleFontsから取得したもので、ご覧のとおり、必要なスクリプトバージョンをダウンロードすることを選択できます。文字数が多い言語はフォントファイルが大きくなるため、フォントを選択して混合するときはそれを考慮に入れてください。

右から左に書く言語について

中東市場が成長するにつれて、この地域からの訪問者を引き付けるWebサイトのバージョンを作成することを検討できます。これは、言語と互換性があるようにレイアウトを調整することを意味します。ほとんどの中東言語の特徴は、右から左に読むことです。これは大きな課題であり、ソリューションはインターフェイスのミラーリングから始まります。

これは、英語などの左から右の言語向けのFacebookのデザインです。

これは、アラビア語などの右から左に書く言語の反転設計です。

よく見てください。デザイン内のすべての配置が反映されています。

これを行う方法の詳細については、右から左に記述する言語の設計に関するRobertDodisの記事を確認してください。

一部の右から左の言語はアラビア語、ヘブライ語、ペルシャ語、ウルドゥー語で、ConveyThisは、言語要件に対応し、優れたユーザーエクスペリエンスを確保するために、ウェブサイトを適応させることに問題はありません。そして、最高のことは、各言語の外観をカスタマイズし、フォントの種類またはそのサイズを変更し、必要に応じて行の高さを編集できることです。

適切なアイコンと画像を選択してください

ビジュアルには非常に重い文化的要素があり、適切なWebサイトデザインの重要な要素です。それぞれの文化は異なる画像やアイコンに意味を割り当て、いくつかの解釈は肯定的であり、いくつかは完全に反対です。一部の画像は、ある文化の理想の経験を反映していますが、別のコンテキストでは、ユーザーが疎外されているように感じます。

これは、文化的に適切ではなかったために置き換えなければならなかった画像の例です。すべての画像が他の人に不快感を与えるわけではないことに注意してください。おそらく、人々にあなたの製品に興味を持って興味を持ってもらいたいときに無関心になるだけかもしれません。

これは、白人女性を特集した、クラランスのフランス語のホームページです。そして、これが韓国版で、韓国人女性がブランドのアンバサダーになっています。

不快感を与える可能性のあるビジュアルの種類は、一部の文化では無実に見えるかもしれませんが、別の文化の目には、同性愛や女性のエンパワーメントの描写など、違法またはタブーな行動を示しています。

これはアイコンにも当てはまりますが、米国ではシャンパングラス2杯で乾杯したアイコンはお祝いを表していますが、サウジアラビアではアルコールを飲むことは違法であるため、アイコンを文化的に適切なものに置き換える必要があります。

(画像ソース: SteelKiwi)

したがって、選択したアイコンがターゲット市場に適していることを確認するための調査が必要になります。よくわからない場合は、いつでも安全にプレイできます。

たとえば、地球を特徴とするこれら3つのアイコン、最初のアイコンはオーストラリアの視聴者向けに設計されました。 2つ目は、アフリカの聴衆向けです。最後の1つは、特定の領域が取り上げられていないため、より多くのグローバルな視聴者に適しています。

最後に、ConveyThisは、画像に埋め込まれていない限り、任意のテキストを翻訳することができます。ソフトウェアは、それが元の言語に残るように、それに書かれているものを識別することができないので、テキストを埋め込むのを避けてください。

色の選択

前のセクションで述べたように、文化は画像を異なる方法で解釈し、同じことが色でも起こります。それらの意味は主観的です。

たとえば、一部の文化では、白は無実の色ですが、他の文化では反対します。それは死の色です。同じことが赤でも起こります。アジアの文化では祝賀会で使用されますが、一部のアフリカ諸国では、暴力に関連しているため、それほど肯定的な意味合いがありません。

しかし、青はすべての色の中で最も安全であるように思われ、一般的に落ち着きと平和のような前向きな意味に関連付けられています。多くの銀行は、信頼とセキュリティを意味する可能性があるため、ロゴに青を使用しています。

この記事では、世界中の色の意味の違いを示します。これは、多言語サイトに最適な色について調査を開始するのに非常に役立ちます。

フォーマット調整

日付を書く方法はさまざまなので、数字を書く際には使用しないようにしてください。したがって、あなたのオプションは、翻訳されたバージョンが日付形式が適応されていることを確認するか、ConveyThisが常に正しい日付を書き込むように、月を文字で書き込みます。

さらに、米国ではインペリアルシステムが使用されていますが、ほとんどの国ではメートル法が使用されているため、サイトで測定値を変換するのに適しているかどうかを判断する必要があります。

WordPressのための最高の翻訳プラグイン

翻訳プラグインをWordPressウェブサイトに追加する際には非常に多くのオプションがあり、すべてが同じように動作するわけではありませんが、結果は異なります。ConveyThisを使用すると、あなたのウェブサイトの設計に関係なく、完璧な統合が保証されています。

ConveyThisは92の言語が利用可能なウェブサイト翻訳のための最良の選択です。それはあなたが速く、あなたのウェブサイトの固体多言語バージョンを持つことを可能にする信頼性の高いWordPressプラグインです。サイトのレイアウトを理解し、すべてのテキストを検出して翻訳することができます。ConveyThisテキストのカスタマイズのための直感的なエディタも含まれています。

ConveyThisには、デフォルトで任意のサイトで動作するワンサイズの言語スイッチャーボタンが用意されていますが、好きなだけ編集することもできます。また、この記事で述べられている設計原則に従います。

  • ウェブサイトのすべての言語バージョンで一貫したブランディング。
  • 言語スイッチャーをクリアし、優先言語を選択するオプション。
  • WebサイトはUTF-8で自動的にエンコードされます。
  • 右から左に記述する言語の適切なインターフェイス

ConveyThis: 信頼できる多言語の Web サイト ソリューション

ウェブサイトの翻訳は複雑なプロセスであると一般的に考えられています。しかし、頭痛に対処したくないので、それを延期する必要はありません。それは全く困難ではありません!ConveyThisすると、それは簡単な変換になります。それはシームレスで高速です。

クイック インストールの後、書式設定に影響を与えずにすべてのコンテンツを翻訳でき、他のアプリによって生成されたコンテンツやチェックアウト プロセスが含まれます。ConveyThisは、他の人のように、あなたのコードを混乱させない多言語のウェブサイト翻訳のための簡単なツールです。

あなたのサイトのプロの翻訳を注文するオプションも利用可能です!彼らはあなたがあなたの多言語ウェブサイトを多文化ウェブサイトに完全に変えるのを助け、あなたのクライアントの経験を劇的に改善します。 Webサイトを翻訳する場合は、新しいクライアントの言語でカスタマーサポートも利用できるようにする必要があることに注意してください。訪問者に優れたユーザーエクスペリエンスを保証するために、コンテンツのローカリゼーションと適応に投資することを検討してください。

著者

セシリア・モーリン

コメント(4)

  1. ウェブサイトのためのGoogle翻訳のための視力の終わり!– ConveyThis
    2019年12月8日 応答

    […]スウェーデン語のコンピューター関連テキスト。このような要素は、設計チームがプラットフォームにアクセスするクライアントのパスを策定し、簡単な翻訳エクスペリエンスを実現し、以前のようにドロップスクロールインデックスを回避するのに役立ちました[…]

  2. すべての言語プラットフォームのためのグローバル検索エンジン最適化 – ConveyThis
    2019年12月10日 応答

    […]多言語プラットフォームとクライアントベースに関するアイデアが定式化されます。以下は、言語のテキスト要素を見ていきます[…]

  3. 多言語WooCommerceを回す – ConveyThis
    2020年3月19日 応答

    [...]ConveyThisチームの言語学者に見て編集してもらい、文言やトーンがあなたの店の価値観に適していることを確認し、[.]]

  4. WooCommerceカスタマイズ可能な方法– ConveyThis
    2020年3月23日 応答

    […]ビジュアルには常に文化的な意味が非常に多く含まれており、店舗がどのように表示するかについては、視聴者によって期待が異なります[…]

コメントを残す

メールアドレスは公開されません。必須フィールドには * のマークが付いています。