XCode 13.4 日本語化計画：New Human Interface Guideline

アプリのアイコン

独自の、記憶に残るアイコンは、あなたの体験の目的と個性を伝え、人々が App Store やデバイスであなたのアプリやゲームを一目で認識できるようにします。

美しいアプリアイコンは、すべての Apple プラットフォームでのユーザー体験の重要な部分であり、すべてのアプリとゲームに 1 つなければなりません。プラットフォームごとにアプリアイコンのスタイルがわずかに異なるため、強力な視覚的一貫性とメッセージを維持しながら、さまざまな形状や詳細レベルにうまく適応するデザインを作成する必要があります。各プラットフォームのアイコンの作成に役立つテンプレートをダウンロードするには、Apple Design Resources を参照してください。他の型のアイコンを作成するためのガイダンスについては、アイコン を参照してください。

ベストプラクティス

シンプルさを受け入れましょう。 シンプルなアイコンは、人々が理解し、認識しやすい傾向があります。あなたのアプリやゲームの本質を捉えたコンセプトや要素を見つけ、それをアイコンの焦点にして、シンプルで独自な方法で表現します。特に小さいサイズでは、識別が難しく、アイコンが濁って見えるため、詳細を追加しすぎないようにしてください。主なイメージを強調するシンプルな背景をお勧めします。アイコン全体をコンテンツで埋める必要はありません。

複数のプラットフォームでうまく機能するデザインを作成して、それぞれでくつろげるようにします。 あなたのアプリやゲームが複数のプラットフォームで実行できる場合は、すべてのアイコンに同様のイメージとカラーパレットを使用し、各プラットフォームに適したスタイルでレンダリングします。たとえば、iOS と watchOS では、メール アプリのアイコンは合理化された、グラフィカルスタイルを使用して、青い背景に白い封筒を描きます。macOS は同様の青い背景を使用し、封筒に奥行きとディテールを追加して、リアルな重量と質感を与えます。

テキストがあなたの体験やブランドの本質的な部分である場合にのみ、テキストを含めることをお勧めします。 アイコン内のテキストは小さすぎて読みにくいことが多く、アイコンが乱雑に見える可能性があり、アクセシビリティやローカリゼーションをサポートしていません。一部のコンテキストでは、アプリ名がアイコンの近くに表示されるため、アイコン内に名前を表示するのは冗長になります。あなたのアプリ名の最初の文字のような記憶補助を使用すると、人々があなたのアプリやゲームを認識しやすくなりますが、"見る" や "遊ぶ" など、それをどうするかを人々に伝える重要でない単語や、"新規" や "iOS 用" などの文脈に特異的な用語を含めるのは避けて下さい。

写真よりもグラフィックイメージを優先し、アイコンで UI コンポーネントを複製しないようにします。 写真には細部がたくさんあり、小さいサイズで表示するとうまく機能しません。写真を使用する代わりに、人々に注目してもらいたい機能を強調するコンテンツのグラフィック表現を作成します。同様に、あなたのアプリに人々が認識できるインターフェースがある場合は、標準の UI コンポーネントを複製したり、アイコン内にアプリのスクリーンショットを使用したりしないでください。

必要に応じて、あなたのアイコンを調整して、人々が遭遇するすべてのサイズで見栄えを良くします。 たとえば、App Store は大きなバージョンを表示しますが、システムは Spotlight の検索結果、設定、通知などの場所に小さなバージョンを表示します。iOS、iPadOS、および watchOS では、システムは 1024×1024 px のアプリアイコンを使用して他のすべてのサイズを生成できます。macOS と tvOS では、すべてのサイズを供給する必要があります。システムで生成されたバージョンのアプリアイコンを使用せずに独自のバージョンを作成する場合は、アイコンのサイズが小さくなってもイメージが鮮明なままであることを確認してください。たとえば、細かい部分や不要な機能を削除して、イメージを単純化し、主要な機能を誇張することができます。一般に、あなたのアプリアイコンがすべてのコンテキストで視覚的に一貫しているように、微妙な変更を加えるのが最善です。

アイコンを純血の正方形のイメージとしてデザインします。 ほとんどのプラットフォームでは、システムは、プラットフォームの美観に一致するようにアイコンの角を自動的に調整するマスクを適用します。たとえば、watchOS は自動的に円形マスクを適用します。例外は macOS です。システムは丸みを帯びた長方形の外観を Mac Catalyst で作成されたアプリのアイコンに適用しますが、macOS アプリのアイコンを正しい形で作成する必要があります。プラットフォームごとにアプリアイコンを作成するのに役立つダウンロード可能な生成テンプレートについては、Apple Design Resources を参照してください。

代替のアプリアイコンを提供することを検討してください。 iOS、iPadOS、および tvOS では、人々はアイコンの代替バージョンを選択でき、これにより、アプリやゲームとの接続を強化し、体験を向上させることができます。たとえば、スポーツアプリは、チームごとに異なるアイコンを提供する場合があります。デザインする各代替アプリアイコンが、コンテンツと体験に密接に関連していることを確認してください。人々が別のアプリのアイコンと間違える可能性のあるバージョンを作成することは避けてください。人々が代替のアイコンに切り替えたい場合は、アプリの設定にアクセスできます。

Apple ハードウェア製品の模造品は使用しないでください。 Apple 製品は著作権で保護されており、アプリのアイコンで複製することはできません。

プラットフォームの考慮事項

iOS,iPadOS

設定アイコンにかぶせ物や境界線を追加しないでください。 iOS は、すべてのアイコンに 1 ピクセルのストロークを自動的に追加して、設定の白い背景で見栄えがするようにします。

macOS

macOS では、アプリアイコンは、角の丸い長方形、正面を向いた視点、水平位置、均一な陰影の投げかけなど、共通の視覚的属性のセットを共有します。macOS のデザイン言語に根ざしたこれらの属性は、調和のとれたユーザー体験を提供しながら、人々が macOS に期待する生命のようなレンダリングスタイルを示しています。

人々があなたのアプリを使って何をするかを伝えるために、使い慣れたツールを描くことを検討してください。 あなたのアプリの目的にコンテキストを与えるために、アイコンの背景を使用して、ツールの環境またはツールが影響を与えるアイテムを表すことができます。たとえば、TextEdit アイコンは、シャープペンシルと罫線入り用紙を組み合わせて、実用的なライティング体験を提案します。ツールの詳細でリアルなイメージを作成した後、ツールを背景のすぐ上に浮かせ、アイコンの境界をわずかに超えて拡張すると、多くの場合うまく行きます。これを行う場合は、ツールが背景と視覚的に統一されたままであり、角の丸い長方形を圧倒しないことを確認してください。

あなたのアプリのアイコンで実際のオブジェクトを描写する場合は、それらが実際の素材でできており、実際の質量を持っているように見せます。 オブジェクトの重量と感触を伝えるために、布、ガラス、紙、金属などの物質の特性を複製することを検討してください。たとえば、Xcode アプリのアイコンは、スチール製のヘッドとポリマー製のグリップがあるように見えるハンマーが特徴的です。

アイコンデザインテンプレートの投げ掛ける陰影を使用します。 アプリのアイコンテンプレート には、あなたのアプリのアイコンを他の macOS アイコンと協調させるのに役立つシステムで定義された、投げ掛ける陰影が含まれています。

内部の陰影とハイライトを使用して、定義とリアリズムを追加することを検討してください。 たとえば、メール アプリのアイコンは、陰影とハイライトの両方を使用して、封筒の信頼性を高め、縁がわずかに開いていることを示します。TextEdit や Xcode など、背景の上に浮かぶツールを含むアイコンでは、内部の影によって奥行きが強化され、ツールがリアルに見えるようになります。陰影とハイライトは、アイコンに面し、中央の真上に配置され、わずかに下に傾いた光源を示唆しています。

丸みを帯びた長方形以外の形状を示唆する輪郭を定義することは避けてください。 まれに、基本的なアプリアイコンの形状を微調整したい場合がありますが、そうすると、macOS に属していないように見えるアイコンが作成されるリスクがあります。形状を変更しなければならない場合は、丸みを帯びた長方形のシルエットを表現し続ける微妙な調整をお勧めします。

主なコンテンツをアイコングリッドの境界ボックス内に保持します。すべてのコンテンツを外側の境界ボックス内に保持します。 アイコンの主なコンテンツがアイコングリッドの境界ボックスを超えている場合、見た目がおかしくなる傾向があります。以下に示すように、ツールでアイコンを覆うと、ツールの上端を外側の境界ボックスに、下端を内側の境界ボックスに揃えることができます。グリッドを使用して、アイコン内にアイテムを配置し、円などの中央に配置された内側の要素が、システム内の他のアイコンと一致するサイズを使用するようにできます。

(上より)ツールの角度(おおよそ)、アイコングリッド、アイコングリッドの境界ボックス、内側の境界ボックス、外側の境界ボックス

tvOS

tvOS アプリのアイコンは、2〜5 個の層を使用して、人々が焦点を合わせたときに奥行きと活力の感覚を生み出します。ガイダンスについては、レイヤードイメージ を参照してください。

適切な層の分離を使用してください。 アイコンにロゴが含まれている場合は、ロゴを背景から分離します。アイコンにテキストが含まれている場合は、視差効果が発生したときに他のレイヤーによって隠されないように、テキストを前面に移動します。

グラデーションと陰影は慎重に使用してください。 背景のグラデーションと飾り模様は、視差効果と衝突する可能性があります。グラデーションの場合は、上から下、明るさから暗さのスタイルを選択します。陰影は通常、背景の層に焼き付けられ、アプリアイコンが静止しているときは表示されない、鋭敏でエッジの効いた色合いとして最もよく見えます。

さまざまな不透明度レベルを活用して、奥行き感と活気を高めます。 不透明度をクリエイティブに使用すると、アイコンを目立たせることができます。たとえば、[写真] アイコンは、中心部分を半透明の部分を含む複数の層に分割し、デザインに非常な活気を与えます。

ホームスクリーンのアイコンがセーフゾーンの仕様に準拠していることを確認してください。 フォーカスと視差の間、システムは、アイコンが拡大縮小して移動するときに、あなたのアプリアイコンの端の周りのコンテンツをトリミングする場合があります。アイコンのコンテンツがきつくトリミングされないようにするには、[仕様] > [tvOS] に示すように、追加のスペースを確保します。

wtchOS

watchOS アプリのアイコンは円形で、付随するテキストは表示されません。