More Related Content
Similar to マテリアルデザイン勉強会スライド資料.pdf
Similar to マテリアルデザイン勉強会スライド資料.pdf (20)
マテリアルデザイン勉強会スライド資料.pdf
- 1. マテリアルデザイン勉強会
- 3. ⽬次 マテリアルデザイン勉強会 1. カラーパレットの作り⽅＆気を付けること 2. UIのXYZ軸について 3. コンポーネントのパターンと⽤途当てクイズ 4. サイズ・要素間のマージンで、違和感を感じるのは？ 5. ダークテーマの作り⽅
- 5. 1.カラーパレットの作り⽅＆気を付けること マテリアルデザイン勉強会 Q.濃淡の作り⽅はどれが良い？ 〇がメインで使⽤される⾊です。 P：プライマリーカラー S：セカンダリーカラー パターン① パターン② P S P S
- 6. 1.カラーパレットの作り⽅＆気を付けること マテリアルデザイン勉強会 A.パターン① 900 800 700 600 500 400 300 200 100 50 P S 明暗のパターンを作る時は、⽬分量で勝⼿に決めるのではなく、 不透明度をいじったり、マテリアルパレットジェネレータなどの 専⽤のツールを使ったうえで、⽬で調整する必要がある 各⾊には、明るい⾊/暗い⾊のバリエーションを作る必要がある。 セカンダリーカラーは、プライマリーカラーと補⾊/準補⾊の関係に なるような、⽬⽴ち引き⽴つ⾊を選択する。
- 9. 1.カラーパレットの作り⽅＆気を付けること マテリアルデザイン勉強会 Q.アクセシブルなのは？ テキストと背景⾊のコントラスト⽐が充分なパターンを当ててください パターン① パターン② パターン③ パターン④
- 10. 1.カラーパレットの作り⽅＆気を付けること マテリアルデザイン勉強会 コントラスト⽐は4.5：1以上を確保し、WCAG標準に従いましょう パターン① パターン② パターン③ パターン④ A.パターン①
- 12. 2.UIのXYZ軸について マテリアルデザイン勉強会 Q.⾜らない影は？ yyyy/mm/dd - yyyy/mm/dd 詳細条件 項⽬① 項⽬② 項⽬⑥ 項⽬③ 項⽬⑤ テキストテキスト テキストテキスト テキスト テキスト 補⾜情報のテキストテキスト 項⽬④ すべて 検索 検索 対象 すべて 処理待ち キーワード 担当者 すべて 詳細
- 13. yyyy/mm/dd - yyyy/mm/dd 詳細条件 項⽬① 項⽬② 項⽬⑥ 項⽬③ 項⽬⑤ テキストテキスト テキストテキスト テキスト テキスト 補⾜情報のテキストテキスト 項⽬④ すべて 検索 検索 対象 すべて 処理待ち キーワード 担当者 すべて 詳細 2.UIのXYZ軸について マテリアルデザイン勉強会 A.①と② 塊として認識しやすくする必要があります。 詳細条件検索の⼊⼒項⽬は背景に別の要素と重なる ことが多く、線だけでは埋もれてしまいます。 1 クリック可能である事を明⽰する必要があります。 2
- 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.⼀番右 現実の物理空間に近い影の使い⽅をする事で、 ユーザーが要素間の関係性を理解しやすくなります。
- 21. 3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会 Q.以下のナビゲーションはどの種類に分類される？ 横⽅向のナビゲーション フォワードナビゲーション リバースナビゲーション 同じ階層レベルの画⾯間を移動する マテリアルデザインでナビゲーションは3種類あると定義されています。 操作や作業を前に進める ひとつ前の動作、1つ上の階層へ戻す 下部ナビゲーションバー（スマホ） パンくず 検索 詳細画⾯ / ⼀覧画⾯ / テキストテキスト / 検索 ホーム お気に⼊り お知らせ
- 22. 3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会 A.以下の組み合わせが正解 横⽅向のナビゲーション フォワードナビゲーション リバースナビゲーション 同じ階層レベルの画⾯間を移動する 操作や作業を前に進める ひとつ前の動作、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.パターン❸ ⾊でしか⾒分けがつかないボタンは横並びでの配置は控えてください 縦積みで配置すると押し間違いが起こりやすくなります 他の種類のボタンであれば、横並びでも押し間違いが起きずらい
- 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 固定幅で設定
- 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.ダークテーマの作り⽅