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

2022年10月5日 23:37

はじめに
今回は『マテリアルデザインガイドライン』のLayout『Applying density
』について解説していきます。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/※動画・画像データ等はこちらから引用させていただいております。

Applying density

『Applying density (高密度化)』とは、『画面に多くのコンポーネントを表示することによって、ユーザーの利便性が向上させる』方法です。

Applying densityを適用する方法

『Applying density』は『ユーザーがどのようにコンポーネントを操作するか』によって、適用するかどうかを判断します。

例えば、多くの情報を表示して操作する必要のある表やリスト、または入力項目の多いフォームなどの画面では、『Applying density』を適用することで、情報の一覧が容易になります。

Applying densityを適用してはいけないケース

『ドロップダウンメニュー』や『日付ピッカー』など、『焦点を絞った操作(タップなど)』が必要なコンポーネントでは『Applying density』の適用は望ましくありません。

理由は、日付ピッカーなどのコンポーネントに『Applying density』を適用すると、タップ可能なスペースが制限され、使いやすさが低下してしまう為です。(下記画像)

また、『スナックバー』や『ダイアログ』など、ユーザーに警告するコンポーネントの『Applying density』の適用も望ましくありません。

理由は、アラートの密度を上げると、ユーザーの注意を引く効果が低下してしまう為です。
例えば、下記の画像のように、ダイアログに『Applying density』を適用してしまうと、メッセージの読みやすさが損なわれてしまいます。

グリッドとコンポーネントの『density(密度)』

見やすいUIを作成するためには、『密度の低いグリッドレイアウト』と『高密度のコンポーネント』を組み合わせて使用します。

『Applying density』を適用したコンポーネント＝高密度のコンポーネント

高密度のコンポーネントを使用する際は、『グリッド』の密度を下げる必要があります。

コンポーネントへの『Applying density』の適用

コンポーネントの「Applying density」を調整する際は、1つのコンポーネントだけではなく、アプリ内の全てのコンポーネントを調整する必要があります。

マテリアルデザインガイドラインでは『Applying density』を調整したときの各コンポーネントの見え方について、デモが確認できますので、ご覧ください。

Density scale

マテリアルデザインでは、コンポーネントの「Density (密度)」を変更するためのルールとして、「Density scale」という数値の考え方があります。

「Density scale」の数値は、「0」を基準に、スペースが減少すると「-1〜-3」まで減少させることができます。(増減は4dp)

なお、以下の動画のように「Density scale」を「-4」まで下げてしまうと、コンポーネントとして成り立たない表示になるため禁止されています。

コンポーネントと『Density scale』

コンポーネントの「Density scale」が変わると、パディングと位置はそのままですが、「Dimention(タテ幅)」が変わります。

Touch targets(タッチ領域)

タッチのしやすさと『Density(密度)』のバランスをとるために、タッチ領域は最小で『48 x 48 dp』、各ターゲットの間には最小で『8dp』のスペースを空ける必要があります。

1. 40 dp 要素、48 dp タッチターゲット
2. 24 dp 要素、48 dp タッチターゲット
3. 36 dp 要素、48 dp タッチターゲット

なお、iOSの場合のタッチ領域は『44 x 44 dp以上』が推奨とされています。

Typographyと『Applying density』

テキストの『Applying density』は『Line height(行の高さ)』として適用することができます。

❶『Applying density』が低い
❷『Applying density』が高い

まとめ

今回は『Applying density』についてまとめました。
私は、これまでこの章を読んだことがなく『Applying density』という言葉は、今日初めて聞きました。(笑)

密度を高くすることで、画面にはより多くの情報が表示されることになりますが、情報が多すぎて視認性が悪くなってしまうこともあるので、注意して使用したいですね。

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

この記事が気に入ったらサポートをしてみませんか？