スマホ向けUIデザインのための基礎知識

結構どこにいってもデバイスピクセルとかdip(dp)どうなってんの？
どの解像度で作るのがいいの？
みたいなのをいろんなとこでよく聞くので
UIとか主に作ってるデザイナーが忘備録的にまとめてみる。
※ エンジニアの皆さん、ここが違うとかご指摘待ってますw

デバイスピクセルについて

	ldpi	★mdpi	hdpi	☆xhdpi	xxhdpi	xxxhdpi
dpi数値	120	160	240	320	480	640
比率	0.75	1	1.5	2	3	4

※ 2014.07執筆時点
※ dip(もしくはdp)とはDensity Indipendent Pxcelsの略
※ tvdpi(mdpi比:1.331...)はhdpiに置き換えられるため省略
※ xxxhdpiはAndroid4.3から実装
※ 執筆時ではxxxhdpiの国内向け端末は“isai FL LGL24”のみ

デザイン作成時における基準

iOS基準だと
• iPhone3G (3GS含む)がmdpi
• iPhone4 (4S, 5, 5s含む)がxhdpi
となるのでわかりやすい(表の★, ☆マーク)。

コレが何なのかというのは
デバイスにて1pxの線を画像で表示しようと思った時に
mdpiだと比率が1なのでPCツール上で1pxの線の画像で良く、
これがxhdpiだと比率が2なのでPCツール上2pxの線が1pxになる。
こういったイメージです。

Androidのデザインに関しては

画面比率
• 480系(640px含む)
• 540系(720px, 1080px含む)
に注意してデザインする。

参考までに...
最近主流なフラッグシップ機は
(ex. Xperia Z2, GALAXY S5, Nexus 5...)
フルHD(1080x1920px)でxxhdpiになる。

また、一般モデル(ex. Xperia A2...)は
HD(720x1280px)でxhdpiとなる。

おまけで上の表にあるxxxhdpiのisai FL LGL24は
WQHD(1440x2560px)なので市場にある27"モニタと同等です(苦笑

クロスOSでない場合のUIデザインは
大は小を兼ねるでフルHD(xxhdpi)か
数字を出しやすいHD(xhdpi)あたりがいいのかなーってかんじです。

デザイン実装(アプリ・Web)に関して

• 基本的にはmdpi単位での実装となる
• 画像書き出しに関しては原則的にpng*を用いる
  • 画像の構成上、引き伸ばし表示時にノイズが発生しにくいため
• 電波状況により通信時間が長くなりサーバ負荷が高くなる場合もあるので軽く量を少なく
• 大きい画像から縮小という方法は綺麗だが古い端末のメモリとの兼ね合いを考える
• 写真などは大きい解像度で高圧縮(Web用保存20-30程度)で良い結果になる場合もある

UIデザインを起こす環境について

iPhone5, 5c, 5sなどメインストリームの解像度が640*1136pxなので
PhotoshopなどのツールのUI含めて縦に収まる27"ぐらいがオススメです。

ついでに最近のiMacとかThunderbolt Displayだと
iPhoneなどと色味近いので尚良いというか楽です。

※ 僕はずっとMac使ってる人間です
※ 色を見ている方から誤解生む前に...業務用モニタはNECが最強だと思ってますw

便利なものやアプリケーションなど

僕が使っていたりいいなーって思ってる
デザインを起こすアプリケーションや
関連ツール(モックアップツールや補助アプリ)などは
次回にでもご紹介できたらなーと。