Submit Search
Upload
マテリアルデザイン勉強会スライド資料.pdf
•
0 likes
•
381 views
S
ssuserf7301c
Follow
Googleが提唱しているGoogle Material Designの内容から、参考にしやすそうな内容を抜粋し、まとめています。
Read less
Read more
Design
Report
Share
Report
Share
1 of 40
Download now
Download to read offline
Recommended
X Design Academy
X Design Academy
Makoto Inage
CANVA AI プレゼンテーション資料.pdf
CANVA AI プレゼンテーション資料.pdf
ShinYoshimura2
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
パワーポイント基礎講座
パワーポイント基礎講座
ofunato
AI画像生成講座.pdf
AI画像生成講座.pdf
yoshishimizu4
イケてるデザインをつくる第一歩
イケてるデザインをつくる第一歩
elephancube
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
NodokaFujimoto
Recommended
X Design Academy
X Design Academy
Makoto Inage
CANVA AI プレゼンテーション資料.pdf
CANVA AI プレゼンテーション資料.pdf
ShinYoshimura2
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
パワーポイント基礎講座
パワーポイント基礎講座
ofunato
AI画像生成講座.pdf
AI画像生成講座.pdf
yoshishimizu4
イケてるデザインをつくる第一歩
イケてるデザインをつくる第一歩
elephancube
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
NodokaFujimoto
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン
NodokaFujimoto
e-Learning Design for Teacher
e-Learning Design for Teacher
Sunami Hokuto
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフト
atmarkit
Grareco ws 150620
Grareco ws 150620
masashi tsuzaki
デザイン&マネジメント サポート
デザイン&マネジメント サポート
Junnosuke Taguchi
20151030 ux sketch vol5
20151030 ux sketch vol5
Daichi Morifuji
20221116_LT.pdf
20221116_LT.pdf
yubune
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
Sunami Hokuto
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
2013講義1
2013講義1
ytanno
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
You&I
Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)
ofunato
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
Yoshiki Hayama
パワーポイント発展編
パワーポイント発展編
ofunato
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計
Sunami Hokuto
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
Tomoko Nishina
デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜
Yusuke Hoshi
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
Yoshiki Hayama
グループディスカッションの巻
グループディスカッションの巻
Takashi Abe
More Related Content
Similar to マテリアルデザイン勉強会スライド資料.pdf
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン
NodokaFujimoto
e-Learning Design for Teacher
e-Learning Design for Teacher
Sunami Hokuto
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフト
atmarkit
Grareco ws 150620
Grareco ws 150620
masashi tsuzaki
デザイン&マネジメント サポート
デザイン&マネジメント サポート
Junnosuke Taguchi
20151030 ux sketch vol5
20151030 ux sketch vol5
Daichi Morifuji
20221116_LT.pdf
20221116_LT.pdf
yubune
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
Sunami Hokuto
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
2013講義1
2013講義1
ytanno
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
You&I
Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)
ofunato
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
Yoshiki Hayama
パワーポイント発展編
パワーポイント発展編
ofunato
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計
Sunami Hokuto
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
Tomoko Nishina
デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜
Yusuke Hoshi
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
Yoshiki Hayama
グループディスカッションの巻
グループディスカッションの巻
Takashi Abe
Similar to マテリアルデザイン勉強会スライド資料.pdf
(20)
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン
e-Learning Design for Teacher
e-Learning Design for Teacher
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフト
Grareco ws 150620
Grareco ws 150620
デザイン&マネジメント サポート
デザイン&マネジメント サポート
20151030 ux sketch vol5
20151030 ux sketch vol5
20221116_LT.pdf
20221116_LT.pdf
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
2013講義1
2013講義1
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
パワーポイント発展編
パワーポイント発展編
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
グループディスカッションの巻
グループディスカッションの巻
マテリアルデザイン勉強会スライド資料.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件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23
15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 通知 ヘルプ 設定 通知 さん ー名 ⼀覧を⾒る(未読10件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 通知 ヘルプ 設定 通知 さん ー名 ⼀覧を⾒る(未読10件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 通知 パターン① パターン② パターン③
17.
2.UIのXYZ軸について マテリアルデザイン勉強会 ヘルプ 設定 通知 さん ー名 ⼀覧を⾒る(未読10件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23
15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 通知 ヘルプ 設定 通知 さん ー名 ⼀覧を⾒る(未読10件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 通知 ヘルプ 設定 通知 さん ー名 ⼀覧を⾒る(未読10件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 通知 パターン① パターン② パターン③ Q.⼀番右 現実の物理空間に近い影の使い⽅をする事で、 ユーザーが要素間の関係性を理解しやすくなります。
18.
マテリアルデザイン勉強会 3. コンポーネントのパターンと⽤途
19.
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会 Q.3つのうち⾃動的に消える通知は? スレッドをゴミ箱に移動しました。 取消 ダイアログ バナー スナックバー
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件) コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 2020/12/23 15:59 コンテンツ1コンテンツ1コンテンツ1コン テンツ1コンテンツ1コンテンツ1 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.ダークテーマの作り⽅
Download now