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

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

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

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

Taishi Takeichi

June 24, 2015
Tweet

More Decks by Taishi Takeichi

Other Decks in Technology

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,ɻ
    Լه·Ͱؾܰʹ࿈བྷ͍ͩ͘͞ɻ
    [email protected]!OFYOJLLFJDPKQ

    View Slide

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

    View Slide