アプリUIのカラー更新について Now in REALITY Tech #108
こんにちは！REALITYでAndroidエンジニアをしているぴかです。
普段はUIまわりやUnityとの接続部分の調整をしたりしながら、最近だとサポーターバッジの開発を行なったりしていました。
以前書いた記事はこちらです！
今回はアプリのバージョン24.15.0でのアプリUIの更新について、お話させていただきます。
カラー変更について
REALITのバージョン24.15.0より、リリースノートにちょっと記載していたりするように、REALITYとしては比較的大規模なUIリニューアルを実施しました。
・アプリ全体で使用されている色を、より見やすいものに変更しました。
変更点としては記載の通り、カラーの調整がメインで今まで多くの箇所で使用していたカラーの変更を行いました。
(このカラー以外についても全体的に見直しを行いました)
またカラーの変更に合わせて、カラー自体の使用箇所についても見直しをおこなったり、今まで中途半端だったダークモードのカラーについても改めて定義と実装を行いました。
以上のような変更をアプリ全体に実施しています。
ユーザーさんに使いやすいと思って頂けると嬉しいです！
なぜカラー変更を実施したのか
そもそも、なぜ今回のようなカラー変更を実施したかというと、以下のような課題がありました。
・コントラスト比が担保できていない色の組み合わせがある
・適切なカラーが定義されていないため、ベストではないUIが生み出される
・カラーパレットでは補いきれていないカラーが生み出されるため、個人の裁量でカラーが決められる
これらの課題を解決するには、現状使われているカラー全体を見直し、それに合わせてアプリ全体のデザインデータや実装を置き換えていく必要があります。
また、部分的に置き換えていくと画面によって違うカラーが使われていて、違和感が生まれていく可能性があるため、結果的に今回のような大規模な変更になりました。
カラー自体の見直しについての詳細については、今回のリニューアルについて担当したデザイナーさんが改めてnoteを書くと思いますので、お楽しみに！
技術的な話
開発としては、デザインシステムなどで共通化されている実装は良いですが、Unityやレガシーなコードなどは共通化されておらず、結果的にかなりの広い範囲の実装を見直すこととなります。
REALITYのアプリはUIの状態も多く、プレビューなどの単純なUIの初期状態の確認だけでは済まず、しっかり動作検証しながら確認するのも大変でした。
(確認用のダイアログだけ適用が漏れて、別のカラーになっていた)
また、デザインデータとしての見え方と実機での見え方は違って見えることも多いため、修正の漏れがないか、見えにくくなることはないかなどをデザイナーさんと何度も確認しながら実装を行いました。
そのため、内容的にはただの置き換え作業ですが、それなりの工数を要することとなりました。
(デザイナー、エンジニアともにこれ以外の施策も実施しながらですが、1月から始めたので3ヶ月ほどかかりました…)
期間を要する横断的な開発は、施策開発とのコンフリクトも多く発生するため、コンフリクトの解消も大変な点の一つでした。
また、Androidにおいてはこのタイミングを機に、使用するComponentの大部分をMaterial2からMaterial3へ大きく更新しました。
Material2のComponentが使用できないわけではないですが、将来的にMaterial3の方が主流になっていくことも考えられ、デザインを包括的に確認するタイミングも多くはないため、このタイミングでの置き換えを行いました。
また、Componentについても一旦アプリ内部でMaterialのComponentをラップするように変更しました。これにより、テーマ側での指定漏れの抑制や今後の移行をスムーズにするようになると思います。
Compose導入時期にはこのあたりにまで考慮が至っていなかったので、こちらについても良いタイミングで実施できたと思っています。
今後について
カラーの大きな変更については今回のバージョンで実施自体は一旦完了しましたが、確認しきれていない画面のバグがあることも考えられるため、しばらくは継続的に対応を行なっていきます。
また、デザインシステムとしてもまだまだ発展途上のため、定義や実装を進めていき、UIの快適さと開発速度の向上を目指していきたいと思います。
おわりに
REALITYでは現在プロダクトデザイナー職の方を募集しております！
今回のようにデザイン部分の課題も多くあるため、ご興味がありましたら、以下をぜひご覧ください！
