アプリのアイコン・起動画面を自分で作ってみた話

アプリのアイコン・起動画面を自分で作ってみた話 学習記録

通知機能の実装が一段落し、次にやったのがアプリのアイコンと起動画面(スプラッシュ画面)の用意でした。コードを書くのとはまったく違う作業で、デザイン未経験の自分にとっては地味に苦戦したので、つまずいたポイントを記録しておきます。

1. アイコンサイズが「1枚」で済まないことを知らなかった

最初、適当な画像編集ツールで正方形の画像を1枚作ればいいと思っていました。しかし実際には、Xcodeのアセットカタログ(Assets.xcassets)にアプリアイコンを登録する際、用途ごとに複数サイズが必要でした。

幸い、最近のXcodeでは「単一サイズ(1024×1024)」の画像1枚をアプリアイコン用のスロットにドラッグするだけで、あとはXcode側が各サイズに自動生成してくれる仕組みになっていました。以前は40×40、60×60、…と手動で書き出す必要があったと聞いていたので身構えていましたが、拍子抜けするほど簡単でした。ここでハマったのは、1024×1024ぴったりのサイズでないと警告が出るという点で、書き出し時に微妙にサイズがズレていて何度か作り直しました。

2. アイコンに透過(アルファチャンネル)を入れてリジェクトされかけた

デザインツールで書き出した際、背景を透過PNGのまま使ってしまい、Xcodeのビルド時に警告が出ました。

調べてみると、App Storeのアプリアイコンは透過を許可していない(角丸は自動でOSが処理するため、四角い不透明画像で用意する)というルールがありました。透過部分は自動で黒く塗りつぶされて表示されてしまうため、見た目が崩れる原因になります。背景色をきちんと敷いた不透明なPNGに書き出し直して解決しました。

3. 起動画面はコードではなく「Storyboard」で作る

起動画面(Launch Screen)は、てっきりSwiftUIのコードで最初の1画面を作ればいいと思っていたのですが、実際にはXcodeのLaunchScreen.storyboard(またはInfo.plistのLaunch Screen設定)で定義するのが標準的な方法でした。

理由を調べると、起動画面はアプリのコードが読み込まれる前にOSが表示するものなので、コードに依存しない静的な定義が必要とのことでした。ここを理解していなかったため、最初は「起動画面用のSwiftUI Viewを作ったのに反映されない」と混乱しました。結局、シンプルにアプリのロゴとブランドカラーの背景だけを置いたStoryboardを用意し、複雑なレイアウトは持たせない方針にしました。

4. ダークモードでアイコンの余白が浮いて見えた

背景を白で作っていたアイコンを実機に入れてみたところ、ダークモードのホーム画面で妙に浮いて見えることに気づきました。

App Storeの推奨としては、アイコンの背景を完全な白ではなく、ブランドカラーや薄いグレーなどにしておくと、ライト/ダーク両方のホーム画面になじみやすいとのことでした。これは実機で並べて初めて気づいたポイントで、シミュレータの薄い画面で見ていただけでは気づけなかったと思います。

まとめ

  • アプリアイコンは1024×1024の1枚を用意すればXcodeが各サイズを自動生成してくれる(ただしサイズはぴったりでないと警告)
  • アイコン画像は透過不可。不透明なPNGで用意する
  • 起動画面はSwiftUIコードではなくStoryboard(静的な定義)で作るのが基本
  • アイコンの背景色は完全な白より、ライト/ダーク両方のホーム画面になじむ色を選ぶと実機で浮きにくい

デザイン未経験だと「とりあえず画像を1枚作ればいい」と思いがちですが、サイズ・透過・表示タイミングなど、iOS特有のルールがいくつもあることを実感しました。これから自作アイコンに挑戦する方の参考になれば幸いです。


本記事は生成AI(Claude)を活用して執筆・編集しています。内容は実体験に基づき、執筆者本人が確認・監修しています。

コメント

タイトルとURLをコピーしました