【Xcode/Swift】iOSアプリアイコンの作成と設定方法について

maharu

この記事はiOSアプリアイコンの作成と設定方法について説明していきます。

なんだか難しそう。素材探しやサイズの変更とかも大変そう。

haru

maharu

最初はどうして良いかわからなかったので、詳細に説明していきます。

動作環境

Item Version
Xcode 12.5
MacOS Big Sur 11.4

アイコンのダウンロード

無料で使えてアイコンに最適なサイトがありますので、ダウンロードする手順を説明していきます。下記ボタンを押すと別タブでFLAT ICON DESIGNのサイトが開かれます。

FLAT ICON DESIGN

STEP.1
アイコン画像の検索

時計と入力(今回は砂時計を検索するため。他に好きなキーワードでもOK)

検索をクリック

STEP.2
検索したアイコンの選択①

①砂時計の画像を選択

STEP.3
検索したアイコンの選択②

①、②、いずれかの画像を選択

STEP.4
サイズ、ファイル名、デザインの選択

①サイズを選択

②ファイル名を選択

③背景あり、背景なし、影のみのいずれかを選択

④表示中の画像をダウンロードをクリック

STEP.5
ダウンロードされた画像の確認

①メニューバーのFinderを選択

②ダウンロードされた画像

完了!

ダウンロードした画像の編集

Keynoteを使用して下記の手順で画像を編集していきます。

STEP.1
Keynoteを開き新規書類を作成

①メニューバーのKeynoteを選択

②新規書類を選択

③ホワイトを選択

④作成を選択

STEP.2
アイコン画像をスライドの中央へ配置

①初期設定でスライドにテキストが2つあるので、shiftを押しながら2つ選択し、deleteで削除

②ダウンロードした画像をスライドへドラッグ&ドロップ

③下記画像のようにアイコンをスライドの中央へ配置

STEP.3
背景色を変更し画像を正方形に切り取る

を選択

②色を選択

③command+shift+4を押しながら画像を切り取るように正方形にスクリーンショットを撮影すると、下記のように画像が保存されます。これは妥協策ですので、有料のイラストレーター等で正確な正方形を作成することができる方は、妥協せずに作成していただければと思います。

完成!

App Icon Generatorでアプリアイコンサイズを変更しXcodeへの設定

Xcodeに設定する画像は18枚の画像(サイズは20×20px〜1024×1024px)が必要になります。画像を1個ずつ変更するのが面倒という方のために、App Icon Generatorというサイトで画像を変更し、アプリアイコンへの設定方法を説明していきます。下記にリンクを貼っておきます。

App Icon Generator

STEP.1
ダウンロードした画像をApp Icon Generatorへドラッグ&ドロップ

①画像を②の枠内へドラッグ&ドロップ

Generateをクリック

STEP.2
作成された画像の確認

①メニューバーのFinderを選択

②ダウンロードされたZIPファイル

③ZIPファイルを解凍

AppIcon.appiconsetをダブルクリック

⑤Xcodeに設定するための各サイズの画像一覧が表示

完了!

Xcodeでダウンロードされた画像をアイコンに設定する方法

実際にXcodeを起動し、アイコンの設定を行っていきます。プロジェクトの作成後の初期画面から説明しますので、Xcodeのワークスペースの名称について、下記にリンクを貼っておきます。

【Xcode】新規プロジェクトを作成する方法とGitHubからクローンを作成する方法について
STEP.1
ナビゲーションエリアのAssets.xcassetsを選択

Show the Project navigatorを選択

Assets.xcassetsを選択

STEP.2
ダウンロードした画像の設定
 

①初期に表示されているAppIconを選択しDeleteで削除する

AppIcon.appiconsetを①が表示されていた箇所のスペースにドラッグ&ドロップ

③各サイズの画像が設定される

完了!

設定されたアイコンの確認

下記画像のようにアイコンが設定されました。

まとめ

Keynote等を使用して画像を組み合わせたり、背景色を変える等、ご自身で色々試してみると面白いと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です