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

現在、多くの Web サイトには多くの言語オプションがあり、世界中からの訪問者が快適に閲覧できるようになりました。インターネットはマーケットプレイスをグローバルな体験にするのに役立ちました。そのため、Web サイトを持つことで、インターネット接続を持つすべての人にビジネスへの扉が開かれたことになります。しかし、言葉が理解できなければ、そこに留まることはできません。

幸いなことに、Web サイトを多言語化するプロセスは非常に簡単です。 ConveyThis を使用すると、サイトの翻訳版を数分で作成できます。その後、言語スイッチャーの外観と配置をカスタマイズしたり、単語数の多い言語や右から左への言語に合わせてレイアウトを変更したり、オリジナルが異なる場合は色や画像を変更したりすることができます。対象となる文化には不適切です。

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

一貫したブランディング

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

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

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

これにより、すべての言語で同じテーマを持つグローバル テンプレートが得られ、同じユーザー エクスペリエンスが得られます。

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

そしてこちらが日本語版です:

これが同じウェブサイトであることは間違いありません。背景や検索機能も同じです。統一されたデザインはブランドのアイデンティティに役立ち、新しい言語の追加や更新の際の時間と労力を節約できます。

明確な言語スイッチャー

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

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

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

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

多くの大手国際ブランドでは、Web サイトを自分の言語で読むために地域を切り替える必要があります。これは、訪問者の閲覧を困難にするひどいアイデアです。これらの Web サイトは、ユーザーがその言語が話されている地域で閲覧していることを前提として動作するため、ユーザーの言語でテキストが表示されますが、興味のある地域のコンテンツは表示されない場合があります。

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

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

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

ボーナスとして、ユーザーが選択した言語を「記憶」できるため、最初の訪問以降、言語を切り替える必要がなくなります。

位置を自動検出

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

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

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

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

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

テキストスペースを柔軟に設定する

これは難しいかもしれませんが、翻訳が原文と同じスペースを占めていないことは否定できません。翻訳によっては、より短いものもあれば、より長いものもあり、縦方向にさらに多くのスペースが必要になる場合もあります。

漢字には多くの情報が含まれているため、多くのスペースは必要ありませんが、イタリア語とギリシャ語はより長く、2 倍の行数が必要です。経験則として、一部の翻訳では 30% 以上の余分なスペースが必要になる可能性があると想定して、レイアウトに柔軟に対応し、テキストに十分なスペースを割り当てることをお勧めします。元のウェブサイトのこれらのきついスクイーズでは、翻訳するのに十分なスペースがまったくない場合があります.英語は特にコンパクトな言語です.翻訳する時間。

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

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

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

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

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

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

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

非常に簡単です。UTF 宣言は次のようになります。

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

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

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

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

これは、英語などの左から右への言語に対する Facebook の設計です。

これは、アラビア語などの言語を右から左に反転したデザインです。

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

これを行う方法の詳細については、Right to Left 言語の設計に関する Robert Dodis の記事を参照してください。

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

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

ビジュアルには非常に重要な文化的要素があり、適切な Web サイト デザインの重要な要素です。各文化はさまざまな画像やアイコンに意味を割り当てており、肯定的な解釈もあれば、完全に反対の解釈もあります。一部の画像は、ある文化の理想の経験を反映していますが、異なる文脈ではユーザーに疎外感を与えます。

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

これはクラリンのフランス語のホームページで、白人女性が登場します。そしてこちらが韓国版で、韓国人女性がブランドアンバサダーを務めています。

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

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

したがって、選択したアイコンがターゲット市場に適切であることを確認するために調査が必要になります。確信が持てない場合でも、いつでも安全に対処できます。

たとえば、地球を描いたこれら 3 つのアイコンは、最初のものはオーストラリアの視聴者向けにデザインされました。 2 つ目はアフリカの聴衆向けです。最後のセクションは、特定の分野が取り上げられていないため、より多くの世界中の視聴者に適しています。

最後になりましたが、ConveyThis は、画像に埋め込まれていない限り、あらゆるテキストを翻訳できます。ソフトウェアは何が書かれているかを識別できないため、元の言語のままになるため、テキストの埋め込みは避けてください。

色の選択

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

たとえば、一部の文化では白は無邪気の色ですが、他の文化ではこれに反対し、白は死の色です。赤についても同様で、アジアの文化ではお祝いのときに使われますが、アフリカの一部の国では暴力と結びついているため、あまりポジティブな意味合いを持ちません。

しかし、青はすべての色の中で最も安全であり、一般に静けさや平和などのポジティブな意味を連想させるようです。多くの銀行がロゴに青を使用しているのは、青が信頼や安全を意味することもあるためです。

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

フォーマット調整

日付を書くときは数字のみを使用しないことを検討してください。日付の書き方にはさまざまな方法があります。米国の公式形式は mm/dd/yyyy であり、数字しか表示できない場合は、別のシステムを使用する他の国のユーザーもいます (例: dd/mm/yyyy) は混乱する可能性があります。したがって、選択肢は次のとおりです。翻訳版の日付形式が適合していることを確認するか、ConveyThis が常に正しい日付を書き込むように月を文字で書くかです。

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

WordPress に最適な翻訳プラグイン

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

ConveyThis は、92 言語を利用できる Web サイト翻訳に最適です。これは、Web サイトの堅牢な多言語バージョンを迅速に作成できる信頼性の高い WordPress プラグインです。サイトのレイアウトを理解し、すべてのテキストを検出して翻訳できます。 ConveyThis には、テキストをカスタマイズするための直感的なエディターも含まれています。

ConveyThis には、デフォルトとしてどのサイトでも機能する万能の言語切り替えボタンが含まれていますが、必要に応じて編集することもできます。また、この記事で説明されている設計原則に従います。

• Web サイトのすべての言語バージョンで一貫したブランド化。
• 明確な言語スイッチャーと優先言語を選択するオプション。
• Web サイトは自動的に UTF-8 でエンコードされます。
• 右から左へ書く言語に適したインターフェイス

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

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

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

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