はじめに
デザインガイドラインのcolorについて、AppleとGoogleのガイドラインを読んでみました👀
気になったところをメモします📝 何か参考になればうれしいです。
読んだもの
Apple社が提供しているデザインガイドライン「Human Interface Guidelines」のcolor
Googleが開発したデザインシステム「Material Design 3（MD3）」のcolor
Human Interface Guidelines（color）について
システムカラー
- 様々な背景・外観モードに適した色を定義している
- アクセシビリティの設定に自動で適応する
- macOSはDefaultとVibrant（鮮やかver）が定義されている
- OSによってシステムカラーが微妙に違う
- macOSに比べて、iOS,iPadOSは暗い？
- ↓デフォルト（Light)のいくつかの例
| macOS | iOS,iPadOS |
|---|---|
 |
 |
 |
 |
ベストプラクティス
- ゲーム以外のアプリでは色を控えめにする
-
同じ色を異なる意味に使用しない
- 特にステータスなどの情報を伝える場合、一貫した色を使う
-
ライトモード・ダークモードの両方で適切に機能する
- ダークモードでは鮮やかさが増す（背景に対してコンテンツが目立つ）
- カスタムカラーを使用する場合は、両方のバリアントを指定する必要がある
-
様々な照明条件化でアプリの配色をテストする
- 屋外や薄暗い場所など
-
様々なデバイスでテストする
-
システム設定 > ディスプレイ > カラープロファイルから外観のテストができる
-
- 半透明度の要素がある場合、背景のアートワークによる影響の検討をする
- ユーザーがアプリで色を選択できる場合、システムが提供するカラーコントロールを優先する
細かいメモはこちら
Colorについて
適切に使用することで
- コミュニケーションの強化
- ブランドを想起させる
-
#55c500-> Qiitaっぽい
-
- 視覚的な連続性 -> 情報を理解しやすくなる
Inclusive color
- 区別や重要な情報を伝えるために、色だけに頼るのは避ける
- アプリ内のコンテンツを認識しにくくする色は使わない
- アイコンやテキストと背景のコントラストを十分にする
- 色覚異常の方が区別しづらい色に注意する
- 多くの色覚異常の人は青とオレンジを区別することが難しい
- その他、赤と緑、赤と黒、赤または緑と灰色は区別しにくい
| 色覚異常がない場合 | 赤緑色覚異常がある場合 |
|---|---|
 |
 |
- 使用する色が他の国や文化でどう認識されるか認識する
- ex) 赤は危険を表す文化もあれば、肯定的な意味合いを持つ文化もある
システムカラー
- アプリでシステムの色の値をハードコーディングしない
- 動的なシステムカラーのコピーは避ける
- 動的なシステムカラーの再定義は避ける
カラーマネジメント
-
一般的なカラースペース
- sRGB
- Display P3
- sRGBよりも35％大きい色空間を持つ
- sRGBより豊かな色の表現が可能で、特に緑色の表現が優秀
- 白線より左下側がsRGBで表現できる範囲
-
見え方
P3色を使用するグラデーションがsRGBだとクリップされて表示されることもある
カラープロファイル
- 色を数値表現にマッピングする数式やデータテーブルを使用して色空間内の色を記述する
- 画像にはカラープロファイルが埋め込まれていて、デバイスでは画像の色を解釈してディスプレイ上で再現している
- ワイドカラーを使用すると互換性のあるディスプレイでの視覚体験が向上する
- ワイドカラーディスプレイ
- P3カラースペースをサポート
- sRGBよりも豊かで彩度の高い色を生成
- 写真やビデオはよりリアルになる
プラットフォームの考慮事項
iOS,iPadOS対応
- iOSでは、システムとグループ化の2つの動的背景色セットが定義されている
- ラベル~第四次ラベル、プレスホルダー、セパレータ、リンクなど定義されていてUIKit APIが提供されている
macOS
- テーブルなどのコンテンツの背景色を交互に変更する、グリッドの色、ラベル、リンク、プレスホルダー、影の色、など定義されていてアプリキットAPIが定義されている
アプリのアクセントカラー
-
一般 > アクセントカラー設定で変更できる - 指定した固定色を使用するサイドバーアイコンは色が上書きされない
- ex) icloudのアイコンなど
ビジョンOS
- ガラスでは色を控えめに使用してください
- ガラスマテリアルでは人の周囲の環境が透けてみえるため、コンテンツの読みやすさに影響する
- 小さい領域・テキストに色を使用すると見にくくなる
- 高コントラストが必ず良いわけではない
- 暗い場所や暗い場所に目が慣れている場合は、視覚的な不快感を引き起こす可能性もある
- 背景も明るい場合、コンテンツも明るくすることを検討すると良い
- 暗い環境の場合は避ける
- オブジェクトが点滅したり動いたりする場合は特に避ける
ウォッチOS
- 背景色
- 既存のコンテンツのサポート
- 追加情報の提供
- 場所の感覚を確立し、重要なコンテンツを認識するのに役立つ
システムカラー
- OSによってシステムカラーが微妙に違う
- macOSに比べて、iOS,iPadOSは暗い？
- ↓デフォルト（Light)のいくつかの例
| macOS | iOS,iPadOS |
|---|---|
|
|
|
|
- macOSはDefaultとVibrant（鮮やかver）が定義されている
ref
https://developer.apple.com/design/human-interface-guidelines/accessibility#Color-and-effects
https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
Material Design 3（MD3）（Color）について
マテリアルカラーシステムにはこれが含まれる
- アクセシブルな色の組み合わせセット
- 26以上の色の役割がコンポーネントにマッピングされている
- コントラストは3段階サポートしている
- UI画面の各要素に番号がついている -> 各番号に色が割り当てられている
- ダークテーマカラー
- 静的なベースラインカラー
- 動的なダイナミックカラー
ダイナミックカラーのプロセス
ダイナミックカラーとはmobile(Android12以降)の壁紙やその他のカスタマイズ設定により、ユーザー独自の配色を生成するもの。
1. 取得した1つのソースカラーから5つのキーカラーが生成される
2. そのキーカラーを使ってトーンパレットが作成される。
3. パレットのトーンはカラーロールに割り当てられ、UIの要素に割り当てられる。
さらにそれぞれ詳しく
- ソースカラーの取得方法
- 壁紙から生成
- アプリのコンテンツから生成
- 手動で選択
- キーカラーは5つ
- 主要、二次、三次、中立①、中立②
- トーンパレットは13段階
色の役割（カラーロール）について
- 一般的なワード
- サーフェス：背景など大きいかつ強調しない時に使用される
- プライマリ、セカンダリ、ターシャリ：手前にある要素を強調する・しないためのアクセントカラー
- コンテナー：ボタンなどの手前にある要素の塗りつぶし色
- On~~：親とペアになっているテキスト・アイコンの色
- アウトラインカラー
- dividerには使用しない
- 複数の要素があるものを囲うのに使わない
- 近接する要素のボーダーに使う
- 視覚的な境界に使う
読んでみた感想
Human Interface Guidelinesでは、開発者がカラーシステムを作るときに注意する点を色々書いてくれてるのかな？という印象でした。色覚異常の方の見え方に触れていたりします。
Material Designは、Material color systemについての解説が多めな印象です。要素とカラーロールについて詳しく書いてある点はカラーシステムの設計だけでなく、UIを作る時にも参考になりそうです👀
おまけ
SmartHRさんのデザインシステム（色）も置いておきます。色の命名がかわいいです🐬
ダウンロードすれば、FigmaやKeynoteで使えます👀
まとめ
今回はcolorについて、二つのデザインシステムを読み比べてみました。
color以外の読み比べも投稿する予定です📚
最後までお読みいただき、ありがとうございます！