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

Googleの新デザイン言語 Material You

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

Googleの新デザイン言語 Material You

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

9a9ba864ec37c5c72c72f0377fe4ccf4?s=128

Sora Arakawa

October 30, 2021
Tweet

More Decks by Sora Arakawa

Other Decks in Design

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. デザイン手法 角丸しか勝たん 静大情報LT大会 静大情報LT大会

  16. 静大情報LT大会

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

    • 角丸すこすこすこ
  19. ご清聴ありがとうございました