iOS・Androidのアプリアイコンを作る方法
明確なシンボルと適切な元画像から始め、素材を書き出して端末で確認します。最初の図案からプロジェクトへの組み込みまでを説明します。
アプリアイコンとは？
ホーム画面、検索、ストアでアプリを識別する図柄です。faviconや全名称のロゴと違い、小さくても分かり、各システムの形に合う必要があります。
アイコンをデザインする
ベクターツールや簡単なイラストで描きます。装飾より先に読みやすさを確認します。
主役を1つ選ぶ
特徴あるシンボルや文字を使い、縮小で消える細部や長い文を外します。
輪郭を明確にする
形と色で背景から区別し、重要な内容を端から離します。
実際のサイズで見る
ホーム画面サイズと明暗の背景で確認し、原稿を書き出す前に調整します。
起点となる図柄が必要ですか？ アプリロゴメーカーを見る
デザインソフトなしで始める
原稿がない場合はブラウザーで編集できる独自テンプレートを使います。下と同じプレビュー・出力画面で作業できます。
テンプレートを選ぶ
Orbit、Stack、Signalを比較します。アプリ向けに調整できる非独占の独自SVG原稿です。
文字と色を変える
英字か数字を1～2文字使い、背景とアクセントを選んで小さな表示のコントラストを保ちます。
書き出す前に確認
テンプレートを開き、プラットフォームを選び、マスクと小さな表示を確認してZIPを保存します。
各プラットフォームの元画像を準備
iOS：不透明な正方形
全面を埋める背景の1024 × 1024 px PNGを用意し、外側の角丸は加えません。iOS出力は画像をXcode用AppIcon.appiconsetへ入れます。
iOSガイドを見るAndroid：前景と背景
アダプティブアイコンは108 × 108 dpの別レイヤーを使います。図柄は中央66 × 66 dpに置きます。透明な前景なら別の背景色や画像を選びやすくなります。
Androidアダプティブガイドを見るジェネレーターで作る
元画像の準備後に下の画面を使います。共通の図柄からiOSカタログとAndroid素材を作れます。
元画像を書き出す
鮮明な1024 × 1024 px PNGを保存します。Androidの透明な前景は背景を分けるのに適しています。
読み込みとプラットフォーム選択
ファイルを追加し、iOS、Android、または両方を有効にします。
プレビューを確認
Androidの背景と前景倍率を設定し、重要な図柄が安全領域に収まるかを見ます。
ZIPを保存
iOSのAppIcon.appiconsetとAndroidのres/mipmapを含む素材を書き出します。