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.5k
Watashi ni Kotlin ga maiorita
kirimin
0
560
NEMのAPIとモザイクであそぼう
kirimin
0
390
はじめようきれいなコード
kirimin
8
3.1k
Material Components for Android触ってみる
kirimin
7
2k
Hello-kirimin-chan
kirimin
0
150
Other Decks in Technology
See All in Technology
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.4k
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
36
11k
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
890
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
about #74462 go/token#FileSet
tomtwinkle
1
290
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
170
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
Where will it converge?
ibknadedeji
0
150
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
260
20250929_QaaS_vol20
mura_shin
0
110
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Building Adaptive Systems
keathley
43
2.8k
Become a Pro
speakerdeck
PRO
29
5.5k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Gamification - CAS2011
davidbonilla
81
5.5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Invisible Side of Design
smashingmag
301
51k
Why Our Code Smells
bkeepers
PRO
339
57k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The World Runs on Bad Software
bkeepers
PRO
71
11k
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͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹࠓ·Ͱʮ͜Εඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ
ͪΐͬͱෳࡶͳ͍ʹͳΔ͜ͱ
͓ΘΓ