【Swift UI】Xcodeでアプリアイコンを設定する方法！
この記事からわかること
- SwiftUIで開発したiOSアプリ
- アプリアイコンの作成のガイドライン
- 無料アイコンサイト:Flat-Icon-Design
- App Icon Generatorで各サイズを自動生成
- XcodeのAssetsに登録する方法
index
[open]
＼ アプリをリリースしました ／
Swift UIでアプリ開発を行なう中で重要なのがアプリアイコンの作成と設定です。今回は作成のガイドラインと設定する手順をまとめていきます。
iOSアプリアイコンのガイドライン
Appleは作成するiOSアプリのアイコンのデザインに対するガイドラインを公式サイトで公開しています。このガイドラインに準拠したアイコンを作成しないと審査が通らないこともあるので理解しておくことが重要です。
ガイドラインの要約
- アプリアイコンはシンプルに
- テキストは極力含めない
- アプリアイコンの角は四角のままに(システムが自動で丸くしてくれる)
- 使われるであろう各サイズを用意
- 写真やスクリーンショットなどを使わない
- アイコンの透過を使わない
アプリアイコンはアプリの顔になる部分で、パッと見ただけでどのような物なのか連想できるようなデザインでなければいけません。デザイン以外で重要なのは「角を丸めない」、「テキストは極力含めない」、「透過された画像は使わない」です。
アプリアイコンを作成する
アプリアイコンの作成は1から自作する人やデザイナーに依頼を投げる人など様々です。作っていくアプリアイコンは「1024px × 1024px」のアイコン画像を作成しましょう。
設定するアプリアイコンの中で最大サイズが「1024px × 1024px」サイズです。他にも色々なサイズを用意する必要がありますが、後述するWebツールを使えば簡単にリサイズしたものを作れるのでとりあえず一番大きなサイズを1枚作成すればOKです。
無料で商用利用可能なオススメアイコンサイト
iOSアプリ用のアイコンを作成する際に素人だとなかなかデザイン性やシンプルさが出せずに苦労します。そのような人向けにオススメなのが無料で商用利用可能なアイコンサイトです。
上記の「Flat-Icon-Design」は会員登録不要かつ無料で商用利用まで可能なフリーアイコンサイトです。アイコンの種類も豊富ながらカラーバリエーションも多少用意されており、ダウンロードできるサイズや拡張子も選択可能です。また利用にあたってクレジットの表記や申告も不要で、禁止事項さえ守れば自由に扱うことができます。
しかしこのサイトでダウンロードできる最大サイズは「512px × 512px」サイズなのでデザインツール(Canvaなど)を駆使してリサイズする必要があるので注意してください。
有料でプロにロゴ制作を依頼する
上記のフリーアイコンサイトではどうしてもデザインに限界があり、最悪他人と被ってしまうリスクもあります。そのような場合はプロに料金を支払って作ってもらうのがおすすめです。
料金を抑えつつ気軽に頼みたいならココナラやクラウドワークスなど、料金は多少かかるけどクオリティの高いロゴが欲しい場合はコクリロゴなどのサービスを利用すればデザイン力がなくても良いアイコンを制作することが可能です。
コクリロゴは料金38000円で完全オーダーメイドでロゴを制作してくれます。また依頼すると3案提示してくれ、その後も何度か修正を繰り返してくれます。気に入らなければキャンセルもOKみたいです。
アプリアイコンの各サイズを用意する
「1024px x 1024px」のアイコン画像を作成したあとに、網羅するべき各サイズにリサイズするのは面倒です。この作業を簡単に行えるようにWebツールがたくさん公開されています。今回は「App Icon Generator」というサイトを使って各サイズを作成します。
使用方法は簡単で作成したアイコン画像をアップロードして必要なデバイスを選択し、「Generate」をクリックするだけです。作成されたらダウンロードしてデスクトップなどに保存しておきます。
ダウンロードした「AppIcons.zip」を解凍すると以下の「AppIcons」ディレクトリが生成され、中にはアップロードした画像がリサイズされて格納されています。
作成したアプリにアイコンを設定する方法
アプリアイコンの準備ができたら作成したアプリに設定していきます。
対象のアプリをXcodeで開き、ナビゲータエリアのファイル構造から「Assets」または「Assets.xcassets」をクリックします。
その中の「AppIcon」をクリックすると以下のような画面になるので各サイズを自作している場合は適当な場所に画像をドラッグ&ドロップでアップロードしていきます。
「App Icon Generator」を使って作成した場合は一度「AppIcon」を左クリックして「Delete Selected Items」をクリックして「AppIcon」を削除します。
削除できたら「AppIcons」ディレクトリ内の「AppIcon.appiconset」をドラッグ&ドロップでアップロードします。
これで自作したiOSアプリにアイコンを設定することができました。いつも通りビルドしてみるとアプリアイコンがデフォルトのものから設定した画像になっているはずです。
アプリからアイコンを切り替える方法
アプリアイコンカスタマイズ対応
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
