モバイルアプリアイコンのSVGベストプラクティス：iOS・Android完全ガイド

アプリアイコンは、ユーザーとの最初の接点です。iOS向けでもAndroid向けでも、SVGアイコンの作成と最適化を理解することは、あらゆるデバイスでプロフェッショナルな見た目を実現するために不可欠です。

アプリアイコンにSVGを使う理由

SVGファイルはアプリアイコンのソースフォーマットとして最適です。ラスター画像と異なり、SVGは20×20の小さなアイコンから大きなマーケティング用画像まで、品質を損なうことなくスケーリングできます。1つのSVGソースファイルを管理し、そこから必要なすべてのフォーマットを生成しましょう。

主なメリット

• 解像度非依存 — すべてのサイズに対応する1つのソースファイル
• 小さいファイルサイズ — 通常1〜5KB（PNGは50〜200KB）
• 編集可能 — 色や形を即座に変更
• 将来対応 — どんな解像度にも対応可能

iOSアイコンの仕様

Appleは異なるコンテキストごとに特定のアイコンを要求します。必要なサイズは以下の通りです：

iOSデザインガイドライン

• 正方形のキャンバスを使用（角丸なし — iOSが自動的にマスクを適用）
• 透過を避ける（iOSはアプリアイコンの透過をサポートしていません）
• 重要な要素はセーフゾーン内に配置（中央エリアの約80%）
• 明るい背景と暗い背景の両方でテスト

{
  "images": [
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "icon-60@2x.png",
      "scale": "2x"
    },
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "icon-60@3x.png",
      "scale": "3x"
    },
    {
      "size": "1024x1024",
      "idiom": "ios-marketing",
      "filename": "icon-1024.png",
      "scale": "1x"
    }
  ]
}

Androidアイコンの仕様

Androidはフォアグラウンドとバックグラウンドの別々のレイヤーを持つアダプティブアイコンを使用し、カスタマイズ可能な体験を提供します。

Androidアダプティブアイコン

Android 8.0（API 26）以降、アダプティブアイコンは2レイヤーシステムを採用し、システムがさまざまなマスク（円、スクワークル、角丸四角形）を適用できます。

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

Android用VectorDrawable

AndroidはVectorDrawableファイルをネイティブサポートしています。これはAndroidリソース向けに最適化されたSVGに似たフォーマットです：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
</vector>

アイコン向けSVG最適化

SVGをアプリリソースに変換する前に、ファイルサイズの削減とレンダリングパフォーマンスの向上のために最適化しましょう：

// アプリアイコン用SVGO設定
module.exports = {
  plugins: [
    'removeDoctype',
    'removeComments',
    'removeMetadata',
    {
      name: 'removeViewBox',
      active: false // スケーラビリティのためviewBoxを保持
    },
    'cleanupIds',
    'mergePaths',
    'convertShapeToPath',
    {
      name: 'convertPathData',
      params: { precision: 2 }
    }
  ]
};

最適化結果

SVGからアプリリソースへの変換

VectoSolveを使えば、SVGをiOS・Androidに必要な正確なサイズに変換できます。SVGをアップロードし、ターゲットサイズを選択して、ピクセルパーフェクトなリソースをダウンロードしましょう。

推奨ワークフロー

1. デザイン — ベクターエディタでSVGとしてアイコンを作成
2. 最適化 — SVGOまたはVectoSolveでSVGをクリーンアップ
3. テスト — 最小サイズ（20×20）と最大サイズ（1024×1024）で確認
4. エクスポート — 必要なすべてのバリエーションを生成
5. 検証 — 実機でテスト

よくある間違い

• ディテール過多 — 小さなアイコンは細かいディテールが失われます。48px以下ではシンプルに
• アイコン内のテキスト — 小さいサイズでは読めません。形やシンボルを使いましょう
• ラスターエフェクト — シャドウやブラーはスケーリングに不向き。ソリッドな形を使用
• ダークモードの無視 — 明るい背景と暗い背景の両方で見えることを確認
• セーフゾーン — Androidでは72dpのセーフゾーン内にキー要素を配置

テストと検証

アプリを提出する前に、以下の環境でアイコンを確認しましょう：

• さまざまなデバイス（小型スマートフォン、タブレット、デスクトップ）
• ライトモードとダークモード
• 各種Androidマスク（円、スクワークル、角丸四角形）
• 通知バッジあり・なし
• アプリストアで競合アイコンの隣に表示した場合

<ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@mipmap/ic_launcher"
    android:contentDescription="App Icon"
    tools:srcCompat="@mipmap/ic_launcher" />

まとめ

SVGからアプリアイコンを作成するのは、iOSとAndroidが要求する多様な解像度に対応する最も効率的なワークフローです。マスターファイルをSVGで保管し、エクスポート前に最適化し、必ず実機でテストしましょう。

SVGアイコンを変換する準備はできましたか？VectoSolveで、アプリに必要なすべてのリソースを自動生成しましょう。