Backlog新UIについて

http://nulab.connpass.com/event/40250/
Backlogユーザーの集い -UIデザイン大幅リニューアルを語り合いましょ会-

Transcript

1. #BDLMPH
   ৽6*ʹ͍ͭͯ גࣜձࣾψʔϥϘ ౻ాਖ਼܇ த઒༟ೋ
2. ࣗݾ঺հ த઒
   ༟ೋ
   GSPN
   ژ౎
   8FCσβΠφʔ
   —ɿւ֎υϥϚʢόΠΦϨϯεܥʣ ౻ా
   ਖ਼܇
   GSPN
   ෱Ԭ
   ιϑτ΢ΣΞ։ൃऀ
   —ɿྉཧɺԹઘ
3. #BDLMPH͸
   6*σβΠϯΛ
   Ұ৽͠·͢
4. ͓͔͛͞·Ͱ೥ w ೥Ќɺ೥ਖ਼ࣜϦϦʔε
   w ਺೥͓͖ʹ6*ϦχϡʔΞϧ
   w ࠓճ͸աڈ࠷େͷΞοϓσʔτ
5. σβΠϯมߋʂ օ༷ʹෛ୲ʜ
   ຬ଍౓௿Լʜ
   Ԍ্ʜ
6. ͳͥࠓʁ  ʮͪΐ͏Ͳ͍͍ʯΛఏڙ͠ଓ͚ΔͨΊʹ
   
   ػೳ௥ՃɺվળͷͨΊͷ౔୆
   
   ͦͷଞͷཧ༝
7. ೥େਓؾͷ8FCΞϓϦ w ཁૉؒڱΊ
   w ͢΂ͯͷػೳʹจ ࣈϥϕϧ
   w ϘʔμʔͰғΜͰ ৘ใΛ੔ཧ ʮ͘͢͝γϯϓϧͰ࢖͍΍͍͢Ͷʂʯ
8. ೥ݱࡏͷ6* w ཁૉؒ޿Ί
   w ΞΠίϯϘλϯ
   w ৭਺ɺϘʔμʔ࠷ খݶ ػೳ͕૿͑ͯΔͷʹ͖ͬ͢Γͯ͠ݟ͑Δ
9. ੈͷதͷมԽʹ͍͍ͭͯ͘ w ೔ࠒ৮ΕΔ6*ͷτϨϯυ
   w ར༻ऀ͕ײ͡Δʮͪΐ͏Ͳ͍͍ʯ͕มԽ
   w 6*ͷڞ௨ݴޠ͕มԽ ˡઃఆ ˡͦͷଞΞΫγϣϯ ʮͪΐ͏Ͳ͍͍ʯΛఏڙ͢ΔͨΊʹ
   6*΋ར༻ऀʹ߹ΘͤͯมԽ͢Δඞཁ
10. ͳͥࠓʁ  ʮͪΐ͏Ͳ͍͍ʯΛఏڙ͠ଓ͚ΔͨΊʹ
    
    ػೳ௥ՃɺվળͷͨΊͷ౔୆
    
    ͦͷଞͷཧ༝
11. ৽͍͠ػೳΛ͓ಧ͚͍ͨ͠ʂ w ཁ๬ͷଟ͍ػೳ
    w ΑΓίϥϘϨʔγϣϯΛଅਐ͢Δػೳ
    w ΑΓνʔϜͰͷ࢓ࣄָ͕͘͠ͳΔػೳ
12. ೥ܧ͗଍͠ଓ͚ͨ6* ඍົʹ੔߹͕ʜ
    ༨ന͕ʜ ಉ͡ػೳͰҧ͏ݟͨ໨ ͭͷը໘ʹ΄ͱΜͲ
    ಉ͡ػೳ͕ͭ ݸʑͱͯ͠͸ศར͚ͩͲʜ
13. ೥ܧ͗଍͠ଓ͚ͨ6* ͜ͷ΁Μେौ଺ 
    ৽ػೳ ௥Ճ͢Δ΄Ͳෳࡶʹʜ
14. w ΋͏Ұ౓શମΛ౷Ұ͠ͳ͓ͨ͢Ίͷίϯηϓτ
    w ৽ػೳΛ࣮૷͢ΔͨΊͷ౔୆ͱͳΔ6* ೥ܧ͗଍͠ଓ͚ͨ6* ৽ػೳΛ࢖͍΍࣮͘͢૷͢Δ্Ͱͷো֐
    w ֤ʑ͸ศར͕ͩશମͱͯ͠ෆ੔߹ͳՕॴ
    w ༨നɺ༨༟͕ͳ͍
15. ͳͥࠓʁ  ʮͪΐ͏Ͳ͍͍ʯΛఏڙ͠ଓ͚ΔͨΊʹ
    
    ػೳ௥ՃɺվળͷͨΊͷ౔୆
    
    ͦͷଞͷཧ༝
16. λΠϛϯάతͳ͜ͱ w #BDLMPHɺ$BDPPɺ5ZQFUBMLͷϒϥϯσΟϯά
    w άϩʔόϧઓུ
    w ։ൃऀͷ਺͕ଗ͖ͬͯͨ
17. ࣮ࡍͲ͏มΘΔͷ͔
18. w େن໛ͳը໘ߏ੒ͷมߋ
    w طଘػೳͷ࡟আ ΍Βͳ͍͜ͱ ࠓճͷϦχϡʔΞϧͷίϯηϓτ w ը໘ΛεοΩϦͤ͞Δ
    w Ϟμϯͳ6*ʹ͢Δ ΍Δ͜ͱ
19. ࠓ೔͓࿩͢Δ͜ͱ 
    ը໘ΛεοΩϦͤ͞Δʢૢ࡞ײతͳͱ͜Ζʣ
    
    Ϟμϯͳ6*ʹ͢Δʢײ֮తͳͱ͜Ζʣ
20. ྫ͑͹ɺ՝୊ͷৄࡉը໘
    ʜ ΞΠίϯ ϥϕϧͷϝχϡʔϦϯΫ ϛχίϝϯτΤσΟλ ՝୊ͷଐੑҰཡ ఴ෇ϑΝΠϧҰཡ
21. ྫ͑͹ɺ՝୊ͷৄࡉը໘
    ʜ ଟ͘ͷ৘ใ͕ݟ͍͑ͯͯɺ
    ͜Ε͸͜ΕͰ࢖͍΍͍͢ɻ
    ͚ΕͲʜ
22. ৽ػೳͷϝχϡʔ ػೳͷϝχϡʔ ܧ͗଍͠6*໰୊ ը໘͕ͲΜͲΜෳࡶʹͳͬͯ͠·͏ ϝχϡʔΛ௥Ճ͢Δεϖʔε͕ͳ͘ɺ
    ૿͑͗ͨͨ͘͢͞Μͷϝχϡʔ͔Β
    બͿͷ΋πϥ͘ͳΔ ՝୊ʹؔ࿈͢Δϝχϡʔ
23. ͞ΒʹɺεοΩϦͷ؍఺͔Β
    ͋ΒͨΊͯ6*Λݟ௚ͯ͠ΈΔͱʜ
24. ՝୊ͷৄࡉʹ͓͚ΔϝΠϯͷ৘ใ ໰୊
    ͦͷ̎ ϝΠϯͱͳΔ৘ใʹूதͮ͠Β͍
25. ͦͷपΓʹͨ͘͞Μଘࡏײͷ͋Δ
    ཁૉ͕͋Δ͜ͱͰɺຒ΋Ε͍ͯΔ ໰୊
    ͦͷ̎ ϝΠϯͱͳΔ৘ใʹूதͮ͠Β͍
26. ͜Ε͔Βઌ΋ͣͬͱ࢖͍ͬͯͨͩͨ͘Ίʹ
    ͜ΕΒͷ໰୊Λղܾ͓ͯ͘͠ඞཁ͕͋Δ
    ͱߟ͑·ͨ͠ɻ
27. ղܾํ๏
    ͦͷ ༏ઌ౓΍഑ஔΛݟ௚͠ ՝୊ͷ಺༰͕
    Ҿཱ͖ͭΑ͏ʹ
    पΓͷཁૉΛҠಈɻ
28. ՝୊໊ͱৄࡉຊจ͕
    ϫϯηοτʹͳͬͯ
    ৘ใͷྲྀΕ͕εοΩϦɻ ղܾํ๏
    ͦͷ ༏ઌ౓΍഑ஔΛݟ௚͠
29. ղܾํ๏
    ͦͷ ओཁ໨తҎ֎ͷཁૉ͸Ӆ͢ υϩοϓμ΢ϯ΍ɺ
    ંΓͨͨΈػೳͰɺ
    Ұ෦ΛӅ͠·ͨ͠ɻ
30. ͳͥӅ͢ͷ͔ʁʁ ̍ΫϦοΫ
    ૿͑Δ΍Μ ݟ͚ͭʹ͍͘ ΍Μ
31. ཁૉΛӅ͢͜ͱͰɺ
    ػೳΛ࡟আ͠ͳͯ͘΋
    ը໘΍ૢ࡞ର৅͕εοΩϦ͢Δɻ
32. w େن໛ͳը໘ߏ੒ͷมߋ
    w طଘػೳͷ࡟আ ΍Βͳ͍͜ͱ ࠓճͷϦχϡʔΞϧͷίϯηϓτ w ը໘ΛεοΩϦͤ͞Δ
    w Ϟμϯͳ6*ʹ͢Δ ΍Δ͜ͱ ૬൓͢ΔͭΛ
    ࣮ݱɻ
33. "'5&3 #&'03& ԕΊ͔Βͷൺֱ Ͱ͖Δ͜ͱ͸มΘΒͳ͍ͷʹ ը໘શମ͕εοΩϦͯ͠
    ՝୊ͷ಺༰ʹूதͰ͖Δ
    Α͏ʹͳΓ·ͨ͠ɻ
    
34. 
    ࠓճͷϦχϡʔΞϧͰ͸ɺ͜ͷߟ͑Λݩʹͯ͠શମΛվળ͍͖ͯ͠·ͨ͠
     ը໘͕εοΩϦ͢Δͱ
    ओཁͳཁૉ͕ࡍཱͬͯ
    ࡞ۀʹूதͰ͖ΔΑ͏ʹͳΔɻ
35. ࣮ࡍͷը໘ͰϓϨϏϡʔ • μογϡϘʔυ • ՝୊ͷݕࡧ • ՝୊ͷৄࡉ
36. 
    ը໘ΛεοΩϦͤ͞Δʢૢ࡞ײతͳͱ͜Ζʣ
    
    Ϟμϯͳ6*ʹ͢Δʢײ֮తͳͱ͜Ζʣ ࠓ೔͓࿩͢Δ͜ͱ
37. • 2011೥ʙ ϑϥοτσβΠϯ 2011- Windows 8 Modern UI / 2013 - iOS7 • 2014೥ʙ ϚςϦΞϧσβΠϯ 2014 - Google I/O conference • 2015೥ʙ ϑϥοτσβΠϯ 2.0 ΫϦοΫͰ͖Δ͔Θ͔Βͳ͍ͱ͍ͬͨ ϢʔβϏϦςΟ্ͷ໰୊͔Βɺ΄΅ϑϥοτɻ લճͷϦχϡʔΞϧʢ೥ʣ ͔Β೥ऑɺͦͷؒʹ
38. • ৭͸࢖͍ա͗ͳ͍ • ΞΠίϯ͸γϯϓϧʹ • ૷০͸࠷௿ݶʹ • ద੾ͳ༨നΛͱΔ Ϟμϯͳ6*Λͭ͘Δཧ࿦ɺख๏ͷ
    ڞ௨఺Λ؆୯ʹ·ͱΊΔͱ ˢσβΠϯʹ͓͍ͯɺͱͯ΋جຊతͳ͜ͱɻ
    ೔ʑมΘ͍ͬͯ͘τϨϯυʹ
    ߹Θ͍ͤͯ͘͜ͱ͕େ੾ɻ
39. ࣮ફɺ#BDLMPHతϞμϯͳ6* ͱ͍͏͜ͱͰ 
    Ϟμϯͳ6*ͷཧ࿦ʹଇͬͯ΍ͬͨ͜ͱ
    
40. ৭͸࢖͍ա͗ͳ͍ ςʔϚΧϥʔΛ࠷௿ݶʹɺ
    ڞ௨Ͱ࢖༻͢Δ৭ʹ͸ɺͳΔ΂͘ҙຯΛ࣋ͨͤΔ
41. ΞΠίϯ͸γϯϓϧʹ Χϥϑϧͳ1/(ˠγϯϓϧͳ୯৭ͷ47(ʹͳΔ͜ͱͰ
    ͍Ζ͍Ζͳղ૾౓ʹରԠɺ$44͔Β৭มߋͰ͖Δ
    
42. ૷০͸࠷௿ݶʹ ܁Γฦ͠࠶ར༻ՄೳͳίϯϙʔωϯτΛ࢖͏͜ͱʹΑͬͯɺ ແବͳ૷০͕ݮΓɺҰ؏ੑΛ࣋ͨͤΔ͜ͱ͕Ͱ͖Δ
43. ద੾ͳ༨നΛͱΔ ద੾ͳ༨നͰάϧʔϐϯάɺແବͳғΈ΍എܠ৭͸ͱΔɻ
    จࣈαΠζ΍ߦؒ΋ௐ੔͠ɺจষ΋ಡΈ΍͘͢ "'5&3 #&'03&
44. Ϟμϯͳ6*͸ɺ
    σβΠϯͷجຊʹཱͪฦͬͯɺ
    τϨϯυΛҙࣝ͢Ε͹ɺ
    ͳΔ΂ͯ͘͠ɺͳΔɻ
45. Ϟμϯͳ6*͸ɺͭ͘ΕΔ
46. 
    ը໘ΛεοΩϦͤ͞Δʢૢ࡞ײతͳͱ͜Ζʣ
    
    Ϟμϯͳ6*ʹ͢Δʢײ֮తͳͱ͜Ζʣ ࠓ೔͓࿩͢Δ͜ͱ #BDLMPHΒ͠͞ ʴЋ
47. #BDLMPH
    ͕େ੾ʹ͖ͯͨ͠
    ਌͠Έ΍͘͢ɺָ͍͠σβΠϯͱ
    Ϟμϯ͞ͱͷόϥϯεͰͩ͜Θͬͨ఺ w 47(ΞΠίϯ
    w ϑΝΠϧΞΠίϯ
    w ελʔ˒Ξχϝʔγϣϯ
    w ΰϦϥ
48. 47(ΞΠίϯ ੈͷதతʹ͸ελΠϦογϡ͚ͩͲ
    ͋͑ͯϞονϦͯ͠ɺ਌͠Έ΍͢͞Λԋग़ #BDLMPHΒ͍͠σβΠϯ ੈͷத
49. ϑΝΠϧΞΠίϯ ελΠϦογϡ͚ͩͲɺϑΥϧμͱϑΝΠϧͷҧ͍ ͱ͔΍ͬͺΓલͷ··ํ͕Θ͔Γ΍͍͢Ͷ
    
    ϨςΟʔφରԠͯ͠ɺ
    σβΠϯ͸ͦͷ·· ॳظ
    σβΠϯ ʢ(PPHMF
    "QQT
    ͬΆ͍ਖ਼ํܗͰࠓ෩
50. ελʔ˒Ξχϝʔγϣϯ ͩ͜ΘΓͷϨΠϯϘʔՐՖͰɺָ͠͞Λԋग़
51. ΰϦϥ ͪΐ͍ͪΐ͍ग़ͯ͘Δ
52. ࠓ೔͓࿩ͨ͜͠ͱͷ·ͱΊ 
    ը໘ΛεοΩϦͤͨ͞࿩
    
    Ϟμϯͳ6*ʹͨ͠࿩
    
    ৽6*ͷ#BDLMPHΒ͠͞Ͱͩ͜Θͬͨ࿩ σβΠϯͷجຊʹཱͪฦͬͯɺτϨϯυΛҙࣝ͢Ε͹
    Ϟμϯͳ6*͸ɺͳΔ΂ͯ͘͠ɺͳΔ ༏ઌ౓΍഑ஔΛݟ௚ͯ͠ɺओཁͳཁૉҎ֎ΛӅ͢͜ͱͰɺ
    ػೳΛ࡟আͤͣʹɺը໘͕εοΩϦͯ͠ूதͰ͖Δ
53. ௕Β͘͝ར༻͍͍͍ͨͩͯΔ
    ϢʔβʔͷΈͳ͞·ʹ͸
    ͝ෆศ͓͔͚͢Δ͔΋͠Ε·ͤΜ͕ɺ
    ͝ཧղͱ͝ڠྗͷ΄ͲΑΖ͓͘͠ئ͍͠·͢ɻ
54. Ҏ্ɺ࣮ࡍมΘͬͨ͜ͱ
55. ͘͠Έతͳ࿩ .Z42- 4FBTBS
    
    8FC8PSL BQBDIF
    UPNDBU BQBDIF
    WFMPDJUZ )5.-ςϯϓϨʔτ 8FCϑϨʔϜϫʔΫ "QQαʔό 3%# +BWB4DSJQU
    
    $44 ϑϩϯτΤϯυ BQBDIF
    WFMPDJUZ +BWB4DSJQU
    
    $44 ৽6*ͷ࣮૷ DPPLJFͰ੾Γସ͑ ϏδωεϩδοΫͷมߋ΄΅
    ҆৺͓ͯ͠࢖͍͍ͩ͘͞ طଘ6*ͷ
    มߋ΄΅
    Ќظؒத͸
    ੾Γସ͑์୊
56. ఏڙεέδϡʔϧ ݄຤ <ЌϦϦʔε>
    ݸਓ͝ͱʹ
    ޷͖ͳํΛ࢖͑Δ εϖʔε͝ͱʹॱ࣍ ݄຤ <ຊϦϦʔε>
    ৽͍͠6*͚ͩʹͳΔ શεϖʔεҰ੪
57. *&ɺʹ͍ͭͯ w ЌϦϦʔε࣌఺ʢ݄຤ʣɿະαϙʔτ
     ؒʹ߹Θͣ
    N @
    @ N
    w ຊϦϦʔε࣌఺ʢ݄຤ʣɿݶఆతʹαϙʔτ
     ࠷௿ݶͷૢ࡞͸Ͱ͖ΔΑ͏ʹͳΓ·͢
    w ࣌ظະఆɿαϙʔτഇࢭ༧ఆ
58. 0OF
    NPSF
    UIJOH
59. εΫϩʔϧͤͣ։͚Δ؆қฤू
60. ߴ଎ͳ՝୊ؒҠಈ
61. ՝୊μΠΞϩά
62. 8JLJͷݟग़͠Ϛοϓ
63. ৽6*Λ
    ΑΖ͓͘͠ئ͍͠·͢