ダークモード対応時に色の命名規則を決めてみた

私はRadiotalkというラジオ配信サービスのアプリ開発インターンをしています。
本記事では、iOSダークモード対応をする際に、Colorの命名規則を決めたことについてご紹介します。
今回決めた命名規則は課題も残っているため、参考程度に目を通していただければと思います。

ダークモードとは何か

公式ドキュメントを基に説明します。

Dark Mode - Visual Design - iOS - Human Interface Guidelines - Apple Developer

ダークモードとは、黒を基調とした画面モードのことです。
ユーザーはダークモードに設定することで、システム全体の外観を黒基調の配色に切り替えることができます。
ダークモードに切り替えることで、ユーザがよりコンテンツに集中しやすくなるという利点があります。

従来のRadiotalkの色の規則

Radiotalkで使用する色について

Natural colors

現在、Radiotalkで定義されている色（Natural colors）は以下の通りです。

さらに、上記の緑枠で囲まれているBase colorやAccent colorが存在します。

• Base color

• Radiotalkのベース色

• 例）背景→Navy、テキスト→White

• Accent color

  • 全体的に少ない使用量で、強調させる色
  • 例）Yellow、Orange、Red

Surface color

Natural colorsとは別にSurface Colorがあり、以下の意味を持ちます。

• 数字は白の透明度を表す割合
• 他のコンポーネントに重ねて使用

階層

Radiotalkでは、色の明度差を階層と呼んでいます。
背景やテキストなどに、階層が存在します。

例を挙げると、背景はRadio_Navyの３つの階層を使用します。

ダークモード対応時に発生しうる課題

従来では、以下のような命名規則でした。

• Radiotalk ＋ [ 色の名前 ]
  • RadiotalkNavy
  • RadiotalkOrange
  • RadiotalkYellow
  • RadiotalkNavyWhite

このような色の定義でダークモード対応を行った場合、次のことが起こります。

①②のような色をベースとした命名規則では、以下の課題が発生します。

• 色の理解がしづらく、名前だけで判断できない
• 新しく色を追加しづらい
• ダークモードの色の考慮が必要

解決策

従来の命名規則では、色の名前のみを定義していたため、上記の課題が発生しました。

そこで、色の整理を行い、以下の流れで命名規則の検討を行いました。

これらを踏まえて、以下の命名規則にしました。

[ コンポーネント名 ] ＋ [ 色の名前 ] ＋ Color

• 背景，ボタンなど各コンポーネントに使用する色として定義
• ベースカラーは色の名前を省略
• 階層が存在する場合、Primary、Secondary、Tertiaryを[ 色の名前 ]の前に追加

[ 汎用名 ] ＋ [ 色の名前 ] ＋ Color

• AccentやErrorは少ない使用量で、強調させるコンポーネントに使用する色
• Surfaceは白の透明度を表す
• 例）Surface5の場合、白の透明度5%

[ 汎用名 ]を追加する理由は、1つの色に対してボタンやCellなどの小エリアといった複数のコンポーネントに使用する場合があるからです。

全てのコンポーネントに名前をつけて色の定義する必要がありません。

[ 色の名前 ]の補足

名前が区別しやすくなり、名前の冗長化を防ぐといった利点から、以下の条件を加えました。

• コンポーネントに対して、1色のみ使用 → 色の名前を省略

例) ActiveButtonの場合、Surface colorの40%の1色
    - ActiveButtonColor

• コンポーネントに対して、2色以上使用 → 色の名前

例) Iconの場合、WhiteとNavyの2色
    - IconWhiteColor
    - IconNavyColor

実際に当てはめてみた

次に、以下のRadiotalkのトーク詳細画面を用いて説明します。

[ コンポーネント名 ] ＋ [ 色の名前 ] ＋ Color

• TextPrimaryColor

ベースとなるテキスト用の色です。
階層が一つ下のテキストの場合はTextSecondaryColorです。

命名規則に当てはめると以下の通りです。
- [ コンポーネント名 ] → Text
- [ 色の名前 ] ＋ Color → ([ 色の名前 ]は省略) PrimaryColor

• BackgroundPrimaryColor

ベースとなる背景色です。
階層によって、SecondaryやTertiaryも使用します。

命名規則に当てはめると以下の通りです。
- [ コンポーネント名 ] → Background
- [ 色の名前 ] ＋ Color → ([ 色の名前 ]は省略) PrimaryColor

• ActiveButtonColor

フォロー中のボタンの色です。

命名規則に当てはめると以下の通りです。
- [ コンポーネント名 ] → ActiveButton
- [ 色の名前 ] ＋ Color → ([ 色の名前 ]は省略) Color

• IconWhiteColor

白いアイコン用の色です。

命名規則に当てはめると以下の通りです。
- [ コンポーネント名 ] → Icon
- [ 色の名前 ] ＋ Color → WhiteColor

[ 汎用名 ] ＋ [ 色の名前 ] ＋ Color

• AccentYellowColor

強調させるコンポーネントに使用する色です。
ボタンやスライダーなどの小エリアに使用します。

命名規則に当てはめると以下の通りです。
- [ 汎用名 ] → Accent
- [ 色の名前 ] ＋ Color → YellowColor

• Surface12Color

白の透明度12％の色です。

命名規則に当てはめると以下の通りです。
- [ 汎用名 ] → Surface12
- [ 色の名前 ] ＋ Color → ([ 色の名前 ]は省略) Color

ダークモード対応後

解消前

以下①②のように色の名前のみで定義した規則でした。

解消後

上記により、同じNavyであってもどこに使う色かという情報が明確になりました。
さらに、別のNavyが追加されても規則に沿って追加しやすくなりました。

実装の具体例

トーク詳細画面をダークモード対応した結果が以下の通りです。

まとめ

本記事では、ダークモード対応をする際に、コンポーネントベースな色の命名規則で対応する過程をご紹介しました。
ダークモードに取り掛かる予定の方、もしくは、命名規則の考え方において少しでも参考になれば幸いです。

また、Radiotalkは1タップで簡単にラジオ収録することができるサービスです。
ぜひ、ダウンロードしてみてください！
https://radiotalk.jp/