AppleとGoogleのデザインガイドラインを読み比べてみた（color編）

## はじめに
デザインガイドラインのcolorについて、AppleとGoogleのガイドラインを読んでみました👀
気になったところをメモします📝 何か参考になればうれしいです。


## 読んだもの
Apple社が提供しているデザインガイドライン「Human Interface Guidelines」のcolor

https://developer.apple.com/design/human-interface-guidelines/color


Googleが開発したデザインシステム「Material Design 3（MD3）」のcolor

https://m3.material.io/styles/color/system/overview

## Human Interface Guidelines（color）について:memo:
### システムカラー
- 様々な背景・外観モードに適した色を定義している
- アクセシビリティの設定に自動で適応する
- macOSはDefaultとVibrant（鮮やかver）が定義されている
- OSによってシステムカラーが微妙に違う
    - macOSに比べて、iOS,iPadOSは暗い？
    - ↓デフォルト（Light)のいくつかの例

| macOS | iOS,iPadOS |
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/3c46069f-3461-c911-a841-bbac3d2e5ff1.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/c30f6795-aa97-2bae-ae05-061d54c22834.png) |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/76e346c8-5c92-ed41-3e74-d36155f5b80f.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/6f40192d-4cd4-facc-9581-b8248931bdca.png)|


### ベストプラクティス
- [ ] ゲーム以外のアプリでは色を控えめにする
- [ ] 同じ色を異なる意味に使用しない
    - 特にステータスなどの情報を伝える場合、一貫した色を使う
- [ ] ライトモード・ダークモードの両方で適切に機能する
    - ダークモードでは鮮やかさが増す（背景に対してコンテンツが目立つ）
    - カスタムカラーを使用する場合は、両方のバリアントを指定する必要がある
- [ ] 様々な照明条件化でアプリの配色をテストする
    - 屋外や薄暗い場所など
- [ ] 様々なデバイスでテストする
    - `システム設定 > ディスプレイ > カラープロファイル`から外観のテストができる :pencil: 
- [ ] 半透明度の要素がある場合、背景のアートワークによる影響の検討をする
- [ ] ユーザーがアプリで色を選択できる場合、システムが提供するカラーコントロールを優先する


<details><summary>細かいメモはこちら</summary>

### Colorについて
適切に使用することで
- コミュニケーションの強化
- ブランドを想起させる
    - `#55c500` -> Qiitaっぽい
- 視覚的な連続性 -> 情報を理解しやすくなる

### Inclusive color
- 区別や重要な情報を伝えるために、色だけに頼るのは避ける
- アプリ内のコンテンツを認識しにくくする色は使わない
    - アイコンやテキストと背景のコントラストを十分にする
    - 色覚異常の方が区別しづらい色に注意する
        - 多くの色覚異常の人は青とオレンジを区別することが難しい
        - その他、赤と緑、赤と黒、赤または緑と灰色は区別しにくい

| 色覚異常がない場合 | 赤緑色覚異常がある場合 |
|:-:|:-:|
|  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/22d98845-069b-2d33-cbcd-8945915a71cf.png)| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/49e05056-0c14-dce3-7314-d7ba416933cb.png)|

- 使用する色が他の国や文化でどう認識されるか認識する
    - ex) 赤は危険を表す文化もあれば、肯定的な意味合いを持つ文化もある

### システムカラー
- アプリでシステムの色の値をハードコーディングしない
- 動的なシステムカラーのコピーは避ける
- 動的なシステムカラーの再定義は避ける

### カラーマネジメント
- 一般的なカラースペース
    - sRGB
    - Display P3
        - sRGBよりも35％大きい色空間を持つ
        - sRGBより豊かな色の表現が可能で、特に緑色の表現が優秀
    - 白線より左下側がsRGBで表現できる範囲　

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/5404df7a-c342-10a9-8d84-b5cf789532bf.png)
　　
- 見え方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/ad67edf4-5245-f855-4643-c496ad435920.png)


:::note warn
P3色を使用するグラデーションがsRGBだとクリップされて表示されることもある
:::


### カラープロファイル
- 色を数値表現にマッピングする数式やデータテーブルを使用して色空間内の色を記述する
- 画像にはカラープロファイルが埋め込まれていて、デバイスでは画像の色を解釈してディスプレイ上で再現している
- ワイドカラーを使用すると互換性のあるディスプレイでの視覚体験が向上する
- ワイドカラーディスプレイ
    - P3カラースペースをサポート
    - sRGBよりも豊かで彩度の高い色を生成
    - 写真やビデオはよりリアルになる

### プラットフォームの考慮事項
#### iOS,iPadOS対応
- iOSでは、システムとグループ化の2つの動的背景色セットが定義されている
- ラベル~第四次ラベル、プレスホルダー、セパレータ、リンクなど定義されていてUIKit APIが提供されている

#### macOS
- テーブルなどのコンテンツの背景色を交互に変更する、グリッドの色、ラベル、リンク、プレスホルダー、影の色、など定義されていてアプリキットAPIが定義されている

#### アプリのアクセントカラー
- `一般 > アクセントカラー設定`で変更できる
- 指定した固定色を使用するサイドバーアイコンは色が上書きされない
    - ex) icloudのアイコンなど

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/60a8d43e-91cf-2565-d6b3-f0a509353a54.png)


#### ビジョンOS
- ガラスでは色を控えめに使用してください
    - ガラスマテリアルでは人の周囲の環境が透けてみえるため、コンテンツの読みやすさに影響する
- 小さい領域・テキストに色を使用すると見にくくなる
- 高コントラストが必ず良いわけではない
    - 暗い場所や暗い場所に目が慣れている場合は、視覚的な不快感を引き起こす可能性もある
    - 背景も明るい場合、コンテンツも明るくすることを検討すると良い
        - 暗い環境の場合は避ける
        - オブジェクトが点滅したり動いたりする場合は特に避ける

#### ウォッチOS
- 背景色
    - 既存のコンテンツのサポート
    - 追加情報の提供
    - 場所の感覚を確立し、重要なコンテンツを認識するのに役立つ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/38503f1a-01bd-bc26-223f-4324e8e33808.png)

### システムカラー
- OSによってシステムカラーが微妙に違う
    - macOSに比べて、iOS,iPadOSは暗い？
    - ↓デフォルト（Light)のいくつかの例

| macOS | iOS,iPadOS |
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/3c46069f-3461-c911-a841-bbac3d2e5ff1.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/c30f6795-aa97-2bae-ae05-061d54c22834.png) |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/76e346c8-5c92-ed41-3e74-d36155f5b80f.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/6f40192d-4cd4-facc-9581-b8248931bdca.png)|

- 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/

https://gigazine.net/news/20200303-display-p3/

https://www.benq.com/ja-jp/campaign/monitor-for-mac/articles/display-p3-monitor-for-creative-work.html
</details>


## Material Design 3（MD3）（Color）について:memo:
### マテリアルカラーシステムにはこれが含まれる
- アクセシブルな色の組み合わせセット
    - 26以上の色の役割がコンポーネントにマッピングされている
    - コントラストは3段階サポートしている
    - UI画面の各要素に番号がついている -> 各番号に色が割り当てられている
- ダークテーマカラー
- 静的なベースラインカラー
- 動的なダイナミックカラー

### ダイナミックカラーのプロセス
ダイナミックカラーとはmobile(Android12以降)の壁紙やその他のカスタマイズ設定により、ユーザー独自の配色を生成するもの。

```
1. 取得した1つのソースカラーから5つのキーカラーが生成される
2. そのキーカラーを使ってトーンパレットが作成される。
3.  パレットのトーンはカラーロールに割り当てられ、UIの要素に割り当てられる。
```
#### さらにそれぞれ詳しく
- ソースカラーの取得方法
     -  壁紙から生成
     - アプリのコンテンツから生成
     - 手動で選択
 - キーカラーは5つ
     - 主要、二次、三次、中立①、中立②
 - トーンパレットは13段階

![5種類のカラーパレットを示した画像。左側には「Primary」「Secondary」「Tertiary」「Neutral」「Neutral variant」とラベル付けされた色の円があり、それぞれに対応するグラデーションが右側に続く。各グラデーションは色の濃度を0から100まで示している。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632482/ce8e87b8-9e8f-5633-17b4-3d3e20a4e887.png)


### 色の役割（カラーロール）について
- 一般的なワード
    - サーフェス：背景など大きいかつ強調しない時に使用される
    - プライマリ、セカンダリ、ターシャリ：手前にある要素を強調する・しないためのアクセントカラー
    - コンテナー：ボタンなどの手前にある要素の塗りつぶし色
    - On~~：親とペアになっているテキスト・アイコンの色
- アウトラインカラー
    - dividerには使用しない
    - 複数の要素があるものを囲うのに使わない
    - 近接する要素のボーダーに使う
    - 視覚的な境界に使う


## 読んでみた感想
Human Interface Guidelinesでは、開発者がカラーシステムを作るときに注意する点を色々書いてくれてるのかな？という印象でした。色覚異常の方の見え方に触れていたりします。<br><br>Material Designは、Material color systemについての解説が多めな印象です。要素とカラーロールについて詳しく書いてある点はカラーシステムの設計だけでなく、UIを作る時にも参考になりそうです👀

## おまけ
SmartHRさんのデザインシステム（色）も置いておきます。色の命名がかわいいです🐬
ダウンロードすれば、FigmaやKeynoteで使えます👀

https://smarthr.design/basics/colors

## まとめ
今回はcolorについて、二つのデザインシステムを読み比べてみました。
color以外の読み比べも投稿する予定です📚
最後までお読みいただき、ありがとうございます！