モバイルアプリアイコンデザイン：ベクターワークフローの基本

アプリアイコンは製品全体で最も働くアセットです。混雑したホーム画面の60x60ポイントのサムネイルでアプリを販売し、ストア検索結果の過酷な圧縮に耐え、ユーザーがスクロールする前に何をするアプリかを伝えるのに約0.3秒しかありません。間違えればダウンロードを失います。正しく行うにはベクターから始めましょう。

ベクターソースファイルが必須である理由

まだPhotoshopで512x512のアプリアイコンをデザインしているなら、砂の上に構築しています。iOSとAndroidの間で、1つのデザインから20以上の異なるPNGファイルが必要です。最小は16x16（favicon）、最大は1024x1024（App Store）— 64倍のサイズ差です。

ラスターアートはスケーリングで劣化します。ベクターアートは劣化しません。ベクターソースファイル — VectoSolveからのSVGまたはIllustratorからのAI/EPS — は以下を提供します：

• 無限のスケーラビリティ どの解像度でも品質損失なし
• 1回の編集で伝播：色を1回変更し、すべてを再エクスポート
• 数学的精度：カーブは滑らかなまま、角はシャープなまま
• 将来への備え：プラットフォームが新しい必要サイズを追加しても、すでに対応済み

「アプリアイコンは、ユーザーが製品に対して持つ最初で最も頻繁な印象です。ベクターの基盤にふさわしい。」 - Apple Human Interface Guidelines（意訳）

iOS vs Androidアイコン要件

2つのプラットフォームは完全に異なるアイコン哲学を持っています。両方に対応するデザインには、両システムの深い理解が必要です。

デザイングリッドとキーラインシェイプ

AppleもGoogleもアイコングリッドを公開しています。これらは提案ではなく、よくデザインされたアイコンがホーム画面で並んだとき「正しく」感じる理由です。

Appleのキーラインシェイプ（1024x1024内）：直径860pxの円、672pxの正方形、592x840の縦長長方形、840x592の横長長方形。アイコンの主要な形状はこれらのいずれかに合わせるべきです。

GoogleのMaterialグリッド（108x108 dpキャンバス、72x72 dpアクティブエリア）：52dpの円、44dpの正方形、36x52dpの縦長長方形、52x36dpの横長長方形。

アダプティブアイコンシステム（Android）

Androidのアダプティブアイコンシステムはデザイナーを驚かせます。1つの平面画像の代わりに、2つの別々のレイヤーを提供します：

前景レイヤー（108x108 dp）：ロゴまたはシンボルを含みます。セーフゾーンは中央の66x66 dpのみ — それ以外はデバイスのマスクによってクリッピングされる可能性があります。

背景レイヤー（108x108 dp）：ソリッドカラー、グラデーション、またはパターン。マスキング後も常に完全に見え、不透明でなければなりません。

108x108 dp 総キャンバス
┌──────────────────────┐
│   ┌──────────────┐   │
│   │ セーフゾーン │   │
│   │   66x66 dp   │   │
│   └──────────────┘   │
└──────────────────────┘
       ↓ マスク適用
    ◯ または ▢ または ⬡ など

ランチャーがマスク形状を選択します。アイコンはあらゆるマスクで正しく見える必要があります — 円、角丸正方形、squircle、またはカスタムOEM形状。アダプティブアイコンはパララックスモーションもサポートしています：傾けたり長押しすると前景が背景に対して移動するため、ギャップが露出しないよう十分なブリードを確保してください。

エクスポートワークフロー：ベクターからすべてのサイズへ

1. マスターベクターをデザイン

ベクターエディターで1024x1024のアイコンを作成。クリーンな閉じたパスを使用。小さいサイズで失敗するエフェクト（複雑なグラデーション、最終レンダーで2px未満のストローク）は避けてください。

2. プラットフォームバリアントを作成

• iOS：単一のフラットコンポジション、透過なし、sRGB
• Android：foreground.svgとbackground.svgに分割
• Web/PWA：faviconに透過が必要な場合あり、マスク可能なアイコンバリアントを検討

3. バッチエクスポート

# iOS sizes
for size in 40 58 60 76 80 87 120 152 167 180 1024; do
  rsvg-convert -w $size -h $size icon.svg > "ios/icon_${size}.png"
done

# Android density buckets
for pair in "mdpi:48" "hdpi:72" "xhdpi:96" "xxhdpi:144" "xxxhdpi:192"; do
  density="${pair%%:*}"; size="${pair##*:}"
  rsvg-convert -w $size -h $size icon.svg > "android/${density}/ic_launcher.png"
done

4. 各エクスポートを検証

各ファイルでカーブのエイリアシングアーティファクト、小さいサイズでのディテール損失、色精度、正しいサイズを確認。ストアは間違ったサイズを容赦なく拒否します。

アクセシビリティの考慮事項

アイコンのアクセシビリティはほとんどのデザイナーに見落とされますが、何百万人ものユーザーに影響します。

色覚異常：男性の約8%と女性の0.5%が影響を受けます。前景と背景の間に少なくとも3:1の輝度コントラストを確保。赤/緑の区別に頼らないでください。デザインをグレースケールに彩度を落としてテストしてください。

小さいサイズでの認知負荷：1つの明確なフォーカル要素を使用。48px以下でノイズになる細かいディテールは避けてください。シルエットを特徴的に — 弱視のユーザーは形状認識に頼ります。

プラットフォーム機能：iOSのハイコントラストモードは背景ティントを変更する可能性があります。Androidのハイコントラストはアダプティブアイコンにアウトラインを適用する可能性 — 強制アウトラインでアイコンが機能することを確認してください。

完全なワークフロー

1. リサーチ：カテゴリ内の競合アイコンのスクリーンショットを撮影。何が目立つか見つける。
2. スケッチ：メタファー、レターフォーム、抽象的な形状を探る20以上のラフコンセプトを描く。
3. ベクター化：最高のスケッチをベクターエディターに取り込むか、VectoSolveで手描きスケッチをクリーンなSVGパスに変換。
4. グリッド上で調整：Apple/Googleのキーラインシェイプに合わせる。積極的に簡略化。
5. 各サイズでテスト：16px、48px、60px、120px、512px、1024pxでプレビュー。
6. エクスポート：ベクターソースからすべての必要サイズをバッチエクスポート。
7. バリデーション：実機、ライトモードとダークモード、ストア検索モックアップでテスト。
8. イテレーション：ベクターソースを修正して再エクスポート。ラスターエクスポートを直接編集しない。

アプリアイコンは何百万もの他のアイコンと注目を争います。ベクターワークフローだけが提供できる精度にふさわしい。VectoSolveでベクター基盤を確立し、SVGエディターで調整し、すべてのサイズのすべてのピクセルが正確に配置した場所にあることを確信してエクスポートしてください。