マテリアルデザインガイドライン輪読会#1 - Material Design -

マテリアルデザイン輪読会用のスライド

出典：https://www.gstatic.com/material/spec/jp/material_design.pdf

Transcript

1. ϚςϦΞϧσβΠϯΨΠυϥΠϯྠಡձ #1 - Material Design - @okeicalm
2. ͸͡Ίʹ ͜ͷεϥΠυ͸GoogleࣾͷMaterial Design Guideline Λྠಡ༻ʹ·ͱΊͨ΋ͷͰ͢ɻ ग़యɿhttps://www.gstatic.com/material/spec/jp/material_design.pdf ͜ͷεϥΠυͷςϯϓϨʔτ͸ҎԼΛར༻͍ͯ͠·͢ https://github.com/yulily100/Material-Color-Keynote
3. ࣗݾ঺հ ͓ʔ͘Βʢ@okeicalmʣ NTT Solmare, Inc. ϓϩδΣΫτϚωʔδϟʁεΫϥϜϚελʔʁ झຯͰAndroid, RubyΛษڧத
4. ϚςϦΞϧσβΠϯ Google Ͱ͸ɺ࣌୅Λ௒͑ͯڞ௨͢Δ༏ΕͨσβΠϯ ͷݪଇͱɺՊֶٕज़ͷֵ৽ੑͱՄೳੑͱΛ༥߹ͤͨ͞ ࢹ֮ݴޠΛ࡞Γग़͢͜ͱʹऔΓ૊ΜͰ͖·ͨ͠ɻ͜͏ ͯ͠Ͱ͖ͨͷ͕ɺϚςϦΞϧ σβΠϯͰ͢ɻ Google ͕ϚςϦΞϧ σβΠϯͷཧ೦΍ಛ௃Λൃల͞ ͤଓ͚ΔݶΓɺ͜ͷ࢓༷͸ੜ͖ͨυΩϡϝϯτͱͯ͠ ͜Ε͔Β΋ߋ৽͞Ε͍͖ͯ·͢ɻ
5. ໨ඪ ϓϥοτϑΥʔϜͷछ㑔΍σόΠεͷαΠζʹ͔͔Θ Βͣ౷ҰײΛग़͢͜ͱ͕Ͱ͖Δɺ୯ಠͷج൫γεςϜ Λ։ൃ͠·͢ɻ ϞόΠϧ͔Βڭ܇ΛಘΔ͜ͱ͸΋ͪΖΜͰ͕͢ɺλο ϓɺԻ੠ɺϚ΢εɺΩʔϘʔυ͸͍ͣΕ΋ॏཁͳೖྗ ํ๏Ͱ͢ɻ
6. جຊݪଇ ϚςϦΞϧ͸ϝλϑΝʔͰ͋Δ େ୾Ͱੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ ಈ͖ʹ͸ҙຯ͕͋Δ
7. ϚςϦΞϧ͸ϝλϑΝʔͰ͋Δ ࢴͱΠϯΫ͔Βண૝͞ΕͨϚςϦΞϧ͸Ұछͷϝλ ϑΝʔ ϚςϦΞϧͷجຊݪཧͰ͋Δޫɾ໘ɾಈ͖ʹΑͬͯ ෺ମ͕ۭؒ಺Ͱޓ͍ʹͲͷΑ͏ʹಈ͖ɺ ࡞༻͠߹ ͍ɺଘࡏ͍ͯ͠Δͷ͔Λ఻͑Δ
8. େ୾Ͱੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ ҹ࡮޲͚σβΠϯͷ͞·͟·ͳجຊతཁૉʢจࣈɺά Ϧουɺ༨നɺॖईɺ৭ɺը૾ͷ࢖༻ͳͲʣʹΑΔࢹ ֮දݱ Ϣʔβʔͷૢ࡞Λڧௐͯࣔ͢͜͠ͱͰॏཁͳػೳ͕ॠ ؒతʹΘ͔ΓɺϢʔβʔʹͱͬͯͷಓ͠Δ΂ͱͳΔ
9. ಈ͖ʹ͸ҙຯ͕͋Δ ಈ͖Λ༩͑Δ͜ͱͰɺಈ࡞ͷओମ͕ϢʔβʔͰ͋Δ͜ ͱΛڧௐ͢Δ ΦϒδΣΫτ͕มܗͨ͠Γ࠶ߏ੒͞ΕͨΓ͢Δ৔߹Ͱ ΋ɺϢʔβʔମݧͷ࿈ଓੑΛଛͳΘͳ͍Α͏ʹදࣔ͢ Δ Ϣʔβʔͷૢ࡞ʹର͢Δ൓Ԡ͸߇͑Ίͳ͕Β໌֬ͳ΋ ͷʹɺঢ়ଶͷભҠ͸ޮՌతͰ͋Γͳ͕ΒटඌҰ؏ͨ͠ ΋ͷʹ͢Δ
10. ϚςϦΞϧͱ͸ ؀ڥ ϚςϦΞϧϓϩύςΟ ߴ౓ͱγϟυ΢
11. ؀ڥɿ3Dͷੈք ϚςϦΞϧ؀ڥ͸શͯͷΦϒδΣΫτ͕x, y, z࣠ͷํ ޲Λۭ࣋ͭؒ z࣠ͷਖ਼ͷ஋͕Ӿཡऀʹ޲͔ͬͯ৳ͼ͍ͯΔ ඪ४Ͱ1dpͷް͞Λ࣋ͭ
12. ؀ڥɿ3Dͷੈք
13. ؀ڥɿޫͱӨ ϚςϦΞϧ؀ڥͷӨ͸̎ͭͷޫݯʹΑͬͯͰ͖Δ ɾओཁޫɿํ޲ੑͷ͋ΔӨ ɾ؀ڥޫɿશͯͷ֯౓͔ΒͷॊΒ͔ͳӨ z ࣠ํ޲ͷଟ༷ͳҐஔʹ͋ΔϚςϦΞϧͷγʔτͰޫ ݯ͕͑͗͞ΒΕΔͱɺӨ͕ൃੜ
14. ؀ڥɿޫͱӨ 2 Android z y 6 dp
15. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ x࣠ɺy࣠ͷαΠζ͸ࣗ༝͕ͩɺް͞͸ۉҰʢ1dpʣ dp 1 dp
16. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ ӨΛ࢖͏͜ͱͰϚςϦΞϧؒͷ૬ରతͳߴ౓Λදݱ͢ Δ ద੾ͳදݱ 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
17. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ ϚςϦΞϧ্ʹίϯςϯπΛදࣔͰ͖Δ ܗঢ়΍৭ʹ੍ݶ͸ͳ͍ ίϯςϯπͰϚςϦΞϧͷް͞Λදݱͯ͠͸͍͚ͳ͍
18. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ ίϯςϯπͷಈ࡞͸ϚςϦΞϧ͔Βಠཱ͍ͯ͠Δ͕ɺ ͦͷڥք͔Β͸Έग़͢͜ͱ͸Ͱ͖ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsT2ZXakpkaGp4bzQ/ whatismaterial-materialprop-physicalprop-InkBehavior_xhdpi_006.mp4
19. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ ೖྗΠϕϯτ͕ϚςϦΞϧΛ௨Γൈ͚ͯ͸͍͚ͳ͍
20. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ ෳ਺ͷϚςϦΞϧཁૉ͕ۭؒ಺ͷಉ͡఺Λಉ࣌ʹ઎༗ ͢Δ͜ͱ͸Ͱ͖ͳ͍ 1
21. ϚςϦΞϧϓϩύςΟɿ෺ཧϓϩύςΟ ϚςϦΞϧ͕ଞͷϚςϦΞϧΛ௨Γൈ͚Δ͜ͱ͸Ͱ͖ ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsc2VZVUJ5bFNscFU/ whatismaterial_properties_physical_07_xhdpi_009.mp4
22. ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷมܗ ϚςϦΞϧ͸มܗͰ͖Δ 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
23. ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷมܗ γʔτঢ়ͷϚςϦΞϧΛͭͳ͛ͯ̍ຕͷϚςϦΞϧʹ Ͱ͖Δ 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
24. ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷಈ͖ ؀ڥ಺ͷͲͷ৔ॴͰ΋ੜ੒ɺফ໓ͤ͞Δ͜ͱ͕Ͱ͖Δ 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
25. ߴ౓ͱγϟυ΢ɿߴ౓ ߴ౓ͱ͸ɺ2 ͭͷදࣔ໘ͷؒͷ Z ࣠ํ޲ͷ૬ରతͳԞ ߦ͖ʢڑ཭ʣ ߴ౓͸ 1 ͭͷදࣔ໘ͷ্෦͔Βผͷදࣔ໘ͷ্෦· Ͱͷڑ཭ͱͯ͠ܭଌ͞ΕΔ ࢠΦϒδΣΫτͷߴ౓͸ɺ਌ΦϒδΣΫτͷߴ౓ʹର ͢Δ૬ର஋
26. ߴ౓ͱγϟυ΢ɿߴ౓ Z 2
27. ߴ౓ͱγϟυ΢ɿߴ౓ αΠζʹؔ܎ͳ͘ɺશͯͷϚςϦΞϧΦϒδΣΫτʹ ͸੩ࢭߴ౓͕͋Δ ΦϒδΣΫτͷߴ౓͕มΘͬͨ৔߹͸ɺ͙͢ʹ੩ࢭߴ ౓ʹ໭Δඞཁ͕͋Δ
28. ߴ౓ͱγϟυ΢ɿߴ౓ ಉ͡ίϯϙʔωϯτλΠϓͷ੩ࢭߴ౓͸ΞϓϦؒͰৗ ʹҰఆ ίϯϙʔωϯτͷ੩ࢭߴ౓͸ϓϥοτϑΥʔϜ͕มΘ Δͱ؀ڥͷԞߦ͖ʹԠͯ͡มΘΔ͜ͱ͕͋Δ
29. ߴ౓ͱγϟυ΢ɿߴ౓ Ұ෦ͷίϯϙʔωϯτλΠϓͰ͸ɺϢʔβʔͷೖྗʢ௨ৗ࣌ɺ ϑΥʔΧε࣌ɺԡԼ࣌ͳͲʣ΍γεςϜΠϕϯτʹԠͯ͡ߴ౓͕ มԽ͢ΔϨεϙϯγϒߴ౓͕࢖༻͞ΕΔ ͜͏ͨ͠ߴ౓ͷมԽ͸ɺಈతߴ౓ΦϑηοτΛ࢖༻ͯ͠Ұ؏ͯ͠ ࣮૷͞ΕΔ ಈతߴ౓Φϑηοτ͸ίϯϙʔωϯτͷ੩ࢭঢ়ଶ͔Βίϯϙʔω ϯτͷҠಈઌ·Ͱͷؒͷ૬ରతͳ໨ඪߴ౓Ͱ͋Δ ೖྗΠϕϯτ͕׬ྃ·ͨ͸Ωϟϯηϧ͞ΕΔͱɺίϯϙʔωϯτ ͸੩ࢭߴ౓ʹ໭Δ
30. ߴ౓ͱγϟυ΢ɿߴ౓ Ϩεϙϯγϒߴ౓Λ΋ͬͨίϯϙʔωϯτ͸ଞͷίϯ ϙʔωϯτͱૺ۰͢ΔՄೳੑ͕͋Δ͕ɺίϯϙʔωϯ τɺϨΠΞ΢τͷௐ੔ͳͲ͋ΒΏΔखஈͰճආ͢Δ ίϯϙʔωϯτϨϕϧͰ͸ׯব͕ੜ͡ΔલʹҠಈ·ͨ ͸࡟আ͕Ͱ͖Δ ϨΠΞ΢τϨϕϧͰ͸ɺͰ͖Δ͚ͩׯব͕ى͖ͳ͍Α ͏ͳϨΠΞ΢τΛσβΠϯ͢Δɻ
31. ߴ౓ͱγϟυ΢ɿߴ౓ ֤छίϯϙʔωϯτͷ੩ࢭߴ౓ͱಈతߴ౓Φϑηοτ ͷൺֱ / 1
32. ߴ౓ͱγϟυ΢ɿγϟυ΢ γϟυ΢͸ɺΦϒδΣΫτͷԞߦ͖΍Ҡಈํ޲Λද͢ ॏཁͳ໨ҹ ΦϒδΣΫτͷߴ౓ʹΑͬͯɺͦͷΦϒδΣΫτͷγϟ υ΢ͷ֎؍͕ܾ·Δ
33. ߴ౓ͱγϟυ΢ɿγϟυ΢
34. ߴ౓ͱγϟυ΢ɿγϟυ΢
35. ߴ౓ͱγϟυ΢ɿγϟυ΢ ίϯϙʔωϯτͷγϟυ΢͸ඪ४ͰఆΊΒΕͨ΋ͷΛ ར༻͢Δඞཁ͕͋Δ
36. ߴ౓ͱγϟυ΢ɿγϟυ΢ 4 dp : 2 dp : 8 dp
37. ߴ౓ͱγϟυ΢ɿγϟυ΢ : 8 dp : 9 dp +1 dp
38. ߴ౓ͱγϟυ΢ɿΦϒδΣΫτͷؔ܎ ΞϓϦ಺ͷΦϒδΣΫτͷߏ੒ʹΑͬͯɺ֤ΦϒδΣ ΫτͷଞͷΦϒδΣΫτʹର͢Δಈ࡞͕ܾ·Δ ΦϒδΣΫτ͸ͦΕͧΕಠཱͯ͠ಈ͔ͤΔ৔߹ͱ্Ґ ૚ͷΦϒδΣΫτʹΑͬͯಈ੍͖͕ݶ͞ΕΔ৔߹͕͋ Δ શͯͷΦϒδΣΫτ͸ɺ਌ࢠؔ܎Ͱද͞ΕΔ֊૚ͷҰ ෦෼Ͱ͋Δ
39. ߴ౓ͱγϟυ΢ɿΦϒδΣΫτͷؔ܎ ਌ࢠؔ܎ͷ࢓༷ ɾ֤ΦϒδΣΫτʹ͸਌͕̍ͭ͋Δ ɾ֤ΦϒδΣΫτ͸೚ҙͷ਺ͷࢠΛ࣋ͭ͜ͱ͕Ͱ͖Δ ɾࢠ͸ɺҐஔɺճసɺεέʔϧɺߴ౓ͳͲͷΦϒδΣ ΫτΛมԽͤ͞ΔϓϩύςΟΛ਌͔Βܧঝ͢Δ ɾܑఋͱ͸֊૚಺ͷಉ͡Ϩϕϧʹ͋ΔΦϒδΣΫτ
40. ߴ౓ͱγϟυ΢ɿΦϒδΣΫτͷؔ܎ ྫ֎ͱͯ͠ϝΠϯ UI ཁૉͳͲɺϧʔτΛ਌ʹ࣋ͭΞ ΠςϜ͸ɺଞͷΦϒδΣΫτʹ੍໿͞Εͣʹಈ͚Δ ྫʣϑϩʔςΟϯάૢ࡞Ϙλϯ͸ίϯςϯπͱҰॹʹ εΫϩʔϧ͠ͳ͍
41. ߴ౓ͱγϟυ΢ɿΦϒδΣΫτͷؔ܎ ΦϒδΣΫτಉ͕࢜ͲͷΑ͏ʹ૬ޓ࡞༻͢Δ͔͸ɺ਌ ࢠ֊૚಺ͰͷҐஔʹΑܾͬͯ·Δ ྫʣࢠ͸਌ͱͷؒʹ Z ࣠ํ޲ʹ࠷খݶͷ伱ؒΛ࣋ͭ ͕ɺ਌ͱࢠͷؒʹ͸ଞͷΦϒδΣΫτ͸ૠೖ͞Εͳ͍ ྫʣεΫϩʔϧதͷΧʔυίϨΫγϣϯͰ͸ɺΧʔυ ಉܑ͕࢜ఋؔ܎ʹ͋ΔͨΊɺ͢΂ͯͷΧʔυ͕Ұॹʹ ॎҰྻͱͳͬͯಈ͘
42. ߴ౓ͱγϟυ΢ɿΦϒδΣΫτͷؔ܎ ΦϒδΣΫτͷߴ౓ʢZ ۭؒͰͷҐஔʣΛܾΊΔํ๏ ͸ɺදࣔ͢Δίϯςϯπͷ֊૚ͱɺΦϒδΣΫτΛಠ ཱͯ͠ಈ͔͢ඞཁ͕͋Δ͔Ͳ͏͔ʹΑͬͯมΘΔ