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

Googleの新デザイン言語 Material You

Sora Arakawa
October 30, 2021

Googleの新デザイン言語 Material You

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

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」でツイートすると
    画面上部に表示されます!

    View full-size slide

  2. 自己紹介
    Sora Arakawa(arkw)
    • 静岡大学 情報学部 行動情報学科 B2
    • 所属:某室(長)、xRサークルはまりあ、ICON
    • Alexaスキル開発のバイトをしています
    (時給915円)
    • 愛知県岡崎市出身→静岡県浜松市在住
    • https://arkw.net/

    View full-size slide

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

    View full-size slide

  4. “Material You” ?

    View full-size slide

  5. このスライド

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. フォント
    個人的によく使うのは
    • Roboto
    • Kosugi(MotoyaLCedar)
    • Noto Sans CJK JP
    • 平成書体
    Googleロゴのフォント(Product Sans)はライセンスが微妙

    View full-size slide

  10. デザイン手法
    角丸しか勝たん
    静大情報LT大会
    静大情報LT大会

    View full-size slide

  11. 静大情報LT大会

    View full-size slide

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

    View full-size slide

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

    View full-size slide