macOS 11 の新規事項
macOS 11 では、アプリの外観を更新し、iPad アプリから移行する人々にとってより親しみやすいものにする多くのユーザーインターフェイスの変更が導入されています。macOS 11 はまた、ユーザ体験を向上させ、アプリのデザインプロセスを合理化できる、使い慣れた iOS 機能 (SF シンボルやテキストスタイルなど) のサポートも追加します。
macOS 11 用のあなたのアプリをビルドする場合、SwiftUI または自動レイアウトでシステムに定義された要素を使用すると、ほとんどの更新が自動的に行われることがわかります。あなたのアプリが高度にカスタマイズされている場合は、追加の作業が必要になる場合があります。macOS 11 用にあなたのアプリを更新することを検討するときは、以下の変更を確認して、アプローチを計画するのに役立ててください。
アイコンとイメージ
macOS 11 は、システム全体を通してアイコンデザインを更新し、アプリアイコンに統一した形状をもたらし、文書のアイコンに洗練された外観をもたらします。さらに、macOS 11 には、サイドバーや表の項目や機能を表すことができる多目的機能アイコンが導入されています。
SF シンボルの採用により、システム全体を通してグリフとアイコンに強力な視覚的一貫性が与えられ、どこにいても自宅のように思えるイメージとアイコンを簡単に作成できます。macOS 11 は、アクション、ロック解除、共有などの AppKit 共有イメージを特定のシンボルに自動的にマッピングします。場合によっては、シンボルのサイズや配置が、置き換える AppKit イメージと同じでないことがあるため、あなたのレイアウトを確認することをお勧めします。
| 名前 | SF Symbol | AppKit イメージ (macOS 10.15 以前) |
| アクション |  |  |
| ロック解除 |  |  |
| 共有 |  |  |
アプリアイコン
macOS 11 では、アプリアイコンのデザイン言語は、macOS アイコンに典型的な生命のようななレンダリングスタイルを維持しながら、すべてのプラットフォームとの一貫性を促進します。アプリアイコンは、丸みを帯びた長方形で、正面を向いた視点であり、一貫したドロップシャドウを組み合わせて、統一された視覚体験を提供します。
デザイン言語は視覚的な一貫性を強く促進しますが、賢明な表現力を排除するものではありません。たとえば、プレビュー、Xcode、TextEdit のアイコンは、新しい形状、遠近法、影を取り入れながら、アプリの主な目的を最もよく伝える実際のオブジェクトの描写を引き続き組み合わせています。
文書のアイコン
文書のアイコンを作成するために、システムはあなたのアプリアイコンとおなじみの角が折り畳まれたアイコンの形を組み合わせます。あなたのアプリが、多数の文書のタイプを開いたり、作成したりする場合は、カスタムの中央イメージや背景の外観を指定して、人々がそれらを区別できるようにもできます。ガイダンスについては、文書のアイコン を参照してください。
機能のアイコン
機能 のアイコンは、表のビューまたは設定ウィンドウのコンテンツサイドバーで、項目 (または項目のカテゴリ)、テクノロジ-、または情報の種類を表すことができます。機能のアイコンは通常、macOS 11 の丸みを帯びた長方形を使用して、シンプルで明確なグリフを含みますが、カスタムの形状や色を使用することもできます。機能のアイコンのデザインについては、macOS 用の Apple Design Resources に含まれている製品テンプレートをダウンロードしてください。
| macOS 11 | macOS 10.15 |
アプリアクセントカラー
macOS 11 では、アクセントカラーを指定して、あなたのアプリのボタンの概観、選択範囲の強調表示方法、サイドバーのグリフをカスタマイズできます。[General(一般)] > [Accent color preferences(アクセントカラー設定)] の現在の値が マルチカラー の場合、システムはあなたのアクセントカラーを適用します。
人々がアクセントカラーの設定をマルチカラー以外の値に設定すると、システムは選択した色をあなたのアプリ全体の関連項目に適用し、アクセントカラーを置き換えます。例外は、あなたの指定した固定カラーを使用するサイドバーのグリフです。固定カラーのサイドバーグリフは特定の色を使用して意味を提供するため、人々がアクセントカラーの設定の値を変更しても、システムはそのカラーを上書きしません。 詳細については、サイドバー を参照してください。
他のグリフがオレンジを使用している場合でも、iCloud グリフは teal (青緑色) のままです。
ウィンドウとビュー
macOS 11 全体を通して、ウィンドウは iOS インターフェイスを想起させる視覚的なタッチを採用しています。たとえば、ウィンドウはサイドバー、ツールバー、およびコンテンツ領域を統合し、拡大されたコーナー半径を使用し、軽量のコントロールを表示します。
ツールバーとタイトルバー
デフォルトでは、ツールバーはより高く、ウィンドウタイトルはコントロールとインラインで表示でき、ツールバーの項目にはベゼルが含まれなくなりました。高さの増加とベゼルのないコントロールを組み合わせることで、macOS 11 ツールバーの外観が合理化されています。
| macOS 11 | macOS 10.15 |
デフォルトのツールバーの増加した高さに一致させるために、ツールバーの項目は自動的に大きなコントロールサイズを使用します。例外は、統合されたツールバーとタイトルバーの領域 (Safari ウィンドウの領域など) であり、通常のコントロールサイズを引き続き使用します。新しいデフォルトサイズに対応するには、ツールバーのレイアウトを調整する必要があります。
macOS 11 の Finder ツールバーコントロール
macOS 10.15 の Finder ツールバーコントロール
重要
minSize (minSize) API と maxSize (maxSize) API を引き続き使用してツールバー項目のサイズを設定すると、現在の値がより大きなデフォルトサイズを考慮していないため、コントロールがクリップされる可能性があります。ツールバーコントロールの最小サイズまたは最大サイズを指定する必要がある場合は、制約を使用して下さい。
(訳注：minSize と maxSize は共に obsolete であるため、同項目の訳出は現在の所予定ありません。)
水平方向のスペースが限られている場合、ツールバーは検索バーの場所に検索ボタンを表示できます。人々が [検索] ボタンをクリックすると、バーが展開されます。ウィンドウの他の場所をクリックすると、検索バーが折りたたまれ、ツールバーにボタンが再び表示されます。
設定ウィンドウでは、ツールバーは SF シンボルを使用してメインウィンドウの外観と調和させることができますが、タイトルの位置はツールバーボタンの上に残ります。わかりやすくするために必要な場合は、個々のツールバーボタンに色を含めることができます。アクティブな設定ペインを示すために、ウィンドウは選択されたツールバーボタンにシステム提供の選択した外観を適用します。
| macOS 11 | macOS 10.15 |
ウィンドウに複数のペインが含まれている場合は、ツールバー項目のさまざまなサブセットを各ペインに揃えることができます。これにより、人々がウィンドウのサイズを変更しても、項目の各セットは関連したビューの上に残ります。
| サイズ変更前 | サイズ変更後 |
サイドバー
macOS 11 では、サイドバー (技術的には ソースリスト と呼ばれます) がウィンドウの高さ全体まで拡張されます。サイドバー内では、デフォルトの項目間隔、行の高さ、およびグリフサイズがすべて増加し、選択された項目のハイライトは丸みを帯びたコーナーの外観を使用します。
| macOS 11 | macOS 10.15 |
サイドバーの行の高さ、テキスト、およびグリフのサイズは、全体のサイズによって異なり、小、中、大のいずれかになります。サイズはプログラムで設定できますが、ユーザは [General(一般)] の設定で別のサイドバーアイコンサイズを選択してサイズを変更することもできます。以下の表は、macOS 11 と以前のバージョンの macOS のデフォルトのサイドバーの大きさの違いを示しています。
| サイドバーの サイズ | サイドバーの部品 | macOS 11 (デフォルト) | macOS 10.15以前 (デフォルト) |
| 小 | 行の高さ | 24pt | 22pt |
| SF シンボルの スケール | 中 * | – | |
| グリフのサイズ | 16pt × 16pt | – | |
| テキストのサイズ (スタイル) | 11pt (サブヘッド) | 11pt | |
| 中 | 行の高さ | 28pt | 24pt |
| SF シンボルの スケール | 中 | – | |
| グリフのサイズ | 20pt × 20pt | 18pt × 18pt | |
| テキストのサイズ (スタイル) | 13pt (ボディー) | 13pt | |
| 大 | 行の高さ | 32pt | 32pt |
| SF シンボルの スケール | 中 | – | |
| グリフのサイズ | 24pt × 24pt | 24pt × 24pt | |
| テキストのサイズ (スタイル) | 15pt (タイトル 3) | 13pt | |
| 全て | セル同士の水平間隔 | 17pt | 3pt |
| セル同士の垂直間隔 | 0pt | 2pt |
*場合によっては、小さなサイドバーがデフォルトで小さなスケールの SF シンボルを使用することがあります。
SF シンボルの使用は、新しいメトリックを使用するサイドバーグリフを作成する最も簡単な方法です。または、PDF テンプレートイメージを使用してサイドバーグリフを作成することもできます。ビットマップイメージを使用しなければならない場合は、必ず @1x と @2x の両方の解像度で、小、中、大のサイズで作成してください。
デフォルトでは、サイドバーのグリフは現在のアクセントカラーを使用します (詳細については、アプリアクセントカラー を参照してください)。個々のサイドバーグリフの意味を明確にする必要がある場合は、ユーザーの アクセントカラー の環境設定に関係なく持続する固定カラーを指定できます。アプリ全体を定型化するために、固定した色を指定する機能を使用しないでください。macOS では、人々は使用するすべてのアプリを通して選択したアクセントカラーが表示されることを期待しています。
テーブルビュー
macOS 11 では、テーブル(表)ビューが全体的に大きくなり、より高い行、より大きなフォントサイズ、および項目間のより多くのスペースが使用され、テーブルコンテンツ内およびその周囲の視覚的な分離が向上しています。macOS 11 では、特定のウィンドウ領域で適切に機能するさまざまな外観を定義するために、挿入、全幅、自動の 3 つのテーブルビュースタイルが導入されています。開発者向けガイダンスについては、NSTableView.style を参照してください。
インセットスタイルは、macOS 11 テーブルにインセットをの拡張して追加します。Inset(はめ込み) スタイルはコンテンツの周囲の視覚的スペースを増やすため、サイドバーやツールバーなどの他のビュー間の領域を埋めるテーブルでうまく機能し、サイドバーの外観の変化を反映します。
従来の全幅のテーブルスタイルは引き続き使用できますが、各行の最初と最後に必要なコンテンツのパディングが自動的に含まれます。全幅スタイルは、設定ペイン内に埋め込まれたテーブルなど、すでに周囲に視覚的なマージンがあるテーブルに最適です。
automati (自動) スタイルとは、システムがビュー階層内のテーブルビューの位置を使用して、その外観を決定するのに役立つことを意味します。
より広々としたテーブルを作成するために、macOS 11 はいくつかの新しいテーブルビューメトリックを使用します。以下の図では、macOS 11 と macOS 10.15 以前の間でテーブル行のレイアウトがどのように異なるかを確認できます。
| macOS 11 | macOS 10.15 |
以下の表に、上記のテーブル行レイアウト領域の値を示します。
| テーブルビューメトリック | macOS 11 | macOS 10.15 以前 |
| 推奨される行の高さ | 24pt | 17pt |
| テキストのみの最小の行の高さ | 18pt | 17pt |
| 行の前後の縁の inset (はめ込み) | 10pt (inset スタイル) 0pt (他のスタイル) | – |
| 行の前後の端でのパディング | 6pt | – |
| セル間の間隔 | (17,0) | (3,2) |
| テキストのサイズ (スタイル) | 13pt (Body) | 11pt |
上記の表にリストされている値に加えて、macOS 11 のインセットスタイルのテーブルには、最初の行の前と最後の行の後に 10 ポイントの垂直インセットも含まれています。
新しいメトリックに従うようにテーブルコンテンツのレイアウトを調整すると、以下のようになります。
アプリを更新しない場合、アプリを macOS 11 で実行しても、テーブルの外観は変わりません。例外は、サイドバーを実装するテーブルです。テーブルスタイルをソースリストとして識別すると、システムは新しいサイドバーの外観を自動的に適用します。ガイダンスについては、サイドバー を参照してください。 開発者向けガイダンスについては、NSTableView.style.sourceList を参照してください。
ヒント
macOS 11 では、テーブルの幅は引き続きその行の幅と同じですが、新しいパディングとインセットにより、列とセルが行全体をカバーするのを妨げます。また、システムは指定されたスタイルを使用して、選択の外観や行の色の変更など、行の背景機能に追加するスペースを決定します。カスタムの背景の外観など、行を完全にカバーするコンテンツを提供する必要がある場合は、セルではなく行に追加して下さい。
シート
シートは親ウィンドウのツールバーの下端から展開されなくなりました。macOS 11 では、シートは淡色表示された親ウィンドウの上に浮かぶ丸みを帯びた長方形のビューです。
アラート
アラートは、macOS 11 のすべてのウィンドウと同じ角の半径を使用するカードのような長方形です。アラート内では、ほとんどのコンテンツが中央揃えになっています。
赤いテキストを使用して、アラートの破壊的なアクションを強調することもできます。
メニュー
macOS 11 では、メニューとメニューコンテンツに視覚的な変更が加えられています。標準メニューとメニュー項目を使用する場合、以下のデフォルトの外観が自動的に取得されます。
| macOS 11 | macOS 10.15 |
コントロール
チェックボックス、ポップアップボタン、押しボタン、そしてセグメント化されたコントロールなどの更新された AppKit コントロールは、見慣れた外観を維持しながら iOS コントロールと調和し、シンプルさと大胆さを強調します。あなたのアプリで標準の AppKit コントロールを使用する場合、新しい外観を採用するためにインターフェースを調整する必要はありません。例外は、背の高いスライダーです。
| スライダー | サイズ | macOS 11 (デフォルト) | macOS 10.15 以前 (デフォルト) |
| tick マークなし | 普通 | 28pt | 19pt |
| 小 | 20pt | 15pt | |
| ミニ | 17pt | 13pt | |
| tick マークあり | 普通 | 28pt | 24pt |
| 小 | 20pt | 18pt | |
| ミニ | 17pt | 15pt |
| macOS 11 | macOS 10.15 |
tick マークなし
tick マークあり
macOS 11 以降、tick (目盛り) の付いたスライダーのトラックは thumb (親指) の中心に揃えられます。
タイポグラフィー
macOS 11 以降、SF Pro は可変フォントとして利用できます。可変フォント形式は、アップライトとイタリックの両方で、サポートされているすべてのウェイト (通常、太字、超軽量など) のグリフを含む単一のパッケージを提供します。可変形式はまた、光学サイズ化もサポートしており、これは、グリフ間を補間して、すべてのデザインに適合するサイズ固有バージョンの SF Pro を作成する方法です。光学サイズ化は、SF Pro の固定範囲のテキストおよびディスプレイバリアントの必要性を置き換えます。
macOS 11 ではまた、ボディー、見出し、コールアウトなど、あらゆる種類のテキストスタイルのサポートも導入されています。ダイナミックタイプは macOS 11 では使用できません。ガイダンスについては、印刷 を参照してください。
ウイジェット
ウィジェットは、あなたのアプリからの少しの有用なコンテンツを美しく、一目でわかる方法で昇格させます。macOS 11 では、ウィジェットを小、中、大のサイズで作成できます。人々はあなたのウィジェットを通知センターに追加するときに彼らが望むサイズを選択します。
iOS および iPadOS 用のウィジェットを作成することもできます。ガイダンスについては、ウィジェット を参照してください。 開発者向けガイダンスについては、WidgetKit (WidgetKit) を参照してください。
