本日もMaterial Designのガイドラインを読むにあたってアツシさんという方のUIデザインガイドラインを読ませて頂きます。（本当にありがとうございます！！！）

今日の範囲はデザイン上の見た目のルールが主でWEBデザインにも共通しており既知の内容が多いためメモ書き程度になっております。
既知の内容も多かったですが、無意識にやっていたことが明確になって良い再確認になりました。わーい。

◆コンポーネントとは？

UIデザインにおいてコンポーネントとは「画面上に表示するUIパーツの総称」のこと。
具体的には、ボタン、チェックボックス、ダイアログ（ポップアップ）、テキストフィールド（文字入力欄）などがあり、共通パーツとして使用される。
共通パーツとして使用することでアプリに統一感が生まれユーザーが少ないヒントで使いこなすことができる。

5-1.Responsive layout grid

Responsive layout grid ＝マテリアルデザインの画面上のレイアウトのルール
1 Columns（列）
2 Gutters（溝）
3 Margins（余白）
の3つのグリッド構成されており（下部イメージ参照）、Responsive payout gridのルールを使用してさまざまなデバイスの画面サイズにあったレイアウトに変化させる。

◆Guttersの横幅は画面サイズによって変化するが、一定の画面サイズの範囲内で固定値となる。
・画面の横幅が0〜360dp → 16dp　（ex.スマホ）
・画面の横幅が361〜600dp → 24dp　（ex.タブレット）

◆Marginの横幅も画面サイズによって変化するが、Guttersと同じく一定の画面サイズの範囲内で固定値となる。
・スマホ → 16dp
・タブレット → 24dp

◆Guttersのカスタマイズ
→Guttersの幅を調整することでそれぞれの関係性を「グループ」として表現することができる。（広めのGuttersで要素の独立性、狭めのGuttersで要素の集合性が強まる）

◆Marginsのカスタマイズ
→マテリアルデザインでは1行あたり40〜60文字（日本語で20〜30文字）になるようにMarginsを取るのが望ましいとされている。

Responsive layout grid ＝マテリアルデザインの画面上のレイアウトのルール
1 Columns（列）
2 Gutters（溝）
3 Margins（余白）
の3つのグリッドで構成されており、それぞれの横幅を調整することでコンテンツの関係性や見やすさを調整している。

5-2.Responsive layout grid

・GattersとMarginsはそれぞれ独立して設定できる。
・水平方向のレイアウトにも適用できる（Top App Barを除いて）
・Breakpoint → 画面の横幅の境界線。（ex.PC：タブレット：スマホ など）

◆Responsive layout gridには2種類のグリッドがある。
・Fluid Grid → Breakpointを基準に画面の横幅に従ってGridの横幅が可変する
・Fixed Grid → 画面の横幅が変化してもサイズの変化しない要素が含まれる
→ヘッダーの横幅だけ100%でメイン部分は960pxで固定、など

◆画面レイアウトの各領域「UI region」
画面レイアウトのそれぞれの領域のことを「UI region」と呼び3種類のUI regionがある。
画面サイズとBreakpointに従って一貫したレイアウトを構成する必要がある。
・Permanent UI region 
Responsive layout gridの外側に表示され、常に固定のサイズで表示される領域（固定されたサイドバー）
・ Persistent UI region
ユーザーの操作によって自由に表示 / 非表示が切り替えられる領域（タップで表示できるサイドバー。コンテンツを押しのけて表示される）
・Temporary UI region
ユーザーの操作によって一時的に表示される領域（タップで表示できるサイドバー。画面上のコンテンツに重なる形で表示される）

6.Spacing methods

※この章はレイアウトのルールについての章、で用語は大事ではないがルールは重要なので理解しておいた方が良い、とのことです。

Baseline Grid とは？

・Material Design 全てのコンポーネントは8dpのグリッドベース
・コンポーネント内のアイコン、アイコンラベル等は4dpベース
・テキストは4dpのベースラインに従って配置
・Button、Listなどコンポーネント内のテキストはこのベースラインに従わずに配置できる（その場合のテキストはベースラインに従わず縦方向に対して中央揃えに配置）

コンポーネント内の Padding とは？

・コンポーネント内のpaddingとは要素と要素の間のスペースのことで、そのPaddingの値は4dp、8dpの感覚で増減し管理される

コンポーネント内の Dimention とは？

Dimenshion（寸法）とは「コンポーネント内の要素」そして「コンポーネントそのものの幅と高さ」のこと。
・各コンポーネントの縦の Dimension は「8dp」の倍数で揃える必要がある。

コンポーネント内の Alignment とは？

コンポーネント内の要素の一を整列させること。

整列における Keyline とは？

KeylineとはResponshive layout gridのルールに従わずに要素を配置するためのガイド用の縦線。
・Keylineは8dp単位で左右に移動させることができる。

Container とは？

Containerとは画面内の要素の範囲。
Containerとタッチできる領域は別の概念。
必ずしも画面内の見た目の要素とContainerが一致するとは限らない。
ContainerはColumnsの横幅に従う。

Aspect ratio（アスペクト比） とは？

横幅：縦幅の比率のこと。
マテリアルデザインでは画面の一貫性や統一感を保つために Aspect ratio を使用する。
下記の値（比率）を使用することが推奨されている。

Responsive cropping とは？

画面サイズに従って画像を適切にトリミングする方法。
・縦幅の比率を維持する（ex.常に3:2をキープ）
・縦幅の比率を変える（ex.1:1、16:9など比率が変わる。）
・縦幅を固定する（ex.スマホ・タブレット共に縦幅を常に240dpに固定）

Touch target とは？

UI上の要素のタッチ可能領域のこと。
タッチのしやすさを考慮して 48×48dp 以上、Touch target の感覚は少なくとも8dp以上あける

7.Component behavior（コンポーネントの動作）

Component Width とは？
Component width=コンポーネントの横幅

Component Width  のタイプ「Fluid」とは？
画面サイズに応じてComponent width が変化する。

Component Width のタイプ 「Fixed」とは？
画面サイズが変化してもComponent width が変化しない。

コンポーネントの動き「Push」とは？
コンポーネントの形を変えずに移動させること。
（例：メインパーツが押し出さられる形でメニューが表示される。）

コンポーネントの動き「Overlaid」とは？
コンポーネント上に別のコンポーネントを重ねること。
（例：メイン部分の上に重なる形でメニューが表示される。）

コンポーネントのResponsive patternsとは？
画面サイズの変化によってコンポーネントの表示方法を変化させる方法
下記5種類の方法がある。

Reveal：隠れていたものを表示
サイドナビ、メニュー選択、もっと読むで続きを表示させるパターンなど

Transform：別の形状で表示
Breakpointに従って別の形状で表示させるパターン
（ex.PCではタブ表示だったものをスマホではサイドバー表示にする）
（ex.PCでは並べて配置させていたものをスマホではアコーディオンでリストにする）

Divide：分けて全てを表示
複数のコンポーネントを同一レイヤーに分けて表示させる
（ex.SPではタップ式にして隠していたリストナビをPCでは並べて配列させる）

Reflow：レイアウトを変えて再配置
ex.SPではタブ配置だったものをPCでは並べてカテゴリ配置
es.SPとPCでコンポートの要素は変えずに再配置（縦積み→横積み）

Expand：拡大して表示
SP表示させたものをPCで横に引き伸ばしたもので表示（ポップアップなど）

Position：適切な位置に移動
ex.bottom sheetからMenu Iconに移動させる
ex.floating action buttonを見やすい位置に移動させる


今日はここまで〜