複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK

B/43 TECH TALK〜「お金の使いすぎ」を防ぐ新しい家計管理機能開発の裏話〜 での発表資料です。
https://smartbank.connpass.com/event/314873/

Transcript

1. ෳࡶͳߏ੒ཁૉΛ࣋ͭ6*ͱͷ޲͖߹͍ํ
   ʙ৽ɾࢧग़άϥϑͰͷ࣮ྫʙ 
2.  4NBSU#BOL
   *OD
   
   J04
   
   "OESPJE
   "QQMJDBUJPO
   %FWFMPQFS தଜ
   ܙଠ !DIJDLNVVV ࣗݾ঺հ !OBLBNVVV
4. ৽ɾࢧग़άϥϑ l·ͱΊը໘z
   ͕
   lࢧग़ը໘z
   ͱͯ͠ϦχϡʔΞϧ
   🎉 
5. ৽ɾࢧग़άϥϑ ৽͍͠ࢧग़άϥϑ͸
   lߏ੒ཁૉ͕ଟ͍z
   ͷ͕ಛ௃  શମ༧ࢉ ूܭظؒ ࢧग़ֹ ࢒Γ༧ࢉ άϥϑ લ݄ͷ໨҆ϥΠϯ ֹۚͷ໨੝Γ ༧ࢉͷ໨ඪઢ ʜ ʜ
6. ৽ɾࢧग़άϥϑ ࣌ؒ࣠
   
   ࢧग़ͷঢ়گ
   
   Ϣʔβʔૢ࡞Ͱද͕ࣔେ͖͘มΘΓ͏Δ  📅
   ݄ͷ్தͳΒʁ
   📝
   ༧ࢉઃఆ͕ͳ͔ͬͨΒʁ
   🔥
   ༧ࢉΛ௒͍͑ͯͨΒʁ
   👆
   άϥϑʹ৮ΕͨΒʁ
   
7.  ࠓ೔͓࿩͢͠Δ͜ͱ ςʔϚ 6*ͷߏ੒ཁૉΛ෼ղ͠
   ֤ཁૉͷݺশ΍
   ৼΔ෣͍Λఆٛ͢Δ ߏ੒ཁૉͷఆٛ ઃܭϑΣʔζʹ͓͚Δ
   lෳࡶͳߏ੒ཁૉΛ࣋ͭ6*z
   ͱͷ޲͖߹͍ํ 6*ͷදࣔʹཁ͢Δ৘ใΛ
   ໢ཏతʹ੔ཧͯ͠
   σʔλιʔεΛઃܭ͢Δ σʔλιʔεͷઃܭ 6*ʹର͢ΔϢʔβʔૢ࡞΍
   දࣔঢ়ଶΛચ͍ग़͠
   հࡏ͢Δঢ়ଶΛ੔ཧ͢Δ ΠϯλϥΫγϣϯͷ੔ཧ
8. ߏ੒ཁૉͷఆٛ
9. ߏ੒ཁૉͷఆٛ ৽͍͠ࢧग़άϥϑ͸
   lߏ੒ཁૉ͕ଟ͍z
   
   ͷ͕ಛ௃  શମ༧ࢉ ूܭظؒ ࢧग़ֹ ࢒Γ༧ࢉ άϥϑ લ݄ͷ໨҆ϥΠϯ ֹۚͷ໨੝Γ ༧ࢉͷ໨ඪઢ ʜ ʜ
10. ߏ੒ཁૉͷఆٛ 
    ͦΕͧΕͷߏ੒ཁૉͷ໋໊ 
11.  ߏ੒ཁૉͷఆٛ w ଞͷߏ੒ཁૉ΍σʔλ΁ͷґଘ͕গͳͦ͏ͳͱ͜Ζ͔ΒਐΊΔ
    w ྫ
    
    ೔෇ͷ໨੝ΓʢूܭظؒͷΈʹґଘʣ
    w ྫ
    
    ֹۚͷ໨੝Γʢࢧग़ֹͷ࠷େ஋ͷΈʹґଘʣ
    w ʮ࠲ඪฏ໘ʢ໨੝ΓؚΉʣˠάϥϑຊମˠͦͷଞͷ෇ଳ৘ใʯͷ
    ॱͰৼΔ෣͍ΛܾΊ͍ͯͬͨ 
    ߏ੒ཁૉ୯ҐͰৼΔ෣͍Λܾఆ
12.  ߏ੒ཁૉͷఆٛ w ೔෇ͷ໨੝Γ
    
    ։࢝೔ʙऴྃ೔ͷؒͷ೔༵೔ͷ೔෇Λநग़ͯ͠දࣔ
    w ֹۚͷ໨੝Γ
    
    ࠷େͷࢧग़ֹ͔Βܾఆ
    w ສ
    ສ
    ສ
    ສ
    ສ
    ʜ
    ͷ༧Ίنఆ͞Εͨ஋Λ্୺ͷֹۚʹ͢Δ
    w Լ୺ͷʮʯ͸ৗʹදࣔʢฦۚͰͷෛͷࢧग़ʹ͸ରԠ͠ͳ͍ʣ 📝
    ྫ
    
    ೔෇ͷ໨੝Γ
    
    ֹۚͷ໨੝Γʢ࠲ඪฏ໘ʣ
13.  ߏ੒ཁૉͷఆٛ ֤ߏ੒ཁૉͷදࣔʹඞཁͳ৘ใ͕໢ཏͰ͖ͨΒ
    ɹσʔλߏ଄ͷɹ΁ʜ σʔλιʔεͷઃܭ w 6*Λߏ੒͢Δ͢΂ͯͷߏ੒ཁૉʹରͯ͠ৼΔ෣͍Λܾఆ͢Δ
    w ͦͷաఔͰ֤ߏ੒ཁૉͰඞཁͱͳΔσʔλΛϦετΞοϓ͠ɺ
    ౎߹ͷΑͦ͞͏ͳσʔλߏ଄΋Πϝʔδ͓ͯ͘͠
    💭
14.  σʔλιʔεͷઃܭ
15.  σʔλιʔεͷઃܭ w ಛఆ೔࣌఺Ͱͷࢧग़ֹ΍࢒Γ༧ࢉͳͲ ʮ೔࣍ͷεφοϓγϣοτʯΛࣔ͢ ϔομʔ෦෼ άϥϑຊମ w ूܭظؒͷશମΛ௨ͨ͠ࢧग़ֹͳͲͷ ʮ࿈ଓͨ͠ਪҠʯΛࣔ͢
16. ʮ೔࣍ͷεφοϓγϣοτʯʮ࿈ଓͨ͠ਪҠʯͷ૒ํΛදࣔ͢Δ্Ͱ
    Ҋͷσʔλߏ଄Λݕ౼  σʔλιʔεͷઃܭ ɾࢧग़ֹ
    ɾ࢒Γ༧ࢉ
    ɾ໨҆ͷࢧग़ֹ ʓ݄೔ ʜ ϝΠϯάϥϑ
    ೔໨ ʜ ɾ೔෇
    ɾֹۚ ໨҆ͷάϥϑ
    ೔໨ ʜ ɾ೔෇
    ɾֹۚ
17.  σʔλιʔεͷઃܭ +40/্Ͱ҉໧తʹੜ͡͏ΔنଇΛॻ͖ग़ͯ͠ΈΔ \
    
    
    
    
    TUBSU@EBUF
    
    
    
    
    
    FOE@EBUF
    
    
    
    
    
    
    ✏
    TUBSU@EBUF
    ʙ
    FOE@EBUF
    ͷ͢΂ͯͷ೔෇ؚ͕·ΕΔ
    
    
    
    
    TOBQTIPUT
    <
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    EBUF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ✏
    /VMMͳΒ͹Ҏ߱ͷ
    ATOBQTIPUTA
    ͷશͯͷཁૉ΋/VMM
    
    
    
    
    
    
    
    
    
    
    
    
    BNPVOU
    
    
    /VMMBCMF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ✏
    /VMM͔൱͔͸
    ATOBQTIPUTA
    ͷશͯͷཁૉͰἧ͍ͬͯΔ
    
    
    
    
    
    
    
    
    
    
    
    
    HVJEF@BNPVOU
    
    
    /VMMBCMF
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    EBUF
    l
    
    
    
    
    
    
    
    
    
    
    
    
    BNPVOU
    
    
    /VMMBCMF
    
18.  σʔλιʔεͷઃܭ w σʔλϕʔε
    
    "1*αʔόʔ
    
    ϞόΠϧΞϓϦͷҰ࿈Λ௨ͯ͠ɺදݱྗ͕
    Ұ൪௿͍ഔମʹͳΓ΍͍͢ͷ͕Ϩεϙϯεʹ༻͍Δ+40/
    w දݱྗ͕௿͍ʹʮ҉໧తͳ੍໿΍/VMMBCMFͳ஋͕ੜ͡΍͍͢ʯ
    w ྫ͑͹
    4XJGU
    Ͱ͸
    FOVN
    ͷ
    BTTPDJBUFE
    WBMVF
    ʢ௚࿨ܕͷσʔλߏ଄ʣ΍ 'BJMBCMF
    *OJUJBMJ[FS
    ͳͲΛ༻͍ͯ҉໧తͳ੍໿Λຬͨ͞ͳ͍Πϯελϯεͷ ੜ੒Λ੍ݶͰ͖Δ
    w +40/Ͱදͨ࣌͠ʹ҉໧తͳ੍໿͕গͳ͘ͳΔ͔͕൑அࡐྉͱͯ͠༗༻
    w ࢧग़άϥϑͰ͸ʮ࿈ଓͨ͠ਪҠʯʹدͤͨσʔλߏ଄Λબ୒ͨ͠
19.  ΠϯλϥΫγϣϯͷ੔ཧ
20. ΠϯλϥΫγϣϯͷ੔ཧ  ৽͍͠ࢧग़άϥϑͰ͸աڈͷࢧग़܏޲΋֬ೝͰ͖Δ
    💸
21. ϔομʔ෦෼ͷ
    ظؒ
    
    ࢧग़ֹ ύʔςΟΫϧͷදࣔ
    )BQUJD
    'FFECBDL ΠϯλϥΫγϣϯͷ੔ཧ  👆άϥϑ্ͷυϥοάૢ࡞ ΠϯδέʔλͷҐஔ
    ܾࡁͨ͠ళฮ໊ͷදࣔ
22. ϑΥʔΧε͞Ε͍ͯΔ೔෇ ΠϯλϥΫγϣϯͷ੔ཧ  👆άϥϑ্ͷυϥοάૢ࡞ lૢ࡞z
    ͱ
    lදࣔz
    ͷؒʹհࡏ͢Δ
    .VUBCMF
    ͳঢ়ଶΛநग़͢Δ
    ϑΥʔΧε͞Ε͍ͯΔ೔෇ ϔομʔ෦෼ͷ
    ظؒ
    
    ࢧग़ֹ ύʔςΟΫϧͷදࣔ
    )BQUJD
    'FFECBDL ΠϯδέʔλͷҐஔ
    ܾࡁͨ͠ళฮ໊ͷදࣔ ʢ೔෇ͷมಈʣ
23. ΠϯλϥΫγϣϯͷ੔ཧ lૢ࡞z
    ͱ
    lදࣔz
    ͷؒʹհࡏ͢Δঢ়ଶΛநग़͢Δ͜ͱͰ
    4XJGU6*
    
    +FUQBDL
    $PNQPTF
    Ͱͷ࣮૷ํ਑΋ఆ·Δ 
24. ·ͱΊ
25.  ·ͱΊ ςʔϚ ઃܭϑΣʔζʹ͓͚Δ
    lෳࡶͳߏ੒ཁૉΛ࣋ͭ6*z
    ͱͷ޲͖߹͍ํ 6*ͷߏ੒ཁૉΛ෼ղ͠
    ֤ཁૉͷݺশ΍
    ৼΔ෣͍Λఆٛ͢Δ ߏ੒ཁૉͷఆٛ 6*ͷදࣔʹཁ͢Δ৘ใΛ
    ໢ཏతʹ੔ཧͯ͠
    σʔλߏ଄Λઃܭ͢Δ σʔλιʔεͷઃܭ 6*ʹର͢ΔϢʔβʔૢ࡞΍
    දࣔঢ়ଶΛચ͍ग़͠
    հࡏ͢Δঢ়ଶΛ੔ཧ͢Δ ΠϯλϥΫγϣϯͷ੔ཧ
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ