アプリに必要なアイコンサイズ-Android編-

今回のテーマは、「アプリに必要なアイコンサイズ-Android編-」です。

前回私が作成した記事、「アプリに必要なアイコンサイズ-iOS編-」に続いて、Android端末のホーム画面に表示されるアイコンサイズについてご紹介したいと思います!
iOSのアイコンサイズも知りたいと言う方は、ぜひ「iOS編」の記事もご覧ください!


Androidのホームアイコンてどんな形?

さて、みなさんはAndroidのホームアイコンと言うと、どのような形を思い出しますか?四角でしょうか?丸でしょうか?

Androidのホームアイコンは、ベースの形に決まりはありません。視認性やコンセプトと整合性が取れていれば、自由に作ることが出来ます。
色合いだけでなく形も様々なので、ホーム画面が賑やかになり、見ていて楽しい気持ちになりますね!
また、アプリ開発者側としても、アプリの特徴や中身をより効果的に伝えることが出来ます。系統が同じアプリが並んだ場合も、より分かりやすい見た目である方がユーザーの意識が向きやすくなります。

私は各Android端末の「設定」アイコンが好きです。歯車や工具をモチーフとしていることが多く武骨な印象になりがちですが、ベースの形に決まりがないおかげで、モチーフの凹凸を活かした表現ができます。
端末やOSによってフラットだったりシャドウが効いていたり、アクセントカラーが入っていたりとシンプルながらも特徴が出ていて面白いです。

話が少し逸れてしまいましたが、ここからが本題です。自由に形が作れても、サイズには決まりがあります。
以下がサイズ一覧です。


Androidホーム


Android番外編

いかがでしたでしょうか?

サイズ内に収まっていれば、形は自由です。iOSでは出来ないようなデザインに挑戦するも良し、AndroidとiOSでも形を統一してブランディング重視のデザインにするも良し。
アプリの良さが伝わるような素敵なアイコンを作ってみてください。

今後も、作成に必要なサイズの調査は行っていきますので、新情報が出た際は、随時こちらでまとめていきたいと思います。

iOSに必要なアイコンサイズは、下記のページにまとめてありますので、興味のある方は覗いてみてください!
アプリに必要なアイコンサイズ-iOS編-

それではまた!デザイン業務に関わっております、デジマースのコンでした。

アプリに必要なアイコンサイズ-iOS編-

こんにちは!
今回のテーマは、「アプリに必要なアイコンサイズ-iOS編-」です。
ここで言うアイコンとは、iPhoneのホーム画面などで表示される角丸の付いた四角いアイコンのことです。

pic_161124_01

表示される場所は4ヵ所あります。上記の「アプリアイコン(App)」と、「スポットライト(Spotlight)」「設定(Settings)」「通知(Notification)」です。
「スポットライト」は、ホーム画面を左スワイプした時などに出てくる、検索画面の候補や結果として表示されます。「設定」は、設定アプリ内のリスト左側に表示されます。

pic_161124_02

初めてアプリを作る方は、サイズはいくつ?何個作ればいいの?そもそも1サイズじゃ駄目なの?と疑問が沢山かと思います。
そんな時の為に、iOSアプリに必要なアイコンのサイズをまとめました。

留意事項として、アイコンのサイズは、OSのバージョンアップのタイミングで変化する場合があります。あくまで、2018年8月時点のデータですのでご注意ください。
サイズが変わった際は、都度都度ブログにまとめていきたいと思います!

それでは、下記からサイズ一覧となります。


アイコンサイズ

iPhone

Xcode サイズ(px)
iPhone App
(iOS7-11)
180×180 (60×60 @3x)
120×120 (60×60 @2x)
Spotlight
(iOS7-11)
120×120 (40×40 @3x)
80×80 (40×40 @2x)
Spotlight
(iOS5,6)
Settings
(iOS5-11)
87×87 (29×29 @3x)
58×58 (29×29 @2x)
Notification
(iOS7-11)
60×60 (20×20 @3x)
40×40 (20×20 @2x)

iPad

Xcode サイズ(px)
iPad Pro App
(iOS9-11)
167×167 (83.5×83.5 @2x)
iPad App
(iOS7-11)
152×152 (76×76 @2x)
76×76 (76×76 @1x)
Spotlight
(iOS7-11)
80×80 (40×40 @2x)
40×40 (40×40 @1x)
Settings
(iOS5-11)
58×58 (29×29 @2x)
29×29 (29×29 @1x)
Notification
(iOS7-11)
40×40 (20×20 @2x)
20×20 (20×20 @1x)

App Store

Xcode サイズ(px)
App Store 1024×1024 (1024×1024 @1x)

※記載されている情報はXcode9向けのものとなっております。(2018年8月更新)


角丸について

iOS向けのアイコンは全て角が丸くなっています。
この角丸ですが、単純に半径の値を設定するだけでは表現出来ないApple独自の楕円になっています。
公式のテンプレートがありますので、アイコン作成の際はこちらを使う事をオススメします。

Human Interface Guidelines【Apple Design Resources】
※Apple公式の開発者向けページへ遷移しますので、テンプレートをダウンロードして下さい。


いかがでしたでしょうか?
コチラを確認しながらぜひ素敵なアイコンを作ってみて下さいね。

それではまた!デジマースのコンでした。