ゲームで、ローマ字と日本語の使い方のUIチャレンジ

ゲームで英語やどんな外国語で書き方が難しいになれるから、UIデザインしながら何すればいいの？いいコツを紹介します。UnityやUnrealが使えるでも、本当に役に立つ！

ゲームのUIデザインに気になったで、日本語勉強ながら自分のゲームで日本語を使ってやってみたかった感じです。ゲームでUIデザインはとあるチャレンジだと思うけど、全く違う言語を使えば、もっと高くチャレンジでしょう。

日本語で書いたブログ記事のは初めてです。自分が何年後でその記事をまた読めば、「その時代からもっと上手になった」と思えて欲しいな。外国人として別の考え方があれば、これで色々についてゲームプログラマーを手伝ってくればいい喜んで。

---

## 言語の書字方向

![train_channel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/ca6b649c-b597-1cb4-bc2e-ba1a95de59eb.png)
> 同じデザインを使って例です。言及がわかるか?

日本語では縦書きと横書きあるんですけど、ローマ字を使う言語だったら、あまり使いません。どうしてか、その言語たちには縦書がないのですか？理由が簡単。初めに違う文字が同じ幅や高さではないし、それに句読点を使えば難しになれるかもしれない。

たとえば、本やゲームの背表紙に文字が縦書きで90度傾いた。これで、ちょっと読みにくいだが別の方法がないのですね。

それより、地下鉄線の地図に面白いやり方がある。45ぐらい度で書けば、横書きほど広くない、そして縦書きほど読み方は難しくない。ゲームUIで同じ方法を使えるかどうか知らないけど面白いことだと思います。

---

## 文字の広さ

![letter_height.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/11d2ad2c-cd3a-ff40-2a59-3067ec251143.png)
> 時々、店先は文字の高さが構わありません。

日本語に漢字があるから、短いテキストで色々書けて、UIデザインで便利です。ただ、一つ漢字だけの言葉は外国語で長いになれる。「雷」は英語で「Thunder」になるとか、「スキル」はフランス語で「Compétences」になるとか。

狭いところに長い言葉を書くために、文字の圧縮がよく起きます。できれば、特にローマ字だと、圧縮しないの方がいい。日本語だと、ちょっと圧縮されたのはデザイン選択になれる、たとえばエヴァタイトル画像のように。こいうい、読むやすい、かっこいイメージができます。

**【おすすめポイント】**UIデザインのどこでも、日本語の言葉よりちょっと広い言葉が書けば、いいです。さっき話したの例とか。

もちろん、言葉よりアイコンが使えるけど、アイコンの分かり方が難しいになれば、言葉を使うの方がいいです。それとも一緒でアイコンと言葉を書けます。外国の文化が違ってので、日本人と分かりやすいアイコンが外国人と分かりにくいになれるから、注意してください。

アイコンの意味のように、色の意味は文化の問題です。たとえば、赤い確認ボタンは日本でよく見たことですが、自分として赤が確認よりキャンセルボタンのイメージですよ。

![moji.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/21b12a02-a4eb-4eb3-a12b-3dee2427c62b.png)
> おすすめポイントのまとめです。

---

## フォントについて

![fonts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/fdfa7225-55a1-42ff-e03c-61a4d4959065.png)
> フォントの多様性が面白いだと思います。

サイトにもゲームにも、色々フォントを使うのは普通ことですね。日本語フォントやCJKフォントより、ローマ字のフォント作りはもっと簡単です。

ローマ字のフォント作りはあまり難しくない。AからZの文字、番号の文字、そしてアクセント付き文字と。それより日本語のフォントのために、いっぱい漢字が必要だから、漢字なしフォントもあるし、漢字が少ないフォントもあります。

![fonts_styles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/d1e5b2ad-35a6-43d0-c4d5-fd8d46cf6447.png)
> 例のため、明太子はひらがなで書きました。

日本語で書けるフォントの探しが難しかもしれないが、絶対ありますよ。形や色より、フォント選びはデザインの意味を持つ。とあるフォントが万年筆みたいとか、とあるフォントがモダーン感じあるとか、真面目の感じとか。「セリフ体」と「サンセリフ体」のように、日本語フォントには「明朝体」と「ゴシック体」があるから、何のためにを考えて正しいフォントを選びます。

その上、もっと別の体がありますよ！ローマ字で「スラブセリフ体」、日本語で「丸ゴシック体」、ソースコード用のは「等幅フォント」とか。
「セリフ体」だと、最近はほとんどボディコピーのために使っている、ちょっと古い感じだからだと思います。逆に「明朝体」はいつでも使えると思う、きれい鉛筆のいイメージがあるから。

日本製ゲームにローマ字が見せたら、「ニューロダン」などがよく使っています。多分、フォントワークスの使用が人気だから。悪いフォントじゃないけど、気づきやすいし、どこでも見えれば詰まらないになれると思います。ゲームには「詰まらない感じ」がダメでしょうね。別のフォントを使えばいいです。

**【おすすめポイント】**色々ローマ字フォントをよく調べて、「セリフ体」と「サンセリフ体」どっちを使えばいい考えて、面白いフォントを選んでなど。いい無料フォントもあるですが、商業利用ができるかどうか、ちゃんとチェックしてね。

それでは、文字の強調のために。 ローマ字だと「ボールド体」や「イタリック体」など使えますね。これで、たとえば同じ色のもテキストに、大切事がよく見えます。もちろん、日本語でもそう言うことができるけど、違うかどうかよく見えるかな。下線も使えるが、漢字の読み方は難しいにならないかな。外国人として読みにくいだと思います。限りが色々あります。

**【おすすめポイント】**ゲームに文字のサイズを注意してくだない。みなが大きくテレビ持っていないし、Switchの画面も大きくないし、字幕やメッセージが小さい文字で書けた読みにくいになります。最近、よく見えることですよ。文字の高さが設定に決定できれば一番いいです。

---

## ゲームとの関係

さて、なぜかゲームと書き方はそんな大切な問題ですか？

第一の当然な思いは翻訳、又はローカライズと言うことです。翻訳はもちろん、とある言語から別の言語を訳すつもりです。時々、吹き替えもあります。ローカライズは翻訳より、ゲームをもっと変わります。たとえば、とある国の文化を調べてと、ゲームの失礼なことを変わりなきゃいけないとか。昔は人や物の名前も換えましたが、最近はもうしません。

もしデザインのどこか、翻訳者が選択した言葉がよく書けない場合は、答えが二つある。一つ目は外語のためにデザインを変わる。ふつ目は意味を変わるでも、文字を圧縮するでも、なんとか言葉を書くこと。もちろん、一つ目の方がいいですよ。翻訳者が一番いい言葉を決めたら、ただデザインが悪いので、変わることが良くないでしょう。

**【おすすめポイント】**UIデザインをしながら、別の言語をちょっとだけでも考えてください。自分で英語の言葉をチェックして、長いや難しい言葉になれるかどうか調べてね。これで、ローカライズの時が来たら、UIが問題になりません。


![text_align.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/0217864c-c9e4-9def-a2a4-fd5ddb91ad8d.png)
> とあるゲームにローマ字を使うメッセージ

テキストを見せることが時々簡単ではない、社内で作ったゲームエンジンを使るからとか。上の例を見たら、ローマ字の文字の整列が大丈夫ではない。遠く見ればあまり気づけないですが、ズームをすれば、問題が見えます。文字が同じベースラインに整列しません。ベースラインはローマ字の書き方で常識ですので、それも注意してください。

---

## ソースコードで

![dialogue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/5970e72e-ac59-2194-b3a4-e3646c11b9f0.png)
> 自分で作ったメッセージシステムです。

とある物が外語でただ一つ名前があれば、難しい翻訳は必要ないです。たとえば、ローマ字を使えない言語の固有名詞だったら、どんな別の言語でも同じローマ字で書きますね。その場合は、ソースコードで二つフィールドを使ってもいいだと思います。一つ目は本名（日本語など）そして二つ目はローマ字で。

「ローマ字」の意味は「ラテン文字で日本語の書き方」だし、日本内だけの言葉だし、コードで「ラテン文字」を使うのほうがいいだと思います。

```csharp
String name_ja = "梅田";
String name_latin = "Umeda";
```

上の例の言うとおり、違う書き方のために、同じフィールドが名前の後で接尾辞が書けます。

フィールドの本名はnameだから、日本語でフィールドは「name_ja」と、ラテン文字では「name_latin」です。この例が駅の名前なので、ふりがな文字でもフィールドも使えると、「name_furigana」のフィールドになります。

![script.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1564614/814dec4d-c3c7-cc43-4f57-5f804bd22fbc.png)

> name_jaよりname_originalを書いたが、どっちでもいいです。


**【おすすめポイント】**言葉が日本語ではないのところで、おすすめはフィールドで[ISO 639-1コード](https://ja.wikipedia.org/wiki/ISO_639-1%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7)を使うことです。朝鮮語のコードがkoなので、「name_ko」になります。日本に別の産業規格があるので、ISO 639-1より[JIS X 0412-1](https://www.jisc.go.jp/app/jis/general/GnrJISNumberNameSearchList?show&jisStdNo=X0412-1)があるのですけど、ゲーム作る産業でよく使うかどうか知りません。多分ソフトにISO 639-1コードがもっと人気かな。

今回はここまでです。読んでありがたいです。そのトピックで話したいなら、ツイッターは[@komanakun](https://twitter.com/komanakun)、Wantedlyは[こちら](https://www.wantedly.com/id/michaelhubert)です。