Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Googleの新デザイン言語 Material You Sora Arakawa (arkw) 2021/10/30 静大情報LT大会@オンライン 「#静大情報LT」でツイートすると 画面上部に表示されます!
Slide 2
Slide 2 text
自己紹介 Sora Arakawa（arkw） • 静岡大学 情報学部 行動情報学科 B2 • 所属：某室（長）、xRサークルはまりあ、ICON • Alexaスキル開発のバイトをしています （時給915円） • 愛知県岡崎市出身→静岡県浜松市在住 • https://arkw.net/
Slide 3
Slide 3 text
引っ越しました • 光回線がまだ来てない（工事延期…orz） • 今は無料レンタルのSoftbank Air（a.k.a おまえんち） • 夜間はクソ遅い（約5mbps）ので今日は某室から配信中です
Slide 4
Slide 4 text
“Material You” ?
Slide 5
Slide 5 text
このスライド
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Material Youとは • Googleの新しいデザイン言語 • マテリアルデザインの進化版 • Android 12で初採用
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
実践編
Slide 12
Slide 12 text
配色 • https://materialui.co/colors/
Slide 13
Slide 13 text
配色 • 50～100と500～800あたりを組み合わせるといい感じ 色のパネルをクリックすると カラーコードがコピーされる（HEX、RGBなど）
Slide 14
Slide 14 text
フォント 個人的によく使うのは • Roboto • Kosugi（MotoyaLCedar） • Noto Sans CJK JP • 平成書体 Googleロゴのフォント（Product Sans）はライセンスが微妙
Slide 15
Slide 15 text
デザイン手法 角丸しか勝たん 静大情報ＬＴ大会 静大情報ＬＴ大会
Slide 16
Slide 16 text
静大情報ＬＴ大会
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
まとめ • Googleの新デザイン言語「Material You」 • 背景画像から自動で配色を決定 • 自分で作る時はMaterial Design Colorsを参照 • 角丸すこすこすこ
Slide 19
Slide 19 text
ご清聴ありがとうございました