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

Googleの新デザイン言語 Material You

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Sora Arakawa Sora Arakawa
October 30, 2021
Design
0
220

Googleの新デザイン言語 Material You

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

Avatar for Sora Arakawa

Sora Arakawa

October 30, 2021
Tweet

More Decks by Sora Arakawa

See All by Sora Arakawa
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
560
お前も同人作家にならないか? 技術系同人誌制作入門
Avatar for Sora Arakawa arkw
2
54
非root化Androidスマホでも動く仮想マシンアプリを試してみた
Avatar for Sora Arakawa arkw
0
1k
技術島の指定ツール「LaTeX」で同人誌を作ろう
Avatar for Sora Arakawa arkw
2
360
ポスト・パソコン時代のジャンク遊び スマートデバイス編
Avatar for Sora Arakawa arkw
0
180
ジャンカーよ、車も買え ～10分でわかる!? 中古車選び入門～
Avatar for Sora Arakawa arkw
2
190
arkw vs. サーバ移転 -2024年1月版-
Avatar for Sora Arakawa arkw
0
340
なれる! 村上さん Misskeyサーバ構築入門
Avatar for Sora Arakawa arkw
0
650
Cloudflare Tunnelで自宅サーバを公開してみた
Avatar for Sora Arakawa arkw
0
1.9k

Other Decks in Design

See All in Design
mount_company_profile
Avatar for mount inc. mount_inc
0
5.1k
Treasure_Hunting
Avatar for Sol Metts solmetts
0
260
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
920
kintone_aroma
Avatar for kintone kintone
0
1.4k
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.4k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
220
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
210
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
390
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.4k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
310
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
290
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
560

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
170
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
77
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k

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. ご清聴ありがとうございました