ダークモード


macOS 10.14 以降では、ユーザは明るい外観ではなく、システム全体のダークな外観を採用することを選択できます。ダークモードでは、システムはすべてのウィンドウ、ビュー、メニュー、およびコントロールにダークなカラーパレットを採用します。また、システムはより鮮やかな光を使用して、前景のコンテンツをダークな背景に対して目立たせます。



コンテンツに焦点を合わせます。 ダークモードは、あなたのインターフェイスのコンテンツ領域に焦点を合わせ、周囲のクロムが背景に後退している間、そのコンテンツを目立たせることができます。


ダークモードは、ユーザにとって美的な選択です。 ユーザはデフォルトのインターフェーススタイルとしてダークモードを選択でき、いつでも、またはどのような照明条件でも使用できます。






ライトな外観とダークな外観の両方であなたのデザインをテストして下さい。 あなたのインターフェイスが両方の外観でどのように見えるかを確認し、それぞれに対応するように必要に応じてデザインを調整します。ダークモードで、デスクトップの Tint がアクティブなときにデザインがどのように見えるかを確認します。一方の外観でうまく機能する決定は、もう一方の外観ではうまく行かない場合があります。


インターフェイスに鮮やかさを取り入れましょう。 鮮やかさにより、前景色と背景色の間のコントラストが向上し、前景のコンテンツがより目立つようになります。透明さと鮮やかさ を参照してください。



カラー


ダークモード内のカラーパレットには、より暗い背景色とより明るい前景色が含まれています。これらの色は、必ずしも明るい色の反転ではありません。多くの色が反転していますが、反転していない色もあります。たとえば、明るい外観とダークな外観の両方で、ダークな線を使用してビュー同士の間の視覚的に分離します。


現在の外観に適応する色を採用します。 意味のある色 (labelColorcontrolColor など) は、現在の外観に自動的に適応します。カスタムカラーが必要な場合は、カラーセットのアセットをあなたのアプリのアセットカタログに追加し、色の明るいバリエーションとダークなバリエーションを指定します。ハードコードされた色の値や適応しない色の使用は避けてください。






すべての外観で十分な色のコントラストを確保してください。 システムで定義された色を使用すると、前景と背景のコンテンツ間の適切なコントラスト比が保証されます。カスタムの前景色と背景色については、7:1 のコントラスト比を目指してください。この比率により、デスクトップの Tint がアクティブな場合を含め、前景のコンテンツが背景から目立つようになります。また、コンテンツがより厳格なアクセシビリティガイドラインを満たしていることを確認します。少なくとも、色間のコントラスト比が 4.5:1 以上であることを確認してください。


白い背景の色を柔らかくします。 ダークモードのコンテンツに白い背景を使用しなければならない場合は、周囲のダークなコンテンツに対して背景が光らないように、少し暗い白を選択してください。


色のアクセシビリティ基準に関する情報を含む関連ガイダンスについては、色とコントラスト を参照してください。



デスクトップでの Tint


ダークモードで実行されているアプリは、デスクトップ Tint の恩恵を受けます。アクティブな場合、デスクトップの Tint により、ウィンドウの背景がユーザのデスクトップピクチャから色を取得します。その結果、ウィンドウが周囲のコンテンツとより調和するのに役立つ微妙な tint の効果が得られます。おそらく色に敏感なコンテンツを扱うために、追加の tint を使用したくないユーザは、システム環境設定でグラファイトアクセントカラーを選択することにより、この効果を無効にできます。



カスタムコントロールカラーに少し透明度を含めます。 透明度により、コントロールはウィンドウの背景とデスクトップの Tint によって与えられた色を取得できます。その追加の色は、コントロールと背景の間に調和を生み出します。これは、デスクトップピクチャが変更されても持続します。



イメージ、アイコン、グリフ


システムは、ダークモードでテンプレートイメージを広範囲に使用します。テンプレートイメージは、透明度、アンチエイリアシング、およびドロップシャドウのない単色イメージであり、マスクを使用してその形状を定義します。システムにはまた、明るい外観とダークな外観の両方に最適化された多くのフルカラーイメージも含まれています。


可能な限りテンプレートイメージを使用してください。 テンプレートイメージは明るいインターフェイスとダークなインターフェイスに適応し、鮮やかさを最大限に活用できます。あるインターフェースで見栄えのするフルカラーイメージは、別のインターフェースでは色あせて見える場合があります。関連するガイダンスについては、カスタムアイコン (*1) を参照してください。


(訳注:*1 : うまくリンクできません。)



必要に応じて、明るい外観とダークな外観の個々のグリフをデザインします。 ライトモードで中空のアウトラインを使用するグリフは、ダークモードでは塗りつぶされた形として見栄えが良くなる場合があります。


フルカラーイメージは見栄えがすることを確認してください。 明るい外観とダークな外観の両方で見栄えがよい場合は、同じアセットを使用します。アセットの外観が 1 つだけで見栄えがよい場合は、アセットを変更するか、明るいアセットとダークなアセットを別々に作成します。アセットカタログを使用して、アセットを 1 つの名前付きイメージに結合します。



タイポグラフィ(印刷)


システムは、鮮やかさとコントラストの向上を使用して、よりダークな背景のテキストの読みやすさを維持します。






テキストには、システムが提供するラベルの色を使用します。 一次、二次、三次、および四次のラベルの色は、明るい外観と暗い外観に自動的に適応します。関連するガイダンスについては、タイポグラフィ を参照してください。


システムビューを使用して静的テキストを描写します。 システムビューとコントロールにより、あなたのアプリのテキストはすべての背景で見栄えが良くなり、鮮やかさの有無を自動的に調整します。代わりに、システムが提供するビューを使用してそのテキストを表示できる場合は、自分でテキストを描画しないでください。NSTextField (NSTextField) および NSTextView (NSTextView) を参照してください。







前:カラー 次:透明さ

目次

Xcode の新機能



macOS

テーマ

macOS 11 の新規事項

視覚的インデックス


アプリの構造

フルスクリーンモード

ロード

モダリティ

搭載

優先

状態の復元

セキュリティ


ユーザの操作

アカウント

データ入力

ドラッグアンドドロップ

ファイル処理

ゲームコントローラ

ヘルプ

キーボード

マウスとトラックパッド

ユーザフィードバックの提供

許可の要求


システムの能力

自動セーブ

ドック

Finder

ミッションコントロール

通知

印刷

クイックルック

格付けとレビュー

検索とスポットライト


視覚的デザイン

アニメーション

カラー

ダークモード

透明さ

印刷


アイコンとイメージ

イメージのサイズと解像度

アプリのアイコン

文書のアイコン

多項目のドラッグイメージ

システムのイメージ


ウインドウとビュー

ウインドウの構造

アラート

ボックス

コラムビュー

ダイアログ

イメージビュー

アウトラインビュー

パネル

ポップオーバー

スクロールビュー

シート

サイドバー

スプリットビュー

タブビュー

表のビュー

ツールバー

Web ビュー

Drawer(引き出し)*

プラカード*


メニュー

メニューの構造

コンテクストメニュー

ドックメニュー

メニューバーのメニュー


ボタン

チェックボックス

開示コントロール

勾配ボタン

ヘルプボタン

イメージボタン

ポップアップボタン

プルダウンメボタン

押しボタン

ラジオボタン

スコープボタン

スイッチ

ベベルボタン*

ラウンドボタン*


フィールドとラベル

コンボボックス

ラベル

検索フィールド

テキストフィールド

トークンフィールド


セレクタ

色の源

日付の選別

イメージウェル

パスコントロール

セグメントコントロール

スライダ

ステッパ


インジケータ

レベルインジケータ

プログレスインジケータ


タッチバー

タッチバー概観

視覚的デザイン

グリフとイメージ

コントロールとビュー


拡張機能

アクション拡張機能

オートメータアクション

ファインダー同期拡張機能

メニューバーの追加

サービス

共有拡張機能



iOS


tvOS


watchOS


Technologies

アクセシビリティ

序文

ベストプラクティス

ユーザとの対話

ナビゲーション

テキストのサイズと太さ

色とコントラスト

外観の効果と動き

コンテンツ


AirPlay

メディア再生

アイコン

社説


アプリクリップ

序文

ユーザ体験

アプリクリップカード

アプリのクリップコード

印刷ガイドライン

法的要件


Apple Pay(アップルペイ)

序文

Apple Pay の提供

チェックアウトと支払い

エラー処理

サブスクリプションと寄付

ボタンとマーク

社説


拡張現実

ホームスクリーンのアクション

マルチタスクと複数のウィンドウ

通知

印刷

クイックルック(検索)

評価とレビュー

スクリーンショット

TV プロバイダー


CareKit

序文

データとプライバシー

ビュー

ユーザー体験

シンボルと商標化


CarPlay

序文

オーディオアプリ

自動車メーカーのアプリ

伝達および VoIP アプリ


アーキテクチャ

バッジ付け

エラー処理

ロード

ナビゲーション

テスト


対話

オーディオ

車のデータ

iPhone

ノブとコントロール

タッチスクリーン

Voice (Siri)


視覚的デザイン

アニメーション

商標化

レイアウト

タイポグラフィ(印刷)


アイコンと画像

画像のサイズと解像度

アプリのアイコン

カスタムアイコン

システムアイコン


システム要素

アクションシート

活動指標

アラート

ボタン

コレクション

ラベル

ナビゲーションバー

スクロールビュー

タブバー

テキストビュー

Web ビュー


CareKit

序文

データとプライバシー

ビュー

ユーザ体験

シンボルと商標化


ゲームセンター

序文

アクセス・ポイント

ダッシュボード

実績

順位表

マルチプレイヤー

カスタムダッシュボードリンク


象形文字

HealthKit

HomeKit

序文

用語とレイアウト

設定

Siri の作用

カスタム機能

アイコン

社説


iCloud

アプリ内購入

序文

自動更新可能なサブスクリプト


inclusion(含有)

ライブ写真

Mac Catalyst

序文

アプリの構造

ユーザとの対話

視覚的デザイン

Mac 慣用句


マシン学習

序文

マシン学習の役割


入力

明示的なフィードバック

暗黙のフィードバック

較正

訂正


出力

間違い

複数のオプション

自信

帰属

制限事項


地図(Maps)

アプリとウェブサイトの地図

Apple Watch の地図

屋内の地図


ResearchKit

序文


右から左へ

序文

テキストと文字

コントロール

画像と象形文字


SharePlay

Apple でサインイン

序文

データ管理

ボタン


Siri

序文

システムインテント

カスタムの注視

ショートカットと提案

編集ガイドライン


ソーシャルメディア

SF Symbols

Wallet(財布)

序文

許可証のデザイン


小道具

序文

コンテンツ

編集と対話

デザイン




Human Interface Guidelines


概要


リソース


ビデオ


新規事項



ニュース

見つける

デザイン

開発

配信

サポート

アカウント
(セキュリティの面で、リンクを提供できませんでした。)













トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ












トップへ