ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「デュエル・マスターズ プレイス」黒地に赤文字は見づらいので避けた方が良い話

こんにちは、ちょこです!

 

デュエル・マスターズ プレイス」、通称「デュエプレ」のお知らせ画面で見辛い文字列がありました。

この組み合わせは非常にメジャーで頻出もしています。デザイナーだけではなく開発者の方はアンチパターンとして知っておいて欲しいです。

 

該当の画面はお知らせ画面です。
黒背景に赤文字は組み合わせとしては良くない組み合わせです。

f:id:appgameui:20200830164235p:image

 

色覚フィルタをかけるとこんな感じに見えます。

ああああああああ

 

「いや、俺読めるよ」という方もいるかと思います。
しかし、ここでは読めるかどうかではなく、読みやすいかどうかの話をさせてください。

また、この画面だけを注意して見れば見落とす可能性は低いのですが、数ある画面の中の一部分を抜き出していることを忘れてはいけません。

ああああああああ

このように、背景が黒い場合には強調したい文字の色は赤にしない方が良いです。

色を付けたいのであれば「注意事項」の文字のように黄色かオレンジに寄せると読みやすくなります。

強調表現=文字を赤くする、というのは確かによくある手法ですが、それは背景が白地の時に採用すると良いです。

黒地の時には向いていません。

 

 

以上です。

ゲーム内の文字の色を変更することはよくあることです。その際に文字の可読性を意識して実装をする必要があります。

お知らせや補足など文字色を変えたい際の参考までに!

 

 

 

 

権利者さまへ

以下のガイドラインによりゲーム画面のスクリーンショットの公開については許可されている認識でおります。

ネットワークサービスにおける『DUEL MASTERS PLAY’S』の
投稿、生放送配信、及び画像投稿に関するガイドライン

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ