Color
hr.icon
色は、活力を与えたり、視覚的な連続性を持たせたり、ステータス情報を伝えたり、ユーザーのアクションに応じてフィードバックを与えたり、データを視覚化したりするのに最適な方法です。
システムのカラースキームを参考にして、単色でも組み合わせても見栄えがよく、アクセシビリティやアピアランスモードにも適応するアプリのアクセントカラーを選んでください。
オブジェクトの区別や重要な情報の伝達を色だけに頼らないでください。
アプリで色を使って情報を伝える場合は、色覚障害やその他の視覚障害を持つユーザーが理解できるように、テキストラベルやグリフの形状を必ず提供してください。
コミュニケーションのために色を適切に使用してください。
重要な情報への注意を喚起する色の力は、控えめに使用することで高まります。
例えば、重要な問題を警告する赤い三角形は、アプリ内の他の場所で重要でない理由で赤が使用されていると、効果が薄くなります。
アプリのロゴに合わせて、限られたカラーパレットを選択することを検討してください。
色をさりげなく使うことは、ブランドを伝える素晴らしい方法です。
アプリ全体のインタラクティブ性を示す色の選択を検討してください。
「メモ」では、インタラクティブな要素は黄色、「カレンダー」では、インタラクティブな要素は赤です。
インタラクティブ性を示すアクセントカラーを定義した場合、アプリ内の他の色と競合しないように注意してください。
アクセントカラーの2つのバージョンを用意して、明るいモードと暗いモードの両方で見栄えがするようにします。
インタラクティブな要素と非インタラクティブな要素に同じ色を使用しないでください。
インタラクティブな要素と非インタラクティブな要素の色が同じだと、どこをタップすればいいのかわからなくなってしまいます。
アートワークや半透明が周辺の色に与える影響を考慮する。
アートワークのバリエーションによっては、視覚的な連続性を維持し、インターフェイスの要素が強すぎたり弱すぎたりするのを防ぐために、近くの色を変更する必要がある場合があります。
例えば、マップは、マップモードでは明るい配色で表示されますが、サテライトモードでは暗い配色に切り替わります。
また、ツールバーのような半透明の要素の背後に配置されたり、その要素に適用されたりすると、色が異なって見えることがあります。
さまざまな照明条件でアプリの配色をテストする。
室内と屋外では、部屋の雰囲気、時間帯、天候などによって照明が大きく異なります。
コンピュータ上で見ている色が、実際にアプリを使用したときにも同じように見えるとは限りません。
晴れた日の屋外など、複数の照明条件でアプリをプレビューし、色の見え方を確認してください。
必要に応じて色を調整し、大半の使用環境で最高の表示を実現します。
True Toneディスプレイの色への影響を考慮する。
True Toneディスプレイは、環境光センサーを使ってディスプレイの白色点を自動的に調整し、現在の環境の照明条件に適応させます。
読書、写真、ビデオ、ゲームを主な目的とするアプリでは、白色点の適応スタイルを指定することで、この効果を強めたり弱めたりすることができます。
他の国や文化において、色の使用がどのように受け取られるかを考慮してください。
例えば、赤が危険を意味する文化もあれば、赤が肯定的な意味合いを持つ文化もあります。
アプリの色が適切なメッセージを伝えるようにしてください。
アプリ内のコンテンツを認識しにくい色の使用は避けてください。
例えば、色覚障害のあるユーザーは、一部の色の組み合わせを識別できない場合があります。
また、コントラストが不十分だと、アイコンやテキストが背景に溶け込んでしまい、視覚障害のあるユーザーにとってコンテンツが読みづらくなります。
System Colors
iOSには、さまざまなシステムカラーが用意されており、鮮やかさや、「コントラストを強める」「透明度を下げる」などのアクセシビリティ設定の変更に自動的に対応します。
システムカラーは、単独でも組み合わせても、明るい背景でも暗い背景でも、また明るい外観でも暗い外観でもよく映えます。
システムカラーの値をアプリにハードコーディングしないでください。
以下に示すカラーバリューは、アプリのデザインプロセスの参考にするためのものです。
実際の色の値は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。
システムカラーを適用するには、必ずAPIを使用してください。
https://gyazo.com/c96bdb57e924eacbc03f9ec0f380ac30https://gyazo.com/b8214a3aa588b4a3e00d5d8a432a0314
また、iOS 13では、半透明ではうまくいかないまれなケースで使用できる、6種類の不透明なグレーカラーが導入されています。
たとえば、グリッド内のラインやバーなど、交差したり重なったりする要素は、不透明にしたほうが見栄えがよくなります。
一般に、UI要素には意味的に定義されたシステムカラーを使用します。
https://gyazo.com/0f6b7cd716dd41bcd5cc66fa09721a7dhttps://gyazo.com/fd269f6338c387a7c030937b91d6be49
Dynamic System Colors
iOSでは、ティントカラーに加えて、セマンティックに定義されたシステムカラーが用意されており、ライトモードとダークモードの両方に自動的に対応します。
セマンティックカラーは、外観や色の値ではなく、その目的を伝えるものです。
例えば、iOSでは、ラベル、セパレータ、塗りつぶしなど、背景領域と前景コンテンツで使用する色を定義しています。
iOSでは、システムカラーとグループ化されたカラーの2つの背景色セットが定義されています。
それぞれの背景色セットには、情報の階層を伝えるのに役立つ、1次、2次、3次のバリエーションが含まれています。
一般的に、テーブルビューがグループ化されている場合はグループ化された背景色セットを使用し、そうでない場合はシステムの背景色セットを使用します。
どちらの背景色でも、一般的には以下のような方法で階層を表現します。
全体像を示すPrimary
全体像の中でコンテンツや要素をグループ化するためのSecondary
二次的な要素の中でコンテンツや要素をグループ化するためのTertiary
iOSでは、フォアグラウンドコンテンツに以下の色を定義しています。
table: foreground content colors
Color Used for UIKit API
Label A text label that contains primary content. label
Secondary label A text label that contains secondary content. secondaryLabel
Tertiary label A text label that contains tertiary content. tertiaryLabel
Quaternary label A text label that contains quaternary content. quaternaryLabel
Placeholder text Placeholder text in controls or text views. placeholderText
Separator A separator that allows some underlying content to be visible. separator
Opaque separator A separator that doesn’t allow any underlying content to be visible. opaqueSeparator
Link Text that functions as a link. link
ダイナミックシステムカラーの意味を再定義しないでください。
人々に一貫した体験を提供し、あらゆる状況でインターフェイスが美しく見えるようにするために、ダイナミックシステムカラーを意図的に使用してください。
ダイナミックなシステムカラーを再現しようとしないでください。
ダイナミックシステムカラーは、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。
システムカラーに合わせてカスタムカラーを作成するのではなく、ダイナミックシステムカラーを使用してください。
Color Management
画像にカラープロファイルを適用する。
iOSのデフォルトのカラースペースはStandard RGB（sRGB）です。
このカラースペースに色を正しくマッチさせるために、画像にカラープロファイルが埋め込まれていることを確認してください。
ワイドカラーを使用すると、互換性のあるディスプレイでの視覚体験が向上します。
ワイドカラーディスプレイは、P3色空間に対応しており、sRGBよりも豊かで彩度の高い色を表現できます。
その結果、ワイドカラーを使用した写真やビデオはよりリアルになり、ワイドカラーを使用したビジュアルデータやステータスインジケータはよりインパクトのあるものになります。
必要に応じて、カラープロファイルはDisplay P3を使用し、16ビット/ピクセル（1チャンネル）で、画像はPNG形式で書き出します。
なお、ワイドカラー画像の設計やP3カラーの選択には、ワイドカラーディスプレイが必要です。
https://gyazo.com/83f1a3953d255a079117477bdcdee019
色空間に合わせた画像や色のバリエーションを必要に応じて提供する。
一般的に、P3の色や画像は、sRGBのデバイスでは期待通りに表示される傾向があります。
しかし、よく似たP3の色同士をsRGBで表示すると、区別がつかないことがあります。
また、P3スペクトルの色を使ったグラデーションも、sRGBデバイスではクリップして見えることがある。
このような問題を回避するためには、Xcodeプロジェクトのアセットカタログにはっきりとした画像と色を用意し、ワイドカラーとsRGBの両方のデバイスで視覚的な忠実性を確保することができます。
アプリケーションの色を、実際のsRGBおよびワイドカラーディスプレイでプレビューします。
必要に応じて調整することで、どちらのディスプレイでも同じように優れたビジュアル体験が得られます。
Tips
ワイドカラーディスプレイを搭載したMacでは、システムカラーピッカーを使ってP3カラーを選択してプレビューし、sRGBカラーと比較することができます。