Materials

hr.icon

iOSには、奥行きを感じさせるために使用できる半透明の効果を生み出すマテリアル（またはブラー効果）が用意されています。

マテリアルの効果により、ビューやコントロールは、前景のコンテンツの邪魔になることなく、背景のコンテンツをほのめかすことができます。

この効果を得るために、マテリアルは背景の色情報を前景のビューに通す一方で、背景のコンテキストをぼかして読みやすさを維持します。

システムで定義されたマテリアルを使用すると、システムのライトモードとダークモードにこれらの効果が自動的に適応するため、どのようなコンテキストでもエレメントが美しく見えます。

Tips

マテリアルを使用するには、ビュー階層に視覚効果ビューが存在する必要があります。

システムが使用しているマテリアルを参考にしてください。

可能な限り、カスタムビューとシステムが提供するビューを比較してください。

これらのビューは同様の機能を持ち、同じマテリアルを使用しています。

テキスト、塗りつぶし、グリフ、セパレータにシステムが提供する色を利用する。

システムが提供する色は、半透明の背景でこれらのアイテムを自動的に美しく見せます。

可能であれば、SF記号を使用してください。

ダイナミックシステムカラーを使ってシンボルを着色したり、鮮やかな効果を適用したりすると、どのような状況でもシンボルが美しく見えます。

一方、フルカラーのイメージは、背景とのコントラストが十分ではなく、背景が半透明のビューで使用すると、場違いな印象を与えることがあります。

System-Defined Materials and Vibrancy

iOS では、前景のコンテンツと背景の外観の間の視覚的な分離を制御するために、特定の領域で使用できるマテリアルが定義されています。

システムで提供されるマテリアルには、ほとんどの背景によく映える明るい色と暗い色のバリエーションがあります。

iOS 13では、コンテンツコンテナで使用するために、透光性のレベルが異なる4つのマテリアルが定義されています（各マテリアルにはダークバリアントも含まれています）。

マテリアルを選ぶ際には、コントラストと視覚的な分離を考慮してください。

ビブランシー効果と組み合わせるマテリアルの選択には、絶対的なルールはありません。

この選択をする際には、次のことを考慮してください。

厚みのあるマテリアルは、文字などの細かい部分のコントラストを高めます。

半透明のマテリアルは、背景にあるコンテンツを目に見える形で思い出させることで、人々がコンテキストを維持するのに役立ちます。

iOS 13では、ラベル、塗りつぶし、セパレータについて、それぞれのマテリアルとの相性を考慮した鮮やかさの値が定義されています。

ビブランシーは、背景色をサンプリングし、彩度と値を変更することで、UI 要素を明るくしたり暗くしたりします。

鮮やかなUI要素は、マテリアルとの一体感が増し、半透明の効果を高めます。

ラベルと塗りつぶしにはそれぞれ複数のレベルの鮮やかさがあり、セパレータには1つのレベルがあります。

レベルの名前は、要素と背景の間のコントラストの相対的な量を示しています。

デフォルトのレベルが最もコントラストが高く、quaternary（存在する場合）が最もコントラストが低くなります。

quaternaryを除いて、以下のビブランシー値はあらゆるマテリアルのラベルに使用することができます。

薄いマテリアルや超薄いマテリアルにquaternaryを使用することは、コントラストが低すぎるのでお勧めできません。

すべてのマテリアルの塗りつぶしには、以下のような鮮やかさの値を使用できます。

鮮やかさの効果は、そのセマンティックな意味に基づいて選択してください。

これらの効果を混在させないようにしてください。

たとえば、セパレータにラベル効果を使用しないでください。