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
10分で完全に(雰囲気を)理解するマテリアルデザイン
Search
yagi2
April 20, 2018
Technology
1
440
10分で完全に(雰囲気を)理解するマテリアルデザイン
Kyoto.LT 第20回の発表スライドです
https://kyotolt.connpass.com/event/82294/
yagi2
April 20, 2018
Tweet
Share
More Decks by yagi2
See All by yagi2
Kotlin DSLを理解してみる / Understanding Kotlin DSL
yagi2
4
2.5k
おうちにAPIを生やすお話.pdf
yagi2
0
490
略解 The Navigation Architecture Component
yagi2
1
220
KtorでおうちAPIをリプレースした話
yagi2
1
1.1k
Other Decks in Technology
See All in Technology
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
140
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
520
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
200
EKS Pod Identity における推移的な session tags
z63d
1
130
20250807 Applied Engineer Open House
sakana_ai
PRO
2
610
Amazon GuardDuty での脅威検出:脅威検出の実例から学ぶ
kintotechdev
0
130
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
420
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
380
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
1
270
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
780
Cloud WANの基礎から応用~少しだけDeep Dive~
masakiokuda
3
120
Featured
See All Featured
The Language of Interfaces
destraynor
159
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Making Projects Easy
brettharned
117
6.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.8k
Writing Fast Ruby
sferik
628
62k
Into the Great Unknown - MozCon
thekraken
40
2k
Building an army of robots
kneath
306
45k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
10Ͱશʹཧղ͢Δ ϚςϦΞϧσβΠϯ γʔαʔגࣜձࣾɹItuski Aoyagi (@yagi2) 2018-04-20(Fri) Kyoto.LT #20
ࣗݾհ ɾ੨༄ थʢ͓͋͗ ͍͖ͭʣ a.k.a ͗ʹ͍ ɾAndroidΞϓϦΤϯδχΞ ʢ✨2✨ʣ ɾσβΠϯͳΜʹΘ͔ΒΜϚϯ
ϚςϦΞϧσβΠϯ ͬͯΔਓ
–from Wikipedia “ϚςϦΞϧσβΠϯʢMaterial Designʣɺ ΞϝϦΧ߹ऺࠃͷGoogle͕ࣾఏএͨ͠Ϣʔβʔ ΤΫεϖϦΤϯεσβΠϯͷମܥɺ͓ΑͼͦΕ Λ࣮ݱ͢Δ։ൃٕज़ख๏ɺσβΠϯɺࢼΈͳ Ͳͷแׅతݺশɻ”
None
ϚςϦΞϧσβΠϯ ΨΠυϥΠϯ ΛಡΜͩ͜ͱ͋Δਓ
None
10Ͱશʹཧղ͢Δ ϚςϦΞϧσβΠϯ
10Ͱશʹཧղ͢Δ ϚςϦΞϧσβΠϯ 10ޙͷඪ →
ࠓϚςϦΞϧσβΠϯΨΠυϥΠϯͷද໘Λ ;ΜΘΓͳͧͬͯงғؾΛཧղ͠·͠ΐ͏
10ͰงғؾΛཧղ͢Δ ϚςϦΞϧσβΠϯ γʔαʔגࣜձࣾɹItuski Aoyagi (@yagi2) 2018-04-20(Fri) Kyoto.LT #20
ʮݹయతͳ͍͍σβΠϯͷݪଇʯ + ʮٕज़ՊֶͷՄೳੑͱֵ৽ʯ ↓ ࢹ֮తͳݴޠͷ࡞ ϚςϦΞϧσβΠϯͷΰʔϧ
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
ϚςϦΞϧݱ࣮ੈքʹج͍ͮ ͍ͯΔ ਓؒʹͱͬͯೃછΈͷ͋Δײ֮ ΛऔΓೖΕΔ ࢴͱΠϯΫͷॏͳΓɾ࡞༻ ϚςϦΞϧϝλϑΝʔ
Ϣʔβʔͷૢ࡞Λڧௐͯ͠ɺॏ ཁͳػೳ͕͙͢Θ͔Δʢಓඪʣ େͰੜ͖ੜ͖ͱͨ͠Πϯλʔ ϑΣʔεʢσβΠϯʣϢʔβʔ Λເதʹͤ͞Δ େͰੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ
ಈ͖Λ༩͑ͯɺಈ࡞ͷओମ͕Ϣʔβʔ Ͱ͋Δ͜ͱͷڧௐ มܗɾ࠶ߏ͢Δͱ͖Ϣʔβʔମ ݧͷ࿈ଓੑΛଛͳΘͳ͍Α͏ʹ͢Δ ಈ͖ʹҙຯ͕͋Δ ҙຯͷ͋ΔϞʔγϣϯ
None
ͳΜ͔͍Ζ͍Ζ͍͠
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
ݱ࣮ੈքͷҹࢴͱΠϯΫ ͰσβΠϯ͞Ε͍ͯΔ ͦΕΛൺᄻͱ͍ͯ࣋ͬͯ͘͠ → ཧతʹ͋Γ͑ͳ͍σβΠϯ͠ͳ͍ ϚςϦΞϧϝλϑΝʔ
ϘλϯͳͲͷUIύʔπࢴͰͰ ͖͍ͯΔͱߟ͑Δɻ 1dpͷް͞Λ͍࣋ͬͯΔ ݱ࣮ੈքͱಉ͘͡ɺॏͶΒΕΔ ࢴͱΠϯΫ
None
None
None
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
Ϣʔβʔͷૢ࡞ΛσβΠϯͱͯ͠ දݱ͢Δ ૢ࡞Λڧௐͯ͠ૢ࡞͢Δ্Ͱͷ ಓඪΛͭ͘Δ ҙࣝతͳσβΠϯ
None
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
ϚςϦΞϧϝλϑΝʔ େͰ͍͖͍͖ͱɺҙࣝతͳ ҙຯͷ͋ΔϞʔγϣϯ ϚςϦΞϧσβΠϯͷ3ݪଇ
ύʔπ࣭ɺͭ·Γ࣭ྔΛ࣋ͭͷͰ ཧ๏ଇʹै͏ Ϣʔβʔʹ࿈ଓੑΛࣦΘͤͳ͍Α͏ʹ ΞχϝʔγϣϯΛͤͯ͞αϙʔτ͢Δ ҙຯͷ͋ΔϞʔγϣϯ
None
Do Don’t
ݱ࣮ੈքͷϧʔϧΛऔΓೖΕͯ ײతͳૢ࡞Λ࣮ݱ Ϣʔβʔͷૢ࡞ʹඥ͘ҙຯ ͷ͋ΔϞʔγϣϯͰྑ͍ମݧ Λ༩͑Δ ·ͱΊ
͓·͚
Material Design Guideline Twitter : @materialdesign Material Icons Design Templates
ϚςϦΞϧσβΠϯ͜ͱ͡Ί