文書のアイコン
文書のアイコン は、あなたのアプリがサポートする文書の型を使用するファイルを表します。伝統的に、文書のアイコンは、右上隅が折りたたまれた一枚の紙のように見えます。この独特の外観は、アイコンのサイズが小さい場合でも、文書をアプリやその他のコンテンツから区別するのに役立ちます。
サポートしているファイルの型の文書のアイコンを提供しない場合、macOS 11 は、アプリのアイコンとファイルの拡張子をキャンバス上に合成することで文書のアイコンを作成します。たとえば、プレビュー では、システムで生成された文書のアイコンを使用して JPG ファイルを表します。

注意
あなたのアプリが以前のバージョンの macOS で実行されている場合は、レガシーの文書のアイコンを提供する必要があります。以前のバージョンの macOS に文書のアイコンを生成させると、バージョンごとに異なる結果が得られます。具体的には、macOS 10.15 では、あなたのアプリのアイコンを合成して文書のアイコンを作成しますが、ファイル拡張子は作成しません。macOS 10.14 以前では、アセットを提供しない場合は汎用の文書の背景を使用します。
あなたのアプリが 1 つ以上のカスタムファイルの型を開く場合、それらを表すカスタム文書のアイコンを作成できます。たとえば、Xcode はカスタム文書のアイコンを使用して、プロジェクト、AR オブジェクト、および Swift コードファイルの文書を人々が区別できるようにします。



カスタムの文書のアイコンを作成するには、背景の塗りつぶし、中央のイメージ、テキストの任意の組み合わせを指定できます。macOS 11 は、必要に応じてこれらの要素を macOS の層を作成し、配置し、マスクし、おなじみの折り畳まれた角のアイコンの形に合成します。

背景の塗りつぶし

中央のイメージ

テキスト

macOS 11 は、提供した要素を合成して、カスタムの文書のアイコンを生成します。
Apple Design Resources は、文書のアイコン用のカスタム背景塗りつぶしと中央のイメージを作成するために使用できるテンプレートを提供しています。このテンプレートを使用するときは、以下のガイドラインに従ってください。
文書の型を明確に伝えるシンプルなイメージをデザインします。 背景の塗りつぶし、中央のイメージ、またはその両方を使用するかどうかにかかわらず、複雑でない形状と明確な色の縮小されたパレットを好みます。あなたの文書のアイコンは 16x16pt まで小さく表示できるため、あらゆるサイズで認識できるデザインを作成する必要があります。
背景の塗りつぶし用に単一の表現力豊かなイメージをデザインすることは、人々が文書の型を理解して認識するのに役立つ優れた方法です。たとえば、Xcode と TextEdit はどちらも、中央のイメージを含まないリッチな背景イメージを使用します。


あなたのアイコンの小さなバージョンの複雑さを軽減することを検討してください。 大きいバージョンでは明確なアイコンの詳細が小さなバージョンではぼやけて見え、認識しにくい場合があります。たとえば、カスタムのハート文書のアイコンのグリッド線を中間サイズで明確に保つには、使用する線を少なくし、縮小されたピクセルグリッドに揃えて太くします。16x16 ピクセルのサイズでは、行を完全に削除できます。
32x32 px のアイコンは、グリッド線が少なく、EKG 線が太くなっています。
16x16 px @2x のアイコンは、EKG 線を保持しますが、
グリッド線はありません。
16x16 px @1x のアイコンには、EKG 線もグリッド線もありません。
背景の塗りつぶしでは右上隅に重要なコンテンツを配置することは避けてください。 システムは、文書のアイコンの形状に合うようにイメージを自動的にマスクし、塗りつぶしの上に白い折り畳まれた角を描画します。以下に示すサイズの背景イメージのセットを作成します。
使い慣れたオブジェクトまたはグリフが文書の型またはあなたのアプリとの関係を伝えることができる場合は、それを表す中央のイメージを作成することを検討してください。 あらゆるサイズで、鮮明で認識可能な、シンプルで明確なイメージをデザインします。中央のイメージは、文書のアイコンキャンバス全体の半分のサイズです。たとえば、32x32 pt の文書のアイコンの中央のイメージを作成するには、16x16 pt 大のイメージキャンバスを使用します。以下のサイズで中央のイメージを提供できます。
イメージキャンバスの約 10 %を測定するマージンを定義し、その中にイメージの大部分を保持します。 イメージの一部は光学的位置合わせのためにこのマージンまで拡張できますが、イメージがイメージキャンバスの約 80 %を占める場合に最適です。たとえば、256x256 pt のキャンバスの中央のイメージのほとんどは、205x205 pt の領域に収まる必要があります。

人々があなたの文書の型を理解するのに役立つ場合は、簡潔な用語を指定してください。 デフォルトでは、システムは文書のアイコンの下端に文書の拡張子を表示しますが、拡張子に慣れていない場合は、よりわかりやすい用語を指定できます。たとえば、SceneKit のシーンファイルの文書のアイコンでは、ファイル拡張子 scn の代わりに scene という用語を使用します。システムは、文書のアイコンに収まるように拡張テキストを自動的に拡大縮小するため、小さいサイズでも読みやすいように十分に短い用語を使用してください。デフォルトでは、システムはテキスト内のすべての文字を大文字で始めます。
