CSSフレームワークでつながる、デザイナーとフロントエンドエンジニア

2015/06/29にリブセンス社内勉強会Technightでの発表資料です。

Transcript

1. $44ϑϨʔϜϫʔΫͰͭͳ͕Δɺ
   σβΠφʔͱϑϩϯτΤϯυΤϯδχΞ 2015.06.29 Maya Fujiwara For ‘Technight’ at Livesense Inc.
2. Introduction UI/UX Designer at Livesense inc. ϑδϫϥϚϠ

3. Introduction ͱ͋Δɺ
   %FTJHOFSͱ'SPOUFOE
   FOHJOFFS͋Δ͋Δ Designer Front-end engineer
4. Introduction ͜ͷσβΠϯͰ͓ئ͍͠·͢ɻ
   ʢࠓͷτϨϯυΛ੝ΓࠐΜͩ࠷৽ͷσβΠϯɺ΢έ͸ؒ ҧ͍ͳ͍ʂૣ࣮͘૷ͯ͠ʂʣ Designer Front-end engineer
5. Introduction Designer Front-end engineer ϜϦͰ͢ɻ
   ʢ͜ͷϘʔμʔΛQYಈ͔͚ͩ͢Ͱɺ$44͕΋͏ߦ૿ ͑ΔΜͩΑʔɻ൚༻ੑߟ͑Ζ΍ʂͲΜͲΜෳࡶʹͳΔʂʣ
6. Introduction Designer Front-end engineer Ͳ͏ͯ͠΋͓ئ͍͠·͢ʂ
   ʢͰ͖ͳ͍Θ͚ͳ͍ͬ͠ΐʂʣ
7. Introduction Designer Front-end engineer ϜϦͰ͢ɻ
   ʢͰ͖ΔͰ͖ͳ͍ͷ໰୊͡Όͳ͍ΜͩΑʂ
 ࠓޙͷӡ༻ͷ࿩͡Όʂʣ
8. Introduction Designer Front-end engineer ϜΩʔʂʂʂʂ
9. Introduction Introduction WT ൚༻ੑ σβΠϯੑ
10. Introduction Έ͍ͨͳ͜ͱ͕Α͋͘Δ̎৬छͰ͕͢ɺ
 ͓ޓ͍͕าΈدΕͨࣄྫΛ঺հ͠·͢ɻ
11. Case study ΧϦϧ ݄೔ʹϦϦʔεͨ͠৽͍͠௞ିαΠτ
    ༩͑ΒΕͨظؒ͸̒िؒ
    ৄ͘͠͸
 bཁ݅Λࣺͯͯݕূʹग़Α͏ɻ௞ି৘ใαΠτΧϦϧͰͷ
    Ծઆ ݕূܕγεςϜ։ൃ`
12. Case study #PPUTUSBQͰٸ͍Ͱ࡞Δ
    ؒʹ߹Θͳ͍ͷͰɺσβΠϯͱϑϩϯτΤϯυίʔσΟϯά͸
 ฏߦͯ͠ߦ͏ ϑϩϯτ։ൃͷલఏ৚݅
13. Case study #PPUTUSBQͰٸ͍Ͱ࡞Δ
    ؒʹ߹Θͳ͍ͷͰɺσβΠϯͱϑϩϯτΤϯυίʔσΟϯά͸
 ฏߦͯ͠ߦ͏ ͜Ε΋ෆ͚҆ͩͲ ϑϩϯτ։ൃͷલఏ৚݅
14. Case study #PPUTUSBQͰٸ͍Ͱ࡞Δ
    ؒʹ߹Θͳ͍ͷͰɺσβΠϯͱϑϩϯτΤϯυίʔσΟϯά͸
 ฏߦͯ͠ߦ͏ ίϨةݥʂʂ ϑϩϯτ։ൃͷલఏ৚݅ ͜Ε΋ෆ͚҆ͩͲ
15. Case study ࠓ·Ͱͷ8PSLqPX Designer Front-end engineer σβΠϯͰ͖·ͨ͠ ͡Ό࣮͋૷࢝Ί·ʔ͢ Ұํ௨ߦ
16. Case study #PPUTUSBQΛ࢖͏ࠓճͷ8PSLqPX Designer Front-end engineer ϞδϡʔϧͷΧελϚΠζσ βΠϯ͕Ͱ͖࣍ୈɺϞδϡʔ ϧผʹ14%Λ౉͠·͢ 8'Λϕʔεʹ#PPUTUSBQͷ ϞδϡʔϧΛ࢖ͬͯ૊Έ࢝Ί ·͢ ಉ࣌ਐߦ
17. Case study Designer Front-end engineer Bootstrap࢖͏͚ͲɺσβΠφʔ͕Bootstrapͷ ϧʔϧΛແࢹͨ͠σβΠϯ͖࣋ͬͯͨΒͲ͏͠ Α͏ɾɾɾ
18. Case study Designer Front-end engineer σβΠϯ͕ऴΘͬͯͳ͍ஈ֊ͰίʔσΟϯάΛ ࢝Ίͯ΋Βͬͯɺ్தͰσβΠϯมߋͯ͠େख ໭ΓˍΊͪΌΊͪΌౖΒΕͨΓͦ͠͏ɾɾɾ
19. Case study Designer Front-end engineer
20. Case study 1SPKFDU
    TUBSU ͱ͔ͳΜͱ͔ݴͬͯΒΕͳ͍͠
21. Case study 
    σβΠϯϧʔϧΛҰॹʹߟ͑Δ
    
    πʔϧΛ׆༻
    
    
    ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
22. Case study 
    σβΠϯϧʔϧΛҰॹʹߟ͑Δ
    
    πʔϧΛ׆༻
    
    
    ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
23. Case study 'SPOUFOE
    FOHJOFFS͕·ͣఏҊ
    Designer Front-end engineer
24. Case study 'SPOUFOE
    FOHJOFFS͕·ͣఏҊ
    Designer Front-end engineer ͜͏͍͏ײ͡ͰσβΠϯͰ͖·ͤΜ͔ʁ
25. Case study Designer Front-end engineer ϘλϯͷαΠζ͸جຊɺ
 ̐ύλʔϯͰ͓ئ͍͠·͢ɻ
26. Case study Designer Front-end engineer ϘλϯͷαΠζ͸جຊɺ
 ̐ύλʔϯͰ͓ئ͍͠·͢ɻ ϓϥΠϚϦΧϥʔ͕ܾ·Ε͹ɺτʔ ϯ͸4"44্Ͱനͱࠇ͕ࠞͥΒΕΔ ͷͰɺ৭͸ˋͷτʔϯͰࢦఆͰ͖ ·ͤΜ͔ʁ
27. Case study ϓϥΠϚϦΧϥʔ͕ܾ·Ε͹ɺτʔ ϯ͸4"44্Ͱനͱࠇ͕ࠞͥΒΕΔ ͷͰɺ৭͸ˋͷτʔϯͰࢦఆͰ͖ ·ͤΜ͔ʁ Designer Front-end engineer ϘλϯͷαΠζ͸جຊɺ
 ̐ύλʔϯͰ͓ئ͍͠·͢ɻ 'POU
    TJ[F͸QY
    QY
    QY ͷQYඈ͹͠ͰͰ͖·͔͢ʁ
28. Case study Designer Front-end engineer #PPUTUSBQͷϧʔϧʹԊΘͳ͍͜ͱ ΋΍͍͍͚ͬͯͲɺ·ͣ૬ஊɻ
29. Case study Designer Front-end engineer ͜͜͸ڧ͘ૌٻ͍ͨ͠ͷͰɺϧʔϧ ͔Β֎ΕͨσβΠϯʹ͍ͨ͠Ͱ͢ #PPUTUSBQͷϧʔϧʹԊΘͳ͍͜ͱ ΋΍͍͍͚ͬͯͲɺ·ͣ૬ஊɻ
30. Case study ൚༻తͰɺ׌ͭັྗతͳσβΠϯΛҰॹʹ໛ࡧ͢Δɻ Designer Front-end engineer
31. Case study 
    σβΠϯϧʔϧΛҰॹʹߟ͑Δ
    
    πʔϧͷ׆༻
    
    ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
32. Case study 14%ϑΝΠϧΛϦΞϧλΠϜͰγΣΞͰ͖Δ ‘Adobe creative cloud’
33. Case study Case study
34. Case study 
    4UPSBHFܦ༝ͰϦΞϧλΠϜ14%γΣΞ
    
    ϒϥ΢β্͔ΒϑΝΠϧͷϓϨϏϡʔ
    
    ϒϥ΢β্ͰϫϯΫϦοΫͰը૾ͷ੾Γग़͠
    
    όʔδϣϯ؅ཧ
    FUD Adobe creative cloud "EPCFΞΧ΢ϯτ͕͋Δͱɺશ෦ແྉͰ࢖͑Δʂ
35. Case study 
    σβΠϯϧʔϧΛҰॹʹߟ͑Δ
    
    πʔϧͷ׆༻
    
    ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
36. Case study ͱʹ΋͔͘ʹ΋ਐḿڞ༗
37. ໿̒िؒͷ
 ɹઓ͍ͷ຤ɾɾɾ
38. Case study ੜ·Εͨ΋ͷ
39. Case study ͦͦ͜͜#PPUTUSBQ͗͢ͳ͍ݟͨ໨Ͱɺ
 #PPUTUSBQͷετϥΫνϟʔ͸ҡ࣋ͨ͠
 ௞ିαΠτ screen size 640 x1136 resolution 326 ppi (pixels per inch)
40. Case study ෭࢈෺
41. Case study Color scheme / SASS function $brand-primary: #38b16e; a { background-color: mix(#ffffff, $brand-primary, 20%); }
42. Case study Styleguide %button.btn.btn-default.btn- icon.btn-icon-train %button.btn.btn-default.btn- icon.btn-icon-area %button.btn.btn-default.btn- icon.btn-icon-search
43. Conclusion ײ૝
44. Conclusion ϦϦʔεʹؒʹ߹ͬͨɻ Designer Front-end engineer
45. Conclusion σβΠϯੑͱ൚༻ੑͷόϥϯε͕औΕͨ
 ϓϩμΫτʹͳͬͨɻ Designer Front-end engineer
46. Conclusion Designer Front-end engineer #PPUTUSBQΛ࢖ͬͨϫʔΫϑϩʔͷதͰ
 ൓ൃ͋͠͏΋ͷ͔ͱࢥ͚ͬͯͨͲɺ
    ҙ֎ͱ͓ޓ͍ͷཧղ͕ਂ·ͬͨɻ
47. Introduction WT ൚༻ੑ σβΠϯੑ
48. Conclusion Designer Front-end engineer σβΠϯͷҙࢥܾఆʹ
 ਂؔ͘Θͬͨ $44ϑϨʔϜϫʔΫ ΑΓ൚༻ੑͷߴ͍σβΠϯͱ ͸ͳʹ͔ɺཧղ͕ਂ·ͬͨ
49. Introduction WT ൚༻ੑ σβΠϯੑ
50. Conclusion WT ൚༻ੑ σβΠϯੑ
51. Introduction ൚༻ੑ σβΠϯੑ 
52. Conclusion ·ͱΊ
53. Conclusion ࣌ؒ୹ॖͷ໨తͰ$44ϑϨʔϜϫʔΫΛ
 ಋೖ͚ͨ͠Ͳ Designer Front-end engineer
54. Conclusion ৬छΛ௒͑ͨίϛϡχέʔγϣϯͱཧղ͕ ੜ·ΕΔޮՌ͕͋Γ·ͨ͠ʂ Designer Front-end engineer
55. Conclusion ΑΓԣஅతͰϑϥοτͳ։ൃΛ࣮ݱ͢Δ
 ̍πʔϧͱͯ͠΋Φεεϝ͠·͢ɻ Designer Front-end engineer
56. $44ϑϨʔϜϫʔΫͰͭͳ͕Δɺ
    σβΠφʔͱϑϩϯτΤϯυΤϯδχΞ
57. THANK YOU.
58. ࣭໰͸ࣰా͞Μ͕ड͚෇͚·͢ɻ