視覚的デザイン
あなたのアプリの Mac バージョンの見栄えを良くするために、視覚的なデザインの以下の領域でプラットフォームの違いに対処してください。
レイアウト
Mac ユーザーは、アプリウィンドウのサイズを、フルスクリーン表示からアプリが許す限りの小さいサイズまで、ほぼ任意のサイズに変更することを期待しています。このタイプの無限のサイズ変更をサポートし、より広い Mac ディスプレイを利用するには、通常の幅と通常の高さのサイズクラスを使用し、必要に応じて、ウィンドウのコンテンツ領域内の要素を横並びの配置にリフローすることを検討してください。
可能な限り、トップダウンのユーザーフローを採用します。 Mac アプリは、最も重要なアクションとコンテンツをウィンドウの上部近くに配置します。あなたの iOS アプリがツールバーまたはナビゲーションバーにコントロールを提供する場合、これらのコントロールをあなたのアプリの macOS バージョンのウィンドウのツールバーに配置して下さい。
コントロールをあなたの iPad アプリのメイン UI から Mac アプリのツールバーに移動することを検討してください。 さらに、macOS アプリのメニューバーのメニューで、これらのコントロールに関連するコマンドを一覧表示します。
注意
macOS では、ツールバーボタンは常に表示されますが、現在のコンテキストでは使用できない場合があります。iOS では、ツールバーボタンは常に使用可能ですが、現在のコンテキストではツールバーから削除される場合があります。たとえば、あなたの iOS アプリに 1 つのタブでのみ機能するツールバーボタンが含まれている場合、macOS バージョンでは、そのボタンは他のすべてのタブでは使用できないものとして表示されます。
スクリーンの左端または右端からボタンを配置し直します。 iPad では、中央左または中央右のスクリーンの端にボタンを配置すると、人々がボタンに到達しやすくなりますが、Mac では、この人間工学的な考慮事項は当てはまりません。コントロールをコンテンツ領域の上端または下端に配置し直すか、macOS ウィンドウのツールバーに配置することができます。
カラー
両方のプラットフォームでシステムのアクセントカラーを使用します。 iOS アプリは、ボタンの tint や選択を示すために使用される色を定義しています。対照的に、Mac ユーザーは、アプリが [システム設定] で選択したアクセントカラーを使用することを期待しています。
以下に示すように、iOS の背景用に設計された 動的なシステムカラー は、適切な macOS の対応する物に自動的にマッピングされます。
the および the ラベルやセパレーターの色など、意味的に定義されたその他の iOS の色は、同様の名前の macOS の色にマッピングされます。ガイダンスについては、macOS を参照してください。
表の行のボタンに tint を付けないでください。 iOS アプリでは、表の行のボタンがアクティブであることを示すために tint を使用しますが、macOS では、表の行の tint のボタンは場違いに見えます。
タイポグラフィー
iPad の様式を使用すると、システムはテキストを自動的に縮尺して、プラットフォームごとに異なるフォント値を指定しなくても、適切な結果が得られます。ただし、すべての状況で最良の結果が得られるとは限りません。
小さい文字が Mac で判読できることを確認してください。 macOS バージョンでもすべてのテキストが読みやすいままになるように、あなたの iOS アプリで使用する最小のフォントサイズのいくつかを大きくする準備をしてください。また、macOS は Dynamic Type をサポートしていないことに注意してください。
Mac の様式を採用する場合は、テキストのフォントサイズを調整して下さい。 iPad の様式では、システムはテキストをそのサイズの 77% に縮尺します。たとえば、iOS のベースラインのフォントサイズである 17pt を使用するテキストをシステムは、macOS では 13pt に縮小します。Mac の様式では、テキストは構成されたサイズの 100% でレンダリングされるため、調整しないと大きすぎるように見えます。可能であれば、テキストスタイルを使用し、固定フォントサイズは避けてください。ガイダンスについては、Mac 様式の採用 を参照してください。
カスタムアイコンとグリフ
あなたのアプリアイコンの macOS バージョンを作成して下さい。 優れた macOS のアプリアイコンは、人々が macOS に期待する、命のあるようなレンダリングスタイルを示し、すべてのプラットフォームで調和のとれたユーザー体験を提供します。ガイダンスについては、アプリのアイコン を参照してください。
SF シンボルが提供するシンボルを使用することが望ましいです。 SF Symbols は、プラットフォーム間で一貫したアイコンを提供するために使用できる、一貫性のある高度に構成可能なシンボルのセットを提供します。あなたの iOS および macOS アプリで使用する独自のカスタムシンボルのイメージを作成することもできます。さらに、macOS 11 以降では、AppKit 共有イメージ (アクション、追加、ブックマークのコントロールアイコンなど) が特定のシンボルに自動的にマッピングされます。その結果、あなたのアプリは、macOS 11 以降が実行される Mac のツールバーなどのインターフェイス要素で、SF シンボルによって提供されるシンボルイメージを既に表示している場合があります。SF シンボルを使用すると、あなたのアプリのアイコンが macOS の一般的なアイコンと一致するようになります。
ガイダンスについては、SF シンボル を参照してください。
必要に応じて、プラットフォーム固有のグリフを作成して下さい。 何らかの方法でプラットフォームを参照するカスタムグリフをあなたの iOS アプリで使用している場合は、Mac になじみのある新しいグリフを作成して下さい。Xcode には、macOS 固有のグリフ用にあなたの iOS アプリで使用できる個別のアセットカタログが用意されています。
設定
iOS の[設定] アプリに表示されるアプリ設定を指定すると、あなたの macOS アプリは自動的に [設定] メニュー項目と [設定] ウィンドウを表示します。あなたの iOS アプリが子ペインを使用して設定を階層的に整理している場合、macOS は、各子ペインのタブを含むツールバーを [設定] ウィンドウに自動的に追加します。各タブは、標準のシステム設定アイコンと子ペインのタイトルを使用します。ユーザーがタブをクリックすると、子ペインの設定項目が表示されます。
Mac ユーザーが期待するように、あなたのアプリメニューの [設定] メニュー項目を選択すると、設定ウィンドウが表示されます。ただし、子ペインと設定項目の表示を調整し、あなたのアプリの設定体験を Mac でより親しみやすくする方法がいくつかあります。
各タブのアイコンをカスタマイズします。 macOS はあなたの設定項目に標準のシステム設定アイコンを自動的に使用するため、人々は複数の項目を区別するために各ツールバーボタンのタイトルを読む必要があります。この体験を向上させるには、設定項目ごとにカスタムアイコンを指定して、各タブに異なるアイコンが表示されるようにします。
macOS ユーザーがスイッチコントロールを理解しやすいようにします。 iOS [設定] 内のスイッチには、スイッチがユーザー体験に与える影響に関する詳細情報を提供する少量のテキストを含めることができます。さらに、Mac アプリは、iOS アプリとは異なり、ユーザーがスイッチを使用して設定を変更すると、確認アラートを表示することがよくあります。アプリの設定に関する macOS プラットフォームの規則に従うには、スイッチに付随する簡単な説明を提供し、人々が設定を変更したときに確認アラートに表示するコンテンツを指定します。開発者向けガイダンスについては、設定ウィンドウの表示 (Displaying a Preferences window) を参照してください。
リソース
関連
開発者用文書
Mac Catalyst (Mac Catalyst)
