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

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

「プロ野球PRIDE」黒い背景に赤い文字は避けた方が良い。色の組み合わせには注意が必要。

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

 

プロ野球PRIDE」で使用されてる文字色が視認性の観点から気になりました。

f:id:appgameui:20200417093957p:plain

▲お知らせ画面

 

f:id:appgameui:20200408083141p:image

▲注意事項

 

 

f:id:appgameui:20200408211611p:image

▲クエスト(?)画面のリストの強調表示

 

以上です。赤い ><

 

赤文字って強調色として認知されていますが、実は黒地に赤文字って視認性的には良くないです。

photoshopのフィルタをかけるとこんな感じになります。

f:id:appgameui:20200417094130p:plain

▲P型フィルタをかけた時

 

赤よりマゼンタ色の方が見づらく感じますね。

f:id:appgameui:20200417094245p:plain



 背景が若干明るいので、その分見づらくなっている場所もあります。

f:id:appgameui:20200417094319p:plain

 

 

f:id:appgameui:20200417094450p:plain

▲D型フィルタをかけた時

 

少し黄色を入れてオレンジにするだけでも視認性は改善されるので、デザイナーだけではなく、実装するエンジニアさんにも知っておいて欲しいな、と思います。

f:id:appgameui:20200417095247p:plain

▲例えばこれくらい

これくらいでも強調色としての役割は果たせているので、赤にする必然がなければ参考になればと思います。

  

 

ここで誤って認識しないでいただきたいのは、赤を使わないでという話ではありません。

色の組み合わせによって視認性は変わります。

視認性が下がってしまうと伝えたい情報を見落としてしまったり、読むのにストレスになってしまいます。

なので、視認性に気を付けて色を選んで欲しい、という話です。

 

人間は視覚情報に頼りがちなので、つい見落としてしまいます。

気をつけるべき色の組み合わせは限られるので、まずは意識するところから始めればいいかな、と思います。