アプリのデザインを行う前に知っておけば、よりスムーズに案件が進められると思うことを記事にしてみました。
少し記事が長くなってしまいそうな為、制作時に注意しておくと良い点と、制作が終わり実際にアプリを申請する際に必ず必要な画像、の2つに分けてまとめていきます!
各種パーツサイズ
各種パーツのサイズは以下の通りです。下記はiPhone5Sの場合です。
iOS Human Interface Guidelines https://developer.apple.com/library/iOS/documentation/userexperience/conceptual/mobilehig/
iOS psdテンプレート http://www.teehanlax.com/
デザインを行う際の画面サイズ
iPhoneの場合はmdp(iPhone3・iPhone3GS)とxhdp(iPhone4以降)の2種類のリソース画像が必要ですが、Android端末だとmdpi、hdpi、xhdpi、xxhdpiの4種類のリソース画像を用意しなければなりません。つまりスマートフォンアプリを作るだけで4種類の画像が必要になってきます。これを知らずにiPhone5Sサイズのみを作ってしまうと後々サイズが足りず作り直すはめになってしまいます(泣)
私の場合は、最初にデザインする画面サイズは一番大きいxxhdpiにしてdpiごとに縮小して制作していました。
例えば、どうしてもぼけてはいけない1pxのラインなどは自動で縮小をかけるのではなく、手動で1pxのラインをひっぱるなどしていました。
また、運用時にパーツそれぞれに縮小を都度かけていくのも大変面倒な作業になってくる為、Photoshopのスマートオブジェクトの機能を上手く駆使して、テンプレートを作成しておくと時短にもなります!この辺りの方法はまた改めて記事にしたいと思います。
パーツ書き出し・ファイル名について
パーツを書き出す際は、以下のフォルダ構成で、サイズごとの画像を入れる方法があります。ただここはチームや会社によってやり方は様々だと思います。
私の場合は以下のようにしていました。例えば「home.png」という画像をスマートフォン、タブレット用に用意した場合のフォルダ構成です▼
■ ファイル名について
- 大文字は使用しない
- 「-」は使用しない。「_」はOK
- iOS Retina画像には拡張子直前に「@2x」を
OSごとに異なる画像の特徴
OSごとに以下の特徴があります。
タップ時・タップ出来ない時
■ Android
・タップ時の画像
・タップ出来ない時の画像
の両方が必要となります。
例えばWebviewで表示する際の「戻る」「進む」「リロード」ボタンなどです。
■ iOS
・タップ時の色をARGBで指定 ※ 例(202,229,254)
・タップ出来ない時の画像は別途必要となります。
9-patch
9-patch … デバイスサイズ合わせてスケールする画像のことをいいます。
■ Android
デバイスサイズが多数ある為、都度デバイスに合った画像を作るのはかなりの手間になりますし、アプリ内のデータも肥大化してしまいます。そのため、デバイスサイズに応じて可変する画像9-patchにするという方法もあります。
■ iOS
デバイスのサイズが決まっている為9-patchにする必要はありません。サイズ分の画像を用意すれば大丈夫です。
次回は実際にアプリを申請する際に、必ず必要になってくる画像パーツについて書いていきたいと思います。
ご意見・ご感想は下記にコメント頂くか、@moco2までメッセージやツイート頂けると嬉しいです。