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

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

Transcript

1. Android൛ʰϑϦϧʱʹ͓͚Δ Material Design΁ͷରԠͱ ΨΠυϥΠϯͷଊ͑ํ
2. 2 Fablic, inc. Android Application Developer தଜ
   ܙଠ @nakamuuu ϓϩϑΟʔϧ @chicken_111
3. ྦྷܭ ສ μ΢ϯϩʔυ
   
   
   ಥഁʂ 3 ϑϦϚΞϓϦʮϑϦϧʯʹ͍ͭͯ
4. 4 ϑϦϚΞϓϦʮϑϦϧʯʹ͍ͭͯ τοϓσϕϩούʔʹೝఆʂ "OESPJE
   %FWFMPQFS
   4UPSZʹܝࡌʂ
   ʢ೔ຊͷඇήʔϜσϕϩούʔͱͯ͠ॳʣ
6. 6 ֓ཁ w
   ʰϑϦϧʱʹ͓͚Δ.BUFSJBM
   %FTJHO΁ͷରԠ
   w
   .BUFSJBM
   EFTJHO
   HVJEFMJOFTʹ४ڌ͢ΔϝϦοτ
7. Android൛ʰϑϦϧʱʹ͓͚Δ Material Design΁ͷରԠ 7
8. .BUFSJBM
   EFTJHO
   HVJEFMJOFTͷެ։
   ೥݄ 8 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ
9. .BUFSJBM
   %FTJHO 9 ϑϦϧʹ͓͚ΔMaterial Design΁ͷରԠ .BUFSJBM
   JT
   .FUBQIPS
   ݱ࣮ੈքͷ෺ཧ๏ଇΛద༻ͨ͠ϚςϦΞϧͷ֓೦ #PME
   HSBQIJD
   JOUFOUJPOBM
   ҹ࡮෺σβΠϯΛԠ༻ͨ͠େ୾͔ͭҙࣝతͳσβΠϯ .PUJPO
   QSPWJEFT
   NFBOJOH
   ޮՌతͰҰ؏ͨ͠ҙຯͷ͋ΔΦϒδΣετͷಈ͖
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ʹ४ڌ͢ΔϝϦοτ ࠓ೔͓࿩͢͠Δͷ͸ʜ .BUFSJBM
    EFTJHO
    HVJEFMJOFTʹ४ڌ͢Δ
    ։ൃऀଆʹͱͬͯͷϝϦοτ
16. 16 Material design guidelinesʹ४ڌ͢ΔϝϦοτ ᶃ
    ΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ
17. 17 Material design guidelinesʹ४ڌ͢ΔϝϦοτ - ΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ w
    ඒతɾ৘ૢతͳײੑʹΑΔ෦෼͕େ͖͍ʮσβΠϯʯ ͷྖҬΛۤखͱ͢ΔΤϯδχΞ͸ଟ͍
    w
    .BUFSJBM
    EFTJHO
    HVJEFMJOFTͰ͸σβΠϯͷࢥ૝͕ ࿦ཧతʹݴޠԽ͞Εɺ࢓༷ʹམͱ͠ࠐ·Ε͍ͯΔ
    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
    %FTJHO
    4VQQPSU
    -JCSBSZͰ༻ҙ͞Ε ͍ͯΔ7JFXΛ࢖༻ .BUFSJBM
    %FTJHOʹ৐͔ͬΔ͜ͱͰ
    গͳ͍޻਺ͰϦονͳମݧΛ࣮ݱ
24. 24 Material design guidelinesʹ४ڌ͢ΔϝϦοτ .BUFSJBM
    EFTJHO
    HVJEFMJOFTʹ४ڌ͢Δ
    ։ൃऀଆʹͱͬͯͷϝϦοτ ᶃ
    ΤϯδχΞͷσβΠϯʹର͢ΔҙࣝͷมԽ ᶄ
    ϑϨʔϜϫʔΫͰ༻ҙ͞Ε͍ͯΔ
    ίϯϙʔωϯτͷ࢖༻ʹΑΔ޻਺ͷ࡟ݮ
25. ·ͱΊ 25
26. 26 ·ͱΊ w
    .BUFSJBM
    %FTJHO΁ͷରԠʹ͸࢖͍উख΍Τϯήʔ δϝϯτͷ޲্ͷଞʹɺ։ൃऀʹͱͬͯͷϝϦοτ ΋ଘࡏ͢Δ
    w
    طଘΞϓϦΛରԠͤ͞Δͷ͸େ͖ͳ޻਺͕ൃੜ͢Δ ͕ɺϥΠϒϥϦͷఏڙͳͲͰɹରԠ͠΍͍͢؀ڥ͸ ੔͖͍ͬͯͯΔ ·ͩ.BUFSJBM
    %FTJHOʹରԠͰ͖͍ͯͳ͍ͷͳΒ վΊͯ΋͏Ұ౓ɺ
    ରԠΛݕ౼ͯ͠Έͯ͸Ͳ͏Ͱ͠ΐ͏͔ʁ
27. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ