BeforeAfterこんな風にコントラスト比が改善された。グレーの文字をこれ以上明るくすると白文字との差がわかりづらいので、これくらいがちょうどいい。「真ッッ白」が「明るめのグレー」に変わったということ。これに関しては、むしろコントラストが下がった、ということである。真っ黒に対して真っ白の文字はコントラストが高すぎて眩しいのではないか、という仮説の元に決定した。するよう推奨されてる。backgrounds.(モバイルでのハイコントラストに関する文献やガイドラインを見つけられなかったので知ってる方は教えてほしい。↑の画像では実際のカラーパレットから少しだけ省略したが、色数はこのような変化をしている。色数を減らせたのは、「線」の色をマテリアルデザインのようにalphaで管理するようにしたからなの。これらによりアプリ内で使用する色数はグッと減り、シンプルになった。AbemaTVは動画を視聴するサービスなので、そこまでUIに色数が必要ないのだ。ひとつだけ解決方法がわからないモノが。緑背景の黒文字ボタンは、違和感があった。ボタンに穴が空いてるように見えるのと、緑と黒の組み合わせは重厚でエグミのある印象からこの違和感が生じてるものと思われる。実際に、緑背景の黒文字ボタンは有名どころのサービスだと本当に見かけない。この緑ボタンだけコントラストがクリアできなかった。AbemaTVのブランドカラーは「黒」であって決して「緑」ではないため、今後アプリのキーカラーを現状の緑よりコントラストの保ちやすい色に変更して改善することも可能だ。今回の対応で、コントラスト比が改善された上に色数もグッと減り運用性も向上した。こんなに色数が少なくて済むサービスはなかなかないのではないだろうか...w文字やアイコンが見やすくなったAbemaTVアプリを是非ダウンロードしてください!今回の色のコントラスト以外の様々な課題は、これからチーム一丸となってコツコツと解決していきます...!ダウンロード#デザイン#デザイナー#UI#UIデザイン#色#サービスデザイン#UIデザイナー#UIUX#アクセシビリティ#000000#FFFFFF#333333#CCCCCC#999999#212121#51C300#E6E6E6#8C8C8C#EEEEEEこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。サポートをする「スキ」を押してクリエイターを応援しよう!ありがとうございます!ありがとうございます!100しゅんすけ事業会社で主にUIデザインやってます。モーショングラフィックス、ロゴデザインもやります。記事まとめデザイン系の記事を収集してまとめるマガジン。ついた記事などをチェックしています。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。