Material Designの重要な部分をかいつまんで日本語に訳してまとめて下さっている現役UIデザイナーの方のありがたいブログを見つけたのでそれを読ませて頂きたいと思います。（原文で読もうとしたけど厳しかった…涙)

アツシさんという方がUIデザインガイドラインというカテゴリでまとめてくださっています。（救世主😭ありがとうございます！！！）
現在46項目あるので（現在進行形で訳してまとめてくださっている！！心の底からありがとうございます！！涙。ジャンピング土下座。投げ銭システムがあったら1億円くらい投げる😭）こちらも本とトレースと並行して進めていこうと思います。

1.Surfaceについて

Surface：UIを構成する概念。マテリアルデザインは全てSurfaceの組み合わせで構成されている（原文ではSurface、Material Surface、Materialと記載）

・Surfaceは縦、横、厚みの3次元で構成されている。
・Surfaceの概念は「紙」。
・どのような状態でも厚みだけは常に1dp（一番薄い状態）で固定。
・Shadow（影）が落ちており高さの変化によってShadowの見え方が変化する。
・Surface上には様々なコンテンツ（画像・動画・テキストなど）を載せることができる。
・縦横サイズの変更可能。

Surfaceの種類
・Rigid surface：タップなどの操作でも変形しないSurface
・Stretchable sueface：タップしたら画面が開くなど操作で変形するsueface
・Pannable surface：サイズは固定。surfaceのスクロールやピッチなどで移動させることができる。

・Surfaceのopacityを0にすることはできない
・scrim：強調したいsurface以外のsurfaceを暗くしてユーザーにを作に集中させる

2.Elevation（Surfaceの高さ）について

ElevationとはSurfaceの高さのことで、それぞれのコンポーネントでは「Elevationの初期値」を持っており、そのルールに従って、表示したり移動させたりすることができる。

・Resting elevation（止まっているときの高さ）
・Dynamic elevation offset（移動しているときの高さ）
・Edge（Surfaceの輪郭のこと）
→影、配色や透明度を変える、Scrimmed background(暗い処理がされた背景)で表現される

Elevationの変化は「Surfaceの動き」によって表現できる
・Changes in Shadows：Surfaceの影を変える
・Displaying overlap：Surfaceを重ねるように動かす
・Pushing：Surfaceを押し出すように動かす
・Scalling：Surfaceの縦横のサイズを変える
・Parallax：Surfaceの動くスピードを変える

可能であれば、「コンポーネント同士がぶつからないようにレイアウトする」ことが望ましい

3.Light and Shadows

マテリアルデザインでは仮装の2つの光がsurfaceを照らしており、その2つの光によって2種類の光と影ができる。
片方の光だけでは成り立たず、「2つの光を同時に使用すること」がガイドライン上のルールで規定されている。

・Key light と Key shadow：メインの光と影。シャープな影。
・Ambient light と Ambient shadow：あらゆる方向から照らしている光と影。ぼんやりとした影。

背景が真っ暗で影が見えにくい状態でもLight and shadowの概念は適用するのがルール。

4.Pixel density(ピクセル密度)

マテリアルデザインでは下記2種類のマテリアルデザイン独自の単位を使用している。
dp（density-independent pixels）＝密度に依存しないピクセル
sp（scalable pixels）＝密度に依存しないピクセル

マテリアルデザインではコンテンツと余白のバランスが取れるように8dpを基準にレイアウトを作成。
アイコンや文章などの小さなコンポーネントは4dpのグリッドを用いて一貫性を確保する。
（この8dpグリッドの考え方はさまざまな画面のデバイスや縦横画面のレイアウトにも適用できることからResponsive layoutと呼ばれている）

その後dp、dpi、sp等の説明が書いてあったんだけど、プログラマー向けの内容とのことなので割愛させていただきます。
dpを使用することでデバイスの「dpi」の違いによるUIデザインの見え方の違いを解決している、とのことだそうです・・・（難しい・・・涙）

おそらくデバイスの解像度によって見え方が違う現象が起きてしまわないように「dp」「sp」という単位を使用している、、、ということだと理解しました・・・

--------------------------
ここまで読んだ後 DailyUI の課題始めたらなんかちょっと自分の中の意識が変わりました。
違う引き出しが増えた的な。
今までWebデザインの引き出しから引っ張り出して何となく作成してたのが、新しい引き出しを手入れたから中のものちょっと使ってみようかなって的な。
これをsurfaceとして考えるのか的な。
シャドウが意外と重要な役割果たしてますね的な。
経験値が上がった！新たな道具を手に入れた！⚔️みたいなやつです。

なんかガイドライン読んで知識つけてアウトプットして行ったらUIデザイナーになれる気がしてきた😃ﾜﾊ

余談ですがMaterial3のMaterial Youってすごいですね。
デザイナーの代わりにAIが色を選ぶってことですよね。
（個人的には悲しいのでやめて欲しいような、でも簡単に統一感出せるしそれもアリな気がするような・・・）

続きは明日〜