Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
マテリアルデザインガイドライン輪読会#1 - Material Design -
okeicalm
July 30, 2017
Design
0
410
マテリアルデザインガイドライン輪読会#1 - Material Design -
マテリアルデザイン輪読会用のスライド
出典:
https://www.gstatic.com/material/spec/jp/material_design.pdf
okeicalm
July 30, 2017
Tweet
Share
More Decks by okeicalm
See All by okeicalm
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
890
マテリアルデザインガイドライン輪読会#1 - Components(button) -
okeicalm
0
350
Other Decks in Design
See All in Design
My Yahoo Refresh Overview
xuechunwu
0
260
The Frog Bandit
senamiyazaki
0
130
今から始めるFigma超入門
448jp
0
540
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
visional_design
2
3k
創造学群表現学類2021_ソーシャルチームプレゼン
zhikto
1
110
Meep
vincentwu
PRO
1
280
Untitled (Baseball)
heewon
2
310
Overflow - IdentityDeck
overflowinc
0
3.7k
Demon Deals - Character List
breadman
0
2.7k
バーチャル街づくり連合(構想V1)
showyingart
0
1.2k
The Triangle
wallabites
0
130
Bec Purser - Are you consulting, collaborating, or co-designing? And why it matters.
uxaustralia
PRO
0
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
319
19k
The Pragmatic Product Professional
lauravandoore
19
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Bootstrapping a Software Product
garrettdimon
296
110k
Unsuck your backbone
ammeep
659
55k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
Transcript
ϚςϦΞϧσβΠϯΨΠυϥΠϯྠಡձ #1 - Material Design - @okeicalm
͡Ίʹ ͜ͷεϥΠυGoogleࣾͷMaterial Design Guideline Λྠಡ༻ʹ·ͱΊͨͷͰ͢ɻ ग़యɿhttps://www.gstatic.com/material/spec/jp/material_design.pdf ͜ͷεϥΠυͷςϯϓϨʔτҎԼΛར༻͍ͯ͠·͢ https://github.com/yulily100/Material-Color-Keynote
ࣗݾհ ͓ʔ͘Βʢ@okeicalmʣ NTT Solmare, Inc. ϓϩδΣΫτϚωʔδϟʁεΫϥϜϚελʔʁ झຯͰAndroid, RubyΛษڧத
ϚςϦΞϧσβΠϯ Google Ͱɺ࣌Λ͑ͯڞ௨͢Δ༏ΕͨσβΠϯ ͷݪଇͱɺՊֶٕज़ͷֵ৽ੑͱՄೳੑͱΛ༥߹ͤͨ͞ ࢹ֮ݴޠΛ࡞Γग़͢͜ͱʹऔΓΜͰ͖·ͨ͠ɻ͜͏ ͯ͠Ͱ͖ͨͷ͕ɺϚςϦΞϧ σβΠϯͰ͢ɻ Google ͕ϚςϦΞϧ σβΠϯͷཧ೦ಛΛൃల͞
ͤଓ͚ΔݶΓɺ͜ͷ༷ੜ͖ͨυΩϡϝϯτͱͯ͠ ͜Ε͔Βߋ৽͞Ε͍͖ͯ·͢ɻ
ඪ ϓϥοτϑΥʔϜͷछ㑔σόΠεͷαΠζʹ͔͔Θ Βͣ౷ҰײΛग़͢͜ͱ͕Ͱ͖Δɺ୯ಠͷج൫γεςϜ Λ։ൃ͠·͢ɻ ϞόΠϧ͔Βڭ܇ΛಘΔ͜ͱͪΖΜͰ͕͢ɺλο ϓɺԻɺϚεɺΩʔϘʔυ͍ͣΕॏཁͳೖྗ ํ๏Ͱ͢ɻ
جຊݪଇ ϚςϦΞϧϝλϑΝʔͰ͋Δ େͰੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ ಈ͖ʹҙຯ͕͋Δ
ϚςϦΞϧϝλϑΝʔͰ͋Δ ࢴͱΠϯΫ͔Βண͞ΕͨϚςϦΞϧҰछͷϝλ ϑΝʔ ϚςϦΞϧͷجຊݪཧͰ͋Δޫɾ໘ɾಈ͖ʹΑͬͯ ମ͕ۭؒͰޓ͍ʹͲͷΑ͏ʹಈ͖ɺ ࡞༻͠߹ ͍ɺଘࡏ͍ͯ͠Δͷ͔Λ͑Δ
େͰੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ ҹ͚σβΠϯͷ͞·͟·ͳجຊతཁૉʢจࣈɺά Ϧουɺ༨നɺॖईɺ৭ɺը૾ͷ༻ͳͲʣʹΑΔࢹ ֮දݱ Ϣʔβʔͷૢ࡞Λڧௐͯࣔ͢͜͠ͱͰॏཁͳػೳ͕ॠ ؒతʹΘ͔ΓɺϢʔβʔʹͱͬͯͷಓ͠ΔͱͳΔ
ಈ͖ʹҙຯ͕͋Δ ಈ͖Λ༩͑Δ͜ͱͰɺಈ࡞ͷओମ͕ϢʔβʔͰ͋Δ͜ ͱΛڧௐ͢Δ ΦϒδΣΫτ͕มܗͨ͠Γ࠶ߏ͞ΕͨΓ͢Δ߹Ͱ ɺϢʔβʔମݧͷ࿈ଓੑΛଛͳΘͳ͍Α͏ʹදࣔ͢ Δ Ϣʔβʔͷૢ࡞ʹର͢ΔԠ߇͑Ίͳ͕Β໌֬ͳ ͷʹɺঢ়ଶͷભҠޮՌతͰ͋Γͳ͕ΒटඌҰ؏ͨ͠ ͷʹ͢Δ
ϚςϦΞϧͱ ڥ ϚςϦΞϧϓϩύςΟ ߴͱγϟυ
ڥɿ3Dͷੈք ϚςϦΞϧڥશͯͷΦϒδΣΫτ͕x, y, z࣠ͷํ Λۭ࣋ͭؒ z࣠ͷਖ਼ͷ͕Ӿཡऀʹ͔ͬͯ৳ͼ͍ͯΔ ඪ४Ͱ1dpͷް͞Λ࣋ͭ
ڥɿ3Dͷੈք
ڥɿޫͱӨ ϚςϦΞϧڥͷӨ̎ͭͷޫݯʹΑͬͯͰ͖Δ ɾओཁޫɿํੑͷ͋ΔӨ ɾڥޫɿશͯͷ͔֯ΒͷॊΒ͔ͳӨ z ࣠ํͷଟ༷ͳҐஔʹ͋ΔϚςϦΞϧͷγʔτͰޫ ݯ͕͑͗͞ΒΕΔͱɺӨ͕ൃੜ
ڥɿޫͱӨ 2 Android z y 6 dp
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ x࣠ɺy࣠ͷαΠζࣗ༝͕ͩɺް͞ۉҰʢ1dpʣ dp 1 dp
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ӨΛ͏͜ͱͰϚςϦΞϧؒͷ૬ରతͳߴΛදݱ͢ Δ దͳදݱ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsSmZ5VlNBRHBXNXM/ inline%20whatismaterial-materialprop-physicalprop-PaperShadow_01_xhdpi_008.mp4 ෆదͳදݱ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsaVFKVXI0RUFOWTg/ inline%20whatismaterial-materialprop-physicalprop-PaperShadow_02_xhdpi_008.mp4
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ϚςϦΞϧ্ʹίϯςϯπΛදࣔͰ͖Δ ܗঢ়৭ʹ੍ݶͳ͍ ίϯςϯπͰϚςϦΞϧͷް͞Λදݱ͍͚ͯ͠ͳ͍
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ίϯςϯπͷಈ࡞ϚςϦΞϧ͔Βಠཱ͍ͯ͠Δ͕ɺ ͦͷڥք͔ΒΈग़͢͜ͱͰ͖ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsT2ZXakpkaGp4bzQ/ whatismaterial-materialprop-physicalprop-InkBehavior_xhdpi_006.mp4
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ೖྗΠϕϯτ͕ϚςϦΞϧΛ௨Γൈ͚͍͚ͯͳ͍
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ෳͷϚςϦΞϧཁૉ͕ۭؒͷಉ͡Λಉ࣌ʹ༗ ͢Δ͜ͱͰ͖ͳ͍ 1
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ϚςϦΞϧ͕ଞͷϚςϦΞϧΛ௨Γൈ͚Δ͜ͱͰ͖ ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsc2VZVUJ5bFNscFU/ whatismaterial_properties_physical_07_xhdpi_009.mp4
ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷมܗ ϚςϦΞϧมܗͰ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsMndnRld3dl9nVU0/ whatismaterial-materialprop-transformingmaterial-PaperShape_xhdpi_005.mp4 ϚςϦΞϧͷ֦େॖখɺͦͷฏ໘ʹԊͬͯߦ͏ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsLVpqQ0pBOXY3WDQ/ whatismaterial-materialprop-transformingmaterial-PaperShapeLinear_xhdpi_005.mp4 ϚςϦΞϧΛંΓۂ͛ͨΓɺΜͩΓ͢Δ͜ͱͰ͖ ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsM0s0eE5sODFxcnM/
whatismaterial-materialprop-transformingmaterial-PaperBendFold_xhdpi_006.mp4
ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷมܗ γʔτঢ়ͷϚςϦΞϧΛͭͳ͛ͯ̍ຕͷϚςϦΞϧʹ Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsekNUcDRIaXh1RUU/ whatismaterial-materialprop-transformingmaterial-PaperHeal_xhdpi_004.mp4 ϚςϦΞϧΛΓͯ͠ɺ͢͜ͱͰ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNlM0eEhPMDFwMlU/ whatismaterial-materialprop-transformingmaterial-PaperSplitHeal_xhdpi_005.mp4
ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷಈ͖ ڥͷͲͷॴͰੜɺফ໓ͤ͞Δ͜ͱ͕Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTUF0YzJrX0xfWmc/ whatismaterial-materialprop-movementmaterial-PaperPointExpand_xhdpi_005.mp4 ࣠ʹԊͬͯҠಈͤ͞Δ͜ͱ͕Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsYXIyWl9fZURydTA/ whatismaterial-materialprop-movementmaterial-PaperMove_xhdpi_008.mp4 ϢʔβʔʹΑΔૢ࡞z࣠ʹԊͬͨಈ͖ͱͯ͠දݱ͢ Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQW1HYnpicTVySG8/
whatismaterial-materialprop-movementmaterial-Material_Response_xhdpi_003.mp4
ߴͱγϟυɿߴ ߴͱɺ2 ͭͷදࣔ໘ͷؒͷ Z ࣠ํͷ૬ରతͳԞ ߦ͖ʢڑʣ ߴ 1 ͭͷදࣔ໘ͷ্෦͔Βผͷදࣔ໘ͷ্෦· Ͱͷڑͱͯ͠ܭଌ͞ΕΔ
ࢠΦϒδΣΫτͷߴɺΦϒδΣΫτͷߴʹର ͢Δ૬ର
ߴͱγϟυɿߴ Z 2
ߴͱγϟυɿߴ αΠζʹؔͳ͘ɺશͯͷϚςϦΞϧΦϒδΣΫτʹ ੩ࢭߴ͕͋Δ ΦϒδΣΫτͷߴ͕มΘͬͨ߹ɺ͙͢ʹ੩ࢭߴ ʹΔඞཁ͕͋Δ
ߴͱγϟυɿߴ ಉ͡ίϯϙʔωϯτλΠϓͷ੩ࢭߴΞϓϦؒͰৗ ʹҰఆ ίϯϙʔωϯτͷ੩ࢭߴϓϥοτϑΥʔϜ͕มΘ ΔͱڥͷԞߦ͖ʹԠͯ͡มΘΔ͜ͱ͕͋Δ
ߴͱγϟυɿߴ Ұ෦ͷίϯϙʔωϯτλΠϓͰɺϢʔβʔͷೖྗʢ௨ৗ࣌ɺ ϑΥʔΧε࣌ɺԡԼ࣌ͳͲʣγεςϜΠϕϯτʹԠͯ͡ߴ͕ มԽ͢ΔϨεϙϯγϒߴ͕༻͞ΕΔ ͜͏ͨ͠ߴͷมԽɺಈతߴΦϑηοτΛ༻ͯ͠Ұ؏ͯ͠ ࣮͞ΕΔ ಈతߴΦϑηοτίϯϙʔωϯτͷ੩ࢭঢ়ଶ͔Βίϯϙʔω ϯτͷҠಈઌ·Ͱͷؒͷ૬ରతͳඪߴͰ͋Δ ೖྗΠϕϯτ͕ྃ·ͨΩϟϯηϧ͞ΕΔͱɺίϯϙʔωϯτ ੩ࢭߴʹΔ
ߴͱγϟυɿߴ ϨεϙϯγϒߴΛͬͨίϯϙʔωϯτଞͷίϯ ϙʔωϯτͱૺ۰͢ΔՄೳੑ͕͋Δ͕ɺίϯϙʔωϯ τɺϨΠΞτͷௐͳͲ͋ΒΏΔखஈͰճආ͢Δ ίϯϙʔωϯτϨϕϧͰׯব͕ੜ͡ΔલʹҠಈ·ͨ আ͕Ͱ͖Δ ϨΠΞτϨϕϧͰɺͰ͖Δ͚ͩׯব͕ى͖ͳ͍Α ͏ͳϨΠΞτΛσβΠϯ͢Δɻ
ߴͱγϟυɿߴ ֤छίϯϙʔωϯτͷ੩ࢭߴͱಈతߴΦϑηοτ ͷൺֱ / 1
ߴͱγϟυɿγϟυ γϟυɺΦϒδΣΫτͷԞߦ͖ҠಈํΛද͢ ॏཁͳҹ ΦϒδΣΫτͷߴʹΑͬͯɺͦͷΦϒδΣΫτͷγϟ υͷ֎؍͕ܾ·Δ
ߴͱγϟυɿγϟυ
ߴͱγϟυɿγϟυ
ߴͱγϟυɿγϟυ ίϯϙʔωϯτͷγϟυඪ४ͰఆΊΒΕͨͷΛ ར༻͢Δඞཁ͕͋Δ
ߴͱγϟυɿγϟυ 4 dp : 2 dp : 8 dp
ߴͱγϟυɿγϟυ : 8 dp : 9 dp +1 dp
ߴͱγϟυɿΦϒδΣΫτͷؔ ΞϓϦͷΦϒδΣΫτͷߏʹΑͬͯɺ֤ΦϒδΣ ΫτͷଞͷΦϒδΣΫτʹର͢Δಈ࡞͕ܾ·Δ ΦϒδΣΫτͦΕͧΕಠཱͯ͠ಈ͔ͤΔ߹ͱ্Ґ ͷΦϒδΣΫτʹΑͬͯಈ੍͖͕ݶ͞ΕΔ߹͕͋ Δ શͯͷΦϒδΣΫτɺࢠؔͰද͞ΕΔ֊ͷҰ ෦Ͱ͋Δ
ߴͱγϟυɿΦϒδΣΫτͷؔ ࢠؔͷ༷ ɾ֤ΦϒδΣΫτʹ͕̍ͭ͋Δ ɾ֤ΦϒδΣΫτҙͷͷࢠΛ࣋ͭ͜ͱ͕Ͱ͖Δ ɾࢠɺҐஔɺճసɺεέʔϧɺߴͳͲͷΦϒδΣ ΫτΛมԽͤ͞ΔϓϩύςΟΛ͔Βܧঝ͢Δ ɾܑఋͱ֊ͷಉ͡Ϩϕϧʹ͋ΔΦϒδΣΫτ
ߴͱγϟυɿΦϒδΣΫτͷؔ ྫ֎ͱͯ͠ϝΠϯ UI ཁૉͳͲɺϧʔτΛʹ࣋ͭΞ ΠςϜɺଞͷΦϒδΣΫτʹ੍͞Εͣʹಈ͚Δ ྫʣϑϩʔςΟϯάૢ࡞ϘλϯίϯςϯπͱҰॹʹ εΫϩʔϧ͠ͳ͍
ߴͱγϟυɿΦϒδΣΫτͷؔ ΦϒδΣΫτಉ͕࢜ͲͷΑ͏ʹ૬ޓ࡞༻͢Δ͔ɺ ࢠ֊ͰͷҐஔʹΑܾͬͯ·Δ ྫʣࢠͱͷؒʹ Z ࣠ํʹ࠷খݶͷ伱ؒΛ࣋ͭ ͕ɺͱࢠͷؒʹଞͷΦϒδΣΫτૠೖ͞Εͳ͍ ྫʣεΫϩʔϧதͷΧʔυίϨΫγϣϯͰɺΧʔυ ಉܑ͕࢜ఋؔʹ͋ΔͨΊɺͯ͢ͷΧʔυ͕Ұॹʹ ॎҰྻͱͳͬͯಈ͘
ߴͱγϟυɿΦϒδΣΫτͷؔ ΦϒδΣΫτͷߴʢZ ۭؒͰͷҐஔʣΛܾΊΔํ๏ ɺදࣔ͢Δίϯςϯπͷ֊ͱɺΦϒδΣΫτΛಠ ཱͯ͠ಈ͔͢ඞཁ͕͋Δ͔Ͳ͏͔ʹΑͬͯมΘΔ