🍎HIGざっくりまとめ Foundations編 vol.3 カラー

　2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

※私はブラウザで動くWEBアプリーケーションのUIをデザインしています。その視点から大切だと思った点を残してくので、対象外のデバイスや各プラットフォームの細やかな話は端折っています。

---

Color（カラー）

色を適切に使用することで、コミュニケーションを強化し、ブランドを想起させ、視覚的な連続性を提供し、ステータスやフィードバックを伝え、情報の理解を助けることができます。

さまざまな背景やアピアランスモードに似合う色を定義し、鮮やかさやアクセシビリティの設定に自動的に対応することができます。人々はシステムカラーに慣れ親しんでおり、システムカラーを使用することで、デバイス上で違和感のない体験をすることができる便利な方法です。

また、アプリやゲームの視覚体験を向上させ、独自の個性を表現するために、カスタムカラーを使用することもできます。

Color - Foundations - Human Interface Guidelines - Design - Apple Developer

要点

• ゲーム以外のアプリでは、色を控えめに使用する。
  色を使いすぎるとコミュニケーションが分かりにくくなり、気が散ってしまう可能性があります。大事な部分や、各パーツの関係を示したりするために色を使用することをお勧めします。

• 同じ色を異なる意味に使うのは避けましょう。
  インターフェイス全体で一貫した色を使用します（特に、ステータスやインタラクティビティを伝える場合）。例えばタップ可能な部分に青色を使うのであれば、他のインタラクティブなテキストに青以外の色を使うと混乱してしまいます。

• アプリのカラーがLightモードとDarkモードの両方でうまく機能することを確認してください。
  ライトアピアランスに代わるダークアピアランスが用意されています（watchOSを除く）。システムカラーは自動的に両方の外観をサポートしますが、カスタムカラーを使用する場合は、ライトとダークの両方のバリエーションを提供する必要があります。

• アプリの配色は、さまざまな照明条件下でテストしてください。
  晴れた日の屋外や薄暗い場所で、色が異なって見えることがあります。ほとんどのユースケースで最適な表示体験が得られるように、色を調整してください。

• さまざまなディスプレイを搭載したデバイスで、アプリケーションをテストしてください。
  True Toneディスプレイ（iPhone、iPad、Macの一部のモデルで利用可能）は、環境光センサーを使用して、現在の環境の照明条件に適応するようにディスプレイのホワイトポイントを自動的に調節します。
  tvOSアプリケーションは複数のブランドのHDテレビと4Kテレビでテストしてください。Mac上でP3や標準RGB（sRGB）など、異なるカラープロファイルを使用してアプリケーションの外観をテストすることもできます。

• アートワークと透光性が近傍の色に与える影響を考慮する。
  アートワークに変化があったときに、視覚的な連続性を維持し、インターフェイスの要素が強すぎたり弱すぎたりするのを防ぐために、近くの色を変更する必要がある場合があります。
  また、ツールバーのような半透明の要素の背後に置いたり、適用したりすると、色が異なって見えることがあります。

インクルードカラー

• オブジェクトの区別、双方向性の表示、重要な情報の伝達を色だけに頼ることは避けてください。
  色覚異常やその他の視覚障害のある人が理解できるように、同じ情報が色以外の別の方法でもわかるようにしてください。（例、色の変更だけでなく太字にするなど）

• アプリ内のコンテンツを認識しづらくなるような色の使用は避けてください。
  コントラスト比の担保や、色の組み合わせによっては見分けがつかない（色覚異常）ことがあります。

• 使用する色が、他の国や文化でどのように受け取られるかを考えてみましょう。
  たとえば、赤はある文化圏では危険を意味しますが、別の文化圏では肯定的な意味合いを持ちます。

システムカラー

• アプリのシステムカラー値をハードコードしないようにする
  実際のカラー値は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。システムカラーを適用するには、ColorなどのAPIを使用してください。

• iOS と macOS では、標準的な UI コンポーネントの配色に一致し、明るい外観と暗い外観の両方に自動的に適応する動的なシステムカラーのセットも定義されています。各ダイナミックカラーは、外観や色の値ではなく、その目的によって意味的に定義されています。

• ダイナミックシステムカラーの複製を避ける。

• ダイナミックシステムカラーの意味を再定義しないようにする。

カラーマネジメント

色空間は、RGBやCMYKなどのカラーモデルにおける色を表す。一般的な色空間（色域と呼ばれることもある）には、sRGBとDisplay P3があります。
sRGBカラースペースは、ほとんどのディスプレイで正確な色を再現できる。Display P3の方がきれい。色域が広い。

• 画像にカラープロファイルを適用します。
  カラープロファイルは、さまざまなディスプレイでアプリの色が意図したとおりに表示されるようにするためのものです。

• ワイドカラーを使用し、対応するディスプレイでの視覚体験を向上させます。
  ワイドカラーディスプレイは、sRGBよりも豊かな色彩を表現できるP3色空間をサポートしています。その結果、ワイドカラーを使用した写真や動画はよりリアルになり、ワイドカラーを使用したビジュアルデータやステータスインジケーターはより意味のあるものになります。

• 必要に応じて、色空間固有の画像やカラーバリエーションを提供する。「Display P3カラーをsRGBディスプレイで表示」はだいたい問題なく表示できるが、たまにグラデーションの色が切れて見えることがあります。これらの問題を回避するために、Xcodeプロジェクトのアセットカタログを使用することができます

---

感想

色を使ってデザインするときは見た目だけなく、以下もなどなど考慮しましょう。

• 色が示す意味とその一貫性の保持

• ダークモード・ライトモードへの対応

• アクセシビリティや文化圏への配慮

その他では、実機での確認だけでなく、屋外など場所別の表示確認も意識しないと漏れてしまいそうですね。

技術面でもカラープロファイルの知識、システムカラーの動的な対応を上書きして潰してしまわないようにする必要がある。
ダークモードについては別途Dark Modeのページでも詳しく記載があります。