18
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お題は不問!Qiita Engineer Festa 2023で記事投稿!

【個人開発】一番簡単なアプリアイコンの作り方

Last updated at Posted at 2023-07-10

はじめに

アプリアイコンは、アプリの顔とも言える重要な要素です。この記事では、アプリアイコンを簡単に作る方法を紹介します。

作り方

私は大抵、Keynoteでアプリアイコンを作ります。画像編集ソフトの多くは多機能ですが、Keynoteは最小限の機能しかなく使うハードルがとても低いです。

サイズを設定する

iOSアプリのアイコンに必要な最大サイズは、1024x1024です。Keynoteでサイズを設定するには、以下の手順を踏みます。

  1. ツールバーの「書類」をクリック
  2. 「スライドサイズ」を「カスタムのスライドサイズ...」に変更
  3. 幅と高さを1024に設定

スクリーンショット 2023-07-10 21.33.15.png

スクリーンショット 2023-07-10 21.33.24.png

不要なテキストボックスを削除する

デフォルトで配置されているテキストボックスを削除します。

背景をグラデーションにする

背景をグラデーションにすることで、目立ちやすくなります。グラデーションの設定は、以下の手順を踏みます。

  1. ツールバーの「フォーマット」をクリック
  2. 「現在の塗りつぶし」を「グラデーション塗りつぶし」に変更
  3. 好きな色を選択

スクリーンショット 2023-07-10 21.55.44.png

図形を配置する

Keynoteには、様々な図形が用意されています。これらを組み合わせて、アプリアイコンを作ります。この時に、ツールバーの「表示」から「オブジェクトリスト」を表示すると、図形の重ね順の変更がやりやすくなります。

スクリーンショット 2023-07-10 21.56.22.png

影をつける

影をつけることで、立体感が出て目立ちやすくなります。影の設定は、以下の手順を踏みます。

  1. 影をつけたい図形を選択
  2. ツールバーの「フォーマット」をクリック
  3. 「シャドウ」を「ドロップシャドウ」に変更
  4. 好きな影の設定を設定

影の色には黒は使用せず、背景色に似た色で暗い色を使用すると、自然な仕上がりになります。

スクリーンショット 2023-07-10 21.56.39.png

Xcodeでアプリアイコンを設定する

Keynoteのサイドバーから、スライドをXcodeのAssets.xcassetsのAppIconにドラッグ&ドロップします。するとスライドが画像に変換されて、アプリアイコンに設定されます。とても簡単ですね。

video_20230710-1.gif

おわりに

アプリアイコンを簡単に作る方法を紹介しました。この記事が参考になったという方は、いいね❤️とTwitterのフォローしていただけると嬉しいです😆

18
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?