Material Design輪読＃5　グリッド〜コンポーネントの動作

グリッド〜コンポーネントの動作

UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ#5

レスポンシブレイアウト(画面の幅に応じてCSSを切り替えるレイアウト)は、列、ガター、余白の要素で構成される
その中でのグリットを簡単にいうと

グリッドはさまざまなレイアウト間の一貫性を維持し、
デザイン上の意思決定を迅速化するもの

1. 列 2. ガター 3. 余白

余白はスマホの画面や、PCの画面をよく見ていると両端は空白の余白があることがわかります。(下記の図参照していただければ)
ガターはFigmaでよく使いますが、カードや画像などを横に並べて配置する際にとても便利な機能です。
配置のバランスが感覚ではなく、視覚的、実数値として判断することができ、良いバランスが言語化できるため有効的に活用していくことが必要です。

Pinterest抜粋

上記はPinterestから抜粋したものです。
カードとカードの隙間をグリットで分割することで整頓されたUIになっています。

グリッドのカスタマイズ

レイアウトの構造

1. アプリ バー 2. ナビゲーション 3. 本文

実際に見ているnoteのホーム画面も上記のレイアウト構造を参考に作成されていることがわかります。

noteのホーム画面になります。
1.アプリバーをヘッダーに配置、2.ナビゲーションを左に配置しアクションの動線をわかりやすく、3.本体はグリッドを使い整列されたカードの配列を表現していることがわかります。
他のアプリやサイトでも同様に基本的な構造は同じだと思いますが、noteのUIがmaterialdesignの構造に忠実に作成されていたので今回例に上げさせていただきました。
他のサイトで参考になったよ！があればぜひコメントで教えてください！！

ベースライン グリッド

すべてのコンポーネントは、モバイル、タブレット、およびデスクトップ用の 8 dp 正方形のベースライン グリッドに配置されます。

なぜ8dpなのか

・要素のサイズや余白に秩序を持たせやすくなり、デザインの品質が向上するため。
・デザインルールを徹底しやすくなるため。
・8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなり、コーディングが進めやすくなるため。
・デザインとコーディングの両方の品質と速度が高まり、結果的にWebサイトやアプリ全体の品質が向上するため。
・多くのデバイスの基準となる解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすいため。

デザインだけではなく、コーディングのしやすさがあるみたいです。
コーディング中に仕様変更がされる際に、コンテンツ幅と余白を全て8の倍数で設計しておくことで、その割合を後から変えるときにも端数ができずに柔軟に対応できるそうです。

また、デスクトップやタブレット、スマホなどのスクリーンサイズの可変性を持たせる際に8の倍数は良いとされています。

8の倍数ルールでデザインする理由とメリット・デメリット

よく使う余白の大きさ

余白として主に使うのは、8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、256pxなどです。
覚えるのがめんどくさいので考えずにできるまですぐに確認できるようにここに書いておきます。

コンポーネントの動作

画面サイズによってレイアウトが変わるため、UIを作成する際には、スクリーンの可変に対応できるように作成する必要があります。

また、人間の視線誘導の習性を考え配置する必要があります。

密度

タイポグラフィレイアウトで密度を作成する方法として使用

今回はグリッドの活用から密度・タイポグラフィまでを読んでみました。
最初と比べて実際のUIと比較しながら学習できており、成長を感じられる
回になっていると実感しています。

次回は、ナビゲーションについて学んでいきたいと思います。