Androidのdip(dp)ってpxに換算すると何なのさ！-めんどくさいのでDip Calc作りました-
※xxhdpiをふまえて全体的に加筆修正しましたー ( 2012/01/23 )
※xxxhdpiをふまえて全体的に加筆修正しましたー ( 2014/10/21 )
「※１」のところを加筆修正しましたー ( 2015/05/21 )
Androidのアプリをデザインしていて困ること、それは画面比率と解像度の違い。
困ること1：画面比率
今のところ横幅が…
★480系
480px ( hdpi )：GALAXY SとかSⅡとか、初期の端末
640px ( xhdpi )：IS03
★540系
540px ( hdpi ) ：INFOBARとか、QHD端末
720px ( xhdpi ) ：HD端末
1080px ( xxhdpi ) ：フルHD端末
1440px ( xxxhdpi ) ：4K対応端末
という感じで2種類あって、縦の長さは様々。
※もちろんこれ以外にも、なんとかノートとかなんとかタブとか色々な横幅があります。
困ること2：解像度
端末によって異なる解像度に対応しなくてないけないんだけど、これがちょっとややこしい。
そしてそれらが組み合わさって、解像度は同じカテゴリなんだけど画面比率は違うとか、デザイナーは大混乱です。
「dip(dp)って何？」
Androidでは解像度が5つあります(※1)。
ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi
で、6つもあるから共通の単位つくりましょうってことで用意されるのがdip(dp)ってわけです。
dip(dp)はmdpiと1として、その1.5倍がhdpi、2倍がxhdpi、3倍がxxhdpi、4倍がxxxhdpiです。
何だよそれ！(※2)
※1：実はtvdpiなんてものもあります。Nexus 7がそうなんですよね。用意されていなければhdpiのものが流用されます。
Nexus 7専用のアプリだったらこれを基準にした方がいいかもしれません。ちなみにmdpiの1.3312501倍です。なんだそれ！
※2：要するに1(mdpi)：1.5(hdpi)：2(xhdpi)：3(xxhdpi)：4(xxxhdpi)になります。
アプリを作るとき、プログラマーにはこの値を伝えます。
pxで作れないこともないんだけど、普通はdip(dp)でレイアウトします。
pxでいうと「それ何dp?」って聞かれます。
「混乱の原因は？？」
4つの解像度のうちldpiとmdpiはあんまり使われてないです。hdpiもだいぶ減ってきました。
まだそこそこユーザーがいるのがxhdpi、xxhdpiの端末。
新しいxxxhdpiの端末はこれから増えてくるでしょう。
これがhdpiがなかったら話は簡単で、mdpiを2倍すればxhdpiになります。
xxhdpiは3倍、xxxhdpiは4倍ですね。
しかしhdpiはmdpiの150%の大きさなのです。
いつかhdpiの端末がこの世からなくなれば、この苦労もなくなるかもしれない。
画面サイズの数多いよ、という苦労はなくならないけど。
「結局どの大きさで作ればいいの？」
正直、デザイナーがアプリをデザインするときに、そんな
仕組みの話はどうでもいい。いや、どうでも良くはないんだけど、
詳しく解説されている本とかサイトとかあるので時間のあるときに読めばいいです。
どうせまた変わるだろうし。
知りたいのは結局何pxで作ればいいのかだったりします。
とりあえず、一番大きい解像度にあわせてつくります。
( xxxhdpiはまだメインじゃないわーって場合はxxhdpiのサイズが良いでしょう。 )
xxxhdpi、つまり横1440pxで縦2560pxです。
1080px ( xxhdpi ) の画面サイズは同じ540系 ( hdpi：540px / xhdpi：720px )とは
比率が一緒なので良いのですが、hdpiの横480系(GALAXY SとかSⅡとか、初期の端末)では
横の長さが40px60px短いので、それを考慮する必要があります。
[※１] こちら間違いのご指摘がありましたので修正しました。60pxが正しいです。
したがって横が多少狭くなっても良い感じになるように伸縮箇所を想定するか、
もしくは、横を狭くつくって、それ以外では良い感じに伸びるようにデザインします。
…ユーザー数と後方互換性を考えると、前者の方がおすすめかなあ。
そして、解像度ごとに画像を用意するなら、
xxxhdpiの画像を縮小してxxhdpi、xhdpi、hdpi用の画像をつくります。
必要があればmdpi用の画像もつくります。
どれかのサイズを引き伸ばしたり縮小したりする場合や、
画像を使用しない部分、マージン等は、xxxhdpiでのサイズから
dip(dp)の値を算出し、プログラマーに伝えます。
でもちょっとまってください。
————————————————————————————
xxhdpiのサイズで作ったデザインで6pxなら
その3分の1なのでmdpiでは2px
その1.5倍なのでhdpiでは3px
xhdpiはmdpiの倍なので4px
そしてmdpiのピクセルのサイズ=dip(dp)なので
2dip(dp)
xxhdpiのサイズで作ったデザインで48pxなら
その3分の1なのでmdpiでは16px
その1.5倍なのでhdpiでは24px
xhdpiはmdpiの倍なので32px
そしてmdpiのピクセルのサイズ=dip(dp)なので
16dip(dp)
xxhdpiのサイズで作ったデザインで63pxなら
その3分の1なのでmdpiでは21px
その1.5倍なのでhdpiでは31.5px
xhdpiはmdpiの倍なので42px
そしてmdpiのピクセルのサイズ=dip(dp)なので
21dip(dp)
————————————————————————————
…おっと、hdpiに小数点がついてしまっています。
四捨五入しちゃってもいいんですが
ボケずにキレイに表示させたいなら端数がでてはいけません。
xxhdpiが6の倍数(xxxhdpiなら8の倍数、xhdpiなら4の倍数で、hdpiなら3の倍数)になる必要があります。
デザイナーはマージンやオブジェクトのサイズが、
4つの解像度でちゃんと端数がでないように計算しないといけないんです。
Android のガイドラインでは48dip(dp)を基準に
マージンを8dip、4dipという具合に設定すればいいよ！って
なってるので、
48dip hdpiなら72px、xhdpiなら96px
8dip hdpiなら12px、xhdpiなら16px
4dip hdpiなら6px、xhdpiなら8px
ていう数字を覚えておいて、そのサイズしか使わなかったら
うまくいくのかもしれません。
でも、実際デザインしてると見た目のサイズと画像のサイズって違うこともあるし、
そう簡単にはいかないですよね。
「何それめんどくさいよ！」
常にxxhdpiをもとに作るならまだいいんですが、場合によってhdpiの端末を
をメインにして、xxhdpiやxhdpiはそれを引き伸ばすという対応をすることもあります。
mdpiをメインにすることもあるでしょう。
その度に、あれ？偶数にするんだっけ？3？6の倍数？なんだっけ？
という混乱に陥ります。本当にめんどくさいです。
xhdpiで作ってるのに3の倍数になっていたときのかなしみ…
「めんどくさいからアプリつくったよ！」
あまりにめんどくさいので、ややこしいpxとdip(dp)の換算を補助する、
iPhoneアプリをつくりました。価格は缶コーヒーより安い100円です！
※ iOS8 に対応し、xxxhdpiを追加、さらにクマ機能を搭載した新型DipCalc2をリリースしました！(→詳細)
Dip Calc2 は dp → px / dp ← px の値変換が簡単にできるアプリケーションです。
電卓感覚で数値を入力するだけで、
「 hdpi で作ってるとき、12px は何 dp になるんだっけ？」
「 hdpi の素材を xhdpi のサイズにするにはいったい何倍すればいいの？」
…といったデザイナーの混乱を解決します！
【使い方】
mdpi ( dp )、hdpi、xhdpi、xxhdpi、xxxhdpi から基準の解像度を選択し、px の値を入力すると、
他の解像度での px の値と dp の値が表示されます。
dp を選択して数値を入力すると、それぞれの解像度で、
その dp の値が何 px に相当するかが表示されます。
※ dp の値と mdpi の値は同一になります。
「なんでiPhoneアプリなんですか！」
このアプリはAndroidのアプリをデザインすることになったデザイナーさん向けにつくりました。
UIデザイナーのiPhone率は異常です。Androidのアプリデザインしてるけど、
普段Android端末使ってない人が多いです。かくいう私もそうです。
また、デザイナーからあがってきたデザイン指示書が全部pxで書かれてたよ、ってなってしまいがちな
Androidプログラマーさんのためのものでもあります。
前述したようなややこしい計算をデザイナーさんに説明するのは難しいです。
そして、結局どうすればいいの？という話になります。
そんな時これがあれば、スパっと解決するんじゃないかな？
したらいいなって思います。
——–
姉妹品もあるよー！
ちなみに、姉妹品で比率が算出できる Ratio Calc もあります。
特定のサイズの比率を算出することも、特定の比率でサイズを算出することもできる優れものです。
上に比率を、下にサイズを入れて使います。
真ん中の矢印ボタンは比率からサイズを求めるか、サイズから比率を求めるかを切り替えるボタンです。
このサンプル画像では、サイズから比率を求めているので矢印が上を向いてます。
これで、16 : 9 の動画のサムネイルを入れたいけど、横のサイズを 240px にしたら、
縦はいくつになるんだっけ？
とか、
640 × 360 って何対何だっけ？
とかいう疑問がサクッと解決することうけあいです。
Powered by pucchon design
