多言語eコマースサイトを作成するためのUX/UIデザインのヒント

日付

2021/10/04

カテゴリー

デザイン

デザイン

デザイン

多言語eコマースサイトを作成するためのUX/UIデザインのヒント
多言語eコマースサイトを作成するためのUX/UIデザインのヒント
多言語eコマースサイトを作成するためのUX/UIデザインのヒント

ますます多くの企業が新しい国際市場に進出しています。彼らは、ターゲット市場の地元の習慣を認識し、尊重し、デジタルコンテンツに反映させる必要があります。

この記事では、マルチリンガルなeコマースサイトでの作業中に学んだトップ6のことを共有します。

タイポグラフィ

ウェブデザインは95%がタイポグラフィであると言われています。したがって、質の高いコンテンツ 翻訳と質の高いタイポグラフィスタイリングを組み合わせることを確認してください。文字数は言語によって増減します。たとえば、英語から中国語または日本語に翻訳するときには15%〜30%の拡張が期待されます。

英語から翻訳された日本語テキストは、さまざまな程度の拡張を経験します。拡張の程度は、主題に関連しています。

目安として、日本語の単語数を決定するには、英語の文字数に1.8を掛けます。日本語でカタカナの文字が多く使用されるほど、英語からの拡張率は高くなります。

たとえば、英語から日本語に翻訳された技術関連の文書は、他のテキストタイプよりも高い拡張率を持っています。


完璧な日本語と中国語のタイポグラフィのためのいくつかの簡単なルール

文字ベースの言語には、可読性を最適化するために異なる基準が使用されます。以下は、日本語と中国語のタイポグラフィを正しく見せるためのいくつかの簡単なルールです。

フォントサイズを10%〜15%減少させます

日本語の文字のフルキャップの高さと正方形のプロファイルは、ラテンアルファベットよりも目立つように見えます。そのため、本文のテキストを約10%減少させ、見出しは少し多くすることができます。

In this example, you can see Japanese looks too big next to English of the same font sizeA 15%/2px decrease in type size on Japanese type makes the Japanese paragraph appear much more similar to the Latin

行間を10%〜15%増加させます

日本語の高密度の正方形のプロファイル文字は、行の間により多くの呼吸スペースを必要とし、目がページを右から左に移動するのを助けます。

行の長さが短い場合、行間を少し増やすだけで済むかもしれません。

This example shows a 10%/2px increase in the line height that gives more breathing room

行の長さを15〜35文字の間に保ちます

テキストが短い場合は、数行のテキスト、多列レイアウト、キャプションのために短く保ちます。

長い場合は、長い単一列の本文テキストのために長くします。

モバイルでは、1行あたり15〜20文字を推奨します。

テキストの整列を両端揃えに設定します

印刷では、本文テキストはほぼ常に両端揃えになっており、日本語文字の幅を予測可能な最も自然な処理です。同じルールがウェブにも適用され、可読性を高め、スキャンしやすくします。

イタリック体を使用しないでください

イタリック体は日本語には存在しませんが、CSSのイタリックルールは、一部のブラウザで日本語テキストに不自然に見える斜体を強制します。代わりに、フォントウェイトの変化や括弧を使用して、イタリックのように日本語のテキストをオフセットします。

日付

日付形式は国によって異なるため、国別の日付形式を知ることが重要です。

通貨

正しい通貨を持つことは、eコマースアプリやウェブサイトにとって特に重要です。これは、ユーザーがアイテムを表示するときに、母国通貨で価格を見ることを期待するためです。

通貨記号、コード、および実際の数値を表示する際には、文化、地域、およびロケールの考慮事項を考慮する必要があります。

ユニバーサルコンポーネントを設計している場合、最大ケースと最小ケースを考慮し、すべての通貨に対応した体験を計画するか、各国のローカライズされたバージョンを構築する場合は各通貨の複数のバリエーションを作成することが重要です。

電話番号

国コードと電話番号の桁数は、国によって異なります。

ウェブサイトを閲覧している人が誰であっても、地元の人にとって親しみやすい形式で電話番号を表示することをお勧めします。

郵便番号と住所

一般的に、西側の住所システムは、最小の地理的エンティティ(住所)から最大のもの(国)に移行します。しかし、当然ながら、すべての住所に適した順序はありません。

特定の地域の住所フォームを作成する場合は、ユニバーサル郵便連合またはその国または地域の公式郵便住所ガイドラインを確認してください。

東方の国々では、通常、最大の地理的エンティティ(国)から最小のもの(住所)に始まります。

Example of field ordering for Australia and Japan

測定値

各国が使用する測定システムに注意してください。たとえば、米国のユーザーは通常、測定データを英語システム(ポンド、インチ、およびフィート)で表示することを期待します。それに対して、オーストラリアやヨーロッパのユーザーは、メトリックシステム(グラムおよびメートル)で情報を得ることを期待しています。

結論

国際的なオーディエンスに拡大する計画を立てる際に考慮するべきいくつかの考慮事項があります。UXにおいて最も重要な考慮事項は常に人々、すなわちユーザーです。彼らは私たちの努力を推進し、私たちが彼らにアプローチし、彼らの注意を引き、信頼と忠誠を勝ち取ろうとする中にいます。

シームレスな体験は、適切なデータを活用し、インタビューやユーザーテストで実際の人々の声を聞くことによって作り出されます。

関連記事

FigmaのUI 3.0への適応:UXデザイナーの移行ガイド

デザイン

UXデザイナーがFigmaのUI 3.0アップデートにどのように適応し、慣れのバイアスを克服し、新しい機能を取り入れて、向上したデザイン体験を実現するかを発見してください。

FigmaのUI 3.0への適応:UXデザイナーの移行ガイド

デザイン

UXデザイナーがFigmaのUI 3.0アップデートにどのように適応し、慣れのバイアスを克服し、新しい機能を取り入れて、向上したデザイン体験を実現するかを発見してください。

FigmaのUI 3.0への適応:UXデザイナーの移行ガイド

デザイン

UXデザイナーがFigmaのUI 3.0アップデートにどのように適応し、慣れのバイアスを克服し、新しい機能を取り入れて、向上したデザイン体験を実現するかを発見してください。

最適化されたEコマース商品のページで売上を向上させる:重要なヒント

デザイン

包括的な製品情報、視覚的デモンストレーション、明確な説明、簡単なナビゲーション、社会的証明、そして目立つCTAを活用して、ユーザーエクスペリエンスを向上させ、売上を促進する方法を発見してください。

最適化されたEコマース商品のページで売上を向上させる:重要なヒント

デザイン

包括的な製品情報、視覚的デモンストレーション、明確な説明、簡単なナビゲーション、社会的証明、そして目立つCTAを活用して、ユーザーエクスペリエンスを向上させ、売上を促進する方法を発見してください。

最適化されたEコマース商品のページで売上を向上させる:重要なヒント

デザイン

包括的な製品情報、視覚的デモンストレーション、明確な説明、簡単なナビゲーション、社会的証明、そして目立つCTAを活用して、ユーザーエクスペリエンスを向上させ、売上を促進する方法を発見してください。

カート放棄を減らすためのeコマースチェックアウトプロセスの最適化方法

デザイン

eCommerce のチェックアウトプロセスを効率化し、モバイル最適化を強化し、複数の支払いオプションを提供し、信頼を築くための効果的な戦略を学び、最終的にはカート放棄を減らし、売上を増やします。

カート放棄を減らすためのeコマースチェックアウトプロセスの最適化方法

デザイン

eCommerce のチェックアウトプロセスを効率化し、モバイル最適化を強化し、複数の支払いオプションを提供し、信頼を築くための効果的な戦略を学び、最終的にはカート放棄を減らし、売上を増やします。

カート放棄を減らすためのeコマースチェックアウトプロセスの最適化方法

デザイン

eCommerce のチェックアウトプロセスを効率化し、モバイル最適化を強化し、複数の支払いオプションを提供し、信頼を築くための効果的な戦略を学び、最終的にはカート放棄を減らし、売上を増やします。

©2024 CRAFTED WITH CARE BY STUDIO JC

Japanese

©2024 CRAFTED WITH CARE BY STUDIO JC

Japanese

©2024 CRAFTED WITH CARE BY STUDIO JC

Japanese