50
62

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Androidデザインガイドラインで使われているサイズ群まとめ

Posted at

デザインするときにすぐ使えるよう、画面密度別にpx単位に変換したものも追加してみました。

  • xxhdpi 1dip = 3px
  • xxxhdpi 1dip = 4px
  • UIの基本サイズ 48dp
  • 基本フォントサイズ 14sp

レイアウトデザイン

|dip|xxhdpi|xxxhdpi|
---|---|---|---
ステータスバー|24dip|72px|96px
ツールバー(アクションバー)|56dip|168px|224px
ナビゲーションバー、タブ等|48dip|144px|192px
左右の余白|16dip|48px|54px
縦向きの基準の高さ|56dip|168px|224px

公式ガイドライン

Mobile Layout Template (デザイン時に使えるaiファイル)

よく使うサイズ

公式のガイドラインでよく使われていたサイズ群です。

dip xxhdpi xxxhdpi
8dip 24px 32px
16dip 48px 54px
24dip 72px 96px
32dip 96px 128px
48dip 144px 192px
56dip 168px 224px
64dip 192px 256px
72dip 216px 288px
80dip 240px 320px

フォントサイズ

フォントサイズが多いと散らかって見えるのでなるべくサイズを限って使うようにします。MaterialDesignのスタンダードなフォントサイズは下記のようになっています。

|dip|xxhdpi|xxxhdpi
---|---|---|---
ヘッドライン|24sp|72px|96px
タイトル bold|20sp|60px|80px
サブヘッダー|16sp|48px|64px
本文1|14sp|42px|56px
本文2 bold|14sp|42px|56px
キャプション|12sp|36px|46px
ボタン bold|14sp|42px|56px

ラインの太さ

ラインもフォントサイズと同じく多いと散らかって見えるので、なるべくサイズは限って使うようにします。

dip xxhdpi xxxhdpi
1dip 3px 4px
2dip 6px 8px
3dip 9px 12px
50
62
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
50
62

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?