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

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

Yasuhisa Hasegawa
February 25, 2017

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

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

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

Yasuhisa Hasegawa

February 25, 2017
Tweet

More Decks by Yasuhisa Hasegawa

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. github.com/yhassy/tnwc-remix

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Ըܙ
    ॏՙ
    ༏ઌॱҐ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide