マテリアルデザインガイドライン輪読会#1 - Components(button) -

Transcript

1. ϚςϦΞϧσβΠϯΨΠυϥΠϯྠಡձ#1 - Component(button) - @okeicalm

2. ͸͡Ίʹ ͜ͷεϥΠυ͸GoogleࣾͷMaterial Design Guideline Λྠಡ༻ʹ·ͱΊͨ΋ͷͰ͢ɻ ग़యɿhttps://www.gstatic.com/material/spec/jp/components.pdf ͜ͷεϥΠυͷςϯϓϨʔτ͸ҎԼΛར༻͍ͯ͠·͢ https://github.com/yulily100/Material-Color-Keynote

3. ϘλϯͷλΠϓ λΠϓ ֓ཁ ྫ ϑϩʔςΟϯά ૢ࡞Ϙλϯ ු্ؙ͖͕͍ͬͨσβΠϯͷϘλϯ ϘλϯΛԡ͢ͱΠϯΫঢ়ͷ൓Ԡ͕දࣔ͞ΕΔ ු͖ग़͠Ϙλϯ ௨ৗ͸௕ํܗͷු্͖͕ͬͨϘλϯ

   ϘλϯΛԡ͢ͱΠϯΫঢ়ͷ൓Ԡ͕දࣔ͞ΕΔ ϑϥοτϘλϯ ΠϯΫͰ࡞ΒΕͨϘλϯ ϘλϯΛԡ͢ͱΠϯΫঢ়ͷ൓Ԡ͕දࣔ͞ΕΔ ͕ɺු্͖͕͍ͬͯͳ͍ฏΒͳϘλϯ : : : : 3 :

4. ϘλϯͷλΠϓ

5. ϘλϯͷλΠϓ Ϙλϯͷॏཁੑɺը໘্ͷίϯςφ਺ɺը໘ͷϨΠΞ΢τʹԠͯ͡Ϙλ ϯͷελΠϧΛબͿ ػೳɹɹɹɿϑϩʔςΟϯάૢ࡞Ϙλϯʹ͢Δ΄ͲॏཁͰ༷ʑͳ৔ॴͰ ɹɹɹɹɹɹ࢖ΘΕΔϘλϯ͔Ͳ͏͔Λߟ͑Δ ࣍ݩɹɹɹɿϘλϯΛͲͷίϯςφʹऩΊΔ͔΍ɺը໘্ʹͲͷ͘Β͍ ɹɹɹɹɹɹzεϖʔεϨΠϠ͕͋Δ͔Ͳ͏͔Λݩʹු͖ग़͠ʹ͢Δ͔ ɹɹɹɹɹɹϑϥοτʹ͢Δ͔ܾΊΔ ϨΠΞ΢τɿ֤ίϯςφͰ͸ओʹ̍ͭͷλΠϓͷϘλϯΛར༻͢Δ ɹɹɹɹɹɹෳ਺ͷλΠϓΛར༻͍͍ͯ͠ͷ͸ਖ਼౰ͳཧ༝͕͋Δ࣌ͷΈ

6. ϘλϯͷλΠϓ

7. ࢖༻ํ๏ μΠΞϩάͰ͸ϑϥοτϘλϯΛ࢖༻ͯ͠ϘλϯͷΞ ΫγϣϯΛμΠΞϩάͷίϯςϯπͱҰகͤ͞Δ ύσΟϯάͷ஋΋نఆ͞Ε͍ͯΔ : : 8 dp

8. ࢖༻ํ๏ ΠϯϥΠϯͷϘλϯ͸ϨΠΞ΢τʹԠͯ͡ɺු͖ग़͠ Ϙλϯ͔ϑϥοτϘλϯΛબͿ ϑϥοτϘλϯ͸Ϣʔβʔ͕ݟ͚ͭ΍͍͢Α͏ʹύσΟ ϯάΛ௥Ճ͢Δ

9. ࢖༻ํ๏

10. ࢖༻ํ๏ ΞϓϦ಺ͰಛఆͷΞΫγϣϯΛৗʹఏࣔ͢Δඞཁ͕͋ Δ৔߹͸ϑϩʔςΟϯάૢ࡞Ϙλϯͷར༻Λਪ঑ ผͷखஈͱͯ͠ৗறϑολʔϘλϯΛར༻ͯ͠΋ྑ͍ ৗறϘλϯͷΤϦΞͰ͸ු͖ग़͠Ϙλϯ͸ར༻͠ͳ͍

11. ࢖༻ํ๏ 48 dp

12. ࢖༻ํ๏ σόΠμʔΛ௥Ճ͢ΔͱεΫϩʔϧՄೳͳμΠΞϩά Ͱ΋ৗறϑολʔϘλϯ͕ར༻Ͱ͖Δ

13. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ු͖ग़͠ϘλϯͰ͸ฏ໘ͷϨΠΞ΢τʹ࣍ݩΛ௥ՃͰ ͖Δ

14. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ

15. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ πʔϧόʔ΍μΠΞϩάʹϑϥοτϘλϯΛ࢖͏ͱϨ ΠϠʔ͕ա৒ʹͳΔͷΛ๷͛Δ

16. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ

17. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ϑϥοτϘλϯ͸ϚςϦΞϧ্ʹ׆ࣈͱͯ͠දࣔ͞Ε Δ ු্͖͕ͬͯདྷͳ͍Ϙλϯ͕ͩɺϘλϯΛԡ͢ͱϘλ ϯશମʹ৭͕ͭ͘

18. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ු͖ग़͠Ϙλϯ͸ผͷγʔτ্Ͱ੩ࢭ͍ͯ͠ΔϚςϦ ΞϧͷΑ͏ʹಈ࡞͢Δ ු͖ग़͠ϘλϯΛԡ͢ͱશମʹ৭͕ͭ͘

19. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ϘλϯͷςΩετ͸େจࣈͷଘࡏ͢ΔݴޠͰ͸େจࣈ ʹ͢Δඞཁ͕͋Δ ͦΕҎ֎ͷݴޠͷ৔߹ɺϑϥοτϘλϯʹ͸৭෇͖ͷ ςΩετΛར༻ͯ͠௨ৗͷςΩετͱ۠ผ͢Δ

20. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ු͖ग़͠ϘλϯͷσϑΥϧτͷߴ౓͸2dp ύιίϯͷ৔߹ɺු͖ग़͠ϘλϯʹΧʔιϧΛ߹Θͤ ͨ࣌ʹ͜ͷߴ౓Ͱදࣔ͢Δ

21. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ Ϛ΢εͱΩʔϘʔυ͕ओͳೖྗखஈͰ͋Δ৔߹ɺີ౓ ͷߴ͍UIʹ͋ΘͤͯϘλϯͷੇ๏Λখ͘͞Ͱ͖Δ / : 64 dp : 36 dp

    Z : 0 dp : 30% #FFFFFF : 12% #FFFFFF : 14 pt Roboto Medium : 36 dp : 16 dp : 13 pt Roboto Medium : 32 dp : 16 dp

22. ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ Ϙλϯͷಈ͖ ϑϥοτϘλϯ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFbjE5djFGMzdKcmc/components- buttons-flatbuttons.mp4 ු͖ग़͠Ϙλϯ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFMFBOTERHZFR4aDg/ components-buttons-raisedbuttons.mp4

23. ੾Γସ͑Ϙλϯ ੾Γସ͑ϘλϯΛ࢖͏ͱɺؔ࿈͢ΔΦϓγϣϯΛ 1 ͭͷάϧʔϓʹ·ͱΊΔ͜ͱ͕Ͱ͖Δ ͦΕͧΕͷ੾Γସ͑Ϙλϯ͕ 1ͭͷάϧʔϓʹଐͯ͠ ͍Δ͜ͱ͕఻ΘΔΑ͏ʹɺϨΠΞ΢τ΍ִؒΛ੔͑Δ ϑΥʔΧεͨ͠ঢ়ଶ΍ԡͨ͠ঢ়ଶʹΑΓɺ੾Γସ͑Ϙ λϯ͕ಛఆͷάϧʔϓʹؚ·Ε͍ͯΔ͜ͱΛࣔ͢͜ͱ ͕Մೳ

24. ੾Γସ͑Ϙλϯ ੾Γସ͑Ϙλϯͷཁ݅ ɾ̍ͭͷάϧʔϓʹ̏ͭҎ্ͷ੾Γସ͑ϘλϯΛؚΊ Δ ɾϘλϯʹ͸ςΩετ·ͨ͸ΞΠίϯɺ΋͘͠͸ͦͷ ྆ํΛ࢖໊ͬͯલΛ͚ͭΔ

25. ੾Γସ͑Ϙλϯ 3 1 1 1 : 1 1 1

26. ੾Γସ͑Ϙλϯ બ୒΍બ୒ղআ͕Ͱ͖ΔΦϓγϣϯ͕͚̍ͭͩͷ৔߹ɺ ੾Γସ͑Ϙλϯʹ͸ΞΠίϯ͕ద͍ͯ͠Δ ੾Γସ͑ΞΠίϯͰ͸ද໘ͷ൓Ԡͱͯ͠λοϓλʔήο τΛ௒͑ͯ೾໲্ʹ޿͕ΔΠϯΫΛදࣔͰ͖Δ ΞΠίϯͷ࠷దͳ഑ஔ͸ΞϓϦόʔɺπʔϧόʔɺૢ ࡞Ϙλϯɺ੾Γସ͑΅ͨΜ

27. ੾Γସ͑Ϙλϯ :

28. ϓϧμ΢ϯϘλϯ ϓϧμ΢ϯϘλϯͰ͸ෳ਺ͷબ୒ࢶ͔ΒબͿ͜ͱ͕Ͱ ͖Δ ϓϧμ΢ϯϘλϯ͕ԡ͞ΕΔͱɺબ୒Մೳͳεςʔλ εΛؚΉϝχϡʔ͕ϘλϯΛ෴͏Α͏ʹදࣔ͞ΕΔ ϓϧμ΢ϯ಺ͷεΫϩʔϧ͸ϝχϡʔͷεΫϩʔϧͱ ಉ͡Α͏ʹಈ࡞͢Δ

29. ϓϧμ΢ϯϘλϯ

30. ҰൠతͳΦʔόʔϑϩʔϓϧμ΢ϯϘλϯ දࣔ͞ΕΔεςʔλε͸ͳ͍͕ɺ໼ҹ͔Ұൠతͳϝ χϡʔϘλϯ͕͋Δ ϘλϯΛԡ͢ͱϝχϡʔ͕ඈͼग़͢ ௨ৗɺϝχϡʔ಺ͷΦϓγϣϯΛԡ͢͜ͱͰɺͦͷΦ ϓγϣϯͷৄ͍͠ઃఆʹҠಈͰ͖Δ

31. ҰൠతͳΦʔόʔϑϩʔϓϧμ΢ϯϘλϯ 2 1 2 1

32. ηάϝϯτϓϧμ΢ϯϘλϯ ݱࡏͷεςʔλεͱϓϧμ΢ϯ໼ҹΞΠίϯͱ͍͏̎ͭͷη Ϋγϣϯ͕͋Δ ݱࡏͷεςʔλεΛԡ͢ͱɺը໘಺ͰͦͷεςʔλεͷΞΫ γϣϯ͕࣮ࢪ͞ΕΔ ϓϧμ΢ϯ໼ҹΛԡ͢ͱɺεςʔλεͷΦϓγϣϯ͕શͯද ࣔ͞ΕΔ ͍ͣΕ͔̍ͭͷΦϓγϣϯΛબ୒͢Δͱɺදࣔ͞Ε͍ͯΔε ςʔλε͕มߋ͞ΕΔ

33. ηάϝϯτϓϧμ΢ϯϘλϯ 2 1 1

34. ฤूՄೳͳϓϧμ΢ϯϘλϯ ηάϝϯτԽ͞Εͨϓϧμ΢ϯؚ͕·Ε͓ͯΓɺදࣔ ͞Ε͍ͯΔεςʔλεͷςΩετΛฤूͰ͖Δ ݱࡏͷεςʔλεΛԡ͢ͱɺͦͷεςʔλεͷΞΫγϣ ϯ͕࣮ࢪ͞ΕΔͱͱ΋ʹදࣔ͞Ε͍ͯΔεςʔλε͕ ฤूՄೳʹͳΔ ໼ҹΛԡ͢ͱɺεςʔλεͷΦϓγϣϯ͕શͯදࣔ͞ ΕΔ

35. ฤूՄೳͳϓϧμ΢ϯϘλϯ 2 1 1

36. ϓϧμ΢ϯʢύιίϯͷ৔߹ʣ

37. ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯ͸ಛఆͷಈ࡞Λଅ͢໨తͰ ར༻͢Δ ը໘ͷ࠷લ໘ʹු͍͍ͯΔΑ͏ͳԁܗͷΞΠίϯͰද ͞ΕΔ ϞʔϑΟϯάɺىಈɺΞϯΧʔϙΠϯτͷҠಈͳͲɺ ಈ͖ͷ͋ΔػೳΛ࣋ͨͤΔ͜ͱ͕Ͱ͖Δ

38. ϑϩʔςΟϯάૢ࡞Ϙλϯ : :

39. ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯʹ͸̎ͭͷαΠζ͕͋Δ ɾطఆͷαΠζɿ΄ͱΜͲͷ৔߹ʹ࢖༻ ɾϛχαΠζɹɿը໘্ͷଞͷཁૉͱࢹ֮తʹ౷Ұײ ɹɹɹɹɹɹɹɹΛ࣋ͨͤΔ৔߹ʹͷΈར༻

40. ϑϩʔςΟϯάૢ࡞Ϙλϯ ϞόΠϧͰ͸୺͔Βগͳ͘ͱ΋16dpɺλϒϨοτɾ ύιίϯͰ͸গͳ͘ͱ΋24dpͷ༨നΛͱͬͯ഑ஔ͢ Δඞཁ͕͋Δ ϑΥʔΧε࣌͸ೱ୶͕มΘΓɺબ୒࣌͸ු্͖͕Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTTZvLVVFRE5YNTA/ components-buttons-fab_01_xhdpi_002.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQWgzT180ZUVsQWM/ components-buttons-fab_02_xhdpi_002.mp4

41. ϑϩʔςΟϯάૢ࡞Ϙλϯ dp : 24 x 24 dp : 56 x

    56 dp : 24 x 24 dp : 40 x 40 dp

42. ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯ͸ΞϓϦ಺ͷϝΠϯͷૢ࡞ ʹ૬౰͢ΔͨΊɺશͯͷը໘ͰඞཁͳΘ͚Ͱ͸ͳ͍ ϘλϯͷଘࡏΛ໨ཱͨͤΔͨΊɺ·ͨɺ࠷΋Α͘ར༻ ͢Δૢ࡞ͷΈΛදͨ͢Ίʹɺ̍ը໘ʹ͚̍ͭͩ഑ஔ͢ Δ͜ͱΛਪ঑

43. ϑϩʔςΟϯάૢ࡞Ϙλϯ 1 1

44. ϑϩʔςΟϯάૢ࡞Ϙλϯ ࡞੒ɺ͓ؾʹೖΓɺڞ༗ɺφϏɺݕࡧͳͲͷߠఆతͳૢ࡞Λׂ Γ౰ͯΔ ҎԼͷΑ͏ͳ࢖༻ස౓ͷ௿͍ૢ࡞΍ɺ൱ఆతͳૢ࡞ʹ࢖༻͢Δ ͜ͱ͸ආ͚ͨํ͕ྑ͍ ɾΞʔΧΠϒ·ͨ͸ΰϛശ΁ͷҠಈ ɾ۩ମੑʹ͚ܽΔૢ࡞ ɾ௨஌΍Τϥʔ ɾςΩετͷ੾ΓऔΓͷΑ͏ͳݶఆతͳૢ࡞Իྔௐઅ΍ ɹϑΥϯτͷ৭ͷมߋͳͲɺ௨ৗ͸πʔϧόʔʹ࣮૷͢Δઃఆ

45. ϑϩʔςΟϯάૢ࡞Ϙλϯ

46. ϑϩʔςΟϯάૢ࡞Ϙλϯ ΞϓϦͷछྨʹؔΘΒͣɺϝΠϯͷૢ࡞Ͱ͋Δ͜ͱΛ ࣔͨ͢Ίʹৗʹؙ͍ΞΠίϯΛ࢖༻͢Δ

47. ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯʹ༨ܭͳཱମײΛ෇͚Ճ͑ ͳ͍

48. ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ طఆͷϑϩʔςΟϯάૢ࡞Ϙλϯ͸ɺը໘্ʹ޿͕ͬ ͯݱΕΔΞχϝʔγϣϯϚςϦΞϧ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsZU1kZWhRYWZpUDg/ components-buttons-fab-behavior_01_xhdpi_012.mp4 Ϙλϯ಺ͷΞΠίϯΛΞχϝʔγϣϯʹ͢Δ͜ͱ΋Ͱ ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsdkh6b016RE9adzQ/components- buttons-fab-behavior_02_xhdpi_012.mp4

49. ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ ଞͷUIʹൺ΂ͯॏཁੑ͕ߴ͍ͨΊɺଞͷཁૉͱ͸ը໘ ্Ͱͷදࣔ΍ಈ࡞͕ҟͳΔ ֤ཁૉ͕ݱΕΔॱংͱɺͲͷλΠϛϯάͰϑϩʔςΟ ϯάૢ࡞ϘλϯΛදࣔ͢Ε͹Α͍͔Λݕ౼͢Δඞཁ͕

50. ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ ԣʹฒͿෳ਺ͷը໘্ʢλϒͳͲʣʹ഑ஔ͢Δϑϩʔ ςΟϯάૢ࡞ϘλϯͰ͸ɺ֤ը໘Ͱߦ͏ૢ࡞͕ҟͳΔ ৔߹ɺ֤ը໘ʹҠΔͱ͖ʹϘλϯΛҰ౓ඇදࣔʹͯ͠ ͔Β࠶දࣔ͢ΔΑ͏ʹ͢Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQ2xTS2dyWkczLTQ/components- buttons-fab-behavior_03_xhdpi_001.mp4 ૢ࡞͕ಉ͡৔߹͸ɺը໘্Ͱදࣔͨ͠··ʹ͢Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsRTUzS2ZHaVRQaDg/ components-buttons-fab-behavior_04_xhdpi_009.mp4

51. ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ λϒ෇͖ͷෳ਺ͷը໘Ͱ͸ɺը໘͕ҠΔͷͱಉ͡ํ޲ ʹϑϩʔςΟϯάૢ࡞Ϙλϯ͕ফ͑ΔΑ͏ʹͯ͠͸͍ ͚ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsengtTDU3ODd2OUU/ components-buttons-fab-behavior_05_xhdpi_009.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsOERvVC1OanYyWGc/ components-buttons-fab-behavior_06_xhdpi_009.mp4

52. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ભҠͰΑ͘ར༻͞ΕΔͷ͸ҎԼͷ̐ͭ ɾτϦΨʔ ɾπʔϧόʔ ɾΫΠοΫΞΫηε ɾϞʔϑΟϯά ϑϩʔςΟϯάૢ࡞Ϙλϯ͸ॊೈੑΛॏࢹͯ͠ઃܭ͞ Ε͍ͯΔͷͰɺ։ൃ͢ΔΞϓϦͱϘλϯΛදࣔ͢Δը ໘ʹ࠷దͳํ๏Λݕ౼ͨ͠ํ͕ྑ͍

53. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲτϦΨʔʳ ୯ʹಛఆͷૢ࡞ΛτϦΨʔͨ͠Γɺผͷ৔ॴʹҠಈ͠ ͨΓ͢Δ͜ͱ͕Ͱ͖Δ λονϑΟʔυόοΫͷ೾໲ͷΞχϝʔγϣϯ͸ɺը ໘ʹมԽΛҾ͖ى͜͢ྗͱͯ͠֎ଆʹ޿͕͍ͬͯ͘ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-YzZDR19ueE82QjA/components- buttons-fab-transition_trigger_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Rm01eGkzM1pxZDA/components- buttons-fab-transition_trigger_02.mp4

54. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲπʔϧόʔʳ ϑϩʔςΟϯάૢ࡞ϘλϯΛԡ͢ͱπʔϧόʔʹมԽͨ͠ Γը໘ΛεΫϩʔϧ͢Δͱπʔϧόʔ͕ϑϩʔςΟϯάૢ ࡞ϘλϯʹมԽͨ͠ΓͰ͖ΔΑ͏ʹͰ͖Δ πʔϧόʔʹ͸ɺؔ࿈͢Δૢ࡞ɺςΩετཝ΍ݕࡧཝɺ· ͨ͸ؾܰʹ࢖͑Δͦͷଞͷ߲໨Λ௥Ճ͢Δ͜ͱ͕Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-clFldXpZMmNhM0U/components-buttons-fab- transition_toolbar_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-RTk1QkNaZnpneHM/components-buttons-

    fab-transition_toolbar_02.mp4

55. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ εΫϩʔϧͰπʔϧόʔ͕ফ͑Δͱಛʹศརͳͷ͸ɺ ࠷ॳͷೖྗ࣌͸πʔϧόʔશମ͕ඞཁͰ͋Δ৔߹΍ɺ ௕͍ϦετͷҰ൪্·ͨ͸Ұ൪ԼΛදࣔதͷ৔߹Ͱ͋ Δ Ϣʔβʔ͕ϝΠϯίϯςϯπΛݟΑ͏ͱͯ͠εΫϩʔ ϧૢ࡞Λͨ࣌͠ʹը໘ͷදࣔྖҬΛ޿͘औΔ͜ͱ͕Ͱ ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-NzU2ZUZOZkRsbnc/components- buttons-fab-transition_scrolltoolbar_01.mp4

    http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-N0Q3NkxqeTZnVXc/components- buttons-fab-transition_scrolltoolbar_02.mp4

56. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑϩʔςΟϯάૢ࡞Ϙλϯ͕πʔϧόʔʹܗΛม͑Δ ৔߹ɺͦͷπʔϧόʔʹ͸ؔ࿈ੑͷ͋Δૢ࡞Λදࣔ͠ ͳ͚Ε͹͍͚ͳ͍

57. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲΫΠοΫΞΫηεʳ ϑϩʔςΟϯάૢ࡞ϘλϯΛԡͨ࣌͠ʹؔ࿈͢Δૢ࡞ ϝχϡʔΛϘλϯͷ্෦ʹදࣔͤ͞Δ͜ͱ͕Ͱ͖Δ ϝχϡʔ͕ݺͼग़͞Εͨޙ΋Ϙλϯ͸ը໘্ʹ࢒ͯ͠ ͓͘ ಉ͡৔ॴΛλοϓͨ࣌͠͸ɺ࠷΋Α͘࢖ΘΕΔૢ࡞Λ ༗ޮʹ͢Δ͔։͍ͨϝχϡʔ͕ด͡ΔΑ͏ʹ͢Δ

58. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑϩʔςΟϯάૢ࡞ϘλϯΛશͯͷૢ࡞ؚ͕·ΕΔϚ ςϦΞϧͷγʔτʹมԽͤ͞Δ͜ͱ΋Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Znh2YWx1VnE3NEk/components- buttons-fab-transition_speeddial_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3LWNhZHZ0WDVpems/ components-buttons-fab-transition_speeddial_02.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Mk9EVk5DRVN1cmc/components- buttons-fab-transition_card_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-V2EwR1lqcHFoVVk/components-

    buttons-fab-transition_card_02.mp4

59. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ݪଇͱͯ͠ϘλϯԡԼ࣌ʹදࣔ͢Δબ୒ࢶ͸ɺϑϩʔ ςΟϯάૢ࡞Ϙλϯࣗମ΋ؚΊ̏ʙ̒ͭͷൣғʹऩΊ Δ ͸͖ͬΓ۠ผͰ͖Δ࠷খݶͷબ୒ࢶΛఏࣔͯ͠ɺϢʔ βʔ͕બ୒ʹ໎Θͳ͍Α͏ʹ͢Δ

60. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ 3 6 2 1 7 3 6

61. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ΦʔόʔϑϩʔϝχϡʔΛϑϩʔςΟϯάૢ࡞Ϙλϯ ͷૢ࡞ϝχϡʔͱͯ͠ઃఆͯ͠͸͍͚ͳ͍ ࠷ॳͷը໘͔Β໨తͷը໘ʹҠಈ͢ΔͨΊʹλοϓ͢ Δճ਺͸ଟͯ͘΋̎ճ·Ͱʹ͢Δ΂͖Ͱ͋Δ

62. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ

63. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ Φʔόʔϑϩʔϝχϡʔͷ߲໨͸ϑϩʔςΟϯάૢ࡞ ϘλϯͰ͸ͳ͘πʔϧόʔʹ഑ஔ͢Δ

64. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ

65. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑΝΠϧܗࣜΛ௥Ճ͢ΔλΠϓͷΞϓϦͷ৔߹ɺϑϩʔ ςΟϯάૢ࡞Ϙλϯ͕λοϓ͞Εͨޙʹؔ࿈͢Δૢ࡞ ϝχϡʔʹมԽͤ͞Δ͜ͱ͕Ͱ͖Δ දࣔ͞ΕΔૢ࡞ϝχϡʔ͕ϘλϯΛؔ܎ͳ͍৔߹ɺͦ ͷૢ࡞ϝχϡʔ͸Φʔόʔϑϩʔϝχϡʔͱͯ͠഑ஔ ͢Δඞཁ͕͋Δ

66. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ

67. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑϩʔςΟϯάૢ࡞Ϙλϯʹ࿈བྷઌͷϦετΛؚΊΔ ͜ͱ΋Ͱ͖Δ ͜ͷϦετʹ͸ແؔ܎ͳૢ࡞ϝχϡʔ͸ೖΕΔ΂͖Ͱ ͸ͳ͍

68. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ

69. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲϞʔϑΟϯάʳ ϑϩʔςΟϯάૢ࡞Ϙλϯ͸ɺΞϓϦͷߏ଄ͷҰ෦Ͱ͋ΔϚς ϦΞϧͷγʔτʹܗΛม͑Δ͜ͱ͕Ͱ͖Δ ։࢝ҐஔͱऴྃҐஔͷؒΛ࿦ཧతͳํ๏Ͱߦ͜͏͢Δ Ξχϝʔγϣϯ͸ՄٯతͰ͋Δ͜ͱɺͭ·ΓมܗޙͷϚςϦΞ ϧγʔτ͔ΒϑϩʔςΟϯάૢ࡞Ϙλϯʹ໭ΕΔ͜ͱ͕ඞཁ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-bWxnMGxHUFdKbkU/components-buttons-fab- transition_morph_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-b2hwYy1wamRHbW8/components-buttons-fab-

    transition_morph_02.mp4

70. ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲશը໘දࣔʳ ϑϩʔςΟϯάૢ࡞Ϙλϯ͸ɺը໘શମΛ෴͏ϚςϦ ΞϧͷγʔτʹมܗͰ͖Δ Ұൠతʹ͜͏ͨܶ͠తͳมܗ͸ผͷίϯςϯπͷొ৔ ͱؔ࿈͚ͮΒΕΔͨΊɺมܗΛݩʹ໭͢ํ๏΍Մٯత ͳΞχϝʔγϣϯ͸ͲͪΒ͔ͱ͍͑͹࢖༻͠ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-UkhrcXZwcFh1Qlk/components- buttons-fab-transition_fullscreen_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-STJiN2FwYU4yYXM/components-

    buttons-fab-transition_fullscreen_02.mp4

71. ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ ల։ঢ়ଶͷΞϓϦόʔʹॏͶͯ഑ஔͰ͖Δ

72. ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ πʔϧόʔ΍ɺγʔτ಺ͷߏ੒Α͏ʹॏͶͯ഑ஔͰ͖Δ

73. ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ γʔτͷڥք෦෼ʹ഑ஔ͢Δ͜ͱ΋Ͱ͖Δ

74. ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ ̍ͭͷը໘ʹෳ਺ͷϑϩʔςΟϯάૢ࡞ϘλϯΛ഑ஔ ͯ͠͸͍͚ͳ͍ 1

75. ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ ̍ͭͷը໘্ʹ͋ΔݸʑͷཁૉͦΕͧΕʹϑϩʔςΟ ϯάૢ࡞ϘλϯΛ഑ஔͯ͠͸͍͚ͳ͍ 1