こんにちは！ちょこです！
このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。
今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」のUIパーツの中の文字加工について紹介します。
該当のUIパーツがある画面はこちらです。
こちらはキャラ画面のトップ画面です。
「チーム編成」「強化」「プレイキャラ」「メモリー」といったボタンが並んでいます。
その中のひとつの「強化」の文字について注目します。
このように文字の周囲に輪郭線があることが分かるかと思います。
続いて別の画面を見てみます。
こちらは先ほどの「強化」ボタンを押した後に開くダイアログです。
いくつかは未開放ですが「プレイキャラ」「メモリー強化」「プレイキャラアビリティボード」「メモリー限界突破」などの項目が並んでいます。
こちらのボタンの中にある文字をよく見ると先ほどの「強化」とは加工の仕方が異なることに気付くかと思います。
特に「強化」の輪郭線に注目すると分かりやすいかと思いますが、シルエットが単純化されることによって、情報が整理されています。
一般的に文字が小さくなると可読性が下がるため、可能な限りノイズとなるような周辺情報は減らしておく方が良いです。
同じようなデザインの工夫はホーム画面でも見ることが出来ます。
画面右下に注目してみますと、
このように小さい文字は輪郭線ではなく下地を敷いて可読性を担保するデザインになっています。
小さな工夫に見えるかもしれませんが、こういった積み重ねによってストレスのない画面作りに繋がっていくのだな、と感じました。
以上です。
文字を含めたUIパーツをデザインする際の参考になれば幸いです。
