【初心者向け】モバイルアプリアイコン画像作成のポイントと注意点（iPhone版）

“For iOS, iPadOS, and watchOS, you can tell Xcode to generate all sizes from your 1024×1024 px App Store icon, or you can provide assets for some or all individual icon sizes.”

（筆者訳）iOS、iPadOS、watchOSの場合は、1024×1024pxのApp Storeアイコンから全てのサイズを生成するようXcodeで設定するか、一部またはすべての個別のアイコンサイズ用のアセットを提供することができます。

日頃からiPhoneを使っている方ならご存知のように、iPhoneのホーム画面に表示されるアプリの形は、 四隅が直角の正方形ではなく、角が丸まった形になっています。

つまり、四隅のぎりぎりのところにアイコンデザインの要素を入れ込んでも表示されないということになってしまいます。

なので、1024px × 1024pxのサイズで作成することは大前提として、その範囲内でさらにセーフゾーン（Safe Zone）を意識する必要があります。

用語解説：セーフゾーン（Safe Zone）

Apple Developer公式テンプレートダウンロードページ

しかし、Apple Developer公式サイトは英語しかサポートしていないページが多いですし、ダウンロードできるテンプレートのファイル形式も、Sketch ・XD・Photoshop(PSD)の３種のみです。（2023年5月現在）

というわけで、次の章では デザインソフトを扱い慣れていない方でも簡単にセーフゾーンを設定できる方法 をご紹介します！

・iOSアプリのアイコンは1024px × 1024pxのサイズで作成しよう！
・ただし、アプリのアイコンは角が丸めて表示されるので、四隅にデザインの要素を配置しないように注意！
・Apple公式のテンプレートが使える場合はそれを利用して、テンプレートのセーフゾーン内でデザインしよう！

セーフゾーンの設定

アプリのアイコン画像のサイズである1024px × 1024pxの中心に、直径900pxの正円を配置すれば、それがセーフゾーンとなります。

また、 アイコンデザインの重要なポイントとなる部分に関しては、セーフゾーンの中でもできるだけ内側に配置する ことを心がけてください。

その場合でも、900px × 900pxの正方形内に収めるようにしてください。

・直径900pxの正円内が安全に要素を配置できるセーフゾーン！
・セーフゾーンに収まらない場合でも、一辺900pxの正方形内に収まるようにしよう！
・範囲内でデザインをまとめることで、アイコンのバランスを整えられる！

アイコンデザインの基本

モバイルアプリのアイコンデザインにおいて、最も重要なポイントはシンプルにまとめることです。

アプリの特徴を表すテキストをアイコンに入れ込みたいケースは多いかと思いますが、 基本的にアプリアイコンに文字を入れることは避けた方が良い です。

例として、シンプルで簡単に扱えるメモアプリのアイコンをデザインする場合で考えてみましょう。

たとえば会社名やサービス名（テキスト）を主体にデザインする場合は、テキストを中心にデザインしても全く問題ありません。（下の画像はその例です）

なので、アイコンデザインにテキストを入れない方が良いと言うよりは、 必要性の薄い、余計な情報を入れ込まない方が良い と言った方が正確かもしれません。

なお、アプリのアイコンはできるだけシンプルにまとめた方が良いということは、Apple Developerの公式サイトでも言及されているポイントです。

“Simple icons tend to be easier for people to understand and recognize. Find a concept or element that captures the essence of your app or game, make it the focus point of the icon, and express it in a simple, unique way. Avoid adding too many details, because they can be hard to discern and can make an icon appear muddy, especially at smaller sizes.”

（筆者訳）シンプルなアイコンは、理解・認識されやすいです。アプリやゲームの本質となるコンセプトや要素を見つけてその部分にフォーカスし、シンプルでユニークに表現してください。特に小さいサイズのアイコンでは、わかりにくく、ごちゃっとした印象になることがあるので、細か過ぎる作り込みは避けましょう。

なので、まずはこの記事で紹介したように、規定のサイズ（セーフゾーン）でアイコン画像を作成するということと、シンプルにまとめるという２点に絞ってデザインすることをオススメします！

・アプリのアイコンデザインは、できるだけシンプルにまとめよう！
・会社名やサービス名を主体にデザインする場合を除き、テキストは基本的に入れないようにしよう！
・デザインが本職ではない場合、『アイコンサイズ』と『シンプルさ』の２点に的を絞ってデザインするのがオススメ！

カテゴリーリンク JavaScript MOBILE APP ALL CATEGORY 著者について - author profile - Michihiro モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

📎📎📎📎📎📎📎📎📎📎