FRMSKI開発ブログ

iOS開発、AR/VR、UI / UX、仕事、読書のことなど、日々の記録を綴ります

【iOSデザインガイドライン和訳】アプリアイコン作成の基礎を学ぶ

iOSヒューマン・インターフェース・ガイドラインのアプリアイコンについての和訳です。

アプリアイコン

 すべてのアプリには美しく思い出に残るアイコンが必要です。このアイコンはApp Storeで注目を集め、ホーム画面で際立っています。あなたのアイコンは、アプリケーションの目的を一目瞭然に伝える最初の機会です。設定や検索結果など、システム全体に表示されます。

f:id:frmski:20181207113929p:plain:w500

  • シンプルさを抱かせる
     あなたのアプリのエッセンスをキャプチャし、その要素をシンプルでユニークな形で表現する単一の要素を探します。詳細を慎重に追加してください。アイコンのコンテンツや図形があまりにも複雑な場合は、特に細かいサイズでは詳細を識別するのが難しい場合があります。

  • 単一の焦点を提供する
     中心にある単一の焦点を持つアイコンをデザインして、すぐに注目を集め、アプリを明確に識別します。

  • 認識可能なアイコンをデザインする
     人々は、アイコンが何を表しているか把握するためにアイコンを分析する必要はありません。たとえば、メールアプリケーションアイコンは、メールに全面的に関連付けられているエンベロープを使用します。あなたのアプリの目的を芸術的に表す美しく魅力的で抽象的なアイコンをデザインするには、時間をかけてください。

  • 背景をシンプルに保ち、透明性を避けます
     あなたのアイコンが不透明であることを確認し、背景を乱雑にしないでください。それは近くの他のアプリのアイコンを圧倒しないように、単純な背景を与える。アイコン全体をコンテンツで埋める必要はありません。

  • 言葉が不可欠な場合やロゴの一部の場合にのみ使用してください
     ホームスクリーンのアイコンの下にアプリの名前が表示されます。名前を繰り返したり、あなたのアプリで何をすべきかを「ウォッチ」や「再生」のように重要でない単語は含めないでください。デザインにテキストが含まれている場合は、アプリが提供する実際のコンテンツに関連する言葉を強調します。

  • 写真、スクリーンショット、インタフェース要素は含めないでください
     写真の細部は、小さなサイズで見るのが非常に困難です。スクリーンショットはアプリのアイコンにとっては複雑すぎるため、通常はアプリの目的を伝えるのには役立ちません。アイコン内のインタフェース要素は、誤解を招き紛らわしく混乱します。

  • Appleハードウェア製品の複製は使用しない
     アップル製品は著作権で保護されており、アイコンや画像で再現することはできません。一般的に、ハードウェアのデザインは頻繁に変更される傾向があり、アイコンの日付を見せることがあるため、デバイスの複製を表示しないでください。

  • インターフェイス全体にアプリアイコンを配置しない
     アプリ全体でさまざまな目的に使用されているアイコンを表示するのは混乱することがあります。代わりに、アイコンの配色を組み込むことを検討してください。色(Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer)を参照してください。

  • 異なる壁紙に対してあなたのアイコンをテストしてください
     あなたのホーム画面で選択する壁紙の種類を予測することはできませんので、明るい色や暗い色に対してアプリをテストするだけではありません。さまざまな写真をどのように見えるかを確認します。デバイスの動きに応じてパースペクティブを変更する動的な背景を持つ実際のデバイス上で試してみてください。

  • アイコンコーナーを四角に保つ
     アイコンコーナーを自動的に丸めるマスクが適用されます。

アプリアイコンの属性

 すべてのアプリのアイコンは、次の仕様に準拠する必要があります。

属性
形式 PNG
色空間 sRGBまたはP3(カラーマネージメントを参照
レイヤー 透明でない
解像度 画像サイズと解像度を参照してください
形状 角が丸い四角形

アプリアイコンのサイズ

 すべてのアプリは、アプリがインストールされると、ホーム画面やシステム全体の小さなアイコンと、App Storeに表示するための大きなアイコンを提供する必要があります。

バイスまたはコンテキスト アイコンサイズ
iPhone 180px×180px(60pt×60pt @ 3x), 120px×120px(60pt×60pt @ 2x)
iPad Pro 167px×167px(83.5pt×83.5pt @ 2x)
iPadiPad mini 152px×152px(76pt×76pt @ 2x)
App Store 1024px×1024px(1024pt×1024pt @ 1x)
  • さまざまなデバイスに異なるサイズのアイコンを提供する
     サポートしているすべての端末でアプリのアイコンが大きく見えるようにしてください。

  • あなたの小さなアイコンをあなたのApp Storeアイコンに似せてください
     App Storeのアイコンは小さなアイコンとは違って使われていますが、それでもあなたのアプリアイコンです。それは視覚効果が適用されていないので微妙により豊かで詳細なことができるが、概して外観のより小さいバージョンと一致するはずである。

スポットライト、設定、および通知アイコン

 すべてのアプリは、アプリ名がSpotlight検索の用語と一致するときにiOSが表示できる小さなアイコンも提供する必要があります。さらに、設定のあるアプリは、組み込みの設定アプリに表示する小さなアイコンを提供し、通知をサポートするアプリは、通知に表示する小さなアイコンを提供する必要があります。すべてのアイコンはアプリを明確に識別する必要があります。理想的には、アプリのアイコンと一致する必要があります。これらのアイコンを指定しないと、iOSによってメインアプリのアイコンが縮小され、これらの場所に表示されることがあります。

f:id:frmski:20181207113947p:plain:w500

f:id:frmski:20181207114001p:plain:w500

  • 設定アイコンにオーバーレイや枠線を追加しないでください
     iOSは自動的にすべてのアイコンに1ピクセルストロークを追加して、設定の白い背景によく見えるようにします。

TIP
アプリがカスタムドキュメントを作成する場合、iOSはアプリアイコンを使用してドキュメントアイコンを自動的に作成するため、ドキュメントアイコンをデザインする必要はありません。

ユーザーが選択可能なアプリケーションアイコン

 いくつかのアプリでは、カスタマイズは、個人的なつながりを呼び起こし、ユーザーエクスペリエンスを向上させる機能です。アプリに価値がある場合は、アプリ内に埋め込まれた一連の定義済みアイコンから代替アプリアイコンを選択させることができます。たとえば、スポーツアプリではチームごとにアイコンを用意したり、明るいモードと暗いモードを使用してアプリを提供したりすることができます。あなたのアプリアイコンはユーザーの要求によってのみ変更することができ、システムはそのような変更の確認をユーザーに常に提供することに注意してください。

  • すべての必要なサイズで視覚的に一貫した代替アイコンを提供する
     プライマリアプリアイコンと同様に、各代替アプリアイコンは、サイズが異なる関連画像のコレクションとして配信されます。ユーザーが代替アイコンを選択すると、そのアイコンの適切なサイズが、ホーム画面、Spotlight、およびシステムの他の場所のプライマリアプリアイコンに置き換わります。別のアイコンがシステム全体で一貫して表示されるようにするには、ホーム画面にアイコンのバージョンが1つ表示されないようにする必要があります。たとえば、メインのアプリアイコンと同じサイズでアイコンを表示します(App Storeアイコンを除く)。アプリケーションのアイコンサイズを参照してください。

開発者向けのガイダンスについては、UIApplicationsetAlternateIconNameメソッドを参照してください。

NOTE
別のアプリアイコンはApp Reviewによるレビューの対象となり、App Storeレビューガイドラインに準拠する必要があります。