iOS の家計簿アプリをつくる（アプリアイコン編）

はじめに
情報収集
ChatGPT に聞いてみる
アイコン作成
アイコン設定
おわりに

はじめに

こちらは個人開発アプリができるまで by am10 Advent Calendar 2024の 17 日目の記事です。

17 日目はアプリアイコン作成についてです。

情報収集

とりあえず他の家計簿アプリがどんなアイコンなのか調査します。
ファイナンスカテゴリのトップ 100 があったので確認してみたところ「豚の貯金箱」「お金のマーク」「グラフ」などが多い印象でした。

App StoreのiPhoneのファイナンスのトップセールスアプリランキング400 - Top App Ranking 400

App StoreのiPhoneのファイナンスのトップセールスアプリランキングを一気に上位400位までご紹介。人気無料アプリランキング、有料アプリランキングもあります。各アプリの詳細ページではランキングの履歴も見られるようになりました。

ChatGPT に聞いてみる

ChatGPT に聞いてみたところこんな回答でした。

iOSの家計簿アプリのアイコンは、「お金」や「管理」を連想させるシンプルで直感的なデザインが理想です。以下のポイントを考慮すると、ユーザーに親しみやすく、かつ目的が明確なアイコンを作成できます。

---

### デザインのポイント

1. お金や家計を連想させる要素を取り入れる
   - お金関連:
     - コイン、紙幣、貯金箱、財布など。
   - 家計関連:
     - 家の形、ノート、チェックリストなど。
   - グラフや統計:
     - 円グラフや棒グラフを使って「お金の管理」や「分析」を示唆。

2. シンプルかつモダンなデザイン
   - 現代的な家計簿アプリは、カラフルな色調やフラットデザインを採用することが多いです。
   - アイコンは詳細すぎない方が、小さな画面でも視認性が高まります。

3. 色使い
   - 信頼感を与える色: 青、緑（管理や安定感を象徴）
   - お金を連想させる色: ゴールド、黄色
   - 温かみのある色: オレンジ（親しみやすさを表現）

4. ユーザー層を意識
   - シンプルで堅実なデザインは幅広い層に好まれます。
   - 可愛らしいアイコン（キャラクターや丸みのあるデザイン）は、若い層や初心者向けに適しています。

---

### デザイン例

1. 財布や貯金箱
   - アイコンに「財布」や「ブタの貯金箱」を描き、視覚的に「お金を管理する」というコンセプトを伝える。
   - 例:  
     - 緑の財布＋コイン  
     - ブタの貯金箱＋ドルマーク

2. グラフや統計
   - 円グラフや棒グラフをモチーフにして、「収支の可視化」を表現。
   - 例:  
     - カラフルな円グラフ  
     - 棒グラフ＋ドルマーク

3. 家＋お金の要素
   - 家計簿の「家」と「お金」を組み合わせる。
   - 例:  
     - 家の形＋中に円グラフ  
     - 家＋コイン

4. シンプルな文字やアイコン
   - アルファベットやシンボルを使ってミニマルに。
   - 例:  
     - 「$」「¥」を目立たせたデザイン  
     - 「収支」を象徴する矢印

5. カジュアルなキャラクター
   - 可愛らしいブタやキャラクターを活用して親しみやすさを重視。
   - 若い層や女性向けアプリに適しています。

---

### アイコンの例（要素を組み合わせた具体案）
1. 緑の円グラフ＋コインのシンボル  
2. ブタの貯金箱（ゴールドのコインが飛び込むアニメーションを連想）  
3. 家のシルエット＋ドルマークや円グラフ  
4. 青とオレンジのグラフをシンプルに配置したモダンなデザイン  
5. フラットな財布アイコン＋家計簿（ノート）のモチーフ

iOSの家計簿アプリのアイコンは、「お金」や「管理」を連想させるシンプルで直感的なデザインが理想です。以下のポイントを考慮すると、ユーザーに親しみやすく、かつ目的が明確なアイコンを作成できます。

---

### デザインのポイント

1. お金や家計を連想させる要素を取り入れる

- お金関連:

- コイン、紙幣、貯金箱、財布など。

- 家計関連:

- 家の形、ノート、チェックリストなど。

- グラフや統計:

- 円グラフや棒グラフを使って「お金の管理」や「分析」を示唆。

2. シンプルかつモダンなデザイン

- 現代的な家計簿アプリは、カラフルな色調やフラットデザインを採用することが多いです。

- アイコンは詳細すぎない方が、小さな画面でも視認性が高まります。

3. 色使い

- 信頼感を与える色: 青、緑（管理や安定感を象徴）

- お金を連想させる色: ゴールド、黄色

- 温かみのある色: オレンジ（親しみやすさを表現）

4. ユーザー層を意識

- シンプルで堅実なデザインは幅広い層に好まれます。

- 可愛らしいアイコン（キャラクターや丸みのあるデザイン）は、若い層や初心者向けに適しています。

---

### デザイン例

1. 財布や貯金箱

- アイコンに「財布」や「ブタの貯金箱」を描き、視覚的に「お金を管理する」というコンセプトを伝える。

- 例:

- 緑の財布＋コイン

- ブタの貯金箱＋ドルマーク

2. グラフや統計

- 円グラフや棒グラフをモチーフにして、「収支の可視化」を表現。

- 例:

- カラフルな円グラフ

- 棒グラフ＋ドルマーク

3. 家＋お金の要素

- 家計簿の「家」と「お金」を組み合わせる。

- 例:

- 家の形＋中に円グラフ

- 家＋コイン

4. シンプルな文字やアイコン

- アルファベットやシンボルを使ってミニマルに。

- 例:

- 「$」「¥」を目立たせたデザイン

- 「収支」を象徴する矢印

5. カジュアルなキャラクター

- 可愛らしいブタやキャラクターを活用して親しみやすさを重視。

- 若い層や女性向けアプリに適しています。

---

### アイコンの例（要素を組み合わせた具体案）

1. 緑の円グラフ＋コインのシンボル

2. ブタの貯金箱（ゴールドのコインが飛び込むアニメーションを連想）

3. 家のシルエット＋ドルマークや円グラフ

4. 青とオレンジのグラフをシンプルに配置したモダンなデザイン

5. フラットな財布アイコン＋家計簿（ノート）のモチーフ

アイコン作成

調査したところでアイコンを作成していきます。
Xcode 15 から 1024 ✕ 1024px の画像を設定すれば他のサイズは自動生成してくれるようになったので 1024 ✕ 1024px の画像が作成できればなんでも OK です。
最近 Procreate を買ったので今回は Procreate を使います。