iOS、Android用のアプリアイコンテンプレートが便利すぎて泣けた

仕事でスマホ用のアプリアイコンを作る機会がたまたまあったので、同じ境遇の方に少しでもお届けできればということでこの記事を書いている今日この頃です。

普段はウェブサイト中心にデザイン業務をおこなっているためスマホアプリに関してはほぼ知識がなく、アイコンを作るにもビビっていた私ですが、ネット上で配布されているテンプレートを使ったら予想以上に簡単に、かつスピーディーにアイコンを作ることができました。

アプリアイコンを作る際に面倒な点は、ずばり用意すべきサイズが多いということになるかと思うのですが、それも全く問題無し！です。

今回使用したのはこちらのテンプレートです。

iOS用はこちら↓

Android用はこちら↓

どちらも作成者の方は同じです（デンマークのMichael Flarupさんという方）。

psdをダウンロードして見ていただいたらわかるのですが、例えばiOS用の方であればRetina用、iPhone用、iPad用とサイズが見やすく分けられていますし、ホーム画面、App Storeのキャプチャに入れ込んだ際のイメージも入っています。

アイコンは全て同一のスマートオブジェクトが読み込まれているため、どれか一つを変更すれば全サイズ一気に変わります。あぁ何て楽なんだろう…

iOS用のアイコンは、画像をアップすると勝手に角丸が付くので用意する時にこちらで付ける必要がありません、上記psd内ではレイヤーマスクで角丸にしているので、社内などで事前確認等する際はマスクを使用した状態で、その後アイコン画像を書き出す際はマスクを使用しない状態にすればいいですね。

ちなみに、psd内の各アイコン付近に描かれている「@1x」「@2x」「@3x」は解像度の違いになります。

@1xは従来（と言えばいいのか…。このサイズを1とした際に、ということですね）のサイズ、@2xはRetina、@3xはiPhone6 plusで採用されたサイズのようです。

この辺りの説明も書き出すと長くなりそうなので、参考にさせていただいた記事を…。端末の「画面スケール」と「解像度(px)」を見比べると@1xとかの考え方がわかるようになるかと思います（たぶん）↓

どのサイズが何用か載っててわかりやすい↓

Appleの公式サイトも載せておきます↓

対してAndroidの方は、角丸の規定も特にありませんし、アイコンの形も自由です。

google play用の512×512というサイズと、あとは解像度ごとに最大5種類用意すればOKです。

こちらを参考にさせていただきました↓

googleの公式サイトも↓

かなりまとまりのない完全自分用の備忘録みたいになってしまいましたが、今回のアイコンサイズに関しても「なぜそのサイズが必要なのか？」というのをきちんと理解した上で作成していきたいですね。

でのじブログ