tande lab.

[iOS][Android] 効率的なデザイン作業のための流れ

iOSとAndroidはちゃんと作り分けたほうが良い、っていうのは正論なんですが、
現場ではそうはいってもいられずなことが多いと思います。

色々やっててiOSとAndroid両方のデザインを同時期にやらなくちゃいけない!
ってなったときの効率的なデザイン作業のやり方としては
流用できるデザインパーツはなるべく流用できるようにデザインを考えるってことなんではと思いました。

フローや画面遷移はなるべくOSに沿って考えてあげるとしても、
デザインパーツそのものを全てOSに合わせてつくり直すのはかなりの労力だなぁと。

以下、個人的に効率的じゃないかと考えている流れ。

1. 先にAndroidのhdpi解像度でレイアウトデザイン

Androidには現在4種類の解像度が存在していて、それぞれの解像度ごとにデザインパーツを用意する必要があります。(用意しなくてもいいけど、解像度高い端末では荒く表示されます)

ldpi 100〜140dpi
mdpi 140〜180dpi
hdpi 190〜250dpi
xhdpi それ以上

hdpiはAndroidで最も普及している解像度なので、それをベースにデザイン検討します。
その際、座標は全て3で割れる数字で検討する。

hdpiは一番小さいldpiの3倍サイズなので、3で割れる数字でレイアウト検討しておくとどの解像度でもぴったりになる。

Androidの画面レイアウトを3で割れる数字で検討するというのは、
こちらのサイトで勉強させていただきました。
Androidアプリデザインの基礎知識 « ジェネシックスブログ

上記サイトでは、hdpi解像度(480*854)を元にデザインする方法がオススメされていましたが、
実機確認もしたいので自分の手元にあるhdpi解像度のAndroid端末を元にデザインするで良いと思います。

そして、重要なのは、デザインパーツは全てベクターで作っておく!
もしくは拡縮に対応できる作り方で作っておくこと。

2. Android用デザインパーツを他解像度へ展開

hdpiを元に作ったレイアウトデザインを元に、パーツ制作&切り出しを行う。

ldpi hdpiの1/3
mdpi hdpiの2/3
xhdpi hdpiの4/3

でサイズ計算して、他解像度へもパーツを展開する。

ここで制作したパーツが

mdpi > iOS 非Retina
xhdpi > iOS Retina

へそれぞれ流用できるはず。

3. AndroidパーツをiOSへ流用

流用できないものも中にはあると思いますが、
mdpi を iOS 非Retina用パーツへ、xhdpi を iOS Retina用パーツへ流用して問題ないか確認しつつ
iOSのデザイン作業を進めていきます。

NavigationBar や ToolBar など
iOSの標準コントロール上で利用するアイコンは予めサイズが決められていたりするので、
そういうアイコンは、iOSのアイコンサイズをもとにAndroid用パーツサイズを決めたほうがいいかも。

4. iOSのレイアウトデザイン

Retina解像度でレイアウトする場合は、座標は全て2で割れる数字で検討する。
Xcode開発時は、非Retina座標で設計するため。

iOS Retina解像度の場合、Android の xhdpi解像度パーツ が大きさ感ピッタリだと思うので
流用できるものは流用する。流用できないパーツは制作する。

私は、2で割れる数字で検討するのが面倒なので、
非Retina解像度であえてレイアウトをデザインしてしまいますが、
その際は、mdpi解像度パーツを流用してデザインします。

まとめ

先にiOSでレイアウト検討していると、Android用に単純なリサイズでパーツ展開すると小数点でちゃうことがあって、結局色々つくり直すハメになったりしたのでAndroidから先にはじめた方が手戻り少ないかなと思ったのでした。

以上、まだまだ手探りですが、
こんな流れが良いのかな〜と感じた流れをまとめてみました。

もっと、いい方法あるよ!って場合はお知らせ頂けると嬉しいです。