SlideShare ist ein Scribd-Unternehmen logo
1 von 40
Downloaden Sie, um offline zu lesen
マテリアルデザイン勉強会
はじめに マテリアルデザイン勉強会
⽬的
今回の勉強を通して、読んだことのない⼈でも、要点をサクッと理解できるよようにする。
アプリデザインをするうえで、教科書ともいえるマテリアルデザイン。
しかし、業務にあまり活かせない内容も所々ある。
やる意味
⾃分の過去の業務の中で、知識不⾜で迷う事があったので、資料や動画を⾒ることで、
UIデザインにおける初学者の不明点を出来るだけ無くしたい。
UIの作り⽅や、コンポーネントの使い⽅の基本の「キ」を習得するのに役⽴てる。
進め⽅
今回の内容は、あくまで新屋敷が編集しているため、完璧ではありません。
都度、補⾜のコメントや、反対意⾒などがあれば、発⾔してほしい。
クイズ形式でマテリアルデザインの内容を振り返り、皆さまの理解を深めていく。
そのため、⼀⼈ずつ当てていくので、回答してください。
⽬次 マテリアルデザイン勉強会
1. カラーパレットの作り⽅&気を付けること
2. UIのXYZ軸について
3. コンポーネントのパターンと⽤途当てクイズ
4. サイズ・要素間のマージンで、違和感を感じるのは?
5. ダークテーマの作り⽅
マテリアルデザイン勉強会
1. カラーパレットの作り⽅&気を付けること
1.カラーパレットの作り⽅&気を付けること マテリアルデザイン勉強会
Q.濃淡の作り⽅はどれが良い?
〇がメインで使⽤される⾊です。
P:プライマリーカラー S:セカンダリーカラー
パターン① パターン②
P
S
P
S
1.カラーパレットの作り⽅&気を付けること マテリアルデザイン勉強会
A.パターン①
900 800 700 600 500 400 300 200 100 50
P
S 明暗のパターンを作る時は、⽬分量で勝⼿に決めるのではなく、
不透明度をいじったり、マテリアルパレットジェネレータなどの
専⽤のツールを使ったうえで、⽬で調整する必要がある
各⾊には、明るい⾊/暗い⾊のバリエーションを作る必要がある。
セカンダリーカラーは、プライマリーカラーと補⾊/準補⾊の関係に
なるような、⽬⽴ち引き⽴つ⾊を選択する。
1.カラーパレットの作り⽅&気を付けること マテリアルデザイン勉強会
Q.間違った⾊の使い⽅をしているパーツは?
1.カラーパレットの作り⽅&気を付けること マテリアルデザイン勉強会
A.5カ所
①必須項⽬は⽬⽴つように専⽤の⾊を
(オレンジなど)
②エラーは⾚⾊にしましょう ③⼊⼒の完了している項⽬はOKの
ステータスである事が分かるように
④不可逆処理のアクションをするボタン
は⼀⽬で分る⾊を使⽤
⑤必須項⽬が⼊⼒出来ていないので、
⾮活性の⾒た⽬に
1.カラーパレットの作り⽅&気を付けること マテリアルデザイン勉強会
Q.アクセシブルなのは?
テキストと背景⾊のコントラスト⽐が充分なパターンを当ててください
パターン① パターン② パターン③ パターン④
1.カラーパレットの作り⽅&気を付けること マテリアルデザイン勉強会
コントラスト⽐は4.5:1以上を確保し、WCAG標準に従いましょう
パターン① パターン② パターン③ パターン④
A.パターン①
マテリアルデザイン勉強会
2. UIのXYZ軸について
2.UIのXYZ軸について マテリアルデザイン勉強会
Q.⾜らない影は?
yyyy/mm/dd
-
yyyy/mm/dd
詳細条件
項⽬①
項⽬②
項⽬⑥
項⽬③
項⽬⑤
テキストテキスト
テキストテキスト
テキスト
テキスト
補⾜情報のテキストテキスト
項⽬④ すべて
検索
検索
対象 すべて 処理待ち キーワード
担当者 すべて 詳細
yyyy/mm/dd
-
yyyy/mm/dd
詳細条件
項⽬①
項⽬②
項⽬⑥
項⽬③
項⽬⑤
テキストテキスト
テキストテキスト
テキスト
テキスト
補⾜情報のテキストテキスト
項⽬④ すべて
検索
検索
対象 すべて 処理待ち キーワード
担当者 すべて 詳細
2.UIのXYZ軸について マテリアルデザイン勉強会
A.①と②
塊として認識しやすくする必要があります。
詳細条件検索の⼊⼒項⽬は背景に別の要素と重なる
ことが多く、線だけでは埋もれてしまいます。
1
クリック可能である事を明⽰する必要があります。
2
2.UIのXYZ軸について マテリアルデザイン勉強会
Q.いらない影は?
20件
表⽰件数
1〜20件表⽰
108件のうち
項⽬④
テキストテキスト
項⽬③
テキストテキスト
項⽬②
テキストテキスト
項⽬①
テキストテキスト
テキスト
ID︓korehaIDdesu
詳細
テキスト
ID︓korehaIDdesu
詳細
テキスト
ID︓korehaIDdesu
詳細
ヘルプ
設定
通知
さん
ユーザー名
2.UIのXYZ軸について マテリアルデザイン勉強会
必ずしもヘッダーエリアに影を⼊れないといけない
わけではありません。階層構造を表すための⼿段は
影だけでなく、線を⽤いることで代⽤が可能です。
トンマナや使いやすさを考慮したうえで、影を使い
ましょう。
1
明るい⾊が⼿前、暗い⾊が奥にあるように⾒えるた
め、影が無くても階層の違いの表現は可能です。
2
20件
表⽰件数
1〜20件表⽰
108件のうち
項⽬④
テキストテキスト
項⽬③
テキストテキスト
項⽬②
テキストテキスト
キスト
テキスト
ID︓korehaIDdesu
詳細
テキスト
ID︓korehaIDdesu
詳細
ト
aIDdesu
ヘルプ
設定
通知
さん
ユーザー名
A.①と②
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
通知
パターン① パターン② パターン③
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.⼀番右 現実の物理空間に近い影の使い⽅をする事で、
ユーザーが要素間の関係性を理解しやすくなります。
マテリアルデザイン勉強会
3. コンポーネントのパターンと⽤途
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
Q.3つのうち⾃動的に消える通知は?
スレッドをゴミ箱に移動しました。 取消
ダイアログ
バナー
スナックバー
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
スレッドをゴミ箱に移動しました。 取消
ダイアログ
バナー
スナックバー
A.スナックバー
ユーザーの操作を妨げず、優先度が低いメッセージを通知するコンポーネントです
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
Q.以下のナビゲーションはどの種類に分類される?
横⽅向のナビゲーション フォワードナビゲーション リバースナビゲーション
同じ階層レベルの画⾯間を移動する
マテリアルデザインでナビゲーションは3種類あると定義されています。
操作や作業を前に進める ひとつ前の動作、1つ上の階層へ戻す
下部ナビゲーションバー(スマホ) パンくず 検索
詳細画⾯
/
⼀覧画⾯
/
テキストテキスト
/ 検索
ホーム お気に⼊り お知らせ
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
A.以下の組み合わせが正解
横⽅向のナビゲーション フォワードナビゲーション リバースナビゲーション
同じ階層レベルの画⾯間を移動する 操作や作業を前に進める ひとつ前の動作、1つ上の階層へ戻す
下部ナビゲーションバー(スマホ) パンくず 検索
詳細画⾯
/
⼀覧画⾯
/
テキストテキスト
/ 検索
ホーム お気に⼊り お知らせ
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%
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
❷は読み込みの進⾏状況が分からないため、使⽤は望ましくありません
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
Q.間違っているタブの使い⽅はどれ?
パターン❶
パターン❷
パターン❸
格安プラン ⽉々500円プラン スタンダードプラン プレミアムプラン
会社員の⽅へ 学⽣の⽅へ 経営者の⽅へ hogeに加⼊して⼀年以上の…
チャプター1 チャプター2 チャプター3 チャプター4
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
A.全て間違い 同時に閲覧する必要が無い情報を分け、読み進める中で
余計な情報を⾒せないようにするために使⽤
パターン❶:⽐較検討するコンテンツに使うと⼀覧性が無くなり、読む負荷が重くなります
パターン❷:「…」など内容を想起できないラベルではなく、別の短いラベルにしましょう
パターン❸:順番に読み進めるコンテンツを含めると読み進める負荷が重くなります
格安プラン ⽉々500円プラン スタンダードプラン プレミアムプラン
会社員の⽅へ 学⽣の⽅へ 経営者の⽅へ hogeに加⼊して⼀年以上の…
チャプター1 チャプター2 チャプター3 チャプター4
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
Q.ボタンの配置で望ましいものは?
ボタン ボタン
ボタン ボタン
ボタン
テキストリンク
パターン❷
パターン❸
パターン❶
3.コンポーネントのパターンと⽤途 マテリアルデザイン勉強会
ボタン ボタン
ボタン ボタン
ボタン
テキストリンク
パターン❷
パターン❸
パターン❶
A.パターン❸
⾊でしか⾒分けがつかないボタンは横並びでの配置は控えてください 縦積みで配置すると押し間違いが起こりやすくなります
他の種類のボタンであれば、横並びでも押し間違いが起きずらい
マテリアルデザイン勉強会
4. レイアウト・サイズについて
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
パターン❶ パターン❷
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
通知
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以降
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
固定幅で設定
マテリアルデザイン勉強会
5. ダークテーマの作り⽅
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
パターン❶ パターン❷ パターン❸
マテリアルデザイン勉強会
グループ
カテゴリ
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.ダークテーマの作り⽅
マテリアルデザイン勉強会
Q.ボタンの⾊はどれ良い?
900 800 700 600 500 400 300 200 100 50
何⾊のボタン︖
何⾊のボタン︖
5.ダークテーマの作り⽅
マテリアルデザイン勉強会
Q.200ぐらいの彩度が低く、明度が⾼い⾊が望ましい
900 800 700 600 500 400 300 200 100 50
P
S
オンカラーは#000000
オンカラーは#000000
5.ダークテーマの作り⽅
マテリアルデザイン勉強会
Q.⽩の本⽂テキストを組み合わせる場合、
コントラスト⽐の最低ラインは?
17.83:1
16.00:1
7.71:1
11.67:1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
5.ダークテーマの作り⽅
マテリアルデザイン勉強会
17.83:1
16.00:1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
7.71:1
11.67:1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキストテキストテキスト
OK
⾮推奨
Q.15.8:1以上を確保する ライトモードよりコントラストを
厳しく確保しないといけない
5.ダークテーマの作り⽅

Weitere ähnliche Inhalte

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

新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)NodokaFujimoto
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for TeacherSunami Hokuto
 
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフトおばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフトatmarkit
 
デザイン&マネジメント サポート
デザイン&マネジメント サポートデザイン&マネジメント サポート
デザイン&マネジメント サポートJunnosuke Taguchi
 
20221116_LT.pdf
20221116_LT.pdf20221116_LT.pdf
20221116_LT.pdfyubune
 
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)Sunami Hokuto
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司schoowebcampus
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
2013講義1
2013講義12013講義1
2013講義1ytanno
 
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップアジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップYou&I
 
Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)ofunato
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEYoshiki Hayama
 
パワーポイント発展編
パワーポイント発展編パワーポイント発展編
パワーポイント発展編ofunato
 
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計Sunami Hokuto
 
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方Tomoko Nishina
 
デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜Yusuke Hoshi
 
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERメンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERYoshiki Hayama
 
グループディスカッションの巻
グループディスカッションの巻グループディスカッションの巻
グループディスカッションの巻Takashi Abe
 

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

新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
 
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフトおばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフト
 
Grareco ws 150620
Grareco ws 150620Grareco ws 150620
Grareco ws 150620
 
デザイン&マネジメント サポート
デザイン&マネジメント サポートデザイン&マネジメント サポート
デザイン&マネジメント サポート
 
20151030 ux sketch vol5
20151030 ux sketch vol520151030 ux sketch vol5
20151030 ux sketch vol5
 
20221116_LT.pdf
20221116_LT.pdf20221116_LT.pdf
20221116_LT.pdf
 
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
2013講義1
2013講義12013講義1
2013講義1
 
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップアジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
アジャイルにプロジェクトの"なぜ"を考える、インセプションデッキワークショップ
 
Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)Pc基礎講座マニュアル(後期)
Pc基礎講座マニュアル(後期)
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 
パワーポイント発展編
パワーポイント発展編パワーポイント発展編
パワーポイント発展編
 
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計
 
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
 
デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜デザイン負債の返し方 〜ネイルブックの場合〜
デザイン負債の返し方 〜ネイルブックの場合〜
 
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERメンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
 
グループディスカッションの巻
グループディスカッションの巻グループディスカッションの巻
グループディスカッションの巻
 

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