日経電子版 新聞アプリとしてのUI/UX

「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。
http://connpass.com/event/16187/

Transcript

1. ೔ܦిࢠ൛
   ৽ฉΞϓϦͱͯ͠ͷ6*69
   ೔ຊܦࡁ৽ฉࣾɹ෢ࢢେࢤ
   
   

   View Slide

2. ɾେֶଔۀޙɺΨνͰόϯυ׆ಈɻ
   ɾ೥ɺ8FC։ൃձࣾʹೖࣾɻ8FCΤϯδχΞͱͯ͠ಇ͘ɻ
   ɹ'9औҾͷ8FCΞϓϦ։ൃͳͲʹैࣄɻ
   ɾ೥ɺ೔ຊܦࡁ৽ฉࣾʢຊࣾʣʹೖࣾɻ
   ɹαʔϏε։ൃͷϞόΠϧΞϓϦνʔϜʹ഑ଐɻ
   ࣗݾ঺հ
   

   View Slide

3. ༗ྉձһ
   ໿ສਓ௒ɹ
   ແྉձһ
   ໿ສਓ
   ະొ࿥Ϣʔβʔ
   ໿ສ6#
   શهࣄɾશػೳ
   ԁʗ݄
   ແྉهࣄ
   ༗ྉهࣄຊʗ݄
   ແྉهࣄ
   ೔ܦిࢠ൛ͷ঺հ
   

   View Slide

4. ೔ܦిࢠ൛ͷ঺հ
   ேץɾ༦ץ
   ɹ೔ຊܦࡁ৽ฉͷ͢΂ͯͷهࣄ
   8FCץʢ೔ܦిࢠ൛ʣ
   ɹ8FCݶఆͷهࣄ
   .Zχϡʔε
   ɹ޷͖ͳ࿈ࡌ΍ؾʹͳΔΩʔϫʔυΛ΋ͱʹύʔιφϥΠζ
   

   View Slide

5. ೔ܦిࢠ൛ΞϓϦΛϦχϡʔΞϧ͠·ͨ͠
   ɾ6*69ͷେ෯ͳ࡮৽
   ɾαʔόαΠυΛ"84΁
   ɾJ04ͷϑϩϯταΠυΛ಺੡Խ
   ɹʢ"OESPJE΋಺੡ʹҠߦதʣ
   

   View Slide

6. ࠓ೔͓࿩͍ͨ͜͠͠ͱ
   ɾ৽ฉΞϓϦͷ6*69
   ɾϦχϡʔΞϧͬͯң͕௧͍
   ɾαΫαΫײΛग़ͨ͢Ίͷ࣮૷
   

   View Slide

7. ৽ฉΞϓϦͷ6*69
   

   View Slide

8. ๲େͳهࣄͱΧςΰϦ
   ৽ฉΞϓϦͷ6*69
   

   View Slide

9. ࠷େͷਓؾίϯςϯπ
   ɾ໿ϖʔδ
   ɾ໿ຊͷهࣄ
   ɾจࣈ਺͸໿ສจࣈ
   ɹ৽ॻ̎࡭෼ʂʂ
   ேץɾ༦ץ
   

   View Slide

10. εϥΠυϝχϡʔʢ̎ஈʣ
    ๲େͳهࣄ΁ͷಋઢ
    ϝϦοτɹɿ͢΂ͯͷ໘͕ը໘෼ͷԣεΫϩʔϧͰ͓͞·Δ
    σϝϦοτɿ8FCץ⁵ேץɾ༦ץ⁵.Zχϡʔεͷճ༡ੑ͕ѱ͘ͳΔ
    

    View Slide

11. λϒϝχϡʔʴεϥΠυϝχϡʔʢ̍ஈʣ
    ๲େͳهࣄ΁ͷಋઢ
    σϝϦοτɿऴΘΓͷ໘·Ͱը໘෼ͷԣεΫϩʔϧ͕ඞཁʹͳΔ
    ϝϦοτɹɿ8FCץ⁵ேץɾ༦ץ⁵.Zχϡʔεͷճ༡ੑ͕ྑ͍
    

    View Slide

12. λϒϝχϡʔʴεϥΠυϝχϡʔʢ̍ஈʣΛ࠾༻
    ๲େͳهࣄ΁ͷಋઢ
    ɾઌ಄ʹ͍ۙ໘͕Α͘ಡ·Ε͍ͯͨ
    ɾ8FCץ⁵ேץɾ༦ץ⁵.Zχϡʔεͷճ༡ੑΛॏࢹ
    ɾຊ౰͸εϥΠυϝχϡʔʹදࣔ͢Δ໘Λɺ
    ɹϢʔβʔ͕ΧελϚΠζͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ɾɾɾ
    

    View Slide

13. 1$࠷దͰ͋Δ͕Ώ͑ͷਂ͍֊૚ߏ଄
    ৽ฉΞϓϦͷ6*69
    

    View Slide

14. ேץɾ༦ץ೔෼
    8FCץτοϓͷຊ
    ଎ใ
    ேץɾ༦ץिؒ෼
    8FCץ
    ϏδωεϦʔμʔʗϚʔέοτ
    ςΫϊϩδʔʗϚωʔʗϥΠϑ
    εϙʔπʗө૾
    ଎ใ
    ݕࡧ
    اۀ৘ใ
    ༻ޠઆ໌
    #FGPSF
    ίϯςϯπྔΛ૿΍͢
    "GUFS
    

    View Slide

15. 1$αΠτʹ༝དྷͨ͠ਂ͍֊૚ߏ଄͕ɺ΋Εͳ͍ͭͯ͘͘Δɻ
    τοϓ ଎ใ Ϗδωε
    Ϧʔμʔ
    Ϛʔέοτ Ϛωʔ
    ిࢠ൛
    ςΫϊϩδʔ
    τοϓ YYY YYY YYY YYY
    τοϓ YYY YYY YYY YYY
    ேץɾ༦ץ
    ίϯςϯπྔΛ૿΍͢ͱɾɾɾ
    ɾɾɾ
    ɾɾɾ
    ϥΠϑ εϙʔπ ө૾
    ୈ̍֊૚
    ୈ̎֊૚
    ୈ̏֊૚
    ୈ̐֊૚
    

    View Slide

16. ແཧ΍Γදݱͯ͠΋ɺ࢖͍͜ͳͤͳ͍ɻ
    Ή͠Ζࠞཚ͢Δ͚ͩɻ
    ڙڅऀଆͷࣗݾຬ଍ʹͳΔɻ
    ɾୈ̍ɺୈ̎֊૚·ͰΛ͔ͬ͠Γදݱɻ
    ɾୈ̏֊૚͸࠷ѱ࢖ΘΕͳͯ͘΋͍͍ɻ
    ɾୈ̐֊૚͸දݱ͠ͳ͍ɻ
    ຊ౰͸γϯϓϧͳߏ଄ʹม͔͑ͨͬͨɾɾɾ
    ਂ͗͢Δ֊૚͸දݱ͠ͳ͍
    

    View Slide

17. ͦͷ͔ΘΓୈ̍ɾୈ̎֊૚ͷճ༡ੑΛͪΌΜͱ͋͛Δ
    εΫϩʔϧத͸अຐʹͳΒͳ͍Α͏
    ϝχϡʔ͕ফ͑Δɻ
    Լ·ͰདྷͨΒɺϝχϡʔ͕ݱΕΔɻ
    ʮ࣍͸ԿΛಡ΋͏ʯ
    

    View Slide

18. Ϣʔβʔ૚ʹΑͬͯ·ͬͨ͘ҟͳΔ࢖͍ํ
    ৽ฉΞϓϦͷ6*69
    

    View Slide

19. ҰൠతͳχϡʔεΞϓϦͷ৔߹
    هࣄҰཡ ݸผهࣄ هࣄҰཡ
    ɾҰཡͰಡΈ͍ͨهࣄΛ୳ͯ͠ɺݸผهࣄ΁ભҠ͢Δɻ
    ɾهࣄΛಡΜͩΒɺ·ͨҰཡ΁໭ͬͯɺهࣄΛ୳͢ɻ
    

    View Slide

20. εϚϗͷڊେԽ
    J04ͷΨΠυϥΠϯͰ͸ɺࠨ্ʹ໭ΔϘλϯ
    

    View Slide

21. εϚϗͷڊେԽ
    ӈखͰ͸΋͸΍ಧ͔ͳ͍ɻ
    ʢຬһిंͰ͸ͭΒ͍ʣ
    ʢ"OESPJE͸ɺ୺຤ͷ໭ΔϘλϯ͕͋Δ͔Β࿩͕ૣ͍ɻʣ
    J04ͷΨΠυϥΠϯͰ͸ɺࠨ্ʹ໭ΔϘλϯ
    

    View Slide

22. ʮJ1IPOF͸ը໘େ͖͘ͳͬͯΔ͚Ͳɺ
    ɹ໭ΔϘλϯͬͯӈखͰ࣋ͬͯͨΒ
    ɹಧ͔ͳ͍ͬ͢ΑͶʁʯ
    ʮϗʔϜϘλϯ̎ճλοϓ͢Ε͹ಧ͘Αɻʯ
    ʮɾɾɾʢͦΕΊͬͪΌ࢖͍ͮΒ͍ΑͶʣʯ
    ʮ͋ͱ͸εϫΠϓͰ໭ΔΑ͏ʹ͢Δͱ͍͍Αʯ
    88%$Ͱ"QQMFͷσβΠφʔʹฉ͍ͯΈͨ
    

    View Slide

23. ʮJ1IPOF4ͱJ1IPOFQMVTͰ͸
    ɹαΠζ͕ҧ͍͗͢Δ͔ΒɺͦΕͧΕ
    ɹ6*Λ༻ҙͨ͠ํ͕͍͍ͷʁʯ
    ʮผʹ༻ҙͯ͠΋͍͍͚Ͳɺ"QQMFͱͯ͠͸
    ɹ΋͏J1IPOF͕ελϯμʔυͩΑɻʯ
    88%$Ͱ"QQMFͷσβΠφʔʹฉ͍ͯΈͨ
    

    View Slide

24. ɾεϚʔτχϡʔε
    ɹά
    ϊγʔ
    ɹ-*/&χϡʔε
    ɹͳͲͷχϡʔεΞϓϦͰ׳Ε਌͠Μͩૢ࡞ɻ
    ɾϢʔβʔௐࠪͰ΋ɺ
    ɹ8FCץΛϝΠϯͰಡΉϢʔβʔʹ͸޷ධɻ
    εϫΠϓͰ໭Ζ͏
    

    View Slide

25. ேץɾ༦ץಡऀͷ৔߹ʢ༗ྉձһʣ
    هࣄҰཡ ݸผهࣄ ࣍ͷݸผهࣄ
    ɾݸผهࣄʹભҠͨ͠Βɺͦͷ··࣍ͷهࣄɺ࣍ͷهࣄͱಡΈਐΊΔਓ΋ɻ
    ɾهࣄΛ̍ຊ໨͔Β͢΂ͯνΣοΫ͢Δɻ
    

    View Slide

26. چΞϓϦͰ͸ɾɾɾ
    ɾεϫΠϓͰ࣍ͷهࣄɾલͷهࣄ΁ભҠͰ͖ͨɻ
    ɾͰ΋εϫΠϓ͸ʮҰཡ΁໭ΔʯͰ࢖͏ɾɾɾ
    

    View Slide

27. ɾલͷهࣄɾ࣍ͷهࣄ΁ભҠ͢ΔϘλϯΛઃஔ
    ɾը໘Լதԝͷԡ͠΍͍͢Ґஔʹ഑ஔ
    ɹʢӈखͰ΋ࠨखͰ΋ԡͤΔҐஔʣ
    લͷهࣄɾ࣍ͷهࣄ΁ͷભҠ͸ɺ্ԼͷҠಈΛ࢖͏
    

    View Slide

28. ͜ΜͳΠϝʔδ
    Ұཡ Ұཡ Ұཡ Ұཡ Ұཡ
    هࣄ
    هࣄ
    هࣄ
    ࠨӈ΁Ҡಈ͢ΔҰཡϨΠϠʔ
    ্Լ΁Ҡಈ͢ΔҰཡϨΠϠʔ
    

    View Slide

29. ϦχϡʔΞϧͬͯң͕௧͍
    

    View Slide

30. 6*Λม͑Δ͜ͱʹΑΔෆຬ
    ϦχϡʔΞϧͬͯң͕௧͍
    

    View Slide

31. 6*Λม͑Δ͜ͱʹΑΔෆຬ
    Ψϥοͱม͑Δͱ
    

    View Slide

32. 6*Λม͑Δ͜ͱʹΑΔෆຬ
    Ψϥοͱม͑Δͱ
    ʮ࢖͍ʹ͍͘͠ݟ೉͍͠ʯ
    ʮύοͱݟ͸ྑ͍Μ͚ͩͲ࢖͍ͮΒ͍ʜʯ
    ʮલͷํ͕ྑ͔ͬͨʯ
    ϦχϡʔΞϧޙͷରԠ͕େࣄɻ
    ୹ظؒͰΞοϓσʔτΛ܁Γฦ͠ɺϢʔβʔͱͷ৴པؔ܎Λங͘ɻ
    ʮૉ੖Β͍͠ΞοϓσʔτͰ͢ʯ
    ʮ·͑ͱݟҧ͑ΔΑ͏ʹ࢖͍΍͘͢ͳͬͨʯ
    ʮαΫαΫͰ͍͍ΞϓϦͰ͢ʯ
    ̋
    º
    

    View Slide

33. 6*Λม͑Δ͜ͱʹΑΔෆຬ
    ɾϑϦοΫɺεϫΠϓͳͲͷૢ࡞ײͷվળ
    ɾσϑΥϧτىಈը໘ͷઃఆ
    ɾ໘Λ·͍ͨͰͷهࣄؒͷҠಈ
    ɾ&WFSOPUF΁ͷهࣄอଘ࿈ܞ
    ͳͲͳͲɺઈࢍ಺੡։ൃதɻ
    ʬରԠதͷϢʔβʔ͔Βͷཁ๬ʭ
    

    View Slide

34. Ϣʔβʔͷҙݟͷຊ࣭Λ୳Δ
    ϦχϡʔΞϧͬͯң͕௧͍
    

    View Slide

35. ΋ͪΖΜɺվमΛݕ౼͢Δͷ͕ͩɺ
    ͦ΋ͦ΋ͳͥɺ৽ॻ̎࡭෼ͷهࣄΛॱ൪ʹಡΉͱ͍͏χʔζ͕͋Δͷ͔ɻ
    ʬԾઆʭ
    ɹɾ৽ฉ͸ݟग़͠ͷେ͖͞ͳͲͰɺॏཁ౓ʢՁ஋෇͚ʣΛදݱ͍ͯͯ͠ɺ
    ɹɹಡऀ͸ͦΕΛݟͯಡΉهࣄΛϐοΫΞοϓ͢Δɻ
    ɹɾςΩετͷهࣄҰཡΛݟ͚ͨͩͰ͸ʮՁ஋෇͚ʯ͕Θ͔Βͳ͍ɻ
    ɹɾ͔ͩΒɺͱΓ͋͑ͣॱ൪ʹಡΉɻ
    ɹɾʮՁ஋෇͚ʯ͕Θ͔ΔΑ͏ʹͳΕ͹͍͍ʁ
    ɹˠࢴ໘ͷΠϝʔδΛݟΒΕΔΑ͏ʹ͢Δɻ
    Ϣʔβʔͷҙݟͷຊ࣭Λ୳Δ
    ྫʣʮεϫΠϓͰ࣍ͷهࣄ΁Ҡಈ͍ͨ͠ʯ
    

    View Slide

36. αΫαΫײΛग़ͨ͢Ίͷ࣮૷
    

    View Slide

37. Ұཡը໘ͷεΫϩʔϧ͕ͻ͔͔ͬΔ
    αΫαΫײΛग़ͨ͢Ίͷ࣮૷
    

    View Slide

38. ʢʣݟग़ͦ͠ͷ̍
    ʢʣݟग़ͦ͠ͷ̎
    ʢʣهࣄͷެ։೔࣌
    ʢʣ༗ྉձһݶఆهࣄ͔Ͳ͏͔Λࣔ͢ΞΠίϯ
    ʢʣهࣄ಺ʹಈը͕͋Δ͔Ͳ͏͔Λࣔ͢ΞΠίϯ
    ʢʣهࣄ͕ॴଐ͢Δ࿈ࡌɾίϥϜ໊
    ʢʣهࣄຊจͷεχϖοτ
    ʢʣαϜωΠϧը૾
    ʢʣαϜωΠϧը૾ͷΫϨδοτ
    Ұཡը໘ͷεΫϩʔϧ͕ͻ͔͔ͬΔ
    දࣔཁૉ͕ଟ͍
    

    View Slide

39. Ұཡը໘ͷεΫϩʔϧ͕ͻ͔͔ͬΔ
    6*-BCFMͳͲΛ࢖ΘͣɺESBX3FDUͰ௚઀ඳըͨ͠Β଎͔ͬͨɻ
    

    View Slide

40. Ұཡը໘ͷεΫϩʔϧ͕ͻ͔͔ͬΔ
    #FGPSF "GUFS
    

    View Slide

41. Ұཡը໘ͷεΫϩʔϧ͕ͻ͔͔ͬΔ
    #FGPSF "GUFS
    "QQMFͷ৹ࠪखଓ͖த
    

    View Slide

42. σʔλऔಘޙͷอଘॲཧʹ͕͔͔࣌ؒΔ
    αΫαΫײΛग़ͨ͢Ίͷ࣮૷
    

    View Slide

43. $PSF%BUB͸ؔ࿈Λ͚ͭͨΦϒδΣΫτΛ·ͱΊͯ݅΄Ͳอଘ͢Δͱɺ
    ύϑΥʔϚϯε͕ٸܹʹམͪΔɻ
    3FBMN͸ؔ࿈Λ͚ͭͯ΋ߴ଎Ͱಈ࡞͢Δɻ
    σʔλऔಘޙͷอଘॲཧʹ͕͔͔࣌ؒΔ
    $PSF%BUBΛ΍Ίɺ3FBMNΛ૊ΈࠐΉɻ
    IUUQTSFBMNJP
    ɾهࣄ਺͕ଟ͍ʢͳΜͤ৽ॻ࡭෼ʣ
    ɾهࣄʹඥͮ͘σʔλ΋ଟ͍
    J1IPOFͳͲͷ௿εϖοΫ୺຤Ͱݦஶ
    

    View Slide

44. #FGPSF "GUFS
    σʔλऔಘޙͷอଘॲཧʹ͕͔͔࣌ؒΔ
    J1IPOFʗJ04Ͱ͋Δ೔ͷேץΛऔಘ
    

    View Slide

45. #FGPSF "GUFS
    σʔλऔಘޙͷอଘॲཧʹ͕͔͔࣌ؒΔ
    J1IPOFʗJ04Ͱ͋Δ೔ͷேץΛऔಘ
    "QQMFͷ৹ࠪखଓ͖த
    

    View Slide

46. ·ͱΊ
    

    View Slide

47. ·ͱΊ
    ɾ࣮ࡍͷ࢖ΘΕํΛపఈతʹௐ΂Δɻ
    ɾԾઆ͸ཱͯΔ͕ɺ࠷ޙ͸͓΋͍͖ͬͯ΍ͬͯΈΔ͔͠ͳ͍ɻ
    ɾϦχϡʔΞϧޙͷߴ଎1%$"͕উෛɻ
    ɾϢʔβʔͷҙݟΛ͖ͪΜͱ뱌͢Δɻ
    

    View Slide

48. એ఻͍ͤͯͩ͘͞͞ɻ
    

    View Slide

49. ೔ܦిࢠ൛Ͱ͸ɺΤϯδχΞΛืू͍ͯ͠·͢ɻ
    ɾগ͙͠Β͍ো֐͕͋ͬͨํ͕೩͑Δํ
    ɾϑϩϯτΤϯυҎ֎΋΋ͪΖΜ0,
    ɾͱΓ͋͑ͣ৬৔ͷ͍ͧͯΈ͍ͨɺͰ΋0,ɻ
    Լه·Ͱؾܰʹ࿈བྷ͍ͩ͘͞ɻ
    EH@MBC!OFYOJLLFJDPKQ
    

    View Slide

50. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide