10年分の負債を回収するダークモード化プロジェクト

2024年1月9日開催「SpectrumTokyo#08」での発表資料です。2013年から今年で10周年を迎えたニューズピックスアプリ。その10年間の歴史を持つアプリをダークモード対応するためのカラー設計についてお伝えしました。

Transcript

1. 10年分の負債を回収するダークモード化プロジェクト 吉川 亜香音 @yossiyossi923 株式会社ユーザベース／NewsPicks事業 プロダクトデザイナー
2. 経歴 ・非デザイナーとして社会人になる ・2017年 フリーランスでデザイナーにキャリアチェンジ ・2018年 IRIAMのアプリデザインに関わる ・2018年 NewsPicksにジョイン ・NewsPicks歴6年目、現在プロダクトデザインユニットリーダー 吉川 亜香音@yossiyossi923
4. 当時のブランドカラーはネイビーでした 2013年9月にiOS版リリース
5. 10年間、継ぎ足し継ぎ足しでやってきた分、色数も増えていきました・・・
6. 10年分のすべての色に トークンが適用できる デザインは変えない 今回のダークモード化の制約 メンテしやすく 拡張性がある × ×
7. 96 パレットの見直し 36 セマンティックトークンをきめる 6 Variablesに登録して画面に適用する
8. 命名が肝
9. É パレットの見直し
10. カラーパレットをダークモードを 考慮して作り直し 作成&メンテナンスコストを削減するため 1つのパレットで対応 3.5:1 3.53:1 4.76:1 4.51:1
11. É セマンティックトークンをきめる
12. 共通化してまとめる Button Object Surface Border Text Overlay Other（特殊色） 個別化する
13. Surface/IrregBlack/Default
14. ! Variablesに登録して画面に適用する
15. Variablesに登録して Layerで切り替え Figmaの全画面データをVariablesに 登録した色に適用し直し