モバイルUIにおける色設計の基本

モバイルユーザーインターフェースにおける色は、単なる装飾ではありません。色は、ブランドの印象を作り、重要な操作を目立たせ、画面の状態を伝え、情報の優先順位を示し、ユーザーが迷わず操作できるように支援します。特にスマートフォン画面では、表示領域が小さく、ユーザーが短時間で判断する場面も多いため、色の使い方が画面理解の速度に大きく影響します。

モバイルカラーシステム（Mobile Color Systems）とは、モバイルアプリやモバイルWebの画面全体で一貫した色設計を行うための仕組みです。主要色、補助色、強調色、中立色、背景色、面色、テキスト色、意味色などを役割ごとに整理し、どの場面でどの色を使うかを定義します。色を感覚だけで選ぶのではなく、操作、状態、情報階層、ブランド、アクセシビリティの観点から体系化することで、ユーザーにとってわかりやすく、開発者にとっても保守しやすいUIを作れます。

また、モバイルUIではライトモードとダークモードの両方に対応する必要がある場面も増えています。同じブランドカラーであっても、明るい背景と暗い背景では見え方が変わります。したがって、モバイルカラーシステムは固定された色一覧ではなく、表示環境や利用状況に応じて意味と可読性を保つための設計ルールとして考える必要があります。

1. モバイルカラーシステムとは

モバイルカラーシステムを理解するには、まず「色を選ぶこと」と「色を設計すること」の違いを押さえる必要があります。単に好きな色やブランドカラーを並べるだけでは、画面全体の一貫性は生まれません。色ごとに役割を決め、どの状態で使うか、どの要素に使うか、どの背景で読めるかを整理して初めて、実用的なカラーシステムになります。

1.1. 色を役割で管理する仕組み

モバイルカラーシステムでは、色を「赤」「青」「グレー」のような見た目だけで管理するのではなく、「主要色」「エラー色」「背景色」「本文色」のような役割で管理します。たとえば、主要ボタンには主要色、入力エラーにはエラー色、カード背景には面色、補足情報には補助テキスト色を使うように定義します。

このように役割で管理すると、画面が増えても色の使い方がぶれにくくなります。新しいボタンやカードを追加するときも、「この要素にはどの役割の色を使うべきか」を判断しやすくなります。結果として、デザインの一貫性と開発時の保守性が高まります。特に複数人でプロダクトを作る場合、色の役割が曖昧だと、画面ごとに違う判断が入り、UI全体がばらつきやすくなります。

1.2. モバイルUIに特化した色設計

モバイルUIでは、画面が小さく、ユーザーが短時間で操作することが多いため、色の役割が特に重要になります。画面上に多くの情報を同時に表示できない分、色によって重要度や状態をわかりやすく伝える必要があります。大きなデスクトップ画面なら余白や配置で補える場面でも、モバイル画面では色による視線誘導がより強く働きます。

たとえば、購入ボタン、通知バッジ、入力エラー、成功メッセージ、無効状態などは、それぞれ違う意味を持ちます。これらに同じような色を使うと、ユーザーは状態を誤解しやすくなります。モバイルカラーシステムは、限られた画面内で意味を正しく伝えるための基盤です。色の整理ができていれば、ユーザーは画面を見るだけで、重要な操作、補助的な情報、注意すべき状態を直感的に理解できます。

1.3. デザインシステムとの関係

モバイルカラーシステムは、デザインシステムの一部として扱われます。デザインシステムでは、色、文字、余白、コンポーネント、アイコン、状態表現などを統一的に管理します。その中で色は、画面全体の印象と操作性を支える重要な要素です。

色の定義が曖昧なままだと、同じ種類のボタンなのに画面ごとに違う色になったり、エラー表示の色が統一されなかったりします。デザインシステムの中でカラーシステムを整備しておくと、デザイナーとエンジニアが同じルールで画面を作れるようになります。また、後からブランドカラーを変更したり、ダークモードを追加したりする場合も、色が役割で管理されていれば変更範囲を整理しやすくなります。

1.4. なぜ体系化が必要なのか

色を体系化する理由は、画面数が増えるほど色の管理が難しくなるからです。小さなプロトタイプでは感覚的に色を選んでも問題が見えにくいですが、アプリ全体、管理画面、通知、フォーム、ダークモードまで広がると、色の使い方がすぐに複雑になります。

体系化されたカラーシステムがあれば、色の追加や変更をコントロールしやすくなります。ブランド変更、ダークモード対応、アクセシビリティ改善、UIリニューアルを行う場合も、色の役割が整理されていれば修正範囲を把握しやすくなります。逆に、色が場当たり的に追加されていると、どの色を残し、どの色を統合し、どの色を置き換えるべきか判断しにくくなります。

2. なぜモバイルカラーシステムが重要なのか

モバイルカラーシステムが重要なのは、色がユーザーの判断と行動に直接影響するからです。ユーザーは画面を見た瞬間に、どこを押せばよいか、何が重要か、どの状態が危険か、どの操作が完了したかを色から読み取ります。色のルールが曖昧だと、重要なボタンが目立たなかったり、エラーと警告が区別しにくかったり、ブランドの印象が弱くなったりします。

2.1. 画面理解を速くする

色は、ユーザーが画面を理解する速度に影響します。たとえば、主要なボタンが毎回同じ色で表示されていれば、ユーザーは「この色は次に進む操作だ」と学習できます。逆に、画面ごとに主要ボタンの色が変わると、ユーザーは毎回意味を判断しなければなりません。

モバイルでは、ユーザーが長時間じっくり画面を見るとは限りません。移動中や短い待ち時間に使われることも多いため、瞬時に意味が伝わる配色が重要です。色の一貫性は、ユーザーの認知負荷を下げる役割を持ちます。画面内で色のルールが安定していると、ユーザーは細かい説明を読まなくても、何が操作可能で、何が状態表示なのかを理解しやすくなります。

2.2. 操作の優先順位を伝える

色は、操作の優先順位を伝えるためにも使われます。主要な行動喚起ボタンには目立つ色を使い、補助的な操作には控えめな色を使うことで、ユーザーは次に何をすればよいかを判断しやすくなります。

もし、すべてのボタンが同じ強さの色で表示されていると、どの操作が重要なのかわかりにくくなります。たとえば、「購入する」「キャンセル」「戻る」「詳細を見る」がすべて同じ色と同じ強さで表示されていると、ユーザーは迷いやすくなります。モバイル画面では表示領域が限られているため、操作の強弱を色で整理することが特に重要です。

2.3. 状態をわかりやすく伝える

色は、成功、警告、エラー、無効、選択中、未選択などの状態を伝えるためにも使われます。たとえば、入力欄にエラーがある場合はエラー色を使い、保存が完了した場合は成功色を使います。これにより、ユーザーは画面の状態をすぐに理解できます。

ただし、状態を色だけで伝えるのは不十分です。色覚特性のあるユーザーや、明るい屋外で画面を見るユーザーには、色の違いがわかりにくい場合があります。そのため、色に加えてテキスト、アイコン、枠線、ラベルを組み合わせる必要があります。色は状態理解を助ける手段であり、唯一の伝達手段にしてはいけません。

2.4. ブランド印象を安定させる

モバイルカラーシステムは、ブランド印象の安定にも関わります。主要色や補助色を一貫して使うことで、ユーザーはサービスらしさを感じやすくなります。ブランドカラーが画面全体に適切に反映されていれば、ロゴを見なくてもサービスの雰囲気が伝わります。

一方で、ブランドカラーを無計画に使いすぎると、画面が派手になり、操作性や可読性が下がることがあります。ブランドらしさと使いやすさを両立するためには、ブランドカラーをどの役割に割り当てるかを慎重に決める必要があります。ブランドカラーは印象を作るために重要ですが、ユーザーが読めない、押しにくい、状態を誤解するような使い方は避けるべきです。

3. 主要色の役割

主要色は、モバイルカラーシステムの中心になる色です。ブランドの印象を伝えるだけでなく、画面上の主要操作や選択状態を示すためにも使われます。主要色の扱い方が曖昧だと、画面全体の印象や操作の優先順位が崩れやすくなります。

3.1. ブランドを象徴する色

主要色は、多くの場合、ブランドを象徴する色として使われます。たとえば、アプリのロゴ、主要ボタン、アクティブ状態、選択中のタブなどに主要色を使うことで、サービスの印象を一貫して伝えられます。ユーザーがその色を見たときに、自然にサービスの世界観を思い出せるようになることが理想です。

ただし、ブランドカラーをそのまま主要色に使えるとは限りません。ロゴでは美しく見える色でも、ボタン背景として使うと文字が読みにくい場合があります。主要色として使うには、背景色やテキスト色とのコントラストを確認する必要があります。また、ライトモードとダークモードの両方で見え方を確認し、必要に応じてトーンを調整することも重要です。

3.2. 主要アクションに使う

主要色は、購入、登録、保存、次へ進む、送信するなど、画面上で最も重要な操作に使います。ユーザーに取ってほしい行動を明確に示すため、主要色は行動喚起ボタンと相性が良い色です。

ただし、主要色を複数の操作に使いすぎると、どれが本当に重要なのかわかりにくくなります。画面内で主要色を使う場所は絞り、最も重要な行動に集中させることが大切です。たとえば、フォーム画面では「送信する」ボタンに主要色を使い、「戻る」「下書き保存」「キャンセル」は中立色やアウトライン表現にすることで、操作の優先順位を明確にできます。

3.3. 選択状態を表す

主要色は、選択状態やアクティブ状態にも使えます。たとえば、現在選択中のタブ、オンになっているスイッチ、選択済みのフィルター、現在地を示すナビゲーションなどです。主要色を使うことで、ユーザーは現在の状態を把握しやすくなります。

ただし、選択状態を色だけで表すのは避けるべきです。下線、アイコン、背景、ラベルなども組み合わせることで、色の見え方に依存しない状態表現になります。特にモバイルでは、タブやナビゲーションが小さく表示されることもあるため、色だけでなく形や位置でも状態を伝えることが重要です。

3.4. 使いすぎを防ぐ

主要色は便利ですが、使いすぎると画面全体が重くなります。特に彩度の高い主要色を背景、ボタン、アイコン、見出し、バッジに多用すると、視線が分散し、ユーザーが何を優先すべきかわからなくなります。

主要色は、画面の中で最も重要な意味を持つ場所に限定して使うことが基本です。補助的な操作や装飾には、補助色や中立色を使う方が、主要色の効果を保ちやすくなります。主要色が少量で効いている画面は、見た目にも整理され、ユーザーが主要操作を見つけやすくなります。

4. 補助色の使い方

補助色は、主要色だけでは表現しきれない情報や分類を支える色です。主要色が画面の中心的な役割を持つのに対し、補助色は画面の幅を広げ、情報を整理し、ブランド表現に奥行きを与える役割を持ちます。

4.1. 主要色を支える色

補助色は、主要色を補完するために使います。たとえば、補助ボタン、カテゴリラベル、サブナビゲーション、カード内の小さなアクセントなどに使えます。主要色だけで画面を作ると単調になりやすいため、補助色によって画面に変化を作ります。

ただし、補助色が主要色より目立ちすぎると、画面の優先順位が崩れます。補助色は、主要色の存在感を邪魔しない範囲で使うことが重要です。補助色は「もう一つの主役」ではなく、主要色を支えるための色として扱うと、画面全体のバランスが整いやすくなります。

4.2. カテゴリや情報分類に使う

補助色は、情報の分類にも使えます。たとえば、学習アプリで科目ごとに色を分ける、タスク管理アプリでカテゴリ別に色を使う、グラフで複数の系列を区別するなどです。色による分類は、情報をすばやく理解する助けになります。

ただし、色だけで分類を伝えると、色の区別が難しいユーザーには情報が伝わりにくくなります。カテゴリ名、アイコン、形、ラベルも併用し、色だけに依存しない設計にすることが大切です。特にグラフやステータス表示では、色に加えてラベルを明確に表示することで、情報の誤解を防ぎやすくなります。

4.3. 画面の単調さを防ぐ

補助色は、画面の単調さを防ぐためにも使われます。中立色と主要色だけでは硬い印象になりすぎる場合、補助色を少量加えることで、画面に柔らかさや親しみやすさを出せます。特に教育、コミュニティ、ライフスタイル系のアプリでは、補助色が雰囲気作りに役立つことがあります。

ただし、見た目を華やかにする目的だけで補助色を増やすと、画面が散らかります。補助色にも明確な役割を持たせ、どの場面で使うかを決めておく必要があります。色の追加は簡単ですが、削除や整理は後から難しくなるため、最初から使う範囲を決めておくことが重要です。

4.4. 主要色との競合を避ける

補助色を選ぶときは、主要色との関係を確認します。色相が近すぎると区別しにくくなり、逆に強すぎる色を選ぶと主要色と競合します。補助色は、主要色を引き立てながら、必要な場面で情報を整理できる色であるべきです。

ブランドカラーが複数ある場合でも、すべてを同じ強さで使う必要はありません。主要色、補助色、強調色として役割を分けることで、色の意味が明確になります。補助色は、ブランドの幅を表現しながらも、操作や状態の理解を邪魔しないように設計することが大切です。

5. 強調色の活用方法

強調色は、ユーザーの注意を集めたい場面で使う色です。通知、新機能、限定情報、重要なサイン、選択中の小さな表示などに使われます。強調色は視線を引く力が強いため、使い方を間違えると画面全体のバランスを崩します。

5.1. 注意を引くために使う

強調色は、ユーザーに気づいてほしい情報を目立たせるために使います。たとえば、新着通知のバッジ、新機能のラベル、キャンペーン表示、重要な補助情報などです。少量で使うことで、画面内の視線誘導がしやすくなります。

ただし、すべてを目立たせようとすると、強調色の効果は弱まります。画面内に強調色が多いと、ユーザーはどこを見ればよいのかわからなくなります。強調色は、画面の中で本当に注目してほしい要素だけに限定することが重要です。

5.2. 行動を促す場面で使う

強調色は、行動を促す場面でも使えます。たとえば、「今だけ」「未読」「残りわずか」「おすすめ」など、ユーザーに次の行動を促す情報です。主要ボタンとは違い、強調色は補助的に視線を集める役割を持ちます。

ただし、強調色を行動喚起ボタンに使う場合は、主要色との役割が衝突しないように注意します。主要操作には主要色、限定的な注意喚起には強調色というように分けると、画面の意味が整理されます。強調色は緊急感や注目感を作るのに便利ですが、使いすぎると画面全体が広告的に見えることもあります。

5.3. 使う量を制限する

強調色は、量を制限して使うことが大切です。強い色が画面内に多すぎると、ユーザーの視線が散らばり、結果としてどの情報も目立たなくなります。特にモバイル画面では、表示領域が小さいため、強調色の使いすぎがすぐに目立ちます。

強調色は、画面ごとに使う数や場所を決めておくと管理しやすくなります。たとえば、通知バッジと限定ラベルだけに使う、警告やエラーには使わないなど、役割を明確にすることが重要です。少ない量で効果的に使う方が、強調色の価値は高まります。

5.4. 意味色との混同を避ける

強調色は、意味色と混同しないように設計する必要があります。たとえば、赤を強調色として多用すると、エラー表示との区別が難しくなります。黄色を強調色に使いすぎると、警告表示との区別が曖昧になります。

強調色は「注目させる色」であり、意味色は「状態を伝える色」です。この違いを明確にしておくと、ユーザーが画面の意味を誤解しにくくなります。強調色の役割を決めずに使うと、通知、キャンペーン、エラー、警告が同じように見えてしまうため注意が必要です。

6. 中立色の重要性

中立色は、白、黒、グレー、淡い背景色など、画面の土台を作る色です。派手ではありませんが、モバイルUIで最も多く使われる色でもあります。背景、カード、区切り線、本文、補助テキスト、無効状態など、多くの要素が中立色によって支えられます。

6.1. 画面の土台を作る

中立色は、画面全体の安定感を作ります。背景やカード、区切り線に中立色を使うことで、主要色や意味色が自然に目立つようになります。中立色が整っていないと、画面全体が落ち着かず、情報のまとまりが見えにくくなります。

モバイル画面では、背景色とカード色の差が重要です。背景と面が同化すると、どこが情報のまとまりなのかがわかりにくくなります。中立色は、画面内の階層を作るための基本色です。特に情報量が多い画面では、中立色の設計が読みやすさと整理感に直結します。

6.2. 可読性を支える

中立色は、テキストの可読性にも関係します。本文には十分な濃さのテキスト色を使い、補助テキストには少し弱い色を使うことで、情報の階層を作れます。ただし、補助テキストを薄くしすぎると読みにくくなります。

特にモバイルでは、画面の明るさや利用環境によって文字の見え方が変わります。屋外や暗い場所でも読めるように、中立色のコントラストを確認する必要があります。中立色は控えめな色ですが、控えめであることと読みにくいことは違います。情報として必要なものは、弱い色であっても十分に読める必要があります。

6.3. 状態表現に使う

中立色は、無効状態、非選択状態、区切り線、プレースホルダー、補助アイコンなどにも使われます。これらは強く目立つ必要はありませんが、見えなくなってはいけません。控えめでありながら、必要な情報として認識できる濃さが必要です。

無効状態を薄くしすぎると、ユーザーが存在に気づけなくなります。非選択状態や補助情報も、弱く見せつつ読めるバランスが重要です。状態表現に使う中立色は、通常状態、ホバー状態、押下状態、無効状態などの段階を持たせると、UIの反応がわかりやすくなります。

6.4. ダークモードの基盤になる

ダークモードでは、中立色の設計が特に重要です。背景を完全な黒にすると、面の階層やカードの境界を表現しにくい場合があります。そのため、暗いグレーを背景や面に使い、階層を自然に表現することがあります。

ダークモードでは、中立色の明度差を丁寧に設計することで、読みやすく落ち着いた画面を作れます。背景、カード、モーダル、区切り線、テキストのすべてに暗いトーンを使う場合でも、少しずつ差をつけることで画面の構造を伝えられます。中立色はダークモードの品質を左右する基盤です。

7. 背景色と面色

背景色と面色は、画面の階層を作るための基本色です。背景色は画面全体の土台になり、面色はカード、シート、ダイアログ、入力欄など、背景の上に置かれる要素に使われます。この2つを適切に分けることで、画面構造が理解しやすくなります。

7.1. 背景色の役割

背景色は、画面全体の印象を決めます。明るい背景を使うと軽く清潔な印象になり、暗い背景を使うと落ち着いた印象になります。ただし、背景色は主張しすぎず、コンテンツや操作要素を支える役割を持つべきです。

背景色が強すぎると、文字やボタンが読みにくくなります。モバイルUIでは、背景色は情報の邪魔をせず、長時間見ても疲れにくい色にすることが重要です。特に、学習アプリ、ニュースアプリ、チャットアプリのように長く閲覧される画面では、背景色の刺激が強すぎるとユーザーの負担になります。

7.2. 面色の役割

面色は、カード、ボトムシート、モーダル、入力欄、ナビゲーションバーなどに使われます。背景の上に別の面を置くことで、情報のまとまりや操作対象をわかりやすくできます。

たとえば、カード一覧では、背景色とカードの面色に少し差をつけることで、各カードが独立した情報として認識しやすくなります。フォームでは、入力欄の面色を背景と分けることで、どこに入力できるかがわかりやすくなります。面色は単なる背景違いではなく、情報のグルーピングと操作可能性を示す役割を持ちます。

7.3. 階層を表現する

背景色と面色は、画面の階層を表現するために使います。背景、カード、モーダル、下部シートがすべて同じ色だと、どの要素が前面にあるのかわかりにくくなります。色の明度差や影、枠線を組み合わせることで、階層を表現できます。

モバイル画面では、下部シートやモーダルが頻繁に使われるため、面色の階層設計が重要です。特にダークモードでは影が見えにくいため、面色の差で階層を表現する必要があります。階層がわかりやすい画面では、ユーザーは現在どの要素を操作しているのかを理解しやすくなります。

7.4. ライトモードとダークモードで調整する

背景色と面色は、ライトモードとダークモードで別々に設計する必要があります。ライトモードでは白や淡いグレーが使いやすい一方、ダークモードでは暗いグレーを段階的に使うことで、画面の奥行きを表現します。

単純にライトモードの色を反転すると、コントラストが不自然になったり、ブランドカラーが強く見えすぎたりすることがあります。表示モードごとに背景色と面色を調整することが重要です。ライトモードとダークモードで色の見た目は変わっても、背景、面、前景という役割は一貫している必要があります。

8. テキスト色の設計方法

テキスト色は、モバイルUIの可読性を左右する最も重要な要素の一つです。どれだけ美しい配色でも、文字が読みにくければ良いUIにはなりません。本文、見出し、補助テキスト、ラベル、エラー文、ボタンラベルなど、それぞれの役割に応じて色を設計する必要があります。

8.1. 主要テキスト色

主要テキスト色は、本文や見出しなど、最も重要な文字に使います。背景とのコントラストを十分に確保し、長文でも読みやすい色にする必要があります。モバイル画面では文字が小さく見えることもあるため、見た目の柔らかさだけでなく、実際に読めるかを確認することが重要です。

一般的には、ライトモードでは濃いグレーや黒に近い色、ダークモードでは白に近い明るい色を使います。ただし、完全な黒や完全な白は強すぎる場合もあるため、画面全体のトーンに合わせて調整します。読みやすさと画面の印象を両立するために、主要テキスト色は慎重に決める必要があります。

8.2. 補助テキスト色

補助テキスト色は、説明文、補足情報、日付、注釈、プレースホルダーなどに使います。主要テキストより弱く表示することで、情報の階層を作れます。ただし、薄くしすぎると読めなくなるため注意が必要です。

補助テキストは、重要度が低いからといって読めなくてよいわけではありません。フォームの説明やエラー補足など、ユーザーが操作を完了するために必要な情報もあります。控えめに見せながら、十分な可読性を保つ必要があります。特にモバイルでは、補助テキストが小さく表示されやすいため、色を弱めすぎないことが重要です。

8.3. ボタン内テキスト

ボタン内テキストは、背景色とのコントラストが特に重要です。主要色の上に白文字を置く場合、十分なコントラストがあるかを確認します。ブランドカラーによっては、白文字では読みにくい場合もあるため、文字色を調整する必要があります。

ボタンは操作対象であるため、ラベルが読めないとユーザーは不安になります。「送信」「保存」「購入する」などの行動文言は、すぐに認識できるコントラストとサイズで表示することが重要です。ボタン背景が鮮やかな色であっても、ラベルが読みにくければ操作性は下がります。

8.4. コントラスト確認

テキスト色を設計するときは、背景色とのコントラスト比を確認します。通常テキストは小さく表示されることが多いため、背景との差が十分にある必要があります。モバイルUIでは、小さい文字や屋外利用も考慮し、余裕を持ったコントラストを確保することが望ましいです。

可読性はデザインツール上だけでは判断しきれません。実機で明るさを変えたり、屋外に近い環境で確認したりすることで、実際の見え方を確認できます。数値上のコントラストが問題なくても、文字サイズやフォントの太さによって読みにくくなる場合があるため、実際の画面で確認することが大切です。

9. 意味色とは

意味色とは、画面上の状態や意味を伝えるための色です。成功、警告、エラー、情報などが代表的です。意味色が整理されていると、ユーザーは画面上で何が起きているのかをすばやく理解できます。

9.1. 状態を伝える色

意味色は、ユーザーに状態を伝えるために使います。たとえば、保存完了には成功色、入力確認には警告色、入力ミスにはエラー色、補足案内には情報色を使います。状態ごとに色を分けることで、画面の意味がわかりやすくなります。

状態表示は、特にフォームや決済、設定変更などで重要です。ユーザーが操作の結果を理解できなければ、不安や誤操作につながります。意味色が正しく使われていれば、ユーザーは長い説明を読まなくても、画面の状態をある程度理解できます。

9.2. ブランドカラーと分ける

意味色は、ブランドカラーとは別に管理する必要があります。ブランドカラーが赤や緑の場合、エラー色や成功色と混同する可能性があります。その場合は、ブランド表現と状態表現の役割を明確に分ける必要があります。

たとえば、ブランドカラーが赤でも、エラー表示には別の赤系トーンを使い、アイコンや文言も合わせて表示することで区別しやすくなります。意味色は、ブランドよりも状態理解を優先して設計します。ブランドらしさを守るために状態がわかりにくくなると、ユーザー体験は悪化します。

9.3. 色だけに依存しない

意味色を使うときは、色だけで意味を伝えないことが重要です。エラーを赤だけで示す、成功を緑だけで示す、警告を黄色だけで示すと、ユーザーによっては意味を読み取れない場合があります。

色に加えて、テキスト、アイコン、ラベル、枠線、説明文を組み合わせることで、より確実に状態を伝えられます。これはアクセシビリティの観点でも重要です。特にエラーや警告のようにユーザーの行動修正が必要な状態では、色だけでなく具体的な説明が必要です。

9.4. 一貫して使う

意味色は、画面全体で一貫して使う必要があります。ある画面では赤がエラー、別の画面では赤がキャンペーン表示として使われると、ユーザーは混乱します。色の意味は、サービス全体で統一することが重要です。

意味色の使い方をデザインシステムに定義しておくと、新しい画面やコンポーネントを作るときも判断しやすくなります。意味色はユーザーの安全な操作に関わるため、装飾色よりも厳密に管理する必要があります。

10. 成功色・警告色・エラー色

成功色、警告色、エラー色は、意味色の中でも特に重要です。これらは、ユーザーの操作結果や注意すべき状態を伝えるために使われます。各色の意味が明確であれば、ユーザーは画面の状態をすばやく判断できます。

10.1. 成功色は完了と安心を伝える

成功色は、処理が正常に完了したことを伝える色です。保存完了、登録完了、支払い完了、承認完了などの場面で使います。成功色は、ユーザーに安心感を与える役割を持ちます。

ただし、成功色を強く目立たせすぎる必要はありません。成功状態は、ユーザーを安心させる情報であり、警告やエラーのように強く注意を引くものではないからです。落ち着いた緑系や成功を示すアイコン、短いメッセージを組み合わせると自然です。成功表示は、ユーザーが次の行動へスムーズに進めるように、過剰に画面を止めない形で使うとよいです。

10.2. 警告色は注意と確認を促す

警告色は、まだ失敗ではないが注意が必要な状態に使います。たとえば、期限が近い、入力内容の確認が必要、操作にリスクがある、容量が少なくなっているといった場面です。警告色は、ユーザーに「このまま進む前に確認してほしい」と伝える役割を持ちます。

警告色は、エラー色と混同しないようにする必要があります。警告は「確認してほしい状態」であり、エラーは「修正が必要な状態」です。色だけでなく、文言でも違いを明確にします。警告色を多用しすぎると、ユーザーが常に不安を感じる画面になるため、必要な場面に絞って使うことが重要です。

10.3. エラー色は修正が必要な状態を示す

エラー色は、入力ミス、通信失敗、処理失敗、危険操作など、ユーザーの対応が必要な場面に使います。エラー色は強い意味を持つため、使う場面を限定する必要があります。赤系の色がよく使われますが、ブランドカラーや背景色との関係によって調整が必要です。

エラー表示では、色だけでなく、何が問題で、どう直せばよいかを説明することが重要です。たとえば、「入力内容に誤りがあります」だけではなく、「メールアドレスの形式を確認してください」のように具体的に伝える方が親切です。エラー色はユーザーを責めるための色ではなく、修正を助けるための色として使うべきです。

10.4. 情報色は補足と案内を伝える

情報色は、エラーや警告ではなく、補足案内やヒントを伝えるために使います。たとえば、新機能のお知らせ、入力のヒント、設定変更の説明、システムからの軽い通知などです。情報色は、ユーザーを止める色ではなく、理解を助ける色です。

情報色が強すぎると、主要操作や警告より目立ってしまう場合があります。控えめで読みやすく、必要な場面で自然に目に入る色にすることが重要です。情報色は、画面全体の流れを邪魔せず、ユーザーが必要な補足を受け取れるように使います。

11. 色の階層の考え方

色の階層とは、色の強さや使い方によって情報の優先順位を表す考え方です。画面内には、最も重要な操作、補助的な操作、通常の情報、補足情報、無効状態などがあります。これらをすべて同じ強さで表現すると、ユーザーはどこを見ればよいのかわかりにくくなります。

11.1. 重要度を色で表す

色の階層では、重要な要素ほど目立つ色を使い、補助的な要素ほど控えめな色を使います。主要ボタンには主要色、補助ボタンには中立色やアウトライン、補足情報には弱いテキスト色を使うと、自然な優先順位が生まれます。

ただし、色だけで重要度を表すのではなく、サイズ、位置、余白、文字の太さも合わせて調整します。色は階層を作るための一要素として使うべきです。色だけに頼ると、画面が派手になりすぎたり、アクセシビリティ上の問題が起きたりします。

11.2. 背景と前景を分ける

色の階層では、背景と前景を明確に分けることも重要です。背景色は控えめにし、操作要素や重要な情報が前面に見えるようにします。背景が強すぎると、テキストやボタンが埋もれます。

モバイル画面では、背景、カード、ボタン、テキストが近い距離で並ぶため、色の階層が曖昧だと画面が読みにくくなります。背景は支える色、前景は意味を伝える色として整理します。背景と前景の関係が明確な画面は、ユーザーが視線を動かしやすく、操作対象も見つけやすくなります。

11.3. 操作階層を作る

操作階層とは、主要操作、補助操作、危険操作を分けることです。たとえば、主要操作は塗りつぶしボタン、補助操作はアウトラインボタン、危険操作はエラー色のテキストボタンにするなど、見た目で役割を分けます。

このように操作階層を作ると、ユーザーは迷わず行動しやすくなります。特にモバイルでは画面が狭いため、ボタンの色と形で操作の意味をすばやく伝えることが重要です。操作階層が整理されていないと、ユーザーは「どのボタンを押すべきか」を毎回考える必要があります。

11.4. 装飾より意味を優先する

色の階層を考えるときは、装飾より意味を優先します。見た目を華やかにするためだけに色を増やすと、階層が崩れます。色は、ユーザーが情報を理解し、操作を判断するために使うべきです。

装飾目的の色を使う場合でも、主要色や意味色と衝突しないように管理する必要があります。色の役割が整理されていれば、見た目の美しさと使いやすさを両立できます。モバイルUIにおいて色の美しさは重要ですが、それ以上に重要なのは、ユーザーが意味を正しく理解できることです。

12. コントラスト比と可読性

コントラスト比は、文字や操作要素の読みやすさを判断する重要な基準です。モバイル画面は、屋外、暗所、低輝度設定、古い端末など、さまざまな条件で見られます。そのため、デザインツール上で読めるだけでは不十分で、実際の利用環境でも読める配色が必要です。

12.1. コントラスト比の基本

コントラスト比とは、前景色と背景色の明るさの差を数値化したものです。文字色と背景色の差が小さいと、テキストが背景に溶け込み、読みにくくなります。特に補助テキストや小さなラベルでは、コントラスト不足が起こりやすくなります。

モバイルUIでは、最低基準を満たすだけでなく、実機で読みやすいかを確認することが重要です。数字上では問題なくても、フォントが細い、文字が小さい、背景にグラデーションがあるなどの条件によって、実際には読みにくくなることがあります。

12.2. 小さい文字ほど注意する

モバイルUIでは、小さな文字が多く使われます。フォームラベル、補助説明、日付、エラーメッセージ、ナビゲーションラベルなどです。小さい文字は、少しコントラストが低いだけでも読みにくくなります。

そのため、小さい文字には十分な濃さのテキスト色を使う必要があります。補助情報だからといって薄くしすぎると、ユーザーが必要な情報を読み取れません。特にフォームでは、補助説明やエラーメッセージが読めないと、ユーザーが入力を完了できなくなる可能性があります。

12.3. ブランドカラー上の文字に注意する

ブランドカラーをボタン背景に使う場合、上に載せる文字色とのコントラストを確認する必要があります。たとえば、明るい黄色や淡い水色の上に白文字を置くと、見た目はきれいでも読みにくい場合があります。

ブランドカラーをUIに使うときは、必要に応じて色を濃くしたり、文字色を黒系に変えたりする判断が必要です。ブランドの印象よりも、ユーザーが読めて操作できることを優先します。ブランドカラーは大切ですが、操作ボタンのラベルが読めなければ、UIとしての役割を果たせません。

12.4. 実機で確認する

コントラストは、デザインツールや数値だけでなく、実機で確認することが重要です。スマートフォンの画面設定、明るさ、周囲の光、表示モードによって、色の見え方は変わります。

特にモバイルアプリやモバイルWebでは、屋外利用や暗い場所での利用も想定する必要があります。実機確認によって、数値上は問題なくても実際には読みにくい配色を発見できます。複数の端末、ライトモード、ダークモード、明るさ設定を変えて確認することで、より安定した色設計になります。

13. アクセシビリティを考慮した配色

アクセシビリティを考慮した配色とは、できるだけ多くのユーザーが情報を読み取り、状態を理解し、操作できるように色を設計することです。視力、色覚特性、利用環境、年齢、端末の明るさなどによって、色の見え方は変わります。

13.1. 色だけで意味を伝えない

アクセシブルな配色では、色だけで意味を伝えないことが基本です。たとえば、エラーを赤だけで示すのではなく、エラーメッセージ、アイコン、枠線、説明文を組み合わせます。成功状態も、緑色だけではなく「保存しました」と表示します。

色だけに依存すると、色の違いがわかりにくいユーザーに情報が伝わらない可能性があります。色は意味を補強する手段であり、唯一の情報手段にしないことが重要です。これは、モバイルUIだけでなく、あらゆるデジタルインターフェースにおける基本です。

13.2. 色覚特性を考慮する

色覚特性のあるユーザーには、赤と緑などの組み合わせが区別しにくい場合があります。そのため、成功色とエラー色を緑と赤だけで表現するのではなく、アイコンや文言も合わせて使います。

また、グラフやカテゴリ表示でも、色だけで系列を区別するのは避けるべきです。凡例、ラベル、線の種類、パターンなどを組み合わせることで、より多くのユーザーに情報が伝わります。色覚特性への配慮は、特別な対応ではなく、情報を正確に伝えるための基本設計です。

13.3. コントラストを十分に確保する

アクセシビリティでは、コントラストの確保が重要です。文字と背景、ボタンと背景、入力欄と背景、エラー枠線と背景など、さまざまな組み合わせを確認します。本文だけでなく、フォームラベルや補助テキストも対象にする必要があります。

コントラスト不足は、見た目ではおしゃれに見えても、ユーザーにとっては大きな障害になります。特にモバイル画面では、小さい文字や細い線が読みにくくなりやすいため注意が必要です。色の美しさと読みやすさが衝突する場合は、読みやすさを優先するべきです。

13.4. ユーザー設定に対応する

アクセシビリティを高めるには、ユーザーの表示設定にも配慮する必要があります。ダークモード、高コントラスト設定、文字サイズ変更、視差効果の軽減など、ユーザーが端末側で設定している環境に合わせてUIが崩れないようにします。

モバイルカラーシステムでは、固定された色だけでなく、ユーザー環境に応じた適応も考える必要があります。ユーザーが文字サイズを大きくした場合、色の階層やボタンの可読性が保たれているかも確認する必要があります。アクセシビリティは色単体ではなく、UI全体の柔軟性と関係します。

14. ダークモードに対応する方法

ダークモードは、暗い背景を基調にした表示モードです。低照度環境での見やすさや、ユーザーの好みに対応するために、多くのモバイルアプリやWebサービスで採用されています。ダークモード対応では、ライトモードの色を単純に反転するのではなく、専用の色設計を行う必要があります。

14.1. ライトモードは明るい背景を基準にする

ライトモードでは、白や淡いグレーの背景を基準にして画面を設計することが多くなります。本文には濃いテキスト色を使い、カードや面には白または淡い色を使います。影や薄い境界線によって階層を表現しやすい点も、ライトモードの特徴です。

ただし、ライトモードでは明るさが強すぎると、画面がまぶしく感じられることがあります。特に長時間利用されるアプリでは、背景を完全な白にするのではなく、少し柔らかい中立色を使うこともあります。ライトモードでも、読みやすさと目の負担のバランスを考える必要があります。

14.2. ダークモードは暗い背景を基準にする

ダークモードでは、暗い背景を基準にして画面を設計します。テキストは明るい色にし、カードや面は背景より少し明るい暗色にすることで、階層を表現します。暗い背景では、色の彩度や明度がライトモードとは違って見えるため、専用の調整が必要です。

ダークモードは、単に黒い画面を作ることではありません。背景、面、テキスト、ボタン、意味色が自然に読めるように調整する必要があります。特に、強い原色を暗い背景の上に置くと刺激が強く見えることがあるため、彩度を抑える判断も必要です。

14.3. 単純反転を避ける

ダークモード対応でよくある失敗は、ライトモードの色を単純に反転することです。単純反転では、ブランドカラーが不自然になったり、意味色が強すぎたり、背景と面の階層が崩れたりします。

ダークモードでは、背景色、面色、テキスト色、主要色、意味色をそれぞれ再設計する必要があります。ライトモードと同じ印象を保ちながら、暗い背景でも読みやすい配色に調整します。見た目を反転するのではなく、役割を保ったまま色を再構成することが重要です。

14.4. 両モードで意味を保つ

ダークモードでも、色の意味はライトモードと同じである必要があります。主要色は主要操作、成功色は完了、警告色は注意、エラー色は修正必須という意味を保ちます。表示モードによって意味が変わると、ユーザーは混乱します。

色の見た目はモードごとに調整しても、役割は一貫させることが重要です。これにより、ユーザーはライトモードでもダークモードでも同じ感覚で操作できます。特に長期利用されるアプリでは、ユーザーがどちらのモードでも迷わないように、色の意味を安定させる必要があります。

15. ブランドカラーとの関係

ブランドカラーは、サービスや企業の印象を作る重要な色です。モバイルカラーシステムでは、ブランドカラーを主要色として使うことが多く、ロゴ、主要ボタン、ナビゲーション、選択状態などに反映されます。ただし、ブランドカラーとUIカラーは完全に同じものではありません。

15.1. ブランド印象を作る

ブランドカラーは、ユーザーがサービスを認識するための重要な要素です。同じ色が画面全体で一貫して使われることで、ユーザーはブランドらしさを感じやすくなります。特にモバイルアプリでは、アイコン、起動画面、主要ボタン、ナビゲーションなどにブランドカラーが反映されます。

ただし、ブランドカラーを使う場所は絞る必要があります。すべての要素にブランドカラーを使うと、画面が単調になり、重要な操作が目立たなくなる場合があります。ブランドカラーは、印象を作るために使いながら、操作性を邪魔しないように配置することが重要です。

15.2. UIで使える形に調整する

ブランドカラーは、ロゴや広告では成立しても、UI上では調整が必要な場合があります。たとえば、彩度が高すぎる色は長時間見ると疲れやすく、明度が低すぎる色はダークモードで埋もれやすくなります。

UIで使うブランドカラーは、ボタン背景、テキスト、アイコン、選択状態など、実際の使用場面で確認する必要があります。必要に応じて、ブランドカラーのトーンを分けて使います。ブランドの原色、ボタン用の濃い色、背景用の淡い色、ダークモード用の調整色のように、用途ごとに派生色を用意すると運用しやすくなります。

15.3. 意味色との衝突を避ける

ブランドカラーが赤、黄色、緑などの場合、意味色と衝突する可能性があります。赤はエラー、黄色は警告、緑は成功として使われることが多いため、ブランドカラーとして多用すると状態表示がわかりにくくなる場合があります。

この場合は、ブランドカラーの使用範囲を限定し、意味色には別のトーンや補助表現を使います。ブランド表現と状態理解が衝突した場合は、ユーザーが意味を誤解しないことを優先します。ブランドカラーは重要ですが、エラーや警告のような安全に関わる表示では、状態の明確さを優先すべきです。

15.4. ブランドとアクセシビリティを両立する

ブランドカラーを使う場合でも、アクセシビリティ基準を満たす必要があります。ブランドらしさを守るために読みにくい文字色を使うと、ユーザー体験が悪化します。特にボタン内テキストやフォームラベルでは、可読性を優先する必要があります。

ブランドとアクセシビリティは対立するものではありません。ブランドカラーを適切に調整し、役割ごとに整理することで、ブランドらしさと使いやすさを両立できます。良いカラーシステムは、ブランドの印象を守りながら、すべてのユーザーが読めて操作できる状態を作ります。

16. よくある失敗

モバイルカラーシステムでは、色の使い方を誤ると、画面全体のわかりやすさが大きく下がります。特に、色を増やしすぎる、コントラストを確認しない、色だけで意味を伝える、ダークモードを後回しにするなどはよくある失敗です。

16.1. 色を増やしすぎる

色を増やしすぎると、画面の統一感がなくなります。画面ごとに新しい色を追加すると、ユーザーはどの色が何を意味するのか学習できません。色が多いほど表現力が増えるように見えますが、実際には判断の負担が増えます。

色を追加する前に、既存の色で表現できないかを確認します。主要色、補助色、強調色、意味色、中立色の役割が明確であれば、少ない色でも十分に表現できます。色の数を抑えることで、ブランド印象も安定し、ユーザーが画面の意味を理解しやすくなります。

16.2. コントラストを確認しない

コントラストを確認しないと、見た目はきれいでも読みにくい画面になります。薄いグレーのテキスト、淡い背景のボタン、彩度の高い背景に白文字などは、モバイル画面では特に読みにくくなることがあります。

コントラストチェックを行い、文字と背景の組み合わせを確認する必要があります。特に小さい文字、補助テキスト、ボタンラベル、エラー文は注意が必要です。デザイン上は繊細に見える色でも、ユーザーが読めなければ実用的なUIとは言えません。

16.3. 色だけで状態を伝える

色だけで状態を伝えると、ユーザーによっては意味を理解できません。エラーを赤だけで示す、成功を緑だけで示す、選択状態を色差だけで示すと、色の違いがわかりにくい環境では問題になります。

状態を伝えるときは、色に加えてアイコン、テキスト、枠線、ラベルを使います。これにより、色に頼らなくても意味が伝わる画面になります。特にエラーや警告は、ユーザーに行動を求める情報なので、色だけではなく具体的な説明を添える必要があります。

16.4. ダークモードを後回しにする

ダークモードを後から追加すると、既存の色がうまく適応せず、修正が大きくなることがあります。ライトモードでしか確認していない色は、ダークモードでは強すぎたり、読みにくかったりする場合があります。

最初からライトモードとダークモードをセットで設計しておくと、色の役割を保ったまま表示モードに対応しやすくなります。モバイルUIでは、表示モードごとの確認が欠かせません。特に長時間利用されるアプリでは、ダークモード対応を後回しにすると、後から全体の色設計を見直す必要が出ることがあります。

17. モバイルカラーシステムのベストプラクティス

モバイルカラーシステムを設計するときは、色を役割として定義し、使う範囲を明確にすることが重要です。見た目の好みだけで色を選ぶのではなく、操作、状態、可読性、ブランド、アクセシビリティ、ダークモードまで含めて設計します。

17.1. 主要色を定義する

まず、サービスの中心となる主要色を定義します。主要色は、主要ボタン、アクティブ状態、選択状態、ブランドを強く示す要素に使います。主要色が明確であれば、ユーザーは画面内の重要な操作を見つけやすくなります。

主要色は、ブランドカラーをそのまま使う場合もありますが、UI上で読めるか、押しやすいか、ダークモードでも自然に見えるかを確認する必要があります。主要色は画面の印象を大きく左右するため、慎重に決めるべきです。

17.2. 補助色と強調色を分ける

補助色と強調色は、役割を分けて管理します。補助色は主要色を支えるための色であり、カテゴリや補助的なUIに使います。強調色はユーザーの注意を引くための色であり、通知や限定情報などに使います。

この2つを混同すると、画面内の意味が曖昧になります。補助色は画面の表現を広げる色、強調色は視線を集める色として整理すると、使い方を判断しやすくなります。

17.3. 中立色を細かく整理する

中立色は、背景、面、枠線、補助テキスト、無効状態などに使われるため、細かく整理する必要があります。白、黒、グレーだけでなく、背景用、カード用、区切り線用、補助テキスト用など、役割ごとに段階を作ります。

中立色が整理されていると、画面全体が落ち着き、主要色や意味色が自然に目立ちます。逆に中立色が曖昧だと、カードの境界が見えにくい、補助テキストが読めない、無効状態がわかりにくいといった問題が起こります。

17.4. 意味色を明確に定義する

成功、警告、エラー、情報の色は、明確に定義します。それぞれの色が何を意味するのか、どの場面で使うのか、どのような文言やアイコンと組み合わせるのかを決めておきます。

意味色は、ユーザーの判断に関わる重要な色です。使い方が画面ごとに異なると、ユーザーは状態を誤解する可能性があります。意味色は装飾色ではなく、状態伝達のための色として扱う必要があります。

17.5. コントラストを必ず確認する

文字と背景、ボタンとラベル、エラー枠線と背景など、主要な組み合わせはコントラストを確認します。特にモバイル画面では、屋外や暗い場所でも読めるかを確認することが重要です。

コントラスト確認は、最終段階だけでなく、色を定義する段階から行うべきです。後からコントラスト不足が見つかると、主要色やテキスト色を大きく調整する必要が出る場合があります。

17.6. 色だけに依存しない

状態や意味を伝えるときは、色だけに依存しないようにします。エラーにはエラーメッセージ、警告には説明文、成功には完了メッセージ、選択状態にはアイコンや下線を組み合わせます。

色だけに依存しない設計は、アクセシビリティだけでなく、一般的な使いやすさにもつながります。ユーザーが暗い場所で見ている場合や、画面の明るさが低い場合でも、色以外の情報があれば意味を理解しやすくなります。

17.7. ダークモードを同時に設計する

ライトモードとダークモードは、最初からセットで設計することが望ましいです。後から対応すると、背景、面色、テキスト色、ブランドカラー、意味色の調整が大きくなります。

両方の表示モードで、同じ色の役割が保たれているかを確認します。見た目は変わっても、主要操作やエラー状態の意味は変わらないようにすることが重要です。特にブランドカラーは、ダークモードでは彩度や明度を調整する必要がある場合があります。

17.8. 実機と実環境で確認する

色は、デザインツール上だけで判断してはいけません。実際のスマートフォン、画面の明るさ、屋外、暗所、ライトモード、ダークモードで見え方を確認します。特にモバイルUIでは、利用環境によって色の見え方が大きく変わります。

実機確認を行うことで、コントラスト不足、彩度の強すぎる色、読みにくい補助テキスト、ダークモードでの面色不足などを発見できます。カラーシステムは、デザインデータ上で完成するものではなく、実際の画面で使えることを確認して初めて完成します。

18. モバイルカラーシステムの今後

モバイルカラーシステムは、今後さらに動的で文脈に応じたものになっていくと考えられます。固定されたカラーパレットだけでなく、ユーザー設定、表示環境、ブランド文脈、アクセシビリティ要件に応じて色を調整する考え方が重要になります。

18.1. 動的カラーの普及

今後は、ユーザーの壁紙やブランドカラー、システム設定に応じて色が変化する動的カラーがさらに普及する可能性があります。ユーザーごとに画面の印象が変わる一方で、操作の意味や状態表示の一貫性は保つ必要があります。

動的カラーでは、色が変わってもUIの意味が崩れないようにすることが重要です。主要色、背景色、意味色の役割を保ちながら、ユーザーごとの見た目に適応する設計が求められます。見た目の個性と操作の一貫性を両立することが、今後のカラーシステムの課題になります。

18.2. 人工知能による色設計支援

人工知能は、今後の色設計を支援する可能性があります。ブランドカラーからアクセシブルなパレットを生成したり、コントラスト不足を検出したり、ダークモード向けの色を提案したりすることができます。

ただし、人工知能が提案した色をそのまま使うのは危険です。実際のユーザー体験、ブランド文脈、アクセシビリティ基準、実機での見え方を人間が確認する必要があります。人工知能は色設計を効率化できますが、最終的な判断にはユーザー理解とデザイン意図が必要です。

18.3. 環境に応じた色調整

モバイル端末は、屋外、暗い場所、高輝度画面、低輝度設定など、さまざまな環境で使われます。今後は、利用環境に応じて色やコントラストを調整する考え方がさらに重要になるでしょう。

たとえば、明るい屋外ではコントラストを強め、暗い場所ではまぶしさを抑えるような調整が考えられます。固定された色だけでなく、環境に応じて読みやすさを保つ設計が求められます。モバイルUIは、常に同じ条件で見られるわけではないため、環境への適応は今後ますます重要になります。

18.4. アクセシビリティ中心の色設計

今後のモバイルカラーシステムでは、アクセシビリティがさらに中心的なテーマになります。美しい配色だけでなく、誰でも読める、区別できる、操作できる配色が求められます。

コントラスト、色覚対応、ダークモード、ユーザー設定、状態表現を統合して考えることで、より多くのユーザーにとって使いやすいモバイルUIを作ることができます。アクセシビリティ中心の色設計は、特別な対応ではなく、今後の標準的なUI品質として扱われるようになるでしょう。

おわりに

モバイルカラーシステムとは、モバイルユーザーインターフェースで使う色を役割ごとに整理し、一貫して運用するための設計ルールです。主要色、補助色、強調色、中立色、背景色、面色、テキスト色、意味色を明確にすることで、ユーザーは画面の意味や操作の優先順位を理解しやすくなります。

特にモバイル画面では、表示領域が狭く、利用環境も多様です。そのため、コントラスト比、可読性、アクセシビリティ、ダークモード対応、実機確認が欠かせません。色は見た目を整えるためだけのものではなく、情報を伝え、状態を示し、操作を支援するための重要な設計要素です。

良いモバイルカラーシステムは、色数を増やすことではなく、色の役割を明確にすることから生まれます。ブランドカラーを活かしながら、主要操作、補助操作、状態表示、背景、テキスト、ダークモードを一貫して設計することで、見やすく、使いやすく、長期的に保守しやすいモバイルUIを作ることができます。