フロントエンドの課題を啓蒙する方法

ここ数年 Web フロントエンドの技術は飛躍的に改善し、ネイティブアプリとは異なる魅力と可能性を示し始めています。新しい技術を取り入れたり、ワークフローの改善に没頭するプロフェッショナルは少なくないですが、技術者視点で周りに伝わり難い場合があります。デザインでよく言われる『ユーザー視点』とは、サイトやアプリを使う人々のことを指すだけでなく、一緒の働く人たちも含まれます。

私たちは「伝わらない」と思うと同時に、相手も「分かりにくい」と考えているはずです。このギャップを埋めるためにできることを幾つか紹介します

Transcript

1. View Slide

2. ϋ η Ψ ϫ Ϡ ε ώ α
   σβΠφʔ
   اըɾ੍࡞ɾίϯαϧςΟϯά
   ϥΠλʔɾεϐʔΧʔ
   

   View Slide

3. σβΠϯ͕͠΍͍͢؀ڥΛσβΠϯ͢Δ
   

   View Slide

4. 1995 1997 1999 2001 2003 2005 2007 2009 2011 2013
   250
   500
   750
   1000
   1250
   Enders Analysis
   εϚʔτϑΥϯͱύιίϯͷൢച୆਺ൺֱ εϚʔτϑΥϯ
   ύιίϯ
   

   View Slide

5. View Slide

6. ೖޱ͕ιʔγϟϧϝσΟΞ
   ༻͕ࡁΊ͹௚ؼ͢Δ
   ๲େͳίϯςϯπྔ
   

   View Slide

7. 2016 Mobile Benchmark Report (Adobe)
   γϣοϐϯά ݈߁ ϝσΟΞ ϑΝΠφϯε
   60ˋ 55ˋ 54ˋ
   54ˋ
   ճҎԼ͔͠ىಈ͞Ε͍ͯͳ͍ΞϓϦͷׂ߹
   

   View Slide

8. View Slide

9. ౰೔
   ΠϯτϩμΫγϣϯ
   ֓ཁ
   ஫ҙࣄ߲
   λΠϜςʔϒϧ
   ηογϣϯ಺༰
   ͓໰͍߹Θͤ
   ࢀՃਃ͠ࠐΈϘλϯ
   ࢀՃਃ͠ࠐΈϘλϯ
   ࢀՃਃ͠ࠐΈϘλϯ
   ౰೔·ͰͷྲྀΕ
   ΠϯτϩμΫγϣϯ
   ֓ཁ
   ஫ҙࣄ߲
   λΠϜςʔϒϧ
   ηογϣϯ಺༰
   ΞΫηεํ๏
   ౰೔·ͰͷྲྀΕ
   

   View Slide

10. View Slide

11. github.com/yhassy/tnwc-remix
    

    View Slide

12. ՄมσβΠϯ͕Ͱ͖Δπʔϧͷग़ݱ
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. σβΠϯγεςϜ
    ݪଇ جຊϏδϡΞϧ 6* ίʔυ
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. ٕज़΋σβΠϯπʔϧ΋ྑ͍ײ͡ʂ
    

    View Slide

21. ࢓ࣄ؀ڥΛม͑ΔΩοΧέ
    πʔϧɾख๏ ϚΠϯυηοτ
    

    View Slide

22. σβΠϯγεςϜΛ
    ಋೖ͍ͨ͠Ͱ͢
    ໘౗Ͱ͢
    අ༻ରޮՌ͕෼͔Βͳ͍
    ଞʹ͢Δ͜ͱ͋Δ
    جຊɺมԽ͸޷·Ε·ͤΜ
    

    View Slide

23. View Slide

24. ؔΘΔਓ਺Ͱ՝୊ղܾ͕ෳࡶԽ
    ͻͱΓͩͬͨΒ
    ؆୯ͳͷʹʜɻ
    

    View Slide

25. ૊৫ͷେ͖͞ͰมΘΔίϛϡχέʔγϣϯͷ՝୊
    ஥ؒ
    ஌͍ͬͯΔਓಉ࢜
    ૑ۀऀͷϏδϣϯʹڞײ
    

    View Slide

26. ૊৫ͷେ͖͞ͰมΘΔίϛϡχέʔγϣϯͷ՝୊
    ̩ࣈूஂ
    ઐ໳Ո͕ೖΓ࢝ΊΔ
    ෳ਺ͷ໾ׂΛՌͨ͢
    

    View Slide

27. ૊৫ͷେ͖͞ͰมΘΔίϛϡχέʔγϣϯͷ՝୊
    νʔϜϫʔΫ
    େ࿮ͳ෦ॺ͕Ͱ͖Δ
    ໾ׂ෼୲΍ϫʔΫϑϩʔ
    

    View Slide

28. ૊৫ͷେ͖͞ͰมΘΔίϛϡχέʔγϣϯͷ՝୊
    ϛχϐϥϛου
    ֊૚Խ૊৫
    ܾࡋݖͷෳࡶԽ
    

    View Slide

29. ૊৫ͷେ͖͞ͰมΘΔίϛϡχέʔγϣϯͷ՝୊
    খࣾձ
    إ͕෼͔Βͳ͍ਓଓग़
    Ϟνϕʔγϣϯ΋༷ʑ
    

    View Slide

30. ड஫ɾ੍࡞
    ಺੡ɾӡ༻
    

    View Slide

31. ฉ͖खͷϚΠϯυηοτΛ੔ཧ͢Δ
    Ըܙ
    ॏՙ
    ༏ઌॱҐ
    

    View Slide

32. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    ฉ͖खͷ՝୊૊৫ʹ՝ͤΒΕͨ࢓ࣄ
    ௚઀తͳϝϦοτ
    େࣄʹ͍ͯ͠ΔՁ஋؍
    

    View Slide

33. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    

    View Slide

34. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    ୹੍͍࡞ظؒ
    ૿͑Δ੹೚ͱ࢓ࣄྖҬ
    मਖ਼ͷखؒ
    

    View Slide

35. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    ॏՙΛղܾ͢ΔԿ͔͕ཉ͍͠
    པΓʹͳΔਓͱࢥΘΕ͍ͨ
    ૣ͘࡞ΕΔΑ͏ʹͳΓ͍ͨ
    

    View Slide

36. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    पΓ͔ΒධՁ͞ΕΔ
    ࢓ࣄਓͱͯ͠࿹Λຏ͚Δ
    εΩϧΞοϓʹ௚݁͢Δ͜ͱ
    

    View Slide

37. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    ࣗ෼ࢹ఺Ͱ͸ͳ͘ɺ
    ϚΠϯυηοτʹڹ͘ఏҊ
    

    View Slide

38. σβΠφʔͷ࢓ࣄ؀ڥͰͰ͖Δ͜ͱ͸ʁ
    ίʔυϕʔεͷ
    σβΠϯγεςϜ
    ԕ͍
    ೔ʑ׳Ε਌͠ΜͰ͍Δ
    σβΠϯπʔϧ
    ͍ۙ
    

    View Slide

39. γϯϘϧͰUIΛ؅ཧ
    ঢ়ଶɾཁૉͷมߋՄೳ
    ՄมͰσβΠϯ
    

    View Slide

40. View Slide

41. View Slide

42. Ըܙ
    ॏՙ
    ༏ઌॱҐ
    ϚΠϯυηοτͷཧղ
    ৽͍͠खஈΛܒ໤͍ͨ͠
    ٕज़ɾख๏Λ࠾༻͍ͨ͠
    

    View Slide

43. ϏδωεدΓͷਓ΁ఏҊ͢Δ৔߹
    ࢢ৔ ػձ ࢓૊Έ
    

    View Slide

44. ࢢ৔ ػձ ࢓૊Έ
    ϝϦοτΛಘΔϢʔβʔ૚͸ʁ
    Ϣʔβʔ͕͍Δࢢ৔Λૂ͏ཧ༝͸ʁ
    ڝ߹ɺ΋͘͠͸ྨࣅ͢Δٕज़͸Կ͔ʁ
    

    View Slide

45. ࢢ৔ ػձ ࢓૊Έ
    ۩ମతʹͲͷΑ͏ͳ՝୊͕͋Δͷ͔ʁ
    ղܾ͢ΔϢʔβʔͷ՝୊͸Կ͔ʁ
    ͲͷΑ͏ʹղܾ͢Δͷ͔ʁ
    

    View Slide

46. Ϣʔβʔͷߦಈ͸Ͳ͏มΘΔ͔ʁ
    ݻఆඅɾมಈඅ͸ͲΕ͘Β͍͔ʁ
    Ϣʔβʔ͕૿͑ͨΓɺརӹΛ্͛ΔݟࠐΈ͸ʁ
    ࢢ৔ ػձ ࢓૊Έ
    

    View Slide

47. ࢢ৔ ػձ ࢓૊Έ
    ਺஋ɾσʔλΛΈͤΔ
    σϞΛݟͤΔ
    

    View Slide

48. ӦۀϞʔυͰଞΛר͖ࠐΈͳ͕ΒఏҊ
    

    View Slide

49. ૬खͷϚΠϯυηοτΛཧղͨ͠ձ࿩
    

    View Slide

50. ͔Β"."Λ։࠵͠·͢
    

    View Slide