アプリやゲームを多言語にするとき、文字がはみ出さない画面の作り方

アプリやゲームを英語・ドイツ語・韓国語などに翻訳したとき、「ボタンから文字がはみ出した」「表の文字が切れて読めない」ということはありませんか。日本語は短い文字数で多くの意味を伝えられるため、同じ内容でも外国語にすると文字が長くなりがちです。特にドイツ語やフランス語は長くなりやすく、日本語に合わせて作った画面では収まらないことがよくあります。今回は、翻訳を入れても崩れにくい画面を作るための4つの決まりをご紹介します。

1. ボタンは「文字に合わせて伸びる」作りにする

ボタンの幅を固定すると、長い言語で文字があふれます。ボタンは文字の長さに合わせて横に伸びる作りにして、そのうえで「これ以上は伸ばさない」という最大の幅を決めておきます。最大の幅を超えたときだけ、文字を1段階小さくするのがおすすめです。

2. 文字の大きさは「段階」で決めておく

はみ出したときに文字をどこまでも小さくすると、読めなくなってしまいます。「見出し」「本文」「補足」など、使う文字の大きさを数段階に決めておき、小さくするときもその段階の中で調整すると、画面全体の統一感も保てます。

3. 表は「省略してよい列」を先に決める

選手の一覧や順位表など、文字が多い表では、名前のように長くなる列と、数字のように幅が決まっている列があります。幅が足りないときにどの列を「…」で省略してよいか、どの列は必ず全部見せるかを、先に決めておくと崩れにくくなります。

4. パネルやボタンの画像は「9スライス」で作る

画像で作るパネルやボタンは、角の部分を固定し、間だけが伸びる「9スライス」という作り方にすると、どんな大きさになっても角が崩れません。文字の長さで大きさが変わる部品には特に向いています。

まとめ

多言語に対応する画面は、「日本語でちょうどよく見える」だけでなく、「いちばん長くなる言語でも収まるか」を基準に作るのがポイントです。最初に部品の決まりを作っておけば、言語を増やすときの手直しもぐっと減ります。アプリやゲーム、ホームページの画面デザインのご相談もお受けしています。お気軽にどうぞ。