Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[社内LT]あたらしいMaterial Design
Search
きりみん
May 18, 2018
Technology
1
1.7k
[社内LT]あたらしいMaterial Design
きりみん
May 18, 2018
Tweet
Share
More Decks by きりみん
See All by きりみん
AndroidエンジニアがRailsにチャレンジしてる理由
kirimin
1
1.6k
What are AtCoder and competitive programming
kirimin
0
10k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
1.1k
アプリエンジニアでも神絵師になりたい!
kirimin
4
5.4k
Watashi ni Kotlin ga maiorita
kirimin
0
550
NEMのAPIとモザイクであそぼう
kirimin
0
390
はじめようきれいなコード
kirimin
8
3.1k
Material Components for Android触ってみる
kirimin
7
2k
Hello-kirimin-chan
kirimin
0
140
Other Decks in Technology
See All in Technology
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Claude Code に プロジェクト管理やらせたみた
unson
6
3.9k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
OPENLOGI Company Profile for engineer
hr01
1
34k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
120
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
OPENLOGI Company Profile
hr01
0
67k
Connect 100+を支える技術
kanyamaguc
0
200
怖くない!はじめてのClaude Code
shinya337
0
390
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The Invisible Side of Design
smashingmag
301
51k
Agile that works and the tools we love
rasmusluckow
329
21k
Why Our Code Smells
bkeepers
PRO
336
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Being A Developer After 40
akosma
90
590k
Transcript
͋ͨΒ͍͠Material Design @kirimin
͋ͨΒ͍͠Material Design • Material Theming • New Components
͋ͨΒ͍͠Material Design • Google I/O2018ʹ߹ΘͤͯϚςϦΞϧσβΠ ϯΨΠυϥΠϯ͕ߋ৽͞Εͨɻ • Material Themingͱ͍͏֓೦͕Ճ͞Εͨ ଞɺComponentsʹଟ͘ͷมߋ͕͋ͬͨɻ
Material Themingʁ • ϚςϦΞϧσβΠϯΛΞϓϦͷϒϥϯυ༻ʹ ΧελϚΠζ͢ΔͨΊͷࢦɻ • ΧϥʔύϨοτϘλϯͳͲͷؙ֯ͷܗͳͲ ΛมߋͰ͖Δɻ
Material Themingʁ
Material Themingʁ • Material Theme Editorͱ͍͏ͷ͕ެ։͞Εͨɻ • Material ThemingΛ࡞ΕΔπʔϧɻ •
ݱঢ়SketchͷPluginͱͯ͠༻ҙ͞Ε͍ͯΔɻ • σβΠϯϞοΫͱͯ͠ग़ྗग़དྷΔ͕ɺAndroidϓϩ δΣΫτͷThemeϑΝΠϧͱͯ͠ΠϯϙʔτͰ͖ͨ Γ͢ΔΘ͚Ͱͳ͍Β͍͠ɻ
New Components • ϚςϦΞϧσβΠϯΨΠυϥΠϯࣗମେ෯ʹߋ৽͞Εɺ৽͠ ͍Component͕ଟ͘Ճ͞Εͨɻ • App bars:bottom • Backdrop
• Banners • Extended FAB • Progress indicators
App bars:bottom
App bars:bottom • ϘτϜφϏήʔγϣϯυϩϫʔϑϩʔςΟϯάΛ ؚΉΞΫγϣϯϘλϯͷΞΫηεΛఏڙ͢Δɻ
When to use • ͲΜͳ࣌ʹ͏͖͔ • ϞόΠϧσόΠεݶఆ • φϏήʔγϣϯυϩϫʔͷΞΫηε •
͔̎Β̑ͷΞΫγϣϯ • App babrs: topͱಉ࣌ʹ͏͜ͱՄ • ͲΜͳ࣌ʹ͏͖Ͱͳ͍͔ • Bottom Navigation Bar(Լλϒ)Λར༻ͨ͠ΞϓϦ • ୯Ұͷը໘͘͠ΞΫγϣϯ͕ͳ͍ΞϓϦ
Backdrop
Backdrop • όοΫͱϑϩϯτͷ̎ͭͷϨΠϠʔ͔Βߏ͞ΕΔɻ όοΫϨΠϠʔΞΫγϣϯͱίϯςΩετΛදࣔɺ ϑϩϯτϨΠϠʔʹͦΕΒͷૢ࡞௨Λදࣔɻ
Backdrop • όοΫϨΠϠʔextend͢ΔϔομʔΈ͍ͨͳΠ ϝʔδʁಈըϓϨΠϠʔΤσΟλʔͳͲૢ࡞͕த ৺ͷΞϓϦͰΘΕΔΠϝʔδ͔͠Εͳ͍ɻ
Banners
Banners • ॏཁͰ؆ૉͳϝοηʔδΛදࣔ͠ɺಉ࣌ʹϢʔβʔ ʹΞΫγϣϯΛఏڙ͢Δ • Bannersը໘ͷTOP(AppBarͷԼ)ʹදࣔ͞ΕΔ
Banners • Bannersಉ࣌ʹҰ͔ͭ͠ද͍͚ࣔͤͯ͞ͳ͍ • ը໘NotificationΈ͍ͨͳҐஔ͚ͮʁ • ࠓ·Ͱख࡞Γ͍͓ͯͨ͠ΒͤόφʔͷΨΠυϥ ΠϯԽ
Floating Action Button • ԡԼ࣌ͷΞΫγϣϯͷΨΠυϥΠϯԽ
Floating Action Button • Extended FAB͕Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ
ελΠϧʹग़དྷΔΑ͏ʹ
Text Fields • FilledͱOutlinedͷ̎ͭͷσβΠϯ͕બΔΑ͏ʹ ͳͬͨ
Text Fields • ̎ͭͷλΠϓಉ͡ػೳΛఏڙ͢ΔͷͰɺͲͪΒΛ બͿ͔ΞϓϦͷελΠϧʹґଘ͢Δ
·ͱΊ • ϚςϦΞϧσβΠϯΨΠυϥΠϯʑਐԽ͍ͯ͠Δɻ • ΨΠυϥΠϯʹͳ͍͕σβΠφʔ͕ಠࣗʹఆ͍ٛͯ͠ ͨΑ͏ͳComponent͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹࠓ·Ͱʮ͜Εඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ
ͪΐͬͱෳࡶͳ͍ʹͳΔ͜ͱ
͓ΘΓ