アプリのアイコン
美しいアプリのアイコンは、すべての Apple プラットフォームのユーザ体験の重要な部分です。ユニークで記憶に残るアイコンはアプリを連想させ、デスクトップ、Finder、Dock で一目でそれを人々に認識できるようにします。洗練された、表現力豊かなアイコンはまた、アプリの個性や全体的な品質レベルを示唆します。
macOS 11 では、アプリのアイコンは、角の丸い長方形で、正面を向いた視点、水平位置、均一なドロップシャドウなどを含む、共通の視覚的属性のセットを共有します。macOS 11 デザイン言語に根ざした、これらの属性は、調和のとれたユーザ体験を提供しながら、人々が macOS に期待する命のようなレンダリングスタイルを示しています。正しい形状とドロップシャドウを指定するテンプレートをダウンロードするには、Apple Design Resources を参照してください。
重要
macOS 11 用にあなたのアプリを更新するときは、新しいアプリのアイコンのデザインを使用して、以前のバージョン用にデザインしたアイコンを置き換えます。1 つのアプリに 2 つの異なるアプリのアイコンを含めることはできません。また、macOS 11 アプリのアイコンのスタイルは、Catalina 以前を実行している Mac では問題なく表示されます。
あなたのアプリを明確に表す美しいアイコンをデザインします。 魅力的なデザインと、人々がすぐに理解できるアプリの目的の芸術的な解釈を組み合わせます。
シンプルさを受け入れて下さい。 あなたのアプリの本質を捉えたコンセプトや要素を見つけて、シンプルでユニークな方法で表現し、そうすることで意味が高まる場合にのみ、詳細を追加します。詳細が多すぎると、識別が難しくなり、特に小さいサイズではアイコンが濁って見える可能性があります。
単一のフォーカスポイントを確立します。 中央に配置された単一のスポットは、ユーザの注意を引き付け、ユーザがあなたのアプリを一目で認識できるようにします。複数のフォーカスポイントを提示すると、アイコンのメッセージがわかりにくくなります。
慣れ親しんだ一貫した体験を人々に提供するには、複数のプラットフォームでうまく機能するデザインをお勧めします。 あなたのアプリが他のプラットフォームで実行する場合は、すべてのアプリのアイコンに同様のイメージを使用し、各プラットフォームに適したスタイルでレンダリングします。たとえば、iOS と watchOS では、メール アプリのアイコンは白い封筒を合理化されたグラフィカルなスタイルで表現しています。macOS 11 では、封筒には、リアルな重さと質感を伝える奥行きとディテールが含まれています。
iOS
macOS 11
人々があなたのアプリを使って何をするかを伝えるために、なじみのあるツールを描くことを検討してください。 あなたのアプリの目的にコンテキストを与えるために、アイコンの背景を使用して、ツールの環境やツールが影響を与えるアイテムを表すことができます。たとえば、TextEdit アイコンは、シャープペンシルと罫線入り用紙を組み合わせて、実用的な執筆体験を提案します。ツールの、詳細でリアルなイメージを作成した後、ツールを背景のすぐ上に浮かせ、アイコンの境界をわずかに超えて拡張すると、多くの場合うまく機能します。これを行う場合は、ツールが背景と視覚的に統一されたままであり、角の丸い長方形を圧倒しないことを確認してください。
実際のオブジェクトをリアルに見せます。 あなたのアプリのアイコンで実際のオブジェクトを描写する場合は、それらが実際の材料でできており、実際の質量を持っているように見せます。布、ガラス、紙、金属などの物質の特性を複製して、オブジェクトの重量と感触を伝えます。たとえば、Xcode アプリのアイコンは、スチール製のヘッドとポリマー製のグリップを備えているように見えるハンマーを備えています。
あなたのアプリの目的を伝えるためにテキストが不可欠な場合は、グラフィックの抽象化を作成することを検討してください。 アイコン内の実際のテキストは読みにくい場合があり、アクセシビリティやローカリゼーションをサポートしていません。人々がそれを読むためにズームインする必要があることを暗示することなくテキストの印象を与えるために、それを示唆するグラフィックテクスチャを作成することができます。
写真やあなたのアプリの UI の一部を表現するには、人々に注目してもらいたい機能を強調する理想的なイメージを作成します。 写真は、小さなサイズで表示するとメインコンテンツを不明瞭にする、詳細でいっぱいになることがよくあります。アイコンに写真を使用したい場合は、主要な被写体を際立たせる、非常に対照的な値の写真を選択してください。一次線や形状をぼやけさせたり不明瞭にしたりする重要でない詳細を削除します。あなたのアプリに人々が認識できる UI がある場合は、標準の UI 要素を複製したり、あなたのアイコンにスクリーンショットを使用したりしないでください。代わりに、UI を反映し、あなたのアプリの個性を表現するグラフィックをデザインすることを検討してください。
Apple ハードウェア製品のレプリカは使用しないでください。 Apple 製品は著作権で保護されており、アイコンやイメージに複製することはできません。ハードウェアのデザインは頻繁に変更される傾向があり、アイコンが古くなっているように見えるため、デバイスのレプリカを表示することは避けてください。
アイコンデザインテンプレートでドロップシャドウを使用します。 テンプレート には、あなたのアプリのアイコンを他の macOS 11 アイコンと調整するのに役立つシステムで定義されたドロップシャドウが含まれています。
内部のシャドウとハイライトを使用して、定義とリアリズムを追加することを検討してください。 たとえば、メール アプリのアイコンは、シャドウとハイライトの両方を使用して、封筒の信頼性を高め、フラップが少し開いていることを示します。TextEdit や Xcode など、背景の上に浮かぶツールを含むアイコンでは、内部の影によって奥行きの知覚が強化され、ツールがリアルに見えるようになります。シャドウとハイライトは、アイコンに面し、中央の真上に配置され、わずかに下に傾いた光源を示唆しています。
角の丸い長方形以外の形状を示唆する輪郭を定義することは避けてください。 まれに、基本的なアプリのアイコンの形状を微調整したい場合がありますが、そうすると、macOS 11 に属していないように見えるアイコンが作成されるリスクがあります。形状を変更しなければならない場合は、丸みを帯びた長方形のシルエットを表現し続ける微妙な調整をお勧めします。
あなたのアイコンの端のすぐ内側にわずかな輝きを追加することを検討してください。 あなたのアプリのアイコンにガラスや金属などのダークな反射面が含まれている場合は、内側の輝きを追加してアイコンを目立たせ、ダークな背景に溶けないようにします。
プライマリコンテンツをアイコングリッドの境界ボックス内に保持します。すべてのコンテンツを外側の境界ボックス内に保持します。 アイコンのプライマリコンテンツがアイコングリッドの境界ボックスを超えている場合、見た目がおかしくなる傾向があります。以下に示すように、ツールをアイコンに重ねると、ツールの上端を外側の境界ボックスに、下端を内側の境界ボックスに揃えることができます。
跳ね返るボックスと推奨されるツールの配置に加えて、アイコンデザインテンプレートは、アイコン内にアイテムを配置するのに役立つグリッドを提供します。アイコングリッドを使用して、円などの中央に配置された内側の要素が、システム内の他のアイコンと一致するサイズを使用するようにすることもできます。
アプリのアイコンの属性
すべてのアプリのアイコンは、以下の仕様を使用する必要があります。
| 属性 | 値 |
| フォーマット | PNG |
| 色空間 | sRGB (カラー) 又は Gray Gamma 2.2 (グレイスケール) |
| 層 | 必要に応じて透明度で平らにする |
| 解像度 | @1x と @2x (イメージのサイズと解像度 を見よ) |
| 形状 | 丸い角の正方形 |
ICNS または JPEG 形式のアプリのアイコンを提供しないでください。 ICNS 形式は、広色域などの機能をサポートしておらず、アセットカタログを使用するときに得られるパフォーマンスと効率を提供しません。JPEG はアルファチャネルを介した透明度をサポートしておらず、その圧縮によりアイコンのイメージがぼやけたり歪んだりする可能性があります。最良の結果を得るには、インターレース解除された PNG ファイルを Xcode プロジェクトのアセットカタログのアプリアイコンフィールドに追加します。
アプリのアイコンのサイズ
あなたのアプリのアイコンは、Finder、Dock、Launchpad、App Store などの多くの場所に表示されます。アプリのアイコンがどこにでも見栄え良く表示されるようにするには、以下のサイズでアイコンを指定します。
すべてのアイコンサイズで視覚的な一貫性を維持します。 アイコンのサイズが小さくなると、細部が濁って区別しにくくなります。最小サイズでは、コンテンツを明確に保つために、不要な機能を削除し、主要な機能を誇張することが重要です。視覚的に小さいアイコンを単純化するときは、大きいアイコンと大幅に異なって表示されないようにしてください。さまざまな環境で表示されたときにアイコンが視覚的に一貫していることを保証する微妙なバリエーションを作成するように努めてください。たとえば、解像度の異なるディスプレイ間でアイコンを人々がドラッグしても、アイコンの外観が突然変わることはありません。
