マテリアル(材料)

Apple のプラットフォームでは、マテリアルが背景に半透明とぼかしを与え、前景の層と背景の層の間に視覚的な分離感を生み出します。

材料を鮮やかさと組み合わせて、インターフェースに視覚的な興味を追加することができます。鮮やかさは、テキスト、シンボル、塗りつぶしなど材料の上に表示される前景コンテンツに適用され、材料の後ろから色を前に引いて奥行き感を高めることで機能します。

注意

macOS のメニューや iOS のラベルなど、一部のコンポーネントはデフォルトで鮮やかであるため、鮮やかさはすべてのアプリとゲームに影響を与えます。鮮やかなビューが表示されないものさえも含まれます。

ベストプラクティス

システムは、明るいモードとダークなモードの両方に自動的に適応するいくつかの材料を定義しています。それぞれが特定の使用を目的としています。さらに、システムは、UI コンポーネントに適用できるいくつかのぼかし効果と鮮やかな効果を提供し、それらを材料とうまく統合して、必要な優越を実現するのに役立ちます。システムが定義した材料と効果を使用すると、あなたのアプリやゲームに自然な雰囲気を与え、人々がアプリを切り替えるときにスムーズな移行を作成できます。

意味のある、推奨される使用法に基づいて、システムの材料と効果を選択します。 システム設定によって外観や動作が変わるため、インターフェイスに与える見かけの色に基づいて材料や効果を選択することは避けてください。代わりに、材料やスタイルを特定の使用法に合わせてください。たとえば、あなたの macOS アプリのメニューに menu 材料を使用し、iOS アプリの一次ラベルに label の鮮やかなスタイルを使用し、tvOS アプリに適応可能なフルスクリーンの背景に prominent の材料を使用します。

材料の上に鮮やかな色だけを使用して、読みやすさを確保してください。 システムが定義した鮮やかな色を使用する場合、さまざまなコンテキストで色が暗すぎたり、明るすぎたり、飽和したり、コントラストが低く見えたりすることを心配する必要はありません。たとえば、iOS は、テキスト、塗りつぶし、グリフ、および区切り文字の動的システムカラーを定義して、これらのアイテムを半透明の背景で見栄えよくします。macOS では、すべての標準システムカラーに鮮やかなバージョンがあります。ガイダンスについては、カラーを参照してください。

フルカラーアイコンの代わりに SF シンボルを使用することを検討してください。 フルカラーイメージは、ビューの背景と十分なコントラストがない場合があり、背景が半透明の場合は位置がずれているように見えますが、シンボルとインターフェイスアイコンは、動的なシステムカラーと鮮やかな効果で機能し、どのような状況でも見栄えがします。ガイダンスについては、SF シンボルを参照してください。

ぼかし効果や鮮やかな効果と組み合わせる材料を選択するときは、コントラストと視覚的な分離を考慮してください。 たとえば、以下のことを考慮してください。

厚い材料は、テキストやその他の優れた機能を備えた要素のコントラストを向上させることができます

半透明は、背景にあるコンテンツの視覚的な備忘録を提供して、人々がコンテキストを維持するのに役立ちます

システムは、コンテンツの邪魔をせずに奥行き感と階層構造を伝えるために使用できるいくつかの材料を提供します。極薄から極厚まで、外観モードに適応する材料もあれば、常に明るいまたは常に暗い材料もあります。選択する材料に関係なく、その上に鮮やかでない色を使用することは避けたいと思います。

開発者向けガイダンスについては、UIBlurEffect.Style (UIBlurEffect.Style) を参照してください。

プラットフォームの考慮事項

watchOS ではサポートされていません。

iOS、iPad

iOS と iPadOS は、各材料で機能するように明確にデザインされたラベル、塗りつぶし、および区切り文字の鮮やかな値を定義しています。標準のシステムカラーは、鮮やかなバージョンでは使用できません。

ラベルと塗りつぶしはそれぞれ、いくつかのレベルの鮮やかさを提供しています。区切り文字には 1 つのレベルがあります。レベルの名前は、要素と背景の間の相対的なコントラストの量を示します。デフォルトのレベルのコントラストが最も高く、4 次 (存在する場合) のコントラストが最も低くなります。

4 次を除いて、任意の材料のラベルに以下の鮮やかな値を使用できます。コントラストが低すぎるため、薄い素材と超薄い素材の間に quaternary (4 次) を使用することはお勧めしません。

label (デフォルト)

secondaryLabel

tertiaryLabel

quaternaryLabel

すべての材料の塗りつぶしに以下の鮮やかさの値を使用できます。

fill (デフォルト)

secondaryFill

tertiaryFill

システムは、separator に単一のデフォルトの鮮やかさの値を提供します。これは、すべての材料でうまく機能します。

macOS

macOS は、すべての標準色の鮮やかなバージョンを提供し、インターフェイスに適用される半透明、ぼかし、および鮮やかさの量を定義する材料を提供します。システムは、それぞれが指定された目的を持ついくつかの標準的な材料を提供します。たとえば、ウィンドウ、メニュー、ポップオーバー、サイドバー、タイトルバーなどのデフォルトの外観に一致する材料を選択できます。開発者向けガイダンスについては、NSVisualEffectView.Material を参照してください。

明るい外観

ダークな外観

カスタムビューとコントロールで鮮やかさを与えるタイミングを選択します。 構成とシステム設定に応じて、システムビューとコントロールは鮮やかさを使用して、前景のコンテンツを背景に対して目立たせます。さまざまなコンテキストでインターフェイスをテストして、鮮やかさが外観を向上させ、コミュニケーションを改善する時期を見つけます。

インターフェイスデザインを補完する背景のブレンドモードを選択してください。 macOS は、背景コンテンツをブレンドする 2 つのモードを定義しています。ウィンドウの背後とウィンドウ内です。開発者向けガイダンスについては、NSVisualEffectBlendingMode を参照してください。

ウィンドウの後ろのブレンド。 このモードでは、ウィンドウの背後にあるコンテンツが透けて見え、あなたのアプリやゲームを取り巻くコンテキストの一部を人々が保持するのに役立ちます。メニュー、シート、サイドバーなどのコンポーネントは、このモードを自動的に使用します。

ウィンドウ内のブレンド。 このモードでは、ウィンドウコンテンツが他のウィンドウコンポーネントを通して表示されます。たとえば、ツールバーはこのモードを使用して、ウィンドウコンテンツがその下をスクロールするときに、人々に連続性の感覚を与えることができます。

tvOS

軽くて半透明の材料を使用して、コンテンツを高め、新鮮な気分にさせます。 ダークな材料は陰影を隠す傾向があり、奥行きが浅くなり、コンテンツを明確に区別するのが難しくなります。より重い感覚を呼び起こしたい場合、またはコンテンツが古いことを示唆したい場合は、よりダークな材料の使用を検討して下さい。

たとえば、以下の方法でシステムの材料を使用することを検討してください。

材料	推奨	適応動作
Prominent(顕著な)	フルスクリーンの背景	明るい外観で余分な明るい材料を表示し、ダークな外観で余分にダークな材料を表示します
Regular(通常)	スクリーン上のコンテンツを部分的に覆い隠すビューをかぶせる	明るい材料を明るい外観で表示し、ダークな材料をダークな外観で表示します
Extra light(特別明るい)	明るい配色が必要なフルスクリーンビュー	–
Light(明るい)	スクリーン上のコンテンツを部分的に覆い隠し、明るい配色を必要とする覆い隠しビュー	–
Extra dark(特別ダークな)	ダークな配色が必要なフルスクリーンビュー	–
Dark(ダークな)	スクリーン上のコンテンツを部分的に覆い隠し、ダークな配色を必要とする覆い隠しビュー	–