ブログ

デザインに必要な単位の知識

デザイナーはどの分野であろうと単位を知らずにいることはできません。ここでは私が最低限抑えておくべきだと考える単位をまとめました。独学されている方や、基礎知識があいまいな方のご参考になれば幸いです。

なお、デザイナー事務所、制作会社によって考え方・やり方が異なっていたりするかもしれませんので、そのあたりはご了承を。

印刷物の単位

基本単位 mm
線分 mmもしくはpt
文字 級(Q)
行間  歯(H)
ヘアライン 0.1mm

日本の印刷物では基本mmでデザインします。印刷会社や指定する紙によりますが、コンマ1mmより細い線はかすれたりする可能性があるので注意です。

なぜ文字にQをつかうのか。それはQが元々1mmのquarter、つまり1/4である0.25mmなので、mmでのデザインと相性がいいからです。例えば10級は2.5mm、14級は3.5mmというように0.25mm単位でデザインすることができます。なお歯と級は同じですが、行間には歯を使います。

さらなる詳細や由来が気になる方は以下を参照してください。
武蔵野美術大学 造形ファイル

デジタルの単位〜ウェブ

基本 px (%, em, rem, vh / vwなどもある)
線分 px (%, em, rem, vh / vwなどもある)
フォント px (%, em, rem, vh / vwなどもある)
行間 px (%, em, rem, vh / vwなどもある)

Photoshopでデザインするときはpxが基本です。パソコンのモニターはドットで出来ていて、その一つ一つのドットをpx(ピクセル)と呼んでいます。CSSの単位は色々ですが、まずpxを知りましょう。

 

デジタルの単位 〜Androidデバイス

基本 dp
線分 dp
フォント sp
行間 dp

Androidにおける単位は少し難しいですが、よくできた単位なのでモバイル端末向けのデザインをする場合には、理解しておくのがよいでしょう。

)ドットが見える画面 右)高精細でドットが視認しづらい画面

まず前提として知っておくべきなのは、断片化問題です。Androidには様々な画面密度、DPI(Dots Per Inch)の端末が市場に出回っている問題のことです。

簡単にいうと、従来のPCモニターと同じように近づくとドットが見える画面から、Apple製品でいうRetinaくらい綺麗な画面、そしてさらにそれより高精細で、近づいてもドットが肉眼で見えない画面まであるということ。

では、そうした高精細な画面で何が起こっているのでしょうか。

 例 端末A (画質悪い mdpi) 端末B (画質いい xxxhdpi)
画面サイズmm 6.4 x 11.9 mm  6.4 x 11.9 mm
解像度 360 x 640 px 1440 x 2560 px
ピクセルの密度 px詰まってない(低い @1x) pxが詰まってる(高い @4x)

例えば、縦横の画面サイズを定規で測ると全く同じ端末Aと端末Bがあるとします。しかし両者は解像度に違いがあります。端末Bはたくさん解像度がある = px数が多いので、1pxを小さくして同じサイズの中に詰め込んでいる状態なのです。

悩ましいのは市場に出回る端末が、具体的な数値レベルで本当にバラバラなことです。

そのためGoogleは、それらpxの詰まり具合(DPI)をいくつかのグループに分けて名前をつけました。それがldpi〜xxxhdpiと呼ばれるものです。またそれらに横断して使う共通単位としてdpを使うことになっています。*2

密度グループ DPI 倍率 アイコンサイズ例 dp アイコンサイズ例 px
ldpi 〜120dpi @0.75x 48dp 36px
mdpi 〜160dpi @1x 48dp 48px
hdpi 〜240dpi @1.5x 48dp 72px
xhdpi 〜320dpi @2x 48dp 96px
xxhdpi 〜480dpi @3x 48dp 144px
xxxhdpi 〜640dpi @4x (@3.5のときも) 48dp 192px

注目してほしいのは

  • dp指定は解像度が上がっても数値は増えないこと
  • px指定では解像度が上がるとサイズがどんどん大きくなることに注目してください。

繰り返しになりますが、これは従来1pxとされていた範囲にxhdpiなら4px、xxxhdpiなら16pxが詰まっている状態になり、見た目としては高精細になる代わりに、デザイナーは倍、4倍のサイズで画像アセットを用意する必要があるということです。

例えばPhotoshopでデザインするとき、画面サイズ360 x 640 dpのxxxhdpi端末をターゲットデバイスとするなら、カンバスサイズは1440 x 2560pxで用意。でも実際の表示で1/4になるので4で割り切れる数値でレイアウトしなくてはなりません。またエンジニアにはpxでなくdpでのサイズをきちんと伝える必要があります。

デジタルの単位〜iOSデバイス

基本 pt
線分 pt
フォント pt
行間 pt

iOSはAndroidよりも状況が少しマシで、現在@1x、@2x、@3xの三種類の画面密度グループ(dpi)が存在します。単位がdpでなくptなのに気を付けます。*2

スマホサイトの単位

基本 px (%, em, rem, vh / vwなどもある)
線分 px(%, em, rem, vh / vwなどもある)
フォント px (%, em, rem, vh / vwなどもある)
行間 px (%, em, rem, vh / vwなどもある)

スマホサイトデザインでもネイティブ同様にdpやptへの理解があると開発がスムーズに進むはずです。なぜならスマホサイトの実装での単位はpxを利用しつつも、挙動としてはdpと同じ挙動をしているからです。またややこしいですね。

 

Sketchを使うといい

Photoshopを使っていると例えば1080 x 1920pxでデザインしつつ、実サイズは1/3になることを意識しながらデザインするという苦行が待っています。

一方で、Sketchを使うと@1xサイズでデザインして、エキスポートだけ@2x, @3xなどを選ぶことができ簡単です。ラスターパーツはPhotoshopで用意することもあるでしょうが、UIデザインではSketchが便利です。

 

*1 断片化問題と言います。
*2 厳密には端末によって物理サイズはばらつく様ですが、ここでは割愛。
*3 厳密にはptはdpと同じではありませんが、ここでは割愛。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です