エクストーンデザイナーチームのジョです。
UIデザインをする時に、案件によってはダークモードの対応が必要になることがあります。
しかし、全てのページに対してダークモードの色を指定または修正しようとすると、とても大変な作業になってしまいます。
何度かダークモード対応をするなかで、気にした方が良いポイントがわかってきたので紹介します。
実装しやすいダークモードのデザインデータを作るためには
ダークモード対応で一番重要なポイントは、ライトモードとダークモードの色を指定する時に、色の数と名前を完全に一致させることです。
開発者が実装する時に、同じ名前でライトモードとダークモードの色を紐つけておくと、簡単に画面の切り替えができます。
Figma上でもプラグインを使うと、ライトモードとダークモードを簡単に切り替えられます。
開発者とデザイナーで共通認識を持つことで、効率よく作業ができてミスも少なくなります。
ダークモードの作成に役立つプラグイン
Figmaプラグインの「Dark Mode Switcher」を使えば、簡単にダークモードの画面が作れます。
ライブラリでライトモードとダークモードの色の名前や数を一致しておくと、ボタン１つで簡単に切り替えることができて便利です。
色を定義する際に注意すべきポイントは？
ライトモードでは問題なく視認できる配色のバランスでも、ダークモードでは視認性が低下する場合があります。
例えば、ライトモードではテキストの色とボーダーの色が同じでも問題なかったのに、ダークモードでも同じにした場合に視認性が悪く感じられるといった場合があります。
この場合は、ダークモードにおけるテキストカラーかボーダーカラーを別の色に変更する必要があるでしょう。
テキストカラーとボーダーカラーが同一色だからといって、ライブラリの定義をひとつにまとめず、機能別に定義することで、変更がしやすく柔軟性の高いデータをつくることができます。
devモードとローカルバリアブルでさらに便利に
2023年6月にFigmaの大型アップデートがあり、devモードやローカルバリアブルといった強力な機能が追加されました。
特にローカルバリアブルはダークモード対応にも便利です。先述の「Dark Mode Switcher」のような色の切り替えもでき、開発者も確認しやすい色定義を作ることが可能です。
細かな条件付きの色指定も可能なので、これからはプラグインよりもローカルバリアブルを使う機会が増えそうです。
ローカルバリアブルの活用については別の記事で取り上げる予定です。
おわりに
以上、ダークモード画面の作成方法についての紹介でした。
デザインデータの作り方は、人それぞれ方法があると思います。大切なのは、より効率的で実装しやすい、管理しやすいデータを作ることだと考えています。
今後もデザイン作業についてより良い方法があったら引き続き紹介していきたいと思います。
