Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Googleの新デザイン言語 Material You

Avatar for Sora Arakawa Sora Arakawa
October 30, 2021
Design
0
210

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
410
お前も同人作家にならないか? 技術系同人誌制作入門
Avatar for Sora Arakawa arkw
2
23
非root化Androidスマホでも動く仮想マシンアプリを試してみた
Avatar for Sora Arakawa arkw
0
880
技術島の指定ツール「LaTeX」で同人誌を作ろう
Avatar for Sora Arakawa arkw
2
310
ポスト・パソコン時代のジャンク遊び スマートデバイス編
Avatar for Sora Arakawa arkw
0
170
ジャンカーよ、車も買え ～10分でわかる!? 中古車選び入門～
Avatar for Sora Arakawa arkw
1
170
arkw vs. サーバ移転 -2024年1月版-
Avatar for Sora Arakawa arkw
0
320
なれる! 村上さん Misskeyサーバ構築入門
Avatar for Sora Arakawa arkw
0
620
Cloudflare Tunnelで自宅サーバを公開してみた
Avatar for Sora Arakawa arkw
0
1.7k

Other Decks in Design

See All in Design
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
12k
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
170
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
130
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
200
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
170
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
180
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.2k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
920
What makes a great Director?
Avatar for _Limex_ _limex_
0
350
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.8k
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
230
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
330

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
86
HDC tutorial
Avatar for Michiel Stock michielstock
0
260
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.7k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
22
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
28
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
29k

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