UIデザインガイドライン

マテリアルデザイン|No.04:Pixel density|日本語解説

この記事から得られること

この記事では、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

この記事の前提

    私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

    また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
    理由は、日本語に翻訳しますと不自然な表現となるためです。
    少し読みにくい部分もあるかもしれませんが、ご了承ください。

    なお、この記事を読み進めるなかで、分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

    マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

    マテリアルデザインの「画面レイアウト」の考え方とは?


    出典: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」の画面(ピクセル数の少ない画面):少ないピクセルを使用して、黒い丸を表示する(上の図の①)
    • 高い「dpi」の画面(ピクセル数の多い画面):多くのピクセルを使用して、黒い丸を表示する(上の図の②)

    スマホアプリは「画面の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デザインの勉強を一緒にしていきましょう。

    続きを学びたい方は

    なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事をご確認ください。

    次のガイドラインを学びたい方は
    マテリアルデザイン|No.05-1/2:Responsive layout grid|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Responsive layout grid(レスポンシブレイアウトグリッド)」の概念について学ぶことができます。...

    一つ前のガイドラインを学びたい方は
    マテリアルデザイン|No.03:Light and shadows|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Light and shadows(光と影)」の概念について学ぶことができます。...

COMMENT

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

CAPTCHA