Zeplin ↔ XD/Figma/Sketch等々…なアートボードサイズについて

どうも。ゆめみの戸田です。
まだ、タピオカは一杯も飲んでません。
今回は、スマートフォンアプリのデザインはどれくらいのサイズで用意しておけばいいのよ。ってことに関するお話を、サクッとメモ程度に。

できることなら作業は効率化したいわけですね、みんな。

スマートフォンアプリ開発の現場では「何倍でつくる？」っていうような話題がよーく出てきます。
そもそも「何倍で」って考えちゃう時点で大きな誤解があると思ってるんですけど、それはあとで補足するとして、一昔以上前にも、やれQVGAだ、やれQCIFだ、QQVGAだのとガラケー時代の画面サイズで悩ましい時代があったわけですけどそれも今となっては可愛い悩みだったよねって感じです。

今のスマートフォンでは異なるppiやdpiに対してどのように画面デザインしていけば効率的なのよっていうところで、みんな頭を悩ませるわけです。

結論としては、iOSは1242px、Androidは1440pxです。

XDやFigma起点で考えると、x1（hdpi）で制作するのが良さげなわけです。これらのエクスポート機能はx1を100%基準として50%〜400%まで書き出しくれるので逆に大きいアートボードサイズで用意しておくと書き出し時に改めてリサイズしなければいけない手間が発生しちゃうんです。
（余談ですけど、なんでXDは各倍率毎しか書き出せないんだろう）
けれども当然のことながら、ビットマップ画像も含むデータも書き出す場合には、拡大時に品質が落ちてしまうので最初から大きく作っておきたい。
…というような問題でアートボードサイズについてジレンマを感じているUIデザイナーさんやプロジェクトは、まだ多かったりするのかなと勝手に思ったりしてます。

ただし、今回はZeplin連携でのお話ですから、Zeplinの場合には最大のアートボードサイズで用意すればOKということになります。
なので、Zeplin使ってないアプリ開発現場は今すぐにZeplin導入すればみんな幸せって話です。（2019年8月現在）

Zeplinはアートボードサイズを基準にせずに全倍率を書き出してくれるので効率的なのです。

これ、近い将来にはXDもFigmaも同じ機能載せてくるとは思ってますけど、Zeplinの書き出し機能はここが秀逸です。ツールの役割としても画像書き出しはハンドオフツールにお任せする。としてしまったほうがシンプルでわかりやすいです。

ということで、先に結論は書いてしまってますけど、ZeplinでのプロジェクトはiOSはx3（1242px width）、Androidはxxxhdpi（1440px width）で設定し、XD/Figma/Sketch等々の連携データもそれに併せて同じアートボードサイズで制作すればベストです。

そして残る「3倍4倍問題」について。

「何倍でつくる？」という話題に対して「iOS3倍、Android4倍、どっちかの倍率で制作したほうが楽じゃね？」って話もよく耳にします。恐らく効率化できるという思いなんでしょうが、この判断は本当は危険だと思ってます。

ここでは超ざっくり説明しますけど、そもそもiOSとAndroidでは画角が異なるわけです（というかiOSもX系は長すぎるわけです）。なので倍率を同じにした場合、初稿のデザイン制作は時間短縮できるかもしれませんが、画角が異なるのでどっちかの環境でレイアウトやフォントサイズのバランスが往々にして気持ち悪くなります。そしてそれは開発実装するエンジニアさんにしわ寄せがいきます。結果としてコミュニケーションコストが増え、デザインの手戻りも発生する可能性が増します。

決して、iOS/Android各々の倍率を混同して考えないこと。これ重要。
ただし、現実的には予算や期間との兼ね合いもあるのであくまでも理想論ですｗ

余裕があるなら1125pxのアートボードも用意できると尚良いかも。

iPhone X/XS（iPhone 6/7/8）は微妙にWidthが異なります。
普段はそこまで影響が出ることは経験上少ないですけど、全スクリーンとは言わないものの、レイアウト的に凝ったり、シビアなスクリーンだけでも1125pxのアートボードは用意してもいいのかもしれません。（断言はまだできない）