この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Understanding layout」の章と、「Pixel density(ピクセル密度)」の概念について学ぶことができます。
なお、この記事は「約5〜8分」ほどで読める内容となっています。
Material Design : Design section “Understanding layout”
URL：https://material.io/design/layout/understanding-layout.html
Material Design : Design section “Pixel density”
URL：https://material.io/design/layout/pixel-density.html
この記事の前提
- 低い「dpi」の画面(ピクセル数の少ない画面)：少ないピクセルを使用して、黒い丸を表示する(上の図の①)
- 高い「dpi」の画面(ピクセル数の多い画面)：多くのピクセルを使用して、黒い丸を表示する(上の図の②)
私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
なお、この記事を読み進めるなかで、分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
マテリアルデザインの「画面レイアウト」の考え方とは？
出典：Material Design : Design section “Understanding layout”
URL：https://material.io/design/layout/understanding-layout.html#
マテリアルデザインでは、コンテンツと余白のバランスが取れるよう「8dpのグリッド」を基準にして「画面レイアウト」を作成します。
また、アイコンや文章などの小さなコンポーネントは、「4dpのグリッド」を用いて、その一貫性を確保します。
出典：Material Design : Design section “Understanding layout”
URL：https://material.io/design/layout/understanding-layout.html#
そして、この「8dpのグリッド」の考え方は、「さまざまな画面サイズのデバイス」や、「縦横画面のレイアウト」にも適用できることから「Responsive layout grid」と呼ばれています。
上の図は「Responsive layout grid」を適用した例です。
それでは次に、画面レイアウトを作るための概念「Pixel density」「dpi」「dp」について解説します。
まず理解すべき概念 ”Pixel density” と “dpi” とは？
出典：Material Design : Design section “Pixel density”
URL：https://material.io/design/layout/pixel-density.html#pixel-density
まず「Pixel density」とは「画面のピクセル密度」のことであり、マテリアルデザインではデバイスによって異なる様々な「Pixel density」を考慮したルールが規定されています。
次に「dpi」とは「dot per inch」の略であり、「1インチ(2.54cm)の横幅あたりのピクセル数」のことです。
「dpi」が高いほど、「1インチの横幅あたりのピクセル数」が多く、「画面内のピクセル1つ1つが小さい」ことを示しています。
例えば、「dpi」の高い画面と低い画面を用意し、同じピクセル数のアイコンを表示した場合、「dpi」の低い画面よりも高い画面のほうが、アイコンが小さく表示されます。
そのため、ユーザーが使用するデバイス(スマホやタブレットなど)の「dpi」によって、アイコンのサイズなどが変わってしまい、デバイスによって「UIの見え方が変わってしまう」という現象が発生します。
そこで、マテリアルデザインではこの現象を解消するため、「dpi」とは異なる独自の単位「dp」を採用しています。
それでは、次にその独自の単位「dp」について解説します。
マテリアルデザイン独自の単位 ”dp” とは？
「dp(ディップと発音します)」とは「density-independent pixels」の略であり、直訳しますと「密度に依存しないピクセル」となります。
マテリアルデザインでは、この独自の単位「dp」を使用することにより、「dpi」の違いによる「UIデザインの見え方の違い」を解決しています。
それでは、具体的にどのように解決しているのかを解説します。
”dp” を使って、”dpi” の違いを具体的にどう解決している？
出典：Material Design : Design section “Pixel density”
URL：https://material.io/design/layout/pixel-density.html#density-independence
例えば、スマホアプリの画面上に「黒い丸」を表示する場合、マテリアルデザインでは以下の方法で「黒い丸」を表示しています。
スマホアプリは「画面のdpiに従った黒い丸の表示方法」を複数保持しており、その「dp」は同じ値となります。
具体的にデバイスの ”dp” はどのように計算される？
画面の解像度が「160dpi」のとき「1px = 1dp」とし、この値を基準に「dp」は計算されます。
そして、dpの計算式は以下の通りです。
dp = 画面のdpi × 160pdi(基準値) ÷ 画面の横幅のpx数
例えば「A」というデバイスがあり、「画面のdpi：360px」「画面の横幅のpx数：240px」の場合、そのdpの計算式は、
Aのdp = 360(px) × 160(dpi) ÷ 240(dpi) = 240(dp)
となります。
別の例として「B」というデバイスがあり、「画面のdpi：120px」「画面の横幅のpx数：180px」の場合、そのdpの計算式は、
Bのdp = 120(px) × 160(dpi) ÷ 180(dpi) = 240(dp)
となります。
よって、AとBのデバイスの「dp」は同じであり、マテリアルデザインとしては「同じ解像度」として扱います。
テキスト向けの “dp”である “sp” とは？
「sp」とは、「Scalable pixels」の略であり、フォント用(テキスト用)の「密度に依存しないピクセル」と理解していただければ良いです。
「文字サイズ」の設定を大きくした際は、この「sp」も増加する、ということをまずは理解しておけば問題ありません。
iOS向けでは ”Pixel” をどのように管理すればよい？
iOSでは、「Logical resolution」と呼ばれる数値を用いて、複数のデバイス(iPhoneやiPad)に対応できるようにしています。
「Logical resolution」の単位は「Points」なのですが、最終的にはデバイスの処理によって「Pixel」に変換されます。
具体的なiOSデバイスと「Logical resolution」の対応表は、以下URLをご参照ください。
iOS Device Display Summary
URL：https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
まとめ
出典：Material Design : Design section “Understanding layout”
URL：https://material.io/design/layout/understanding-layout.html#
繰り返しとはなりますが、マテリアルデザインでは、コンテンツと余白のバランスが取れるよう「8dpのグリッド」を基準にして「画面レイアウト」を作成します。
また、独自の画面解像度の単位「dp」を使用することにより、デバイスの「dpi」の違いによる「UIデザインの見え方の違い」を解決しています。
今回の内容はどちらかといいますと「実装寄り(プログラマー向け)の内容」となっているため、概要として理解するレベルで良いと考えます。
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事をご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
