がんばれFireworks お前がナンバー1 だ。
iOS7のアプリ開発の試練は開発だけでない。地味にアプリに必要なリソースのサイズ変更が行われた。デザイナーの皆さんは急に依頼が増えたりしてあくせくしている頃であろう。
iOS7で増えたリソース
参考: iOS 7 Design Resources > Icon and Image Sizes
アプリアイコン
57×57(114×114)だったiPhoneのアイコンサイズはiOS7では60×60(120×120)になる。iPadは72×72(144×144)から76×76(152×152)になる。 その他、Spotlightのアイコンサイズも地味に変わっている。ちなみにiOS6まではアイコンに光沢を追加してもらう設定があったが、iOS7からは光沢は追加しない。
アプリアイコン (iOS6)
| サイズ | ファイル名の例 | 対象 |
|---|---|---|
| 50×50 | Icon-Small-50.png | iPadのSpotlight |
| 100×100 | Icon-Small-50@2x.png | Retina iPadのSpotlight |
| 57×57 | Icon.png | iPhoneのホーム |
| 114×114 | Icon@2x.png | Retina iPhoneのホーム |
| 72×72 | Icon-72.png | iPadのホーム |
| 144×144 | Icon-72@2x.png | Retina iPadのホーム |
アプリアイコン (iOS7)
| サイズ | ファイル名の例 | 対象 |
|---|---|---|
| 40×40 | Icon-40.png | Spotlight |
| 80×80 | Icon-40@2x.png | RetinaのSpotlight |
| 60×60 | Icon-60.png | iPhoneのホーム、非RetinaのiPhone/iPod touchがiOS7対応していないので実は不要 |
| 120×120 | Icon-60@2x.png | Retina iPhoneのホーム |
| 76×76 | Icon-76.png | iPadのホーム |
| 152×152 | Icon-76@2x.png | Retina iPadのホーム |
起動イメージ
またiPadではiOS6以前は起動イメージにステータスバーを含めなかったが、iOS7向けにはステータスバーを含めたものを用意しないといけなくなる。
768×1004(1536×2008) -> 768×1024(1536×2048)
1024×748(2048×1496) -> 1024×768(2048×1536)
起動イメージ (iPad iOS6)
| サイズ | ファイル名の例 | 対象 |
|---|---|---|
| 768×1004 | Default-Portrait.png | iPad縦向き(Portrait) |
| 1024×748 | Default-Landscape.png | iPad横向き(Landscape) |
| 1536×2008 | Default-Portrait@2x.png | Retina iPad縦向き(Portrait) |
| 2048×1496 | Default-Landscape@2x.png | Retina iPad横向き(Landscape) |
起動イメージ (iPad iOS7)
| サイズ | ファイル名の例 | 対象 |
|---|---|---|
| 768×1024 | Default-Portrait-1024h.png | iPad縦向き(Portrait) |
| 1024×768 | Default-Landscape-768h.png | iPad横向き(Landscape) |
| 1536×2048 | Default-Portrait-1024h@2x.png | Retina iPad縦向き(Portrait) |
| 2048×1536 | Default-Landscape-768h@2x.png | Retina iPad横向き(Landscape) |
Fireworksのシンボルで頑張る
何より辛いのはiOS6以前も対応をしようとすると今までとiOS7の両方のサイズが必要になってくるということだ。
開発者であれば画像を渡すと自動でリサイズしてくれるサービスも使ったりすると思うが通常はデザイナーがベクター画像からサイズごとの画像をちゃんと作ると思う。
とは言えこの数のレイヤーをメンテするのはやってられないので、１つのベクターからリサイズする拡張は無いのか調べた。PhotoShopでは見つかったがFireworksでは見つけられなかった。しかし代わりにシンボルという技を覚えた。
シンボルは複数のレイヤーをまとめ、再利用できるオブジェクトの単位だ。つまりアイコンやロゴなどをシンボルとして登録しておけば、シンボル単位で拡大縮小が可能だ。何よりシンボルを修正すれば参照しているレイヤーのものも更新されるので同時に複数サイズを運用するのに都合がいい。
いままではスタイルを使って色などを一括で変えるということはやっていたがこれで技が増えた。今更過ぎるが。
参考: Fireworks / シンボル
Fireworks向けテンプレート
iOS7のテンプレート、まずアイコンは http://ios.robs.im/ にあるものがカンバスサイズがコンパクトで使いやすそうだったのでPSDファイルをFireworks用に変換した。残念ながら再頒布が禁止されているので配れない。
起動イメージを各ページとして用意したものを作ったのでこっちは公開します。
あとiOS 7 Colorsも参考になる。
まとめ
Appleの課した試練によってFireworksスキルが向上した。何が言いたいかというとFireworksは神。デザインもできるエンジニアは無敵。
※ 本エントリーはFireworksの開発が終了し悲しみに打ちひしがれるユーザの戯言です。「そんなの○○でもできるけど」というコメントは受け付けておりません。
wp-gfm