14
13

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 5 years have passed since last update.

iOS6/7対応、iPhone用だけどiPadを意識してアイコン設定

Last updated at Posted at 2014-03-29

#はじめに
iOS7になって、用意しなければいけないアイコンの組み合わせが増えました。

  • iPhoneアプリならiPad用のアイコンは不要
  • iOS7以上なら非Retinaディスプレイ端末の対応をする必要がない

なんてこと思ってませんか?

#そのアイコン画像は必要?不要?
##iPhoneアプリならiPad用のアイコンは不要か
当然のことですが、iPhoneアプリはiPadでも動きます。
iPad用のアイコンのサイズはiPhone用より大きく、より細密に見えます。
iPadのホーム画面で自分のアプリの隣に表示されているアプリがくっきりキレイに見えて
自分の作ったアプリはどう見えているか、確認していますか?

##iOS7以上なら非Retinaの対応は必要ないか
iOS7の対応範囲はiPhone4以上。これらは全てRetinaディスプレイ化されているので
iPhoneは大丈夫です。影響があるのは

  • iPad mini
  • iPad2

どちらも非Retinaなディスプレイで、iOS7のサポート対象デバイスです。
#環境
Xcode5.1でAssetCatalogを使いアイコン指定をしました。

Deployment TargetはiOS6.1です。
スクリーンショット 2014-03-30 8.32.59.png

#画像ファイルが足りない場合を確認する
ないアイコンに対して、どのアイコンが代わりに表示されるのか。

  • iPad用のアイコンが全てない
  • iOS7用のiPadアイコンがない
  • iOS5、6用のiPadアイコンがない場合

この場合で見てみます。

##iPad用のアイコンが全てない場合
###画像とバージョンとRetinaディスプレイ

Images.xcassets(ホーム画像だけ指定) Attribute Inspector
設定 スクリーンショット 2014-03-29 10.50.07.png スクリーンショット 2014-03-29 7.03.49.png
OSバージョン iOS6.1〜 iOS7.0〜
iPhone(非Retina) スクリーンショット 2014-03-29 9.44.20.png 搭載可能なiPhoneであるiPhone4以上はRetina
iPhone(Retina) スクリーンショット 2014-03-29 9.47.17.png スクリーンショット 2014-03-29 9.49.55.png
iPad(非Retina) スクリーンショット 2014-03-29 11.33.52.png スクリーンショット 2014-03-29 11.34.34.png
iPad(Retina) スクリーンショット 2014-03-29 15.39.33.png スクリーンショット 2014-03-29 15.40.09.png

非Retinaの場合は57px、Retinaの場合は120pxが代替されていました。
本来あたるはずのアイコンと同じサイズになるのが次の倍率

OSバージョン iOS6.1〜 iOS7.0〜
iPad(非Retina) 1.26 1.33
iPad(Retina) 1.20 1.26

##iOS7用のiPadアイコンがない場合
iPhoneは同じなので表から省いています。
###画像とバージョンとRetinaディスプレイ

Images.xcassets(ホーム画像だけ指定) Attribute Inspector
設定 スクリーンショット 2014-03-29 17.18.30.png スクリーンショット 2014-03-29 7.03.49.png
OSバージョン iOS6.1〜 iOS7.0〜
iPad(非Retina) スクリーンショット 2014-03-29 17.38.12.png スクリーンショット 2014-03-29 17.38.51.png
iPad(Retina) スクリーンショット 2014-03-29 17.44.19.png スクリーンショット 2014-03-29 17.45.09.png

アイコンの代替があったのはiOS7の場合。72pxアイコンが76pxの代わりに表示されていました。

OSバージョン iOS6.1〜 iOS7.0〜
iPad(非Retina) 1.00 1.05
iPad(Retina) 1.00 1.05

##iOS5、6用のiPadアイコンがない場合
iPhoneは同じなので表から省いています。

###画像とバージョンとRetinaディスプレイ

Images.xcassets(ホーム画像だけ指定) Attribute Inspector
設定 スクリーンショット 2014-03-29 18.00.50.png スクリーンショット 2014-03-29 7.03.49.png
OSバージョン iOS6.1〜 iOS7.0〜
iPad(非Retina) スクリーンショット 2014-03-29 18.13.48.png スクリーンショット 2014-03-29 18.14.40.png
iPad(Retina) スクリーンショット 2014-03-29 17.51.57.png スクリーンショット 2014-03-29 17.50.59.png

アイコンの代替はありましたが、拡大でなく縮小になります。
この場合に気になるのは細い線などがつぶれないかなど、デザインによっては検証が必要です。※今回しません

#おまけ
よくはまるところと、分かったこと
##シミュレータ上のアプリ
画像などのリソースを変更して実行し直す場合、シミュレータ上から消さないとリソースが残っている場合があります。
まず消す。

##AssetCatalogの内容が反映されない
ワーニングがでてるのに気にしないでAssetCatalogを設定しても
追加された画像がでない、消した画像が消えないなど起こる。

##AssetCatalogの画像設定とプロジェクトファイルの表示アイコン

表示されているアイコンは別だった件
スクリーンショット 2014-03-30 9.29.47.png

#参考URL
Technical Q&A QA1686
App Icons on iPad and iPhone
https://developer.apple.com/library/ios/qa/qa1686/_index.html

#さいごに
結果的には、iPad用のアイコンをまったく入れない場合、最新のiPad端末であってもデザイン的にかなりボケた印象になることは間違えないです。
一番ぼけた画像になるのは

スクリーンショット 2014-03-30 9.20.07.png

元の画像
Icon.png

iOS7のiPadminiで、iPad用のアイコンを入れていないアプリを表示したとき

iPad2は廉価になりはじめ、供給に一役買ったデバイスです。2014/3/30現在は販売されていません。
まだアップデート可能な端末なので現役で使用している人も多いかもしれません。
iPadminiはStoreで現在も販売されている端末で、販売中の他デバイスと比べると価格がお手頃。携帯もしやすい。
ファーストiPadに最適な選択肢ではないでしょうか。

縮小した場合の影響を確認する必要を残してはいますが、今回の結果から
iPadのアイコンについてはiOS6、7用いずれかは入れた方がいいということになります。
当然全パターン入れるのが一番良いのです。

設定の説明中にAttribute Inspectorの画像を何度か表示しています。ここもアイコンを表示させる方針によって
ON/OFFを設定する必要があります。

  • iOS6ではテカリあり、iOS7ではテカリなしこんな場合はOFF
  • どちらのiOSでも同じデザインであればON

角R対応については後日。

14
13
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
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?