ローカリゼーション中のデザインエラーの解決: ConveyThis による翻訳のビジュアル編集

ライブビジュアル編集ソリューションは、デジタルプラットフォーム上の言語適応の実用的なリアルタイムの概要を提供します。これらのツールは、変換されたコンテンツを正確に視覚的に表現し、潜在的な設計上の影響を正確に推定できるようにします。

通常、言語変換では、元のテキストと比較して、変換後のテキストのサイズが変化します。たとえば、W3.org で言及されているように、中国語と英語のテキストは比較的簡潔であるため、他の言語に変換するとサイズに大きな差異が生じます。

実際、IBM の「グローバル ソリューション設計の原則」では、英語からヨーロッパ言語への翻訳では、70 文字を超えるテキストの場合、平均 130% の拡張が生じることが示されています。これは、プラットフォームの翻訳版が 30% 多くのスペースを使用することを意味し、次のような複雑な問題が発生する可能性があります。

テキストの重なり 圧縮されたシーケンス デザインの対称性の破壊 ライブビジュアル編集ソリューションがこれらの課題をどのように軽減できるかをより深く理解するために、例示的なツールの機能を検討します。この調査では、これらのツールがどのように言語間でデザインの変更をプレビューし、シームレスなユーザー エクスペリエンスを確保できるかを実証します。

ライブ ビジュアル エディターを使用しているときに、レイアウト全体における翻訳されたコンテンツの外観に関する問題が見つかる場合があります。これらの潜在的な落とし穴を予測し、適切に調整することができます。実行可能な修正手段は次のとおりです。

コンテンツを圧縮または変更する: 翻訳されたバージョンがレイアウトを乱す場合は、うまく翻訳されない部分や過剰なスペースを消費する部分をトリミングまたは変更することを検討してください。これは、チームによって実行することも、プロの言語学者と協力してダッシュボードから直接実行することもできます。

たとえば、英語の「About Us」タブはフランス語では「A propos de nous」と翻訳されますが、これはプラットフォームに割り当てられたスペースに適合しない可能性があります。簡単な解決策は、「A propos de nous」を「Equipe」に手動で調整することです。

言語学者のメモ セクションは、別の表現が可能なフレーズについて翻訳者に知らせるのに便利なスペースです。たとえば、以下の CSS スニペットはドイツ語のフォント サイズを 16 ピクセルに調整します。

html[lang=de] 本文のフォントサイズ: 16px; Web サイトのフォントを変更する: 場合によっては、テキストを翻訳するときにフォントを調整することが適切な場合があります。特定のフォントは特定の言語に適していない可能性があり、デザインの問題が悪化する可能性があります。たとえば、サイトのフランス語版に Roboto を使用し、アラビア語版 (アラビア語に適しています) に Arial を使用することは、CSS ルールを使用して実現できます。

以下の CSS スニペットは、アラビア語バージョンのフォントを Arial に調整します。

html[lang=ar] 本体フォントファミリー: arial;グローバル Web デザインを実装する: Web サイトが初期段階にあり、複数の言語を組み込む予定がある場合は、潜在的な問題を防ぐために余分なスペースを確保したデザインを検討してください。設計に関するその他のヒントについては、この包括的なガイドを参照してください。