[日本語]マテリアルデザイン 『Pixel density』#04

はじめに
今回は『マテリアルデザインガイドライン』のLayoutの『Pixel density』
について解説していきます。

なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、大切なポイントを抜粋したり、難しいな。。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。

正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design
URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

Layoutについて

マテリアルデザインでは、基本的に8dpのグリッドを使用して画面レイアウトを作成します。

アイコンや文章など小さなコンポーネントは、4dpのグリッドを使用して、その一貫性を確保します。

Pixel density

「Pixel density」とは「画面のピクセル密度」のことであり、マテリアルデザインでは、デバイスによって異なる「画面のピクセル密度」のルールが規定されています。

ピクセル密度のばらつきの問題と『dp』について

高密度の画面は、低密度の画面よりも 1 インチあたりのピクセル数が多くなります。
その結果、同じピクセルのコンポーネントは、低密度の画面では大きく表示され、高密度の画面では小さく表示されてしまいます。

この問題を解消するため、、マテリアルデザインでは画面密度に依存しないピクセルである「dp」という単位を使用し、さまざまな密度の画面でも一貫して表示することが可能となっています。

❶dpで表示する低密度の画面　❷dpで表示する高密度の画面

『dp』の計算方法

dp は、画面の解像度が「160dpi」のとき「1px = 1dp」とし、この値を基準に「dp」は計算されます。

dpの計算方法は以下の通りです。
dp = 画面のdpi × 160 ÷ 画面の横幅のpx数

『sp』とは？

「sp」とは、「Scalable pixels」の略で、dpと同じく『密度に依存しないピクセル』 のフォント用の単位です。

iOSのデザインについて

iOS向けにデザインを作成する場合は以下をご覧ください。

▼Apple iOS のディスプレイに関するドキュメント
https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
▼PaintCode のiPhone 解像度ガイド
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

まとめ

今回は、マテリアルデザイン『Layout』のPixel densityについてまとめてみました。
最も押さえておきたいポイントとしては、マテリアルデザインでは、基本的に8dpのグリッドを使用して画面レイアウトを作成するというところかなと思います。

最後まで読んでいただきありがとうございます!!

※ガイドラインでは、さらに詳しく解説がありますので、是非ご覧ください。
次回は『Responsive layout grid』のについてまとめていきます。