Appleからの試練が俺を強くする デザイン編

がんばれ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の両方のサイズが必要になってくるということだ。

開発者であれば画像を渡すと自動でリサイズしてくれるサービスも使ったりすると思うが通常はデザイナーがベクター画像からサイズごとの画像をちゃんと作ると思う。

とは言えこの数のレイヤーをメンテするのはやってられないので、1つのベクターからリサイズする拡張は無いのか調べた。PhotoShopでは見つかったがFireworksでは見つけられなかった。しかし代わりにシンボルという技を覚えた。

シンボルは複数のレイヤーをまとめ、再利用できるオブジェクトの単位だ。つまりアイコンやロゴなどをシンボルとして登録しておけば、シンボル単位で拡大縮小が可能だ。何よりシンボルを修正すれば参照しているレイヤーのものも更新されるので同時に複数サイズを運用するのに都合がいい。

いままではスタイルを使って色などを一括で変えるということはやっていたがこれで技が増えた。今更過ぎるが。

参考: Fireworks / シンボル

Fireworks向けテンプレート

iOS7のテンプレート、まずアイコンは http://ios.robs.im/ にあるものがカンバスサイズがコンパクトで使いやすそうだったのでPSDファイルをFireworks用に変換した。残念ながら再頒布が禁止されているので配れない。

起動イメージを各ページとして用意したものを作ったのでこっちは公開します。

あとiOS 7 Colorsも参考になる。

まとめ

Appleの課した試練によってFireworksスキルが向上した。何が言いたいかというとFireworksは神。デザインもできるエンジニアは無敵。

※ 本エントリーはFireworksの開発が終了し悲しみに打ちひしがれるユーザの戯言です。「そんなの○○でもできるけど」というコメントは受け付けておりません。

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。