logo

back DEVELOPMENT

デザイナーもエンジニアも幸せになれるiOS画像の書き出し方

2013年08月21日

前回iOSアプリのデザイン指示書についての記事でも少し触れましたが、iOS開発の画像素材の書き出しはデザイナーが担当するのが一般的なようです。しかし実際にコードを書けない多くのデザイナーにとっては、どんな画像をどのように書き出せばいいのか不安になってしまうことも多そう。 というわけで今回は、主にアプリデザインの経験のないデザイナーさんに向けた簡単なtipsと、最後にちょっとグレーだけど使い所によっては効率があがるぼくなりの手法も少し紹介してみたいとおもいます。

基本的なこと

デザインは横幅640ピクセルで作る

基本的なところですね。後述しますが、Retina対応したiPhoneとそうでないもののふたつの解像度の画像が必要になるのでどちらも兼ねるこの解像度で作ります。

非Retina端末のために半分のサイズの画像も用意する

実際にXcodeでの開発は横幅320pxをベースに実装するので、もとあるPSDの解像度の半分のサイズの画像も用意します。もともとの解像度で書きだしたRetina対応された画像は、ファイル名@2x.pngのように対応する画像と全く同じ名前に@2xをつけておくとXcodeが自動で識別し端末ごとに出し分けてくれます。

パーツの大きさは偶数ピクセルにしておく

このように等倍の2つの画像が必要になるので、パーツを偶数ピクセルにして作っておかないと半分のサイズにしたときに、画像が割り切れずボケてしまう&スキマができてしまう原因になります。

気をつけるといいこと

当たり判定も含めて画像を切り出す

iOSのボタンは見た目のアイコンよりも大きな当たり領域を持っているのですが、画像をそのまま貼り付けただけだとタッチ領域もそのままのサイズになってしまいます。なのでHTMLのマークアップのようにアイコンぴったりに切り出さないで、余白を含めた画像で切り出すと特別な処理をかかなくてもユーザーにとって扱いやすいものにできます。例えばナビゲーションバー(アプリ上部の固定バー)ならいっぱいいっぱいの高さで切り出すといいですね。ただタブバーのアイコンだったりデフォルトのUIViewを使う場合ギリギリのほうがいい場合もあるので場面に応じて対応します。

ナビバーは基本88pxなので正方形なら88x88がいいです

ナビバーは基本88pxなので正方形なら88×88がいいです

画面ごとに素材の保存するフォルダを分ける

iOSの実装はHTMLのように画面ごとにビューを切って実装していくのですが、他人が書きだした画像素材を毎回探すのはかなり大変なのでビューごとにフォルダを切って保存してあげるといいです。ビューの分け方がわからないときはここだけエンジニアに頼むのもありです。

このようにビューの名前に対応したフォルダ名で切るのが望ましいです

このようにビューの名前に対応したフォルダ名で切るのが望ましいです

ビュー(画面)の名前を画像ファイル名につける

ある程度コード上でどこに属するファイルなのかを特定できるように、画像のファイル名にプレフィックスとしてビューの名前をつけます。たとえばAlertViewというビューの画像ならAlertView-button01@2x.pngみたいな感じ。

効率はあがるけどちょっとグレーなtips

マージンも含めて画像を切り出してしまう

マージンなどの実装で必要になる情報は指示書に書いてエンジニアに渡しますが、例えばログイン前の静的なページなどはマージンも込みで画像にしてしまうと、画面の座標(0,0)の左上から並べていくだけで思い通りのデザインが簡単に再現できます。ただiPhone4とiPhone5のサイズ調整やAndroidで素材を使いまわせないなど不自由もあったりします。

文字も画像にしてしまう

また、マージンを画像にしてしまうならいっそのこと文字も画像にしてしまうことでも実装コストを大きくさげることができます。もちろんちゃんとシステムフォントで実装するのが望ましいですが、静的で細かく変更もあまりないようだったらこうしてしまってもいいと思います。ちなみにiFunBuxでいろんなアプリの画像の切り出し方を拝見したところ、例えばOrigamiさんも同様の手法でスタートアップガイドを作ってらっしゃいました。

マージンと画像を含めてペライチの画像で書き出します。画面は開発中のもの。

マージンと画像を含めてペライチの画像で書き出します。画面は開発中のもの。

まとめ

もっと慣れてくるとまだまだ効率化を図れるアイデアがあるかもしれませんが、とりあえず初心者向けということでまとめさせていただきました。 また、画像の書き出しはとくにSlicyが便利なので、次回あたり便利ツールのまとめでそちらも紹介したいと思います。

追記(2013.8.22) こちらでSlicyなど含め便利なウェブ制作ツールをまとめてみました。

シェアしてね

2013年08月21日

, , , , , , , , , , , , ,

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Designer / UI Designer.

株式会社Fablicでフリマアプリ"FRIL"などの事業サービスのプロダクトマネジメントやデザインを担当しています。

実績など詳しくはこちら

copyrights(c) Keisuke Tsukayoshi.