よつくらのブログ

ui designer no blog

手元のAndroid端末で実装されたデザインを確認する

f:id:syotsukura:20210713235123p:plain

概要

手元にPixel5があるとき、つよつよAndroidエンジニアに「Figma通り実装したからデザイン確認してね!」って言われたら、UIデザイナーの皆さんはどうしますか? とりあえずスクリーンショットは撮ったとして、そのPixel5のスクリーンショットをwidth=360dpのアートボードで確認すると、エンジニアが意図したサイズでデザインの確認ができないよっていうことを伝える記事です。

dpの基礎は

Androidはdpとspっていうのをつかってデザインするんだよ、というのを何となく聞いたことがある方は多いかもしれません。 下記の記事を読んで全て理解できた方は、正直これ以降を読む必要はありません....

下記の記事はとても良い記事なので、とてもおすすめです。

qiita.com

計算してみよう

実はMaterial Design内の以下の記事に、今回のケースの計算方法が書いてあります

material.io

下記の計算を解くと、適切なpxがわかるという計算式みたいです。

px = dp × (dpi / 160)

160って何だろうと思った方はとても勘が良くて、Androidの標準のピクセル密度(mdpi=160dpi)です。 もしFigmaAndroidのデザインを作っているときに、360x640のアートボードを使っていれば、それはdpを元にデザインを進めていることになるので、上記の式をまずdpについて解くように変形します。

dp = (160 x px) / dpi

あとは、Pixel5のスクリーンについて必要な情報を調べます。

store.google.com

f:id:syotsukura:20210713235656p:plain

スクリーンのwidth = 1080px、height = 2340px、ppi(dpiと意味は同じです)は432ppiということが分かりました。

先程変形した計算式に、調べた値を入れて早速widthとheightについて計算してみましょう。

width [dp] = (160 x 1080) / 432 = 400dp

height [dp] = (160 x 2340) / 432 = 866.66666.....dp

heightの方は端数が出てしまいましたが、およそ 400x867dp のアートボードで、つよつよエンジニアが実装したものを確認すれば良いということがわかりました。

Pixel5でデザインを確認するときのありがちなミス

Pixel5のスクリーンサイズ(1080px x 2340px)が、xxhdpi(=480dpi)と勘違いすると、(360dp x 780dp)というキリの良い数字になるのでなんとなくいい感じな気がして、間違いが起きやすいかなぁという気がしています。

Pixel5の本当のdpiは432dpiなので、xxhdpi(=480dpi)(360dp x 780dp)でデザインを確認してはいけません。

デザイナー「なんか意図していたよりフォントが小さかったり、ボタンのサイズが小さかったりするのですが...」

エンジニア「あれ?Figma見て1dpたりともずれないようにキッチリ実装したんだけどなぁ...」

というデザイナーのミスが起きてしまうので気をつけたいところです。

ちなみに...デザインをつくるときは?

デザインをつくるときはwidth=360dpでつくって構いません。width=360dpのデバイスは世の中に多いので良いのと、400dpで作るよりも360dpで作った方が画面幅が狭いときのイメージがつきやすくて良いかなと思います。