Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android版『フリル』におけるMaterial Designへの対応とガイドラインの捉え方

C4221ba79492601eb59a9ef5d4f4bbaa?s=47 nakamuuu
January 24, 2017

Android版『フリル』におけるMaterial Designへの対応とガイドラインの捉え方

App Talk Night by Relux での発表資料です。
https://connpass.com/event/47649/

C4221ba79492601eb59a9ef5d4f4bbaa?s=128

nakamuuu

January 24, 2017
Tweet

More Decks by nakamuuu

Other Decks in Technology

Transcript

  1. Android൛ʰϑϦϧʱʹ͓͚Δ Material Design΁ͷରԠͱ ΨΠυϥΠϯͷଊ͑ํ

  2. 2 Fablic, inc. Android Application Developer தଜܙଠ @nakamuuu ϓϩϑΟʔϧ @chicken_111

  3. ྦྷܭ ສ μ΢ϯϩʔυ ಥഁʂ 3 ϑϦϚΞϓϦʮϑϦϧʯʹ͍ͭͯ

  4. 4 ϑϦϚΞϓϦʮϑϦϧʯʹ͍ͭͯ τοϓσϕϩούʔʹೝఆʂ "OESPJE%FWFMPQFS4UPSZʹܝࡌʂ ʢ೔ຊͷඇήʔϜσϕϩούʔͱͯ͠ॳʣ

  5. None
  6. 6 ֓ཁ wʰϑϦϧʱʹ͓͚Δ.BUFSJBM%FTJHO΁ͷରԠ w.BUFSJBMEFTJHOHVJEFMJOFTʹ४ڌ͢ΔϝϦοτ

  7. Android൛ʰϑϦϧʱʹ͓͚Δ Material Design΁ͷରԠ 7

  8. .BUFSJBMEFTJHOHVJEFMJOFTͷެ։ ೥݄ 8 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ

  9. .BUFSJBM%FTJHO 9 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ .BUFSJBMJT.FUBQIPS ݱ࣮ੈքͷ෺ཧ๏ଇΛద༻ͨ͠ϚςϦΞϧͷ֓೦ #PME HSBQIJD JOUFOUJPOBM ҹ࡮෺σβΠϯΛԠ༻ͨ͠େ୾͔ͭҙࣝతͳσβΠϯ

    .PUJPOQSPWJEFTNFBOJOH ޮՌతͰҰ؏ͨ͠ҙຯͷ͋ΔΦϒδΣετͷಈ͖
  10. "OESPJE൛ϑϦϧ.BUFSJBM%FTJHOରԠ ೥݄ 10 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ

  11. 11 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ W ೥݄ W ೥݄ W ೥݄

  12. 12 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ w.BUFSJBM%FTJHOରԠޙ΋౓ͷ େن໛ϦχϡʔΞϧ wࡉ͔ͳ෦෼ͰΨΠυϥΠϯʹ४ڌ͠ ͍ͯͳ͔ͬͨ෦෼΋ஞ࣍վળ Կނͦ͜·Ͱͯ͠ .BUFSJBM%FTJHOରԠʁ W

    ೥݄
  13. Material design guidelinesʹ ४ڌ͢ΔϝϦοτ 13

  14. 14 Material design guidelinesʹ४ڌ͢ΔϝϦοτ .BUFSJBM%FTJHO΁ͷରԠ wΞϓϦͷ࢖͍উखͷ޲্ wϢʔβʔΤϯήʔδϝϯτपΓͷվળ

  15. 15 Material design guidelinesʹ४ڌ͢ΔϝϦοτ ࠓ೔͓࿩͢͠Δͷ͸ʜ .BUFSJBMEFTJHOHVJEFMJOFTʹ४ڌ͢Δ ։ൃऀଆʹͱͬͯͷϝϦοτ

  16. 16 Material design guidelinesʹ४ڌ͢ΔϝϦοτ ᶃ ΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ

  17. 17 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ wඒతɾ৘ૢతͳײੑʹΑΔ෦෼͕େ͖͍ʮσβΠϯʯ ͷྖҬΛۤखͱ͢ΔΤϯδχΞ͸ଟ͍ w.BUFSJBMEFTJHOHVJEFMJOFTͰ͸σβΠϯͷࢥ૝͕ ࿦ཧతʹݴޠԽ͞Εɺ࢓༷ʹམͱ͠ࠐ·Ε͍ͯΔ

    w͜Ε͚ͩͷΨΠυϥΠϯΛࣾ಺Ͱಠࣗʹ੔උ͢Δͷ͸೉͠ ͍ͷͰ͸ʁ
  18. 18 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ wΤϯδχΞ΋ΨΠυϥΠϯ͑͞೺Ѳ͍ͯ͠Ε͹ɺɹ ڞ௨ͷ஌ࣝʢʹݴޠʣΛ্࣋ͬͨͰσβΠφʔͱ΍ ΓऔΓͰ͖Δ w͜͏͍ͬͨ΍ΓऔΓ͸Ҏલ͔Β΋͕͋ͬͨɺࠜڌ͕ࣔͤΔ

    ͷͱࣔͤͳ͍ͷͱͰ͸େ͖ͳҧ͍͕ʜ ड͚਎ʹͳΓ͕ͪͳ ΤϯδχΞͷσβΠϯʹରͯ͠ͷҙࣝʹมԽ
  19. 19 Material design guidelinesʹ४ڌ͢ΔϝϦοτ ᶄ ϑϨʔϜϫʔΫʹ৐͔ͬΔ͜ͱͷࢫຯ

  20. 20 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ϑϨʔϜϫʔΫʹ৐͔ͬΔ͜ͱͷࢫຯ wجຊతʹϑϨʔϜϫʔΫͰ༻ҙ͞Ε͍ͯΔʮඪ४ʯ ͱݴΘΕΔ6*͔Β཭ΕΔ΄Ͳ࣮૷ͷίετ͸্͕Δ wؤு࣮ͬͯ૷ͨ͠ʮඪ४Ͱ͸ͳ͍6*ʯͰୡ੒͞ΕΔ Ϣʔβʔମݧͷ޲্͸ͲΕ΄Ͳ͔Λߟ͑Δ

  21. 21 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ϑϨʔϜϫʔΫʹ৐͔ͬΔ͜ͱͷࢫຯ wʮඪ४ʯͱݴΘΕΔ6*ʢ)PMPςʔϚʣ͕Ϧονͳɹ ମݧΛੜΈग़ͤΔ΋ͷͰ͸ͳ͔ͬͨ wͦ΋ͦ΋ʮඪ४ʯʹै͍ͬͯͳ͍ΞϓϦ͕ଟ͔ͬͨ ͨΊɺʮඪ४ʯͰͳ͘ͳΔ͜ͱͰͷϦεΫ͕௿͍

    ࠓ·Ͱͷ"OESPJEΞϓϦ͸ʜ
  22. 22 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ϑϨʔϜϫʔΫʹ৐͔ͬΔ͜ͱͷࢫຯ wʮඪ४ʯͱݴΘΕΔ6*Ͱ΋े෼ʹϦονͳϢʔβʔ ମݧΛ࣮ݱ͢Δ͜ͱ͕Մೳʹͳͬͨ wʮඪ४ʯʹै͏ΞϓϦ͕૿͑ɺʮඪ४ʯͰͳ͘ͳΔ ͜ͱͰͷϦεΫ͕ߴ·ͬͨ

    .BUFSJBM%FTJHOͷొ৔ޙ
  23. 23 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ϑϨʔϜϫʔΫʹ৐͔ͬΔ͜ͱͷࢫຯ ঎඼ը໘ͷվमʢ೥݄ʣ wෳࡶͳεΫϩʔϧ࣌ͷΤϑΣΫτ ΛؚΉϨΠΞ΢τ΋؆୯ʹ࣮૷ w%FTJHO4VQQPSU-JCSBSZͰ༻ҙ͞Ε

    ͍ͯΔ7JFXΛ࢖༻ .BUFSJBM%FTJHOʹ৐͔ͬΔ͜ͱͰ গͳ͍޻਺ͰϦονͳମݧΛ࣮ݱ
  24. 24 Material design guidelinesʹ४ڌ͢ΔϝϦοτ .BUFSJBMEFTJHOHVJEFMJOFTʹ४ڌ͢Δ ։ൃऀଆʹͱͬͯͷϝϦοτ ᶃΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ ᶄϑϨʔϜϫʔΫͰ༻ҙ͞Ε͍ͯΔ ίϯϙʔωϯτͷ࢖༻ʹΑΔ޻਺ͷ࡟ݮ

  25. ·ͱΊ 25

  26. 26 ·ͱΊ w.BUFSJBM%FTJHO΁ͷରԠʹ͸࢖͍উख΍Τϯήʔ δϝϯτͷ޲্ͷଞʹɺ։ൃऀʹͱͬͯͷϝϦοτ ΋ଘࡏ͢Δ wطଘΞϓϦΛରԠͤ͞Δͷ͸େ͖ͳ޻਺͕ൃੜ͢Δ ͕ɺϥΠϒϥϦͷఏڙͳͲͰɹରԠ͠΍͍͢؀ڥ͸ ੔͖͍ͬͯͯΔ ·ͩ.BUFSJBM%FTJHOʹରԠͰ͖͍ͯͳ͍ͷͳΒ վΊͯ΋͏Ұ౓ɺ

    ରԠΛݕ౼ͯ͠Έͯ͸Ͳ͏Ͱ͠ΐ͏͔ʁ
  27. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ