ConveyThis による多言語ウェブサイト デザインのヒント

ConveyThis による多言語 Web サイト設計のヒント: 実用的な設計戦略でユーザー エクスペリエンスとグローバルなリーチを強化します。
このデモを伝える
このデモを伝える
多言語デザインのヒント

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

幸いなことに、Web サイトを多言語化するプロセスは非常に簡単です。ConveyThis は、数分でサイトの翻訳バージョンを作成し、言語スイッチャーの外観と配置をカスタマイズしたり、長い単語や右から左に書く言語に合わせてレイアウトを変更したり、元のコンテンツがターゲット文化に適していない場合は色や画像を変更したりできます。

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

一貫したブランディング

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

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

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

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

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

多言語

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

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

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

明確な言語スイッチャー

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

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

無題3

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

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

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

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

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P voTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mezsJilUu4a

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

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

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

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

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

位置を自動検出

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

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

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

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

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

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

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

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

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

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

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

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

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

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

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

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

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

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

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

fbnRHXPPyY2OPijzOvFkH0y Ke

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

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

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

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

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

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

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

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

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

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

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

右から左に書く言語には、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語などがありますが、ConveyThis は、Web サイトをこれらの言語要件に合わせて調整し、優れたユーザー エクスペリエンスを確保することに何の問題もありません。そして、最も優れている点は、各言語の外観をカスタマイズし、フォントの種類やサイズを変更し、必要に応じて行の高さを編集できることです。

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

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

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

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

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjUKogNMo2sQnJD0UTAdAiee

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

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

TsA5aPbhznm2N vv qL
(画像出典:盗むキウイ)

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

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

cx90RYDHGTToOiC umNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHDjJ

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

色の選択

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

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

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

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

フォーマット調整

日付を書くときは数字だけを使うのは避けてください。日付の書き方は多種多様です。米国では公式の形式は mm/dd/yyyy ですが、数字しか見えないと、異なるシステム (dd/mm/yyyy など) を使用する他の国のユーザーが混乱する可能性があります。そのため、次のオプションがあります。翻訳版で日付形式が適合していることを確認するか、月を文字で書いて、ConveyThis が常に正しい日付を書くようにします。

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

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

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

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

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

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

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

ウェブサイトの翻訳は複雑なプロセスだと一般に考えられています。しかし、面倒な作業を避けたいからといって、先延ばしにする必要はありません。まったく難しいことではありません。ConveyThis を使えば、変換は簡単です。シームレスで高速です。

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

あなたのサイトのプロの翻訳を注文するオプションも利用可能です!彼らはあなたがあなたの多言語ウェブサイトを多文化ウェブサイトに完全に変えるのを助け、あなたのクライアントの経験を劇的に改善します。 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日 応答

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

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドは、マークされています*