iOS App Iconは寸法・アルファ・マスクの取り違えがリリース直前に爆発しやすい領域です。デザイナーとフロント寄りの素材担当向けに、AppIcon.appiconset 納品のピクセル対照表、Contents.json 契約、sRGB パラメータ、アルファ/角丸(システムマスク)方針、命名、M シリーズ Mac でのバッチ検証を一枚に整理します。手元を空けたい場合は同一スクリプトをリモート Mac に固定してください。色彩ポリシーは Mac PNG の色彩管理(sRGB/Display P3) と揃えると他アセットとの色ズレが減ります。
① ロール別サイズ対照表(PNG ピクセル)
各スロットは表どおりの正方形 PNGで渡します。Retina 換算に頼らず、1024px マスターから一括リサイズするのが安全です。M シリーズは連続 sips も軽く回しやすいです。
| プラットフォーム/ロール | ポイント(pt) | スケール | PNG(px) | ファイル名トークン例 |
|---|---|---|---|---|
| iPhone 通知 | 20 | 2×/3× | 40×40/60×60 | [email protected]、@3x |
| iPhone 設定 | 29 | 2×/3× | 58×58/87×87 | [email protected]、@3x |
| iPhone Spotlight | 40 | 2×/3× | 80×80/120×120 | [email protected]、@3x |
| iPhone アプリ | 60 | 2×/3× | 120×120/180×180 | [email protected]、@3x |
| iPad 通知 | 20 | 1×/2× | 20×20/40×40 | [email protected]、@2x |
| iPad 設定 | 29 | 1×/2× | 29×29/58×58 | [email protected]、@2x |
| iPad Spotlight | 40 | 1×/2× | 40×40/80×80 | [email protected]、@2x |
| iPad アプリ | 76 | 1×/2× | 76×76/152×152 | [email protected]、@2x |
| iPad Pro アプリ | 83.5 | 2× | 167×167 | [email protected] |
| App Store/マーケティング | 1024 | 1× | 1024×1024 | [email protected] またはジェネレータ準拠の [email protected] |
② Contents.json の契約
AppIcon.appiconset/Contents.json はデザインと Xcode の正本です。images に idiom・size(例 "60x60")・scale・filename を揃え、1024 は idiom: "ios-marketing"、size: "1024x1024"、scale: "1x" が一般的です。
- JSON の健全性:リモート Mac 上で
plutil -lint Contents.jsonを通し、末尾カンマやタイプミスを CI 前に潰す。 - 孤児ファイル禁止:フォルダ内の PNG はすべて JSON から参照され、JSON の
filenameはすべて実在パスと一致させる。 - 版管理:カタログレイアウト変更は PNG と JSON をセットでコミットし、「どの版の表か」を diff で追えるようにする。
③ マスク・アルファ・「正方形納品」ルール
iOS はスーパー楕円マスクを表示時に適用します。角丸は焼き込まず正方形で納品し、重要要素はセーフゾーンに収めます。
1024×1024 マーケ用はアルファ禁止が鉄則です。その他も原則不透明に。アルファのバッチ確認は PNG QA 一括検証 の流れを参考にできます。
④ 実行可能な書き出しパラメータ(sRGB)
各ツールで下表を共有プリセットにし、派生同士の見え方を揃えます。
| パラメータ | 推奨値 | メモ |
|---|---|---|
| 色空間 | sRGB(変換済み書き出し/未タグ放置しない) | Web 用アイコンや UI スライスと同じ ICC 方針に揃える。 |
| ビット深度 | 8bit RGB(A) | 中間 16bit は可。最終納品は 8bit PNG。 |
| リサイズカーネル | バイキュービック/Lanczos 等ツール標準の高品質 | 縮小後に線幅がにじむ場合は軽いシャープを検討。 |
| 1024 マスター | アルファなし・ブランド色の不透明背景 | ⑥ のスクリプト検証で必ずゲートする。 |
⑤ 検収チェックリスト(デザイン+フロント素材)
| 項目 | 方法 | 合格条件 |
|---|---|---|
| 寸法 | 自動(sips -g pixelWidth -g pixelHeight または ImageMagick identify) |
対照表と完全一致(±0px)。 |
| 正方形 | 視覚+スクリプト | 全ファイルで幅=高さ。 |
| アルファ(マーケ) | identify -format '%[channels]' 等 |
1024×1024 はアルファなし(RGB のみ)。 |
| アルファ(その他) | ヒストグラム/ピクセルスポット | 仕様で許可しない限り半透明やチェッカー縁を持たない。 |
| マスク方針 | デザインレビュー | 正方形納品・本番角丸焼き込みなし・重要要素はセーフゾーン内。 |
Contents.json |
plutil -lint+ファイル名突合 |
JSON 有効、参照整合、未参照 PNG なし。 |
| sRGB 意図 | プレビュー+書き出しプリセット文書化 | チームの ICC 方針に沿った埋め込みまたは変換。 |
| 命名 | CI で正規表現 | 例:Icon-App-<WxH>@<scale>.png を JSON と一致。 |
⑥ M シリーズ Mac/リモート Mac でのバッチ検証
スロットは十数枚でも毎回同じ検証を回すのが価値です。リモート Mac に CLI を固定し夜間実行も有効です。1024 からの派生リサイズは xargs -P で短時間並列化しやすく、M シリーズは負荷が読みやすいです。
手順 A — フォルダ内の寸法スイープ:
for f in *.png; do
echo -n "$f "
sips -g pixelWidth -g pixelHeight "$f" 2>/dev/null | paste -sd ' ' -
done
手順 B — マーケ用 1024 のアルファ検知: [email protected](または 1024 相当ファイル)に対し ImageMagick の identify -verbose 等で rgba を検出したらビルド失敗とする。
手順 C — マニフェスト: icons_manifest.csv(path,w,h,bytes,has_alpha,colorIntent など)をチケットに添付する。マルチサイズ運用は 書き出し監視とマルチサイズ PNG セット のフォルダ約束と相性が良いです。検証はローカルで試し、固定環境はリモート Mac に置くと sips の版差を抑えられます。
まとめ
対照表を正とし、Contents.json を lint・突合で守り、sRGB を固定、1024 のアルファを失敗扱いにする。マスクはシステム任せで正方形納品し、M シリーズ/リモート Mac のスクリプトで再現性を取りに行きます。
次のステップ:デザイン納品用リモート Mac
ホームでサービス概要を確認し、購入・レンタルと料金・ノード一覧からプランをお選びください。アイコンバッチ・PNG QA・長時間検証を専用ノードに逃がすと、メイン端末をブロックせずに TestFlight サイクルを回せます。接続手順はご利用ガイド(閲覧はログイン不要)を参照してください。