Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Googleの新デザイン言語 Material You

9a9ba864ec37c5c72c72f0377fe4ccf4?s=47 Sora Arakawa
October 30, 2021
Design
0
67

Googleの新デザイン言語 Material You

静大情報LT大会 -2021年10月-

9a9ba864ec37c5c72c72f0377fe4ccf4?s=128

Sora Arakawa

October 30, 2021
Tweet

More Decks by Sora Arakawa

See All by Sora Arakawa
ヤフオクで原付買った話
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
67
パソコンの消費電力と省エネ化のおはなし
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
100
"成果物"を作ろう（提案）
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
70
Python(+α)でスマートプラグを制御してみた
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
130
学情絶叫ウェブシステムGX
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
67
C++とDXライブラリでLTタイマーを作った話
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
93
Amazon Echo Show向けウェブアプリの開発
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
220
HTML5 Canvasによる2Dウェブゲーム開発
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
54
1500円で始める自宅ウェブサーバ
9a9ba864ec37c5c72c72f0377fe4ccf4?s=48 arkw
0
280

Other Decks in Design

See All in Design
Nobel Finds a Staryu
A2b28582eb2007b9efe661942bb29a94?s=48 innsamity
0
430
Cat Seance
E07eafb41f4c23afbf5ca3fe1aa83b75?s=48 emmamsketches
1
210
Dr.'s Prime - Branding Project - CI/VI
696174cb7bfc4ee5aedda0af8e596656?s=48 drsprime
0
500
大規模サービスのUIデザインを管理する工夫
278e5835d64cc25f3ba6ae93de10ba24?s=48 tamachan
0
10k
ユーザー体験を支える_freeeのデザインシステム活用.pdf
7dac484138925ba3e0b6f52932bdba56?s=48 fkady
1
1.1k
「IDOLY PRIDE」における新卒1年目のクリエイティブ
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
510
GFS - Startup School 2022
Ad94879495e21b7362d0d2c845f44bc0?s=48 soham
0
320
Figmaで神速ドキュメント作成術
Cb42953bfedcd81daf5b1330d98712c3?s=48 448jp
2
200
創造学群表現学類2021_ソーシャルチームプレゼン
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
1
150
Introduce Celebration Grid
1e17e8598d4862040029ee6adfccd9b9?s=48 nakahara
0
420
心地よいテンポを届ける！『プロジェクトセカイ』のゲームUI/UX
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
1
1.3k
DESIGNBASE_Recruit_Book_ver2.1
Fbaa9faa09b9f69dfe14dad20873c78d?s=48 uzabase
PRO
0
210

Featured

See All Featured
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
210
39k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
60
3.9k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k

Transcript

  1. Googleの新デザイン言語 Material You Sora Arakawa (arkw) 2021/10/30 静大情報LT大会@オンライン 「#静大情報LT」でツイートすると 画面上部に表示されます!

  2. 自己紹介 Sora Arakawa（arkw） • 静岡大学 情報学部 行動情報学科 B2 • 所属：某室（長）、xRサークルはまりあ、ICON

    • Alexaスキル開発のバイトをしています （時給915円） • 愛知県岡崎市出身→静岡県浜松市在住 • https://arkw.net/

  3. 引っ越しました • 光回線がまだ来てない（工事延期…orz） • 今は無料レンタルのSoftbank Air（a.k.a おまえんち） • 夜間はクソ遅い（約5mbps）ので今日は某室から配信中です

  4. “Material You” ?

  5. このスライド

  6. None

  7. Material Youとは • Googleの新しいデザイン言語 • マテリアルデザインの進化版 • Android 12で初採用

  8. None
  9. None
  10. None

  11. 実践編

  12. 配色 • https://materialui.co/colors/

  13. 配色 • 50～100と500～800あたりを組み合わせるといい感じ 色のパネルをクリックすると カラーコードがコピーされる（HEX、RGBなど）

  14. フォント 個人的によく使うのは • Roboto • Kosugi（MotoyaLCedar） • Noto Sans CJK

    JP • 平成書体 Googleロゴのフォント（Product Sans）はライセンスが微妙

  15. デザイン手法 角丸しか勝たん 静大情報ＬＴ大会 静大情報ＬＴ大会

  16. 静大情報ＬＴ大会

  17. None

  18. まとめ • Googleの新デザイン言語「Material You」 • 背景画像から自動で配色を決定 • 自分で作る時はMaterial Design Colorsを参照

    • 角丸すこすこすこ

  19. ご清聴ありがとうございました