アプリアイコンデザインスキル
トリガー
新しいアプリアイコン、アイコンのリデザイン、アイコンの批評、またはAppleのアプリアイコン書き出しリクエストに使用します。プロダクション仕様が重要な場合、Appleの最新のデザインおよび技術文書を確認してください。
プロセス
- アプリのコアな目的とブランド言語を特定します。関連する場合は以前に確立されたブランディングを使用し、そうでない場合は特徴的なビジュアルメタファーを選択します。
- メタファーは1つの認識可能なコアシンボルに絞り込み、太く塗りつぶされたシンプルな形状と明確なシルエットにします。細かいディテール、ごちゃごちゃしたテクスチャ、細いストローク、スクリーンショット、不要なテキスト、過度な光沢は避けてください。
- 意図的で控えめなパレットを選択し、前景/背景のコントラストを明確にします。プライマリアイコンを光学的に中央に配置し、システムマスクのために十分なセーフエリアを確保します。
- 小さなサイズでも識別可能なデザインにします。フルサイズ、180px、60px、30pxでプレビューします（Appleが規定したピクセル要件ではなく、デザインテストです）。
- デフォルト、ダーク、クリア、ティンテッドの各モードを検討します。すべての外観でコンセプトと認識可能性を維持します。
- QAチェックリストを確認し、小さなスケールでノイズになる要素を簡略化します。
- 使用可能なツールで実際にサポートされている形式で最高品質のアセットを生成します。実際に作成していないベクター/編集可能なソースやバリアントを主張しないでください。
Appleヒューマンインターフェースガイドライン
- シンプルさと即時認識を優先します。システムがハイライトとシャドウを追加すると、細かい特徴がノイズになる可能性があります。
- 写真よりもイラストを優先し、アプリのUIをそのまま複製しないでください。
- 極端に細い線や鋭い角度は、小さいサイズで詳細が失われるため避けてください。
- 必須でない単語、スローガン、プラットフォーム固有の記述は避けてください。
- Appleのハードウェアを複製しないでください。
- マスクされていない正方形のレイヤーを使用します。システム自体が角丸/円形マスクを適用します。ベースアートワークに角丸を焼き付けないでください。
- 重要なコンテンツは中央に配置し、システムマスクによって切り取られないようにします。
- アイコンはデバイスや外観を問わず視覚的な一貫性を維持する必要があります。
Appleのサイズとシステムシェイプ (2026-10-24確認)
| ターゲット | キャンバス | システムマスク |
|---|---|---|
| iOS、iPadOS、macOS | 1024 × 1024 px | 角丸矩形 |
| watchOS | 1088 × 1088 px | 円形 |
| visionOS | 1024 × 1024 px | 円形 |
| tvOS | 800 × 480 px | 角丸矩形 |
- ポータブルな書き出しにはsRGBを使用します。Appleプラットフォームでは、文書化されている通りDisplay P3もサポートされています。
- 最新のAppleワークフローでは、レイヤーアートワークとアイコンコンポーザーを使用して、プラットフォームと外観のバリエーション（デフォルト、ダーク、クリアライト/ダーク、ティンテッドライト/ダーク）をプレビューすることを推奨します。
- アートワークはベクターで描画し、可能な場合は各独立して調整可能なレイヤーをSVGとして書き出し、テキストはアウトラインに変換します。SVG機能がサポートされていない場合はPNGレイヤーが適しています。
- Liquid Glassのレイヤードアイコンを準備する際、ぼかし、シャドウ、スペキュラー効果、半透明、不透明度、グラデーション、背景効果はアイコンコンポーザーに先送りします。
- 背景はキャンバス全体を覆う必要があります。静的なiOSアイコンの場合、デフォルトは完全に不透明なフルブリードの背景にします。透明な孤立したグリフは異なるアセットタイプであり、完全なアイコンではありません。
- システムがマスクを適用しますので、アートワークレイヤーにマスクジオメトリを書き出さないでください。
- 静的なアイコンワークフローにはフラットな1024px PNGを配信できますが、それはレイヤードアイコンコンポーザーの
.iconアセットと同等ではありません。
QAチェックリスト
- 1つの記憶に残るコンセプト、認識可能なシルエット
- 小さいサイズおよびグレースケールで判読可能
- 限られた色数と強いコントラスト
- 不要な単語、テクスチャ、細部、スクリーンショットがないこと
- 光学的中央揃えと安全なエッジ間隔
- ソースアートワークは正方形でマスクなし、背景はフルブリード
- ダーク、ティンテッド、クリアの各外観でレビュー済み
- ターゲットプラットフォームのサイズ、色空間、書き出し形式が正しいこと
- 編集可能性、レイヤー、形式に関する主張が実際のファイルと一致していること
ユーザーの現在の脳/数学アプリ：オプションのブランド固有オーバーレイ
この特定のプロジェクトにのみ使用し、すべてのアプリには使用しないでください：
- 最大3色のソリッドカラー。パレットはコバルト/エレクトリックブルー、バイオレット、マゼンタピンク（または適切な場合はディープネイビー）から選択します。
- ユーザーがオーバーライドしない限りグラデーションは使用しません。
- 抽象化されたシンプルな脳のシルエットと、いくつかの大胆なローブ。詳細な解剖学的イラストは避けてください。
- 小さなアイコンサイズでもミニマルで認識可能、魅力的です。奥行きは控えめにし、色数を増やさないようにします。
- アプリアイコンの背景はコンポジションの一部であり、透明ではありません（別のシンボルレイヤーが要求された場合を除く）。
画像生成ブリーフテンプレート
'[APP]用の正方形のアプリアイコンを作成します。1つの記憶に残る中央シンボル[SYMBOL]を持ち、[PALETTE]の少数のソリッドでコントラストの高い形状で構成され、フルブリードの不透明な[BACKGROUND]背景上に配置されます。視覚的な重みで中央に配置し、外縁に十分な余白を確保し、グラデーション[要求された場合]、文字、インターフェース要素、細部を避け、小さなサイズでも強い認識性を確保し、組み込みの角丸マスクは使用しないでください。'
情報ソース
- Apple HIG アプリアイコン: https://developer.apple.com/design/human-interface-guidelines/app-icons
- Appleのアイコンコンポーザーワークフロー: https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Appleデザインリソース: https://developer.apple.com/design/resources/
- Appleアイコンコンポーザー: https://developer.apple.com/icon-composer/
デザインアドバイスは総合的なものです。リリース前に最新のApple仕様を確認してください。このドキュメントはポータブルスキル文書であり、実行可能なシステム/プラグインスキルとして登録されていることを証明するものではありません。