□ 【動画で使ったドキュメント】マテリアルデザインを読むべき理由■
https://www.notion.so/takumikai/a28e63c187914b958a7d831532585f4c
□ 【目次】
00:00 動画の内容
03:13 話の結論
06:38 1.UIには型がありマテリアルデザインがまとめてくれている
11:48 2.型はコードと連動している
18:38 Qに答えていく
26:07 質問-型が分かれば口数もわかる？
31:29 マテリアル〜は一旦全部読もう
33:58 エンジニアさんにこれはできませんと言われるのはどんな時？
▽ 投稿した内容
今日の内容 - この疑問に答える有名ガイドラインを読む意味
Q. ソフトウェアやアプリのデザインするならコードのこと理解しないといけないですよね？
Q. UIのビジュアルってどうやって上手くなればいいんですか？
Q. エンジニアさんに聞かないと実現可能なデザインってわからなくないですか？
Q. なんで画面の上の方に「＜」っていつもあるんですか？下じゃダメなんですか？
Q. なんでUIの型を基本的に使った方が良いんですか？オリジナリティ出したいです
Q. スマホアプリと、PCビューのUIデザインって別ジャンルですよね？
マテリアルデザインについての資料はこちら
https://www.notion.so/takumikai/2ba9553518574da98602957c5c6aeb58
□ Elevation のページ
https://material.io/design/environment/elevation.html
□ まとめてくれたスライド
●ページをまとめたもの
https://www.figma.com/file/7Pl8EP6kw8b6ogy9xhsHPt/Elevation?node-id=10%3A145
●発表用の資料
https://www.figma.com/file/7Pl8EP6kw8b6ogy9xhsHPt/Elevation?node-id=0%3A1
□ 目次
13:17 スライドまとめ
17:32 質問-ボトムナビの階層
23:55 ページ遷移でも階層が動く
25:41 質問-scalingの高低差について
30:10 質問-コンポーネントの高さの値はあるか
31:00 質問-ComponentとSurfaceの定義
38:40 質問 ボトムナビのシャドウの向きが下じゃないよね？ル
41:11 質問 - コンポーネント毎の高さは書いて毎回整理するのか
Material Designを読むシリーズです。
□ 今回のページ
https://material.io/design/environment/light-shadows.html#light
□ まとめてくれたスライド
●ページをまとめたもの
https://www.notion.so/03-Light-and-Shadow-5bf3b2254b7a4a9a849f113b147c7d48
□ 目次
02:00 影と光の解説
11:17 質問タイム
16:00 キーライトを当てる方向
16:54 ボタンによる状態変化
19:00 MaterialYouでシャドウを減らした
23:32 次の話
□ 対象のページ
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
□ 解説まとめたNotion
https://www.notion.so/takumikai/7-20-Responsive-Layout-Grid-937212b2f013420d8d767a74136eb776
□ 解説まとめたNotion
00:00 ページの結論共有
11:36 カイクン実演
23:07 幅を%でデザインする方法
27:18 実装時の共有どうする
37:02 可変する部分を決める
46:17 グリッドレイアウトってどうやる？
□ 今回まとめたMaterial Designのページはこちら
https://material.io/design/layout/spacing-methods.html#spacing
□ 倍数を管理してビジュアルデザインする方法はこちら
www.bo-no.design/contents/visualsecret01
□ 今回のMaterial Designのページはこちら
https://material.io/design/navigation/understanding-navigation.html#color-usage-and-palettes
□ まとめたページはこちら
□ 今回のMaterial Designのページはこちら
https://material.io/design/color/the-color-system.html#color-usage-and-palettes
□ 配色を最小限、シンプルにやるTIPSはこちらで解説してます
https://www.bo-no.design/contents/visualsecret03
