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
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
100
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
890
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
11k
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
480
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
580
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
380
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
340
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
730
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
The World Runs on Bad Software
bkeepers
PRO
70
11k
BBQ
matthewcrist
89
9.8k
The Pragmatic Product Professional
lauravandoore
36
6.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Being A Developer After 40
akosma
90
590k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Product Roadmaps are Hard
iamctodd
PRO
54
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͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹࠓ·Ͱʮ͜Εඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ
ͪΐͬͱෳࡶͳ͍ʹͳΔ͜ͱ
͓ΘΓ