【Swift UI】Xcodeでアプリアイコンを設定する方法!

この記事からわかること

  • SwiftUI開発したiOSアプリ
  • アプリアイコン作成ガイドライン
  • 無料アイコンサイト:Flat-Icon-Design
  • App Icon Generator各サイズ自動生成
  • XcodeAssets登録する方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIでアプリ開発を行なう中で重要なのがアプリアイコンの作成と設定です。今回は作成のガイドラインと設定する手順をまとめていきます。

iOSアプリアイコンのガイドライン

Appleは作成するiOSアプリのアイコンのデザインに対するガイドラインを公式サイトで公開しています。このガイドラインに準拠したアイコンを作成しないと審査が通らないこともあるので理解しておくことが重要です。

ガイドラインの要約

アプリアイコンはアプリの顔になる部分で、パッと見ただけでどのような物なのか連想できるようなデザインでなければいけません。デザイン以外で重要なのは「角を丸めない」、「テキストは極力含めない」、「透過された画像は使わない」です。

アプリアイコンを作成する

アプリアイコンの作成は1から自作する人やデザイナーに依頼を投げる人など様々です。作っていくアプリアイコンは「1024px × 1024px」のアイコン画像を作成しましょう。

設定するアプリアイコンの中で最大サイズが「1024px × 1024px」サイズです。他にも色々なサイズを用意する必要がありますが、後述するWebツールを使えば簡単にリサイズしたものを作れるのでとりあえず一番大きなサイズを1枚作成すればOKです。

無料で商用利用可能なオススメアイコンサイト

Flat-Icon-Designのトップページ

iOSアプリ用のアイコンを作成する際に素人だとなかなかデザイン性やシンプルさが出せずに苦労します。そのような人向けにオススメなのが無料で商用利用可能なアイコンサイトです。

上記の「Flat-Icon-Design」は会員登録不要かつ無料で商用利用まで可能なフリーアイコンサイトです。アイコンの種類も豊富ながらカラーバリエーションも多少用意されており、ダウンロードできるサイズや拡張子も選択可能です。また利用にあたってクレジットの表記や申告も不要で、禁止事項さえ守れば自由に扱うことができます。

しかしこのサイトでダウンロードできる最大サイズは「512px × 512px」サイズなのでデザインツール(Canvaなど)を駆使してリサイズする必要があるので注意してください。

有料でプロにロゴ制作を依頼する

上記のフリーアイコンサイトではどうしてもデザインに限界があり、最悪他人と被ってしまうリスクもあります。そのような場合はプロに料金を支払って作ってもらうのがおすすめです。

料金を抑えつつ気軽に頼みたいならココナラやクラウドワークスなど、料金は多少かかるけどクオリティの高いロゴが欲しい場合はコクリロゴなどのサービスを利用すればデザイン力がなくても良いアイコンを制作することが可能です。

ロゴの作成ならコクリロゴ!完全オーダーメイドのロゴデザイン作成サービス

コクリロゴ

コクリロゴは料金38000円で完全オーダーメイドでロゴを制作してくれます。また依頼すると3案提示してくれ、その後も何度か修正を繰り返してくれます。気に入らなければキャンセルもOKみたいです。

アプリアイコンの各サイズを用意する

1024px x 1024px」のアイコン画像を作成したあとに、網羅するべき各サイズにリサイズするのは面倒です。この作業を簡単に行えるようにWebツールがたくさん公開されています。今回は「App Icon Generator」というサイトを使って各サイズを作成します。

App-Icon-Generatorのトップページ

使用方法は簡単で作成したアイコン画像をアップロードして必要なデバイスを選択し、「Generate」をクリックするだけです。作成されたらダウンロードしてデスクトップなどに保存しておきます。

ダウンロードした「AppIcons.zip」を解凍すると以下の「AppIcons」ディレクトリが生成され、中にはアップロードした画像がリサイズされて格納されています。

App Icon Generatorでダウンロードしたアイコンリスト

作成したアプリにアイコンを設定する方法

アプリアイコンの準備ができたら作成したアプリに設定していきます。

対象のアプリをXcodeで開き、ナビゲータエリアのファイル構造から「Assets」または「Assets.xcassets」をクリックします。

その中の「AppIcon」をクリックすると以下のような画面になるので各サイズを自作している場合は適当な場所に画像をドラッグ&ドロップでアップロードしていきます。

Xcodeで作成したiOSアプリにアイコンを設定する方法

「App Icon Generator」を使って作成した場合は一度「AppIcon」を左クリックして「Delete Selected Items」をクリックして「AppIcon」を削除します。

削除できたら「AppIcons」ディレクトリ内の「AppIcon.appiconset」をドラッグ&ドロップでアップロードします。

Xcodeで作成したiOSアプリにアイコンを設定する方法

これで自作したiOSアプリにアイコンを設定することができました。いつも通りビルドしてみるとアプリアイコンがデフォルトのものから設定した画像になっているはずです。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index