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

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

「サクラ革命」護符強化画面の文字の色が背景と馴染んでしまっていた

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

 

「サクラ革命」を遊んでいたら、見づらい文字がありました。
該当箇所は護符を強化する画面ですね。
サクラ革命の護符強化画面のスクリーンショットです

 

画面左端にある、強化後の予測数値が見づらいと感じた文字です。
背景の白色と文字の黄色が馴染んでしまっています。

護符強化画面にある、強化する護符のスキルレベルの数字部分のキャプチャ画像です

 

ちなみに通常時はこんな感じです。普通に読める文字色です。

サクラ革命の護符強化画面のスクリーンショットです。1枚目と異なりデフォルト状態では文字が黒く、視認しやすい状態です

 

大きくするとこんな感じです。
背景色と文字色のコントラストもきちんとあるため読みやすいです。

護符のスキルレベルの数字部分のキャプチャ画像です

 

通常時と比較するとこんな感じです。

通常時とスキルレベルが上がる時の比較gifです


 

部分拡大してみました。
ぱっと見、文字が消えているようにしか見えません。

護符のスキルレベルの数字部分を拡大して見せたgifです

 

 

見やすいかどうかについては主観的な要素も含みますが、
アクセシビリティの視点から基準が設けられています。

文字サイズにも影響されますが、一般的には「色のコントラスト比」が4.5:1だと基準をクリアしている、というものです。

 

見やすい色かどうかはその基準を参考に選んで、色調整するのが良いのかもしれません。

  

色のコントラストチェッカー | 文字色と背景色の組み合わせを確認

 

 

以上です。

文字色を調整する際のご参考までに。