マテリアルデザイン勉強会スライド資料.pdf

1. マテリアルデザイン勉強会

2. はじめにマテリアルデザイン勉強会⽬的今回の勉強を通して、読んだことのない⼈でも、要点をサクッと理解できるよようにする。アプリデザインをするうえで、教科書ともいえるマテリアルデザイン。しかし、業務にあまり活かせない内容も所々ある。やる意味⾃分の過去の業務の中で、知識不⾜で迷う事があったので、資料や動画を⾒ることで、 UIデザインにおける初学者の不明点を出来るだけ無くしたい。 UIの作り⽅や、コンポーネントの使い⽅の基本の「キ」を習得するのに役⽴てる。進め⽅今回の内容は、あくまで新屋敷が編集しているため、完璧ではありません。都度、補⾜のコメントや、反対意⾒などがあれば、発⾔してほしい。クイズ形式でマテリアルデザインの内容を振り返り、皆さまの理解を深めていく。そのため、⼀⼈ずつ当てていくので、回答してください。

3. ⽬次マテリアルデザイン勉強会 1. カラーパレットの作り⽅＆気を付けること 2. UIのXYZ軸について 3. コンポーネントのパターンと⽤途当てクイズ 4. サイズ・要素間のマージンで、違和感を感じるのは？ 5. ダークテーマの作り⽅

4. マテリアルデザイン勉強会 1. カラーパレットの作り⽅＆気を付けること

5. 1.カラーパレットの作り⽅＆気を付けることマテリアルデザイン勉強会 Q.濃淡の作り⽅はどれが良い？〇がメインで使⽤される⾊です。 P：プライマリーカラー S：セカンダリーカラーパターン① パターン② P S P S

6. 1.カラーパレットの作り⽅＆気を付けることマテリアルデザイン勉強会 A.パターン① 900 800 700 600 500 400 300 200 100 50 P S 明暗のパターンを作る時は、⽬分量で勝⼿に決めるのではなく、不透明度をいじったり、マテリアルパレットジェネレータなどの専⽤のツールを使ったうえで、⽬で調整する必要がある各⾊には、明るい⾊/暗い⾊のバリエーションを作る必要がある。セカンダリーカラーは、プライマリーカラーと補⾊/準補⾊の関係になるような、⽬⽴ち引き⽴つ⾊を選択する。

7. 1.カラーパレットの作り⽅＆気を付けることマテリアルデザイン勉強会 Q.間違った⾊の使い⽅をしているパーツは？

8. 1.カラーパレットの作り⽅＆気を付けることマテリアルデザイン勉強会 A.5カ所 ①必須項⽬は⽬⽴つように専⽤の⾊を（オレンジなど） ②エラーは⾚⾊にしましょう ③⼊⼒の完了している項⽬はOKのステータスである事が分かるように ④不可逆処理のアクションをするボタンは⼀⽬で分る⾊を使⽤ ⑤必須項⽬が⼊⼒出来ていないので、⾮活性の⾒た⽬に

9. 1.カラーパレットの作り⽅＆気を付けることマテリアルデザイン勉強会 Q.アクセシブルなのは？テキストと背景⾊のコントラスト⽐が充分なパターンを当ててくださいパターン① パターン② パターン③ パターン④

10. 1.カラーパレットの作り⽅＆気を付けることマテリアルデザイン勉強会コントラスト⽐は4.5：1以上を確保し、WCAG標準に従いましょうパターン① パターン② パターン③ パターン④ A.パターン①

11. マテリアルデザイン勉強会 2. UIのXYZ軸について

12. 2.UIのXYZ軸についてマテリアルデザイン勉強会 Q.⾜らない影は？ yyyy/mm/dd - yyyy/mm/dd 詳細条件項⽬① 項⽬② 項⽬⑥ 項⽬③ 項⽬⑤ テキストテキストテキストテキストテキストテキスト補⾜情報のテキストテキスト項⽬④ すべて検索検索対象すべて処理待ちキーワード担当者すべて詳細

13. yyyy/mm/dd - yyyy/mm/dd 詳細条件項⽬① 項⽬② 項⽬⑥ 項⽬③ 項⽬⑤ テキストテキストテキストテキストテキストテキスト補⾜情報のテキストテキスト項⽬④ すべて検索検索対象すべて処理待ちキーワード担当者すべて詳細 2.UIのXYZ軸についてマテリアルデザイン勉強会 A.①と② 塊として認識しやすくする必要があります。詳細条件検索の⼊⼒項⽬は背景に別の要素と重なることが多く、線だけでは埋もれてしまいます。 1 クリック可能である事を明⽰する必要があります。 2

14. 2.UIのXYZ軸についてマテリアルデザイン勉強会 Q.いらない影は？ 20件表⽰件数 1〜20件表⽰ 108件のうち項⽬④ テキストテキスト項⽬③ テキストテキスト項⽬② テキストテキスト項⽬① テキストテキストテキスト ID︓korehaIDdesu 詳細テキスト ID︓korehaIDdesu 詳細テキスト ID︓korehaIDdesu 詳細ヘルプ設定通知さんユーザー名

15. 2.UIのXYZ軸についてマテリアルデザイン勉強会必ずしもヘッダーエリアに影を⼊れないといけないわけではありません。階層構造を表すための⼿段は影だけでなく、線を⽤いることで代⽤が可能です。トンマナや使いやすさを考慮したうえで、影を使いましょう。 1 明るい⾊が⼿前、暗い⾊が奥にあるように⾒えるため、影が無くても階層の違いの表現は可能です。 2 20件表⽰件数 1〜20件表⽰ 108件のうち項⽬④ テキストテキスト項⽬③ テキストテキスト項⽬② テキストテキストキストテキスト ID︓korehaIDdesu 詳細テキスト ID︓korehaIDdesu 詳細ト aIDdesu ヘルプ設定通知さんユーザー名 A.①と②

16. 2.UIのXYZ軸についてマテリアルデザイン勉強会 Q.影の付け⽅はどれが正しい？ヘルプ設定通知さんー名⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知ヘルプ設定通知さんー名⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知ヘルプ設定通知さんー名⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知パターン① パターン② パターン③

17. 2.UIのXYZ軸についてマテリアルデザイン勉強会ヘルプ設定通知さんー名⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知ヘルプ設定通知さんー名⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知ヘルプ設定通知さんー名⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知パターン① パターン② パターン③ Q.⼀番右現実の物理空間に近い影の使い⽅をする事で、ユーザーが要素間の関係性を理解しやすくなります。

18. マテリアルデザイン勉強会 3. コンポーネントのパターンと⽤途

19. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 Q.３つのうち⾃動的に消える通知は？スレッドをゴミ箱に移動しました。取消ダイアログバナースナックバー

20. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会スレッドをゴミ箱に移動しました。取消ダイアログバナースナックバー A.スナックバーユーザーの操作を妨げず、優先度が低いメッセージを通知するコンポーネントです

21. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 Q.以下のナビゲーションはどの種類に分類される？横⽅向のナビゲーションフォワードナビゲーションリバースナビゲーション同じ階層レベルの画⾯間を移動するマテリアルデザインでナビゲーションは3種類あると定義されています。操作や作業を前に進めるひとつ前の動作、1つ上の階層へ戻す下部ナビゲーションバー（スマホ）パンくず検索詳細画⾯ / ⼀覧画⾯ / テキストテキスト / 検索ホームお気に⼊りお知らせ

22. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 A.以下の組み合わせが正解横⽅向のナビゲーションフォワードナビゲーションリバースナビゲーション同じ階層レベルの画⾯間を移動する操作や作業を前に進めるひとつ前の動作、1つ上の階層へ戻す下部ナビゲーションバー（スマホ）パンくず検索詳細画⾯ / ⼀覧画⾯ / テキストテキスト / 検索ホームお気に⼊りお知らせ

23. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 Q.読み込み表⽰で正しいものはどれ？ 2 3 1 アップロードまたは画像をドロップ hogehohe.jpg hogehohe.jpg hogehohe.jpg 項⽬名 100MB以下のjpg,png,pdfのみアップロードまたは画像をドロップ hogehohe.jpg hogehohe.jpg hogehohe.jpg 項⽬名 100MB以下のjpg,png,pdfのみアップロードまたは画像をドロップ hogehohe.jpg hogehohe.jpg hogehohe.jpg 項⽬名 100MB以下のjpg,png,pdfのみ 92% 26% 14%

24. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 A.❶❸が正解アップロードまたは画像をドロップ hogehohe.jpg hogehohe.jpg hogehohe.jpg 項⽬名 100MB以下のjpg,png,pdfのみアップロードまたは画像をドロップ hogehohe.jpg hogehohe.jpg hogehohe.jpg 項⽬名 100MB以下のjpg,png,pdfのみアップロードまたは画像をドロップ hogehohe.jpg hogehohe.jpg hogehohe.jpg 項⽬名 100MB以下のjpg,png,pdfのみ 92% 26% 14% 2 3 1 ❷は読み込みの進⾏状況が分からないため、使⽤は望ましくありません

25. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 Q.間違っているタブの使い⽅はどれ？パターン❶ パターン❷ パターン❸ 格安プラン⽉々500円プランスタンダードプランプレミアムプラン会社員の⽅へ学⽣の⽅へ経営者の⽅へ hogeに加⼊して⼀年以上の… チャプター1 チャプター2 チャプター3 チャプター4

26. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 A.全て間違い同時に閲覧する必要が無い情報を分け、読み進める中で余計な情報を⾒せないようにするために使⽤パターン❶：⽐較検討するコンテンツに使うと⼀覧性が無くなり、読む負荷が重くなりますパターン❷：「…」など内容を想起できないラベルではなく、別の短いラベルにしましょうパターン❸：順番に読み進めるコンテンツを含めると読み進める負荷が重くなります格安プラン⽉々500円プランスタンダードプランプレミアムプラン会社員の⽅へ学⽣の⽅へ経営者の⽅へ hogeに加⼊して⼀年以上の… チャプター1 チャプター2 チャプター3 チャプター4

27. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会 Q.ボタンの配置で望ましいものは？ボタンボタンボタンボタンボタンテキストリンクパターン❷ パターン❸ パターン❶

28. 3.コンポーネントのパターンと⽤途マテリアルデザイン勉強会ボタンボタンボタンボタンボタンテキストリンクパターン❷ パターン❸ パターン❶ A.パターン❸ ⾊でしか⾒分けがつかないボタンは横並びでの配置は控えてください縦積みで配置すると押し間違いが起こりやすくなります他の種類のボタンであれば、横並びでも押し間違いが起きずらい

29. マテリアルデザイン勉強会 4. レイアウト・サイズについて

30. 4.レイアウト・サイズについてマテリアルデザイン勉強会 Q.線が要らないのは？テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2021年4⽉14⽇ 2021年4⽉14⽇ 2021年4⽉14⽇カテゴリ1 カテゴリ1 カテゴリ1 カテゴリ1 カテゴリ1 カテゴリ1 テキストテキストテキストテキストテキストテキストテキストテキストテキスト 2021年4⽉14⽇カテゴリ1,カテゴリ2,カテゴリ3,カテゴリ4 ⼭⽥太郎 12,090 View 29 2,929 292,929 パターン❶ パターン❷

31. 4.レイアウト・サイズについてマテリアルデザイン勉強会 A.どちらも不要区切り線はグルーピングに便利ですが、⾒た⽬の煩雑さに繋がります。線や座布団でグルーピングするのは最終⼿段です。テキストテキストテキストテキストテキストテキストテキストテキストテキスト 2021年4⽉14⽇カテゴリ1,カテゴリ2,カテゴリ3,カテゴリ4 ⼭⽥太郎 12,090 View 29 2,929 292,929 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2021年4⽉14⽇ 2021年4⽉14⽇ 2021年4⽉14⽇カテゴリ1 カテゴリ1 カテゴリ1 カテゴリ1 カテゴリ1 カテゴリ1 情報ごとに区切るのではなく情報のグループごとに区切る ※時と場合に寄りますが、情報のグループですら線が不要の場合もあります。例：ポップオーバー⼀覧を⾒る(未読10件) コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１ 2020/12/23 15:59 通知

32. 4.レイアウト・サイズについてマテリアルデザイン勉強会 Q.可変の仕⽅はどっちが望ましい？グループパターン❶ カテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A グループパターン❷ カテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A グループカテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 画⾯幅1280px 画⾯幅1440px以降

33. 4.レイアウト・サイズについてマテリアルデザイン勉強会画⾯幅が広がった時画⾯幅が広がった時テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストカテゴリ1 カテゴリ1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストカテゴリ1 カテゴリ1 A.パターン❶ 画⾯幅ごとに閲覧性を考慮するテキストの理想的な⾏の⻑さは40〜60⽂字以内それより⻑くなる場合、⾏を折り返して表⽰するグループパターン❶ カテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 画⾯幅1280px 画⾯幅1440px以降グループカテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 固定幅で設定

34. マテリアルデザイン勉強会 5. ダークテーマの作り⽅

35. 5.ダークテーマの作り⽅マテリアルデザイン勉強会 Q.黒の使い⽅はどれがよい？グループカテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 背景⾊ #121212 グループ背景⾊ #000000 カテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A グループカテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 背景⾊ #333333 パターン❶ パターン❷ パターン❸

36. マテリアルデザイン勉強会グループカテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 背景⾊ #121212 グループ背景⾊ #000000 カテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A パターン❶ パターン❷ グループカテゴリ 99,999 件情報C情報C 99,999 件情報BBB 99,999 件情報A 背景⾊ #333333 パターン❸ A.パターン❶ Z軸の奥⾏が奥に⾏くほど暗く、⼿前に⾏くほど明るくする⼀番暗い⾊は#121212が推奨されており、奥⾏を出すために影を使⽤できます純粋な黒はコントラストが強すぎ、⽬に優しくない⼿前にあるオブジェクトの⾊を暗くしてはいけない 5.ダークテーマの作り⽅

37. マテリアルデザイン勉強会 Q.ボタンの⾊はどれ良い？ 900 800 700 600 500 400 300 200 100 50 何⾊のボタン︖ 何⾊のボタン︖ 5.ダークテーマの作り⽅

38. マテリアルデザイン勉強会 Q.200ぐらいの彩度が低く、明度が⾼い⾊が望ましい 900 800 700 600 500 400 300 200 100 50 P S オンカラーは#000000 オンカラーは#000000 5.ダークテーマの作り⽅

39. マテリアルデザイン勉強会 Q.⽩の本⽂テキストを組み合わせる場合、コントラスト⽐の最低ラインは？ 17.83：1 16.00：1 7.71：1 11.67：1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 5.ダークテーマの作り⽅

40. マテリアルデザイン勉強会 17.83：1 16.00：1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 7.71：1 11.67：1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト OK ⾮推奨 Q.15.8：1以上を確保するライトモードよりコントラストを厳しく確保しないといけない 5.ダークテーマの作り⽅

マテリアルデザイン勉強会スライド資料.pdf

Esté a ler uma amostra.

Confira estes a seguir

マテリアルデザイン勉強会スライド資料.pdf

Mais Conteúdo rRelacionado

Semelhante a マテリアルデザイン勉強会スライド資料.pdf (20)

Mais recentes (20)