事例からみるアプリデザインの成長戦略とWeb Native Platform/app_design_growth

https://2019.kfug.jp/session/sakakibaramasahiko/

Transcript

1. ࣄྫ͔ΒΈΔ
   ΞϓϦσβΠϯͷ੒௕ઓུͱ8FC/BUJWF1MBUGPSN
   GSPOULBOTBJ#
   'SPOU$POGΞϓϦ
   IUUQTLGVHJPOJDGSBNFXPSLKQ
   

   View Slide

2. ࣗݾ঺հ
   !SEMBCP
   Ұൠࣾஂ๏ਓ
   ϦϨʔγϣϯσβΠϯݚڀॴ୅දཧࣄ
   Ұൠࣾஂ๏ਓ
   "SFB*OOPWBUJPO"MJBODF$50
   *POJD+BQBO6TFS(SPVQ
   ୅ද
   

   View Slide

3. ίϯτϦϏϡʔλʔ
   ionic-team/ionic
   ionic-team/starters
   ionic-team/ionic-cli
   ionic-team/ionic-docs
   ionic-team/ionic-react
   -conference-app
   GoogleChrome/lighthouse
   

   View Slide

4. <1SPEVDU>SBCJGZ$%/
   FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E
   ʮը૾͕ͳ͔ͳ͔දࣔ͞Εͳ͍ʯΛվળɻ
   

   View Slide

5. 
   <1SPEVDU>UJQTZT
   

   View Slide

6. ϝσΟΞܝࡌ
   w ςϨϏʮ50,:0.9ʯʢʣ
   w ࡶɹࢽʮ$-"44:ʯʢʣ
   w ςϨϏʮεΫʔϧֵ໋ʯʢʣ
   w ࡶɹࢽʮXJUIʯʢʣ
   

   View Slide

7. ϓϩμΫτͷເ
   

   View Slide

8. ϓϩμΫτ։ൃͷເ
   όζͬͯࢿۚௐୡ
   ޿ࠂग़ߘ
   ೔ͰສϢʔβ֫ಘ
   ͍͖ͳΓޏ༻
   

   View Slide

9. ϓϩμΫτ։ൃͷເ
   IUUQTUB⒎CMPHCICDPKQ FJE
   

   View Slide

10. View Slide

11. ͍͖ͳΓόζΔϓϩμΫτͷཪଆ
    w͍͖ͳΓສϢʔβ͕͖ͨΒɺͭͷෆ۩߹Λສਓ͕ମݧ
    w໎͏6*͕ͭ͋Ε͹ɺສਓ͕໎ࢠ
    wαʔόεϖοΫ͸༧ଌͰ͖ͯΔʁ
    w4MPX2VFSZ͸ڐ༰ൣғ಺Ͱ͔͠ͳ͍ʁຊ౰ʁ
    w໰͍߹ΘͤͷରԠମ੍͋Δʁ
    w૝ఆ֎ͷ࢖ΘΕํ͠ͳ͍ʁ
    w૝ఆ֎ͷ࢖ΘΕํʹରͯ͠ར༻ن໿͸๏తʹେৎ෉ʁ
    

    View Slide

12. ମྗͷ͋Δاۀͷղܾํ๏
    t2.medium ݄3ઍԁ
    t2.2xlarge ݄3ສԁ
    m5d.metal ݄40ສԁ
    ºαʔό୆਺ ५୔ͳཁһ
    
    

    View Slide

13. ݱ࣮ʹཱͪ޲͔͓͏
    

    View Slide

14. UJQTZT։ൃͷ͖͔͚ͬ
    ʮग़ձ͍ΛҰॹʹ୳͠ʹ͍͘૬ख͕͍ͳ͍ʯ
    ʮஉ͡Όͳͯ͘ɺঁ༑ୡͱͷϚονϯάαΠτ͕͋Ε͹͍͍ͷʹʯ
    ʮ্ژͯ͠Ұ೥ܦͬͯͳ͍͔ΒͭΒ͍ʯ
    

    View Slide

15. UJQTZT։ൃͷ͖͔͚ͬ
    ɾ͓ۚͱ࣮੷͕ཉ͍͠
    ɾͦ΋ͦ΋࣮ྗ͕ཉ͍͠
    ɾडୗ͸ճ͠ଓ͚ͳ͍ͱࢭ·ΔϋϜελʔͷճ͠ंײ֮
    ɾ͓·͔͔ͤ͠ͳ͍ण࢘԰ɻ͓ͨͩ͠ࢼ͠Ͱͭͬͯ͘΋Βͬͯ
    Ұ݅ສɻ୭͕ೖΔͷʁ
    ɾചΓ্͛ͨ͜ͱ͕ͳ͍Ӧۀɻۀ຿վળͨ͜͠ͱͷͳ͍ίϯα
    ϧ
    ʮͭͬͨ͘ΒϢʔβ͸ਓ͸͍ΔΒ͍ͧ͠ʯ
    

    View Slide

16. ౰࣌ͷٕज़ελοΫ
    w)5.-$44ҰԠΘ͔Δ
    wK2VFSZϓϥάΠϯ࢖͑Δ
    w"OHVMBS+4ίʔυͷίϐϖͰ͖Δ
    w8PSE1SFTT·͊Ͱ͖Δ
    w1)1Կͱͳ͘ϓϩμΫτͭ͘ΕΔ
    w4XJGU·ͬͨ͘Θ͔ΒΜஅ೦ܦݧ͋Γ
    w9DPEFͷετʔϦʔϘʔυ͸8FCۀք͸΋͏௨Γա
    ࣺ͗ͯͯͨಓͩɻϗʔϜϖʔδϏϧμʔੜ੒ίʔυ͸
    ؾ࣋ͪѱ͍ͱ͍ͬͯ࢖͏ͷΛ΍ΊͨͩΖ͏ʢෛ͚੯͠
    Έʣ
    

    View Slide

17. ͱΓ͋͑ͣඞཁͦ͏ͳը໘Λ੾Γग़ͯ͠ΈΑ͏
    υϥϑτͷϓϩμΫτ
    

    View Slide

18. ʮঁ༑ୡͱग़ձ͏6*ͬͯਖ਼ղ͋Δͷʁʯ
    ͱΓ͋͑ͣඞཁͦ͏ͳը໘Λ੾Γग़ͯ͠ΈΑ͏
    ʮҟੑؒͷग़ձ͍ʹ࠷దԽ͞Εͨ6*ͬͯࢀߟʹͳΔʁʯ
    ʮϢʔβ਺গͳ͍࣌ͱଟ͘ͳ͔ͬͯΒͱಉ͡6*ʁʯ
    ʮͦ΋ͦ΋͜Ε1)1Ͱͭͬͯ͘ར༻ͯ͠΋Β͑Δʁʯ
    ʮϢʔβ͕࢖͏ίϯςΩετ͸ʁʯ
    
    

    View Slide

19. վળΛ܁Γฦ͍ͯ͘͠
    

    View Slide

20. 6*ͷ1%$"
    

    View Slide

21. ৘ใͷάϧʔϐϯά
    

    View Slide

22. Ϣʔβͷ؍࡯
    

    View Slide

23. Ϣʔβͷ؍࡯ʢԾઆݕূʣ
    

    View Slide

24. Ϣʔβͷ؍࡯ʢԾઆݕূʣ
    

    View Slide

25. 1BHFؒͷʮҙຯʯͷ౷ҰʢΧςΰϥΠζʣ
    

    View Slide

26. 1BHFؒͷʮҙຯʯͷ౷Ұ
    

    View Slide

27. ΞϓϦن໛ͱσβΠϯʢ࣌ܥྻʣ
    

    View Slide

28. ʮͲ͏΍ͬͯ࢖ͬͯཉ͍͠ʁʯʢҙਤʣ
    

    View Slide

29. 69ઃܭͷ࿩
    

    View Slide

30. 4&-&$5଎͍
    ෳ਺$16Λ༻͍ͯΫΤϦ࣮ߦ͢ΔʮύϥϨϧΫΤϦʯʢતʣ
    1PTU(*4Λ࢖ͬͯ஍ਤσʔλΛѻ͑Δʢۭؒσʔλѻ͑Δ
    ܕ͕ݫ֨ͳͷͰൺֱ͕ࣜॻ͖΍͍͢
    ϒϩοΩϯάॲཧ͕ݰਓࢦ޲
    69ʛίϯςΩετɹʕʕɹͲ͏͍͏γʔϯͰʁ
    IUUQZLB[VDPNVYDPOUFYUGPSVYEFTJHO
    

    View Slide

31. 69ʛϖϧιφɹʕʕɹ୭͕ʁ
    IUUQTNPOTUBSMBCDPNVYEFTJHO@QFSTPOB
    

    View Slide

32. 69ʛϖϧιφɹʕʕɹ୭͕ʁ
    w೔ຊͷ஍ํʹڵຯ͕͋ΔΞϥϒͷੴ༉Ԧ
    wૉ๿ͳ฻Β͕͠޷͖Ͱ͋Γɺࢁࡊ΍ݹຽՈ͕޷͖
    w݌૽ͷ͋Δͱ͜ΖͰ͸ͳ͘੩͔ͳͱ͜Ζ͕޷͖
    w͓ͦͯۚ͠Λ͔ͭͬͯ͘ΕΔ
    ͋ͳͨͷपΓʹͻͱΓͰ΋͍·͔͢ʁ
    ˞࣮࿩ʹج͍ͮͨ࿩Ͱ͢
    

    View Slide

33. 69ʛϖϧιφɹʕʕɹ୭͕ʁ
    

    View Slide

34. 69ɹʕʕɹϢʔβମݧ
    ར༻લ
    ར༻த
    ར༻ޙ
    ग़యɹ69നॻʢ೔ຊޠ൛ʣ
    ࣌ܥྻʹɺϢʔβ͕
    ମݧ͢Δࣄ࣮ɾײ৘ɻ
    

    View Slide

35. ΞϓϦͷ6TFS*OUFSGBDFͱ͸
    

    View Slide

36. ٕज़ελοΫ͔Βͷٕज़બఆ
    w΍ͬͺΓΞϓϦετΞͰ഑৴͍ͨ͠ʢϢʔβ໨ઢɺϓϩ
    όΠμ໨ઢͱ΋ʹʣ
    w͚Ͳɺ͔Β4XJGU΍+BWBΛ֮͑Δͷ͸ۤ௧
    wݱ࣮తʹ଎͍αΠΫϧͰ6*΍ػೳͷݟ௚͠Ͱ͖Δʁ
    wͻͱΓͳͷͰϋΠϒϦουΞϓϦ͡Όͳ͍ͱࢮ͵͚
    Ͳ$Θ͔ΒΜ9BNBSJOແཧɻ
    w8FCٕज़ͰΞϓϦͭͬͯ͘ΞϓϦετΞͰ഑৴ͨ͠
    ͍ʂʂ
    

    View Slide

37. *POJD'SBNFXPSL
    ʮ8FCٕज़ͰΞϓϦ6*Λ࠶ݱ͢Ε͹͍͍͡Όͳ͍ʯ
    

    View Slide

38. *POJD'SBNFXPSL.PCJMF6*
    .PCJMF6TFS*OUFSGBDF
    

    View Slide

39. *POJD'SBNFXPSL'SBNFXPSL$PNQBUJCJMJUZ
    'SBNFXPSL$PNQBUJCJMJUZʢϓϥοτϑΥʔϜͷޓ׵ੑʣ
    ʮίϯύνϏϦςΟͱ͸ɺϋʔυ΢ΣΞ΍ιϑτ΢ΣΞ͕ɺ࢓༷ͷҟͳΔ΋ͷʹஔ͖
    ׵͑ΒΕ্ͨͰ΋ɺݩ௨Γͷಈ࡞Λ͢Δͱ͍͏ঢ়ଶͷ͜ͱͰ͋Δʯ
    

    View Slide

40. *POJD'SBNFXPSLlOPOMJOFBSOBWJHBUJPO
    lOPOMJOFBSOBWJHBUJPOʢඇઢܗφϏήʔγϣϯʣ
    

    View Slide

41. *POJD'SBNFXPSL/BWJHBUJPO4UBDL
    /BWJHBUJPOTUBDLʢφϏήʔγϣϯελοΫʣ
    

    View Slide

42. $PSEPWB$BQBDJUPS
    ʮ8FC7JFXͰΞϓϦΛදࣔͨ͠Β͍͍͡Όͳ͍ʯ
    

    View Slide

43. 8FCඪ४Λϕʔεʹͨ͠ϋΠϒϦουల։
    

    View Slide

44. 'SPOU$POGΞϓϦ
    8FCΛϞόΠϧϥΠΫͳΞϓϦͱͯ͠ѻ͏͜ͱ͕Մೳ
    

    View Slide

45. 'SPOU$POGΞϓϦ
    8FCΛϞόΠϧϥΠΫͳΞϓϦͱͯ͠ѻ͏͜ͱ͕Մೳ
    IUUQTLGVHJPOJDGSBNFXPSLKQ
    

    View Slide

46. 8FCσβΠφʔ͕೔ͰεϚϗΞϓϦΛެ։ͨ͠ํ๏
    IUUQTCMPHDOUMPHOFUBSDIJWFT
    

    View Slide

47. *POJDͰ࡞ΔϞόΠϧΞϓϦ੍࡞ೖ໳
    ୯ߦຊr
    ϖʔδɹ ԁ
    IUUQTBN[OUP1"S&M
    

    View Slide

48. খͭͬͯ͘͘͞େ͖͘ҭͯΔ
    

    View Slide

49. ௕ظͷ੒௕ɾվળઓུ
    

    View Slide

50. ·ͱΊ
    w8FC੍࡞͕Ͱ͖ΔͳΒɺΞϓϦΛͭ͘Δ͜ͱ͕Ͱ͖Δ
    w41"18"ͱ͚ͯͩ͠Ͱ͸ͳ͘ɺ"QQ4UPSF(PPHMF1MBZͰ
    ഑৴Ͱ͖Δ
    w΋ͪΖΜऩೖͱ୯Ձ͸૿͑ͨɻͦͯ͠Քಇ࣌ؒݮΒͯ͠΋ఆ
    ظతʹೖͬͯ͘Δݻఆऩೖ͕ੜ·Εͨɻ
    wԿ͔͸͡Ίͨͯ͘͜͜ʹ͖ͯΔͳΒɺͥͻϓϩμΫτ։ൃͱ
    *POJDΛࢼͯ͠Έ͍ͯͩ͘͞
    

    View Slide

51. ͥͻɺ঎඼୨ʹ঎඼Λฒ΂͍ͯͩ͘͞ɻ
    

    View Slide

52. View Slide