マネーフォワード MEのiOSエンジニアの椎名です。

iOS版マネーフォワード MEのVer.13.8で、ダークモード機能をリリースしました!!

MEはとても古いサービスで、様々な障壁がありましたが、なんとかリリースすることができました。こちらではMEのダークモード化までにやったこと、それによって得た知見を少しでも共有できたらと思います。サービスによっては不要なStepや足りないStep、もっとスマートな方法があるとは思いますので、ご参考までにどうぞ。

Step.1 Human Interface Guidelinesを読む

HIGのDark Modeと、 Colorにまず目を通しました。

また、Material DesignのDark Themeも読み返しました。 Material Designのダークテーマは、通常の影を使ったElevationではなく明度によって表現しているので、iOSでもかなり参考になりますし、コントラストレベルについても詳細に説明してくれてるので、色設計するとき役に立ちます。

Step.2 デザイナーと色定義を作成する

MEでは、長らく色定義(カラーパレット)が存在しませんでした。そのため、まずそれを作る事からはじめました。このときはまだ、ダークモードの考慮は不要です。

この作業はデザイナーだけでは作りにくい場合があるので、エンジニアが積極的に取り組むことがコツです。例えば、独自の色定義を使うよりOS標準の色を使用したほうが良い場合や、そもそもデザインファイルにカラーパレットが無い場合などは、エンジニアが調査や提案、場合によっては色定義をしないと進みにくい事もあります。

色定義において、MEでは3つの事を意識しました。

1. 名前を付ける

色に名前をつけないと、実装上不便なので必ずつけました。このとき、検索しやすいようにPrefixを決めておくと良いです。

注意点として、XXSelectedColorなど、状態を示す名前は避けたほうが良い場合があります。 OSで提供されているSDKのUIパーツが、自動でその状態を示す色にしてしまう事がある為です。同じようにLight/Darkなども不要です。

ですが、デザイン上必要な場合があると思います。そういった場合はPrefixを分けたりして工夫しましょう。

2. 役割を明確にする

色の役割を明確にし、使用する場面の共通認識をデザイナーと持つようにしました。

例えば、XXButtonAColor はボタンAにしか使わない等を決めました。これが無いと、似たような色を全く違う場面で使ってしまう恐れがあり、そうなると大きな手戻りが発生する事があるためです。

3. できるだけOS標準の色を使う

可能な限り、OSで定義されている色、特にdefaultで設定されている色を使うようにしました。理由としては、膨大な数のViewに一つ一つ独自の色を設定する作業は漏れるリスクがあるということと、自動で適切なダークカラーにしてくれるためです。

後者は便利なのですが、注意点があります。 iOSの場合、ライトカラーとダークカラーは1:1では無く、状況によって別の色になることがあります。例えばOS標準の色をダークモードで見たとき、以下のようなことがあります。

TableViewのstyleによってCellの色が異なる

plain	grouped

UIViewControllerのmodalPresentationStyleによって、subViewのdefaultカラーの色が異なる

fullScreen custom overFullScreen none	pageSheet formSheet popover	currentContext overCurrentContext

Step.3 AssetCatalogに色定義を反映する

Step2の色定義をAssetCatalogに反映しました。

このとき既にAssetCatalogに色がある場合、ひとまず上書きなどはしなくて大丈夫です。あとで整理したほうが効率が良いです。

ちなみに、MEではSwiftGenを導入しています。色定義の管理・保守が便利になりますので、未導入でしたらこのタイミングで導入を考えてみることをオススメします。

Step.4 色管理をAssetCatalogに集約する

MEではダークモード対応前、9つのファイル(.hや.swift)で色が宣言されていました。それをまずはAssetCatalogに集約する作業をしました。

Step3のときと同じ様に、無理にStep2の色定義に置き換えなくても平気です。

Step.5 野良色を無くす

野良色 と呼んでいるのは、AssetCatalogなどの宣言を使用せず、カラーコードを直接指定していている色の事です。これを全てAssetCatalogの色に移行させました。

こちらはstoryboardやxibで指定されている事も多いと思います。そういった箇所が多い場合、Scriptを作成して一気に置換すると楽です。

一応、MEで使用したこちらのScriptを共有しますが、使い捨て前提ですし、完全では無いので、ご参考までにどうぞ。このScriptでは、ざっくり以下をしています。

AssetCatalogの色情報を取得
storyboardとxibの一覧を取得
2の中で野良色を使用している箇所を検索し、その色を抽出
3と1を比較し、最も近似している色を探し出す
- ユークリッド距離で比較しました
4の結果を元に、storyboard/xibのXMLを置換
- XMLをパースして置換せず、文字列として置換しています。そうしないと差分がよくわからなくなるので
AssetCatalogをstoryboard/xibで使うために必要なタグを挿入
- これもXMLをパースせず、文字列として挿入しています

Step.6 AssetCatalog内を整理する

これまでのStepで、プロジェクト内の色は全てAssetCatalogを参照している状態だと思います。このStepではそれらを、Step2の色定義に集約するように整理しました。その際、色定義に不足している色が見つかったら、都度デザイナーと相談して補完します。

アプリによってはかなりの作業量になるので、一括置換やScriptでの置換をしたい所ですが、色がどういった使い方をされているのか、実装箇所を見ないと判断ができないので難しそうです...。

また、storyboardやxibで指定された、AssetCatalogの色はXcodeの検索に引っかかりません。そのため、VSCodeなどを使って検索しました。

MEでは流石に全て一つ一つ確認すると終わらなかったので、後でちゃんと動作確認する事にして、ざっくり置換出来る箇所はしてしまいました。その場合、必ずstoryboardやxibを開いて確認するようにしましょう。 resourceタグなどの置換が抜けていたりするとXcode自体がクラッシュするのですぐにわかります。

Step.7 ダークモード用の色定義を作成する

ついに、ここからダークモード化の作業が始まります。まずはAssetCatalogにある色に対し、適当にそれっぽいダークモード用の色を一時的に割り当てます。 そしてそれをビルドし、違和感のある色を修正していきました。

それが終わったあとデザイナーに、正式なダークモードの色を作成してもらいました。

Step.8 画像をデザイナーに修正してもらう

ダークモード用の色が決まれば、あとはそれに合わせて画像を修正する必要があります。 MEでは、アプリで使用している画像をまとめてデザイナーに渡し、修正してもらいました。

デザイナーに修正依頼をする際、以下の点を考慮しておくとデザイナーが作業しやすいと思います。

Light/Dark両方でそのまま使えそうな画像と、そうでない画像をざっくり仕分ける
- そのまま使えそう
  - そのまま使えるかどうかの基準は、デザイナーと事前に相談したほうが良いです
  - ただ、背景色がLight/Darkで同じ画像は問題ない事が多いです
- そのまま使え無さそう
  - 外郭が黒または白の部分がある
  - 影や立体感のあるデザイン
  - 背景不透過
画像の使用箇所や用途を伝える
- 画像名と、デザインファイル上のUIモジュールが一致しない場合がある為

Step.9 ブラッシュアップ

MEでは、デザイナー、チームのiOSエンジニア、QAチームに協力してもらって、ひたすらデバッグを行いました。実装者では気づかないものがたくさんあるので、チームの規模にもよりますができるだけ多くの人に協力してもらうと良いです。

このStepでは、iOSバグらしきものにハマることがいくつかあったため、ある程度時間がかかりました。状況によるので一概には言えませんが、UIImageRenderingModeを変えると修正される事が多かったように思います。

Step.10 リリース・フィードバックを反映

いよいよリリースとなりますが、管理している色が膨大な場合は、全てダークモードにマッチしているかを確実に検証することが難いため、何箇所か対応が漏れてしまうこともあると思います。そういった状況に備え、SNSやお問い合わせ、社内からのフィードバックを素早くキャッチアップし、出来るだけ早めに修正するように心がけました。全てをすぐに対応出来ない場合もありますが、可能な限りウォッチして修正しました。

ダークモード対応で発生する問題は、クラッシュレポートが上がってこないものがほとんどだと思いますので、リリースしたからといって安心せず、なにか問題が起きる前提でスケジュールを組むことをおすすめします。

マネーフォワードでは、エンジニアを募集しています。ご応募お待ちしています。

【サイトのご案内】 ■マネーフォワード採用サイト ■Wantedly ■京都開発拠点

【プロダクトのご紹介】 ■お金の見える化サービス　『マネーフォワード ME』　iPhone,iPad　Android

■ビジネス向けバックオフィス向け業務効率化ソリューション　『マネーフォワードクラウド』

■おつり貯金アプリ　『しらたま』

■お金の悩みを無料で相談　『マネーフォワードお金の相談』

■だれでも貯まって増えるお金の体質改善サービス　『マネーフォワードおかねせんせい』

■金融商品の比較・申し込みサイト　『Money Forward Mall』

■くらしの経済メディア　『MONEY PLUS』