本記事はDropbox UX WriterのJohn Saitoがこちらで執筆した記事を本人の許可のもと掲載しています
あなたは今、新しいアプリを初めて試そうとしています。Twitter で絶賛されているアプリで、「すばらしい」「毎日が変わった」「快適」などの声が寄せられているものです。
早速起動してみます。
すると、おかしなことに気付きます。画面上部の動画の字幕が理解できません。ダイアログの言い回しも不自然で、UI はボタンからはみ出しています。なぜこれが好評なのでしょう。
どうやら、元は別の言語で作られたアプリのようです。エルフ語で作って、それを翻訳したものらしいのですが、ユーザーはほとんどがエルフ語版を使っているので、翻訳版の出来を知りません。
信じるか信じないかはともかく、これが、英語圏以外のユーザーがたびたび出くわす状況です。多くのアプリは、もっぱら英語での使用を前提に設計されます。そのため、この点に注意しないで翻訳すると、デザインの要素の中に意味をなさなくなるものが出てくるのです。
こうした状況に陥らないよう、ここでは国際化を前提にしたデザインで気を付けるべきポイントをいくつか紹介します。
1. 字数が増えた場合に備えてスペースに余裕を持たせる
国際化で最もよくあるのが、文字がスペースに収まらないという問題です。
「New!」というラベルを例に見てみましょう。英語ではエクスクラメーション マークも含めて 4 文字ですが、フランス語では「Nouveau !」と、英語の倍以上の 9 文字になります。またお気付きのように、フランス語ではエクスクラメーション マークの前にスペースも必要です。
デザインに文字が含まれるのなら、翻訳しても収まるよう、必ず十分なスペースを取ってください。そうしないと、文字が重なったり、後ろの文字が欠けたりしかねません。
明らかにスペースが足りていません。
翻訳語のテキストの字数を見積もる方法に、Google のスプレッドシートを使う手があります。Google 翻訳の機能を使って、スプレッドシートの大量のテキストを一度に機械翻訳にかければ、ものの数秒で、各国語のテキストのおおまかな字数がわかります。
Google スプレッドシートで作った、翻訳後の字数を見積もるツール
IBM Globalization サイトには、英語から翻訳したとき、どれくらいのスペースが必要になるかがわかる便利な表があります。
2. 列幅が狭い表にテキストを配置しない
表は、内容を整理して伝えるのに良い方法です。表にすることで、バランスや構成、リズムが生まれます。よく考えられた表組みは、高い効果をもたらします。
でも、テキストの長さを考慮しないと、どうなるでしょう？翻訳では、1 行だったテキストが 2 行や 3 行になることがあるので、これを考慮しないと、バランスの取れた美しいレイアウトが突然崩れてしまいます。
行数が増えたテキストは、デザイナーの意図を台無しにしかねません。
列幅が狭い表にテキストを配置すると、翻訳によっては改行が発生します。安全のために列幅は広く取りましょう。そうすれば、テキストが長くなっても 1 行に収まるので、レイアウトが崩れません。
3. 画像にテキストを埋め込まない
デザインにテキスト付き画像が含まれていると、各国語への翻訳に恐ろしいほどの手間がかかります。
翻訳者は Photoshop や Sketch ファイルのテキスト レイヤーをそれぞれ翻訳するだけですが、デザイナーは、翻訳して長くなったテキストが収まるよう、言語ごとにレイアウトを調整しなければなりません。これは実に面倒です。
いくつか良い方法を紹介します。
・テキストではなく線を引く： 文字があることを示すのに、いつも実際の語句を入れる必要はありません。ぼかした線を引くだけでも、そこにテキストがあることは伝わります。
・CSS でテキストを重ねる：下の図で、緑の丸の中のテキストは、実は画像に埋め込まれているわけではありません。CSS を使って画像の上に重ねただけです。
4. 文中に UI 要素を使用しない
製品デザインでは、さまざまな UI 要素をあちこちに動かしながら、最も使いやすいレイアウトを検討するのが普通です。テキスト フィールドを右に持ってきたり、ドロップダウンを左にずらしたりといった試行錯誤が繰り返されます。
ただし、UI にテキストを組み合わせる場合は、さらに注意が必要です。文中にボタンやボックス、ドロップダウンを組み合わせると、後々問題になることがよくあるからです。
このレイアウトは国際化の際に面倒を引き起こします
そこには次のような理由があります。
– 語順の違い：語順は言語によって異なります。たとえば日本語では、「Buy 3 shirts」の「Buy」にあたる語が文末に来ます。ある語順でないと成り立たないデザインにしてしまうと、言語によっては機能しなくなります。
– 複数形：英語では名詞に単数形と複数形が 1 つずつあり、たとえば「picture」だと、「1 picture」と「__ pictures」となります。しかしロシア語では、名詞に 3 種類の形がある場合があります。そのため、文の途中に数字を入力する UI があると、数字によっては文法的に誤った文になってしまいます。
– 性：言語の中には、名詞と形容詞に性があるものがあります。たとえばフランス語の場合、「large」の訳は、何を形容するかによって「grand」「grande」「grands」「grandes」と変化します。そのため、文の途中にドロップダウンがあると、形容する語によっては文法的に誤った文になってしまいます。
では、どうすればよいのでしょう。解決策は、次のように UI 要素を文の外に置くことです。
UI 要素を文から切り離すと、上記の問題は解決します。
5. 連想に注意する
製品デザインとは、連想の繰り返し他なりません。アイコン、ボタン、操作。どれも、現実世界の何かを連想させています。たとえば、Dropbox のアイコンは収納ボックスを、クリック & ドラッグは手でものをつかむ動作を連想させます。
でも、別の文化では別の意味が連想される場合もあります。フクロウは米国では知恵の象徴ですが、フィンランドやインドでは愚かさを意味します。
「モノ」の形も世界中で異なります。多くの米国人にとって、下の絵が郵便受けであるのは明らかですが、郵便受けが世界のどこでも、この形状というわけではありません。郵便受けに旗のプレートが付いていない国が大半です。つまり、この絵では意味が通じない人がいるのです。
郵便受けは、世界のどこでもこの形状ではありません。
デザインに連想を組み込む場合は、その連想が通じるかどうかを、できるだけ事前に調べることをお勧めします。Dropbox では、アイコンやイラストの外国での受け止め方が気になる場合は、グローバリゼーション チームに調査を依頼しています。
6. 機能には説明的な名前を付ける
マーケティングの観点では、機能には、話題を呼ぶ面白い名前を付けたくなるものです。でも、面白い名前は翻訳が難しく、しかも他の言語では意味をなさなくなることが考えられます。
Dropbox は数年前、1 つのファイルにバージョン履歴を無制限に残せる機能を導入しました。当初は、それを「Packrat（モリネズミ）」と呼んでいました。
小さなネズミのアイコンが付いた「Packrat」オプション
「Packrat」は、米国のユーザーにとっては上手いたとえでしたが、他の言語では意味が通じませんでした。横のネズミのアイコンも、機能をわかりづらくするばかりでした。ありがたいことに、この機能名は「Extended version history（エクステンデッド バージョン履歴）」に変更されたので、翻訳がずっとやりやすくなりました。
機能には、翻訳上の問題を避ける意味で説明的な名前を用いた方が安全です。面白みにはやや欠けるかもしれませんが、翻訳には向いています。使い勝手も良くなります。
7. 翻訳用の別バージョンを用意する
今書いているテキストが翻訳されることがわかっているのなら、一般には、的確かつ平明で中立的な文体にするのがベストです。とは言え、ブランディング用に、特別な遊び心を多少加えたいときもあるでしょう。
そんなとき、英語バージョンと翻訳用の別バージョンの 2 つのバージョンを作成することがあります。
翻訳に注意を要する部分に、翻訳者向けのコメントを付けたバージョンを作るのです。現在私たちは、Dropbox のステッカーに使うラベルを作成しているところで、たとえば、こちらのステッカーには、「OMG cat」というラベルを使う予定です。
「あっと驚く！」を意味するOMG キャット
このラベルを翻訳する翻訳者には、「驚いている猫」の意味にも訳せるということを伝えます。この方法なら、翻訳者は自由に遊べます。また、必要に応じて原文どおり正確に訳すこともできます。
以上のヒントに、お役に立つものがあれば幸いです。国際化についての知識を世界に広めることで、世界中の人々のために、より良い製品を作るという役目を全員が果たせるようになることを願っています。
Dropbox デザイン チームについての詳細は、弊社の公式サイト、Twitter、Dribbble をご覧ください。私たちと一緒に世界に魔法をかけたいという方、人材を募集中です。
このストーリーの執筆にあたり、多くの方にご協力いただきました。ファニー・ルオー、ジェンセン・ホン、アダム・ソーヤー、ドーン・リー、アンドレア・ドゥルゲイ、アンソニー・コスナー、デイブ・ワイス、ガリーナ・ミシュニャコバ、カート・バーナーの各氏をはじめ、長年にわたり国際化のご指導をいただいているすばらしい方々に、この場を借りてお礼申し上げます（敬称略）。 ?
