スマートフォン向けアプリ開発におけるデザインアプローチ

2021.07.08に開催された、NTTドコモグループ合同のICTデザイン勉強会にて登壇。

Transcript

1. εϚʔτϑΥϯ޲͚ΞϓϦ։ൃʹ͓͚Δ σβΠϯΞϓϩʔν © 2021 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. NTTυίϞɹΠϊϕʔγϣϯ౷ׅ෦ʛ௽Ԭलथ 2021.07.08 Design Meeting
2. ࢲ͸ɺʰϚΠτϨʔυʱͱ͍͏εϚʔτϑΥϯ޲͚ΞϓϦΛ։ൃɾӡ༻͠ ͍ͯ·͢ɻݩʑɺ਺೥ؒఏڙ͍ͯͨ͠αʔϏεͰɺ ݱࡏϦχϡʔΞϧ͠ϕʔλςετΛߦ͍ͬͯ·͢ɻ ࠓճ͸ɺϦχϡʔΞϧʹ͓͚Δ՝୊ղܾͷΞϓϩʔνͱϚΠτϨʔυͰ࣮ ࡍʹ׆༻͍ͯ͠ΔεΫϥοϓϏϧυͳϓϩμΫτ։ൃͷख๏ʹ͍͓ͭͯ ࿩͍ͨ͠·͢ɻ Summary ຊ೔͓࿩͢Δ͜ͱ
3. ࣗݾ঺հʗϚΠτϨʔυͷ঺հ ৽ੜϚΠτϨʔυͷਐԽΛ໨ࢦͯ͠ εΫϥοϓϏϧυͳϓϩμΫτ։ൃ ՝୊ͱ·ͱΊ 01 02 03 04
4. ࣗݾ঺հʗϚΠτϨʔυͷ঺հ Chapter 01 39worksൃͷFinTechαʔϏε
5. ௽Ԭलथ Hideki Tsuruoka 2017೥NTTυίϞ৽ଔೖࣾɻ൒೥ؒͷυίϞγϣοϓݚमΛܦͯΠϊ ϕʔγϣϯ౷ׅ෦ʹ഑ଐޙɺچ൛ϚΠτϨʔυ΁ೋ൪໨ͷϝϯόʔͱ͠ ͯδϣΠϯɻओʹϚʔέςΟϯά΍UI/UXσβΠϯΛ୲౰ɻݱࡏ͸ɺLP ੡࡞ɾUI/UXͳͲͷσβΠϯۀ຿ʹՃ͑ɺΞϓϦ։ൃʹैࣄɻ ֶੜ࣌୅ʹझຯ΍ΠϯλʔϯγοϓͰiOSΞϓϦ։ൃΛܦݧ͢ΔதͰɺ HIGΛ௨ͯ͠ੈͷதͷϓϩμΫτ͕ਫ਼޼ʹσβΠϯ͞Ε͍ͯΔ͜ͱΛ஌ Γɺݱࡏ͸σβΠϯ×ΤϯδχΞϦϯάΛத৺ʹ׆ಈதɻ
6. ݸਓ౤ࢿՈ޲͚ͷࢿ࢈؅ཧαʔϏε ূ݊ձࣾαΠτ͔ΒσʔλΛεΫϨΠϐϯάɺࣗಈͰूܭ͠ՄࢹԽ͠·͢ɻ ূ݊ޱ࠲൛Ոܭ฽ΞϓϦͷΑ͏ͳαʔϏεͰ͢ɻ https://mytrade-app.jp/ ݱࡏϕʔλςετதʂ
7. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʰ౦ূϚω෦!ʱʹܝࡌ͍͖ͨͩ·ͨ͠ʂ 7 https://money-bu-jpx.com/news/article031026/?mnbtw https://money-bu-jpx.com/news/article031036/?mnbtw લฤ ޙฤ
8. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. υίϞϝϯόʔத৺ͷ಺੡։ൃମ੍ 8 ΠϯϑϥόοΫΤϯυશൠ ΧϫϞ ಺੡։ൃͰ͍ͭͬͯ͘·͢
   ֎෦ʹ͓ख఻͍Λͯ͠΋Β͍ͳ͕Β໊Ͱؤுͬͯ·͢ ! σβΠϯ6*ɾ69ΞϓϦ։ൃ !@NPOP Ϣʔβ͞Μ πϧΦΧ ূ݊σʔλܭࢉͷ։ൃ Χϫϊ
   
   ্௕
   اըܖ໿ࣄۀܭըࣾ֎࿈ܞ ααΩ ΞϓϦ γεςϜ όοΫΦϑΟε
9. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. Ϣʔβʔʹ͍ۙྖҬΛ୲͍ͬͯ·͢ 9 γεςϜ Design / FrontendྖҬ UI/UX ΞϓϦ։ൃ ϩΰ੡࡞ Ϣʔβʔ ެࣜαΠτ ੡࡞ ηΩϡϦςΟ όοΫΤϯυ Πϯϑϥ
10. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. σβΠϯۀ຿ 10 ϒϥϚωWGɺϩΰ੡࡞ɺϨΪϡϨʔγϣϯ੡࡞ɺ঎ඪొ࿥ࡁɺUI
11. ৽ੜϚΠτϨʔυͷਐԽΛ໨ࢦͯ͠ Chapter 02 ϚΠτϨʔυ෮׆ͷഎܠͱͦͷϓϩηε
12. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. എܠʛ10ສਓͷݸਓ౤ࢿՈ͕ར༻͍ͯͨ͠چ൛ʢϢʔβʔ਺ͱ՝ۚ཰ʣ 12 25,000ਓ 50,000ਓ 75,000ਓ 100,000ਓ 2017.3 2017.4 2017.5 2017.6 2017.7 2017.8 2017.9 2017.10 2017.11 2017.12 2018.1 2018.2 2018.3 2018.4 2018.5 2018.6 2018.7 2018.8 2018.9 2018.10 2018.11 2018.12 2019.1 2019.2 2019.3 2019.4 2019.5 2019.6 2019.7 2019.8 2019.9 2019.10 2019.11 2019.12 2020.01 ※内訳：有料会員ユーザー数 96% 4% Proϓϥϯ 285ਓ Basicϓϥϯ 6,382ਓ 課⾦率 6.82% 6,667ਓ 100,127ਓ ※2020೥1݄7೔ܭଌ 最⼤値 50,000ਓಥഁ 2019೥1݄ܭଌ 20,000ਓಥഁ 2018೥6݄ܭଌ 10,000ਓಥഁ 2018೥1݄ܭଌ 99,909ਓ ※2020೥1݄9೔ܭଌ 最終値 2019೥11݄27೔ܭଌ ※新規課⾦停⽌⽇
13. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. എܠʛύʔτφʔͱڠ૑͢Δ։ൃεΩʔϜ 13 υίϞ ύʔτφʔ ۀ຿ҕୗ ೲ඼ اըɾσβΠϯ ։ൃɾӡ༻ ύʔτφʔࣾͷಉ͡ΦϑΟεͷ1νʔϜͰϓϩμΫτ։ൃ͸͍ͯ͠·͕ͨ͠ ܖ໿ؔ܎͸ͬ͘͟Γͱ͜ͷΑ͏ͳεΩʔϜ
14. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. എܠʛऴྃप஌࣌ͷSNSͷ੯͠Ή੠ʢҰ෦ൈਮʣ 14 ※ϑΥϩϫʔ13.8ສਓ ※ϑΥϩϫʔ1.8ສਓ ※ϑΥϩϫʔ4.4ສਓ
15. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. എܠʛऴྃޙʹ͸Ϣʔβʔ͞Μ͕ಠࣗʹΤΫηϧͳͲͰ࡞ΓSNSʹ౤ߘʢҰ෦ൈਮʣ 15 ຊՈ
16. ՝୊΋ͨ͘͞Μ͋ͬͨ ۀ຿ҕୗܗଶ͕ނͷʢ։ൃඅɺਓ݅අʣߴίετମ࣭͕ग़དྷ্͕͍ͬͯͨ ΩϝϥԽͨ͠ػೳʹΑΓ௿UXɾϝϯςෛ୲૿ͳঢ়گͰ͋ͬͨ ϑΝϯ͸ఆண͍͕ͯͨ͠ ϚωλΠζʹۤઓ͠ϏδωεαΠυͷ੒௕ʹݶքΛײ͍ͯͨ͡ ύʔτφʔࣾͱͷϚΠϯυͷҧ͍ɾϊ΢ϋ΢ྲྀग़ʹΑΔࣾ಺ؐݩػձͷ૕ࣦ ϝϯόʔͷ੹຿͕໌֬ʹ෼ྨ͞Ε͍ͯΔ͕ނʹিಥ͢ΔՁ஋؍ ͳͲ ͪ͜Β ͪ͜Β
17. λʔήςΟϯάͱ໨ࢦ͢΂͖ํ޲ੑͷݟ௚͠ ղܾͷΞϓϩʔν - 1 ՝୊ʛϚωλΠζʹۤઓ͠ϏδωεαΠυͷ੒௕ʹݶքΛײ͍ͯͨ͡
18. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. มԽ͢Δࣾձతഎܠͱ౤ࢿ΁ͷؔ৺ 18 ࿝ޙ2,000~3,000ສԁ໰୊ ٸ৳͢Δূ݊ޱ࠲։ઃ਺ ߴ·Δ౤ࢿ΁ͷؔ৺ ಛʹָఱূ݊͸1೥ऑͰ100ສਓ૿ʛhttps://www.coindeskjapan.com/93874/ https://www.nikkei.com/article/DGXMZO45636720T00C19A6EE8000/ https://100univ.com/ ౤ࢿڭҭͷ͸͡·Γ ଜ্ੈজಛผސ໰ͷݩɺNߴ౳ֶߍʹͯ౤ࢿ෦͕ઃཱʛhttps://nnn.ed.jp/about/club/investment/ ଓʑొ৔͢Δ৽͍͠ܗͷ౤ࢿ LINEূ݊ʛhttps://invest.line.me/?tab=ONE_COIN
19. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. λʔήοτͷݟ௚͠ 19 5,300万⼈ 投資に対して 関⼼あり層 個⼈投資家 2,600万⼈ 1,300万⼈ 1,300万⼈ 投資に対して 関⼼なし層 投資に対して 悪い印象を 持っている層? 投資熱低い 投資熱⾼い 投資に関⼼がなくても経済に興味関⼼のある⼈は多い（確定拠出年⾦など） ɾ೔ʑͷۀ຿͕๩͍͠αϥϦʔϚϯ౤ࢿՈ ɾ౤ࢿʹਅ伨Ͱ೤৺ͳ౤ࢿՈʢܦݧ͸ෆཁʣ ɾࣗ෼Ͱߟ͑Δ͜ͱ͕޷͖ or େࣄͩͱࢥ͍ͬͯΔ౤ࢿՈ ɾtoB΁ͷల։Λҙࣝͯ͠ূ݊ۀքશମΛר͖ࠐΉαʔϏε΁ چϚΠτϨʔυ ɾࣗ෼Ͱ౤ࢿ ɾ໠ऀ ɾऔҾଟ͍ ɾχον૚ ͳͲ 10~30ສਓ
20. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. 5೥ޙͷϚΠτϨʔυΛ૝૾͢Δʢ๺ۃ੕ΛܾΊΔʣ 20 ূ݊౤ࢿͷະདྷ͸Ͳ͏ͳ͍ͬͯΔͷͩΖ͏ɻࣗ෼ͨͪͷࢠڙ͸גʹରͯ͠Ͳ͏޲͖߹͍ͬͯΔͷͩΖ͏ɻ΋͘͠͸ɺͲ͏޲͖߹ͬͯ͘ΕΔ ະདྷ͕࡞ΕΔͱૉఢͩΖ͏͔ɻ୯ͳΔศརπʔϧʹͱͲ·ΔͷͰ͸ͳ͘ɺ౤ࢿΛ௨ͨ͡ίϛϡχέʔγϣϯ΍ؾ͖ͮΛ༩͑ɺۀքશମ΁ͷ Өڹͱͯۚ͠༥ڭҭɺ౤ࢿڭҭ΁ͷ޿͕ΓΛΠϝʔδɻαʔϏε͕੒௕ͨ࢟͠ʢ=ͲΜͳ࢟ʹͳ͍ͬͯΔͨΊʹࠓऔΓ૊Ήͷ͔ʣΛ૝૾͢ Δ͜ͱͰɺνʔϜ಺ͷ๺ۃ੕ΛఆΊΔ͜ͱ͕ॏཁɻ ɾ౤ࢿΛ௨ͨ͡ίϛϡχέʔγϣϯʢ౤ࢿՈ͸ݩདྷͣͬͱݽಠͰ͋Δ͕ɺϚΠτϨʔυͱSNSΛഔମʹίϛϡχέʔγϣϯ͕ੜ·Ε͍ͯΔʣ ɾࣗಈूܭʹΑΓσʔλͷվ᜵΍ෆਖ਼͕Ͱ͖ͳ͍ࢿ࢈ʢଛӹʣূ໌ͱͯ͠ͷ໾ׂ→ެ։͢Δ਺ࣈ͸શͯࣄ࣮→ੈͷதͷѱҙͷ͋Δ঎ࡐԽΛऔΓআ͘ ɾݸਓͰ౤ࢿՈΛ͢Δͱ͖ʹɺඞͣඞཁͱͳΔπʔϧʢ౤ࢿՈօ͕࢖͍ͬͯΔੈքʣ ɾࢠڙ΋਌ͱҰॹʹϚΠτϨʔυΛ௨ͯۚ͠༥Λֶ΂ΔΑ͏ͳɺ౤ࢿڭҭɺۚ༥ڭҭͱͯ͠ͷഔମʢ౤ࢿͷۀքΛม͍͑ͯ͘ʣ ! ! ! ! ↑ϝϯόʔͷ૝͍Λॻ͖ग़͢Ξϯέʔτґཔʛ@2020೥3݄9೔
21. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢࢀߟʣϚΠτϨʔυͷϒϥϯυɾΞΠσϯςΟςΟɾϓϦζϜ 21 ϒϥϯυΛ࡞͍ͬͯ͘ʹ౰ͨΓʮࣗ෼Λ஌ΔʯʮۀքΛ஌Δʯͷ޻ఔ͕͋Δͱࢥ͏͕ɺͦͷલऀΛચ͍ग़͢ϑΥʔϚοτ
22. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ໨ࢦ͢΂͖ํ޲ੑʹ߹ΘͤͯϩΰΛݟ௚͢ 22 طଘͷྑ͍ͱ͜Ζ΋΋ͪΖΜ͋ΔͷͰͦΕΛେ੾ʹ͢Δ͜ͱͱ ෮׆Λ଴ͬͯ͘Ε͍ͯΔϑΝϯ͕͍ΔͷͰύοτݟ͙͢ʮϚΠτϨʔυʯͱΘ͔Δ૝ى
23. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ϩΰͷվมͰ಺޲͖ʹ΋֎޲͖ʹ΋໨ࢦ͢΂͖ํ޲ੑΛࣔ͢ 23 ख๏ ޮՌ ೾ͷཁૉͱϒϧʔܥΛѻ͏͜ͱ͸ม͑ͣ ϚΠτϨʔυͱॠ࣌ʹೝࣝͰ͖ΔΑ͏ʹ ݰਓ޲͚ͷ໌ே͔ΒαϯηϦϑମ΁ ॳ৺ऀ΋޿͘ड͚ೖΕ΍͘͢ ࠼౓Λ͋͛ͯ͘͢ΈΛऔΓআ͘ ΑΓΫϦʔϯͳҹ৅΁ ୹ظ౤ࢿΛ૝ى͢Δ೾ͷ܏͖ΛͳͩΒ͔ʹ ※ڧΊͷ܏͖ɿ୹ظ౤ࢿɺ؇Ίͷ܏͖ɿத௕ظ౤ࢿΛ૝ى χον૚͔ΒΑΓ޿͍౤ࢿՈ૚΁ τϨϯυʹซͤͨλΠϙάϥϑΟ ϞμϯͳϓϩμΫτͷओு
24. ඞཁͳػೳͷચ͍ग़͠ͱҾ͖ࢉ ղܾͷΞϓϩʔν - 2 ՝୊ʛΩϝϥԽͨ͠ػೳʹΑΓ௿UXɾϝϯςෛ୲૿ͳঢ়گͰ͋ͬͨ
25. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. σβΠφʔෆࡏͰΩϝϥԽͨ͠ϓϩμΫτ 25 ػೳ͕Ϧον͗͢Δ͕ނʹɺ࢖ΘΕͳ͘ͳͬͯ͠·ͬͨը ໘͕ग़͖ͯͯ͠·্ͬͨʹɺϝϯςφϯείετ͕ਹΈɺ ׬શʹෛ࠴ͱͯࣗ͠෼ͨͪͷटΛకΊΔ͜ͱʹͳͬͯ͠ ·͍ͬͯͨɻ ʢAͷػೳ௥ՃΛ͢ΔͱBͷςετ΋ඞཁɺͱ͍ͬͨ࿈࠯͕ൃੜ֬͠ೝ߲໨͕ ංେԽ͍ͯͨ͠ͳͲʣ ↓౰࣌௽Ԭ͕ϓϩδΣΫτδϣΠϯ௚ޙʹΞϓϦΛ৮ͬͯײ૝Λॻ͍ͨ΋ͷ ৗறσβΠφʔෆࡏͷ։ൃମ੍ͰɺΤϯδχΞओಋͰ։ൃ͕ ਐΜͩͨΊػೳ͸ΑΓϦονʹͳ͍ͬͯ͘΋ͷͷɺ ઃܭ͕े෼ʹͳ͞Ε͍ͯͳ͍ͨΊʹ ΞϓϦશମ͕ෳࡶԽ͠ΩϝϥԽ͖ͯͯ͠͠·͍ͬͯͨɻ ྫ͑͹
26. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࣮ࡍʹ࢖ΘΕ͍ͯͨ෦෼ͷΈΛநग़͢Δ 26 ɾొ࿥ূ݊ޱ࠲਺͸࠷େ10ޱ࠲·Ͱొ࿥Մೳʹ͍ͯͨ͠ → ࣮ࡍ͸1ޱ࠲ͷΈͰ8ׂɺෳ਺ޱ࠲΋3ޱ࠲·ͰͰ99%Λ઎Ί͍ͯͨɻ ɾ7ͭͷূ݊ޱ࠲Λొ࿥ՄೳͳܗͰରԠ͍ͯͨ͠ → SBIূ݊ͱָఱূ݊ͷϢʔβʔ͕େ൒Ͱ9ׂҎ্Λ઎Ί͍ͯͨɻ ɾऔҾϝϞͱ೔هɺͦΕͧΕΛॻ͍͍ͯΔਓͷׂ߹ɻ → औҾʹؔ͢ΔϝϞΛॻ͍͍ͯΔਓ͸Ұఆ਺͍Δ͕ɺ೔ه͕Ұ෦ͷϔϏʔϢʔβʔ ͕͍Δܗɻ → ϝϞͱ೔هΛ෼அ͢Δ͜ͱͰϢʔβʔʹࠞཚΛ༩͍͑ͯͳ͍ͩΖ͏͔ɻ σʔλυϦϒϯͳΞϓϩʔν ୯७ͰɺGoogle Analytics΍DBΛݟͳ͕Β ࢖ΘΕ͍ͯͳ͍ػೳ΍཭୤͕ଟ͍ը໘Λ୨Է͍ͯ͘͠͠ ྫ͑͹
27. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࣗ෼͕ͨͪఏڙ͢ΔՁ஋ΛվΊͯݟ௚͢ 27 લड़ͷ໨ࢦ͢΂͖ํ޲ʹؔ࿈͢Δ͕ɺͳʹ͕͍ࢗͬͯͯ͞ɺͳʹ͕ྑ͔ͬͨ ͷ͔ɺࠓ౓͸ࣗ෼͕ͨͪఏڙ͍ͯͨ͠தͰྑ͔ͬͨ෦෼Λચ͍ग़͢࡞ۀɻ ɾը໘γΣΞʢϢʔβʔίϛϡχέʔγϣϯʣ ɾENTRY/EXITϥΠϯͷ݁߹ʢಠࣗੑʣ ɾऔҾϝϞʢৼΓฦΓͷڧԽʣ ɾάϥϑɺγΣΞɺϒϧʔάϥσഎܠ Ϣʔβʔ؍࡯ʹΑΔΞϓϩʔν ͜Ε΋୯७ͰɺSNSΛத৺ʹϢʔβʔ౤ߘ΍ίϝϯτΛ ؍࡯͠ɺԿͷՁ஋Λఏڙ͢Δ͜ͱ͕࠷΋ت͹ΕΔ͔ ਫ਼ࠪ͢Δʢ = ࣗ෼ͨͪͷڧΈͷ࠶ೝࣝʣ ྫ͑͹
28. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ͞ΒʹɺΑΓચ࿅͞ΕͨΫϦʔϯͳҹ৅΁ 28 ถࠃͰॳ৺ऀΛڰ৴తʹऔΓࠐΜͰ࿩୊ͱͳͬͨRobinhoodʹ ΠϯεύΠϠ͞Εɺനجௐͷ͜Μͳτʔϯൺ཰Ͱ͍͘ ΠϝʔδͰਐΊͨɻ ໨ࢦ͢΂͖ํ޲΍λʔήοτ͕มΘͬͨͷͰɺUI΍ϏδϡΞϧΛ࡮৽͢Δͷ͸ࣗ͘͝વͳྲྀΕɻ ϩΰͱ౷Ұͤͯ͞ΫϦʔϯͳҹ৅Λ༩͑ΔUIΛ࡞͍ͬͯ͘ɻ λʔήοτͷมߋʢϦϒϥϯσΟϯάͷӨڹʣʹ൐͍ɺ ΑΓγϯϓϧ͔ͭϗϫΠτϕʔεͷΑΓதੑతͳτʔϯΛ໨ࢦ͢ɻ ถͷएऀ޲͚౤ࢿΞϓϦRobinhoodͷUIը໘Ұྫ
29. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ΧϥʔϦϯάΛܾΊͯΞΫηγϏϦςΟΛνΣοΫͯ͠.. 29
30. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ϦσβΠϯʹ౿੾Δ 30 എ໘ΛάϥσʔγϣϯͰඃ͍ͤͯΔܗ͔ΒɺશମతʹϗϫΠτϕʔεͷτʔϯ΁ɻ લड़ͷʮϚΠτϨʔυͰίΞ෦෼ʯͱ൑அͨ͠νϟʔτը໘Ͱ͸ɺϒϧʔάϥσʔγϣϯΛͦͷ··࢒͍ͯ͠·͢ɻ
31. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ͍͞͝ʹ 31 چ൛Λఏڙ։࢝ͨ͠2017೥౰࣌ͱ͸ࣾձ৘੎΋ڝ߹αʔϏεͷଘࡏ΋ҟͳΔͷͰɺ ෮׆Ͱ͸͋Δ͕ಉ͡΋ͷΛ࡞ΔͷͰ͸ͳ͘ɺ৽͍͠ΧλνͷϚΠτϨʔυΛఆٛ͢Δ͜ͱʹ߆Γ͸͋Γ·ͨ͠ɻ ΋ͪΖΜಉ͡΋ͷΛ࡞ΔͷͰϢʔβʔ͞Μ͸ຬͨ͞ΕΔ͔΋͠Εͳ͍Ͱ͕͢ɺͦΕҎ্ͷՁ஋΍ମݧΛಧ͚͍͖͍ͯͨɺͱ͍͏૝͍͕ڧ͔ͬͨɻ ֖Λۭ͚ͯΈΕ͹΍͖ͬͯͨ͜ͱ͸ ʮϦϒϥϯσΟϯάʯʮϦσβΠϯʯͰ͕͢ɺ ໨ͷલͷ՝୊ʹରͯ͠Ͳ͏ղܾ͍͔ͯ͘͠Λ໛ࡧ͍ͯͬͨ݁͠Ռɺ ࣗͣͱͦ͏ͳͬͨܗͰ͢ɻ ҰԠɺ౰࣌ͷ૝͍ͱͯ͠͸
32. εΫϥοϓϏϧυͳϓϩμΫτ։ൃ Chapter 03 ϚΠτϨʔυͷϓϩμΫτ։ൃʹ͓͚ΔҰ൪ͷಛ௕
33. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ͜ͷηογϣϯͰ͓࿩͢Δ͜ͱ 33 ఏڙ ։ൃ Ϣʔβʔ ΠϯλϏϡʔ ࢓༷ઃܭ ཁ݅ఆٛ ίϯηϓτɾ ମݧઃܭ ϓϩτλΠϓ ϫΠϠʔɾ UIσβΠϯ ϓϩμΫτΛ࣮ࡍʹ ৮ΕΔܗʹ͍ͯ͘͠ϑΣʔζ ※͜͜Ͱ͍͏ʮϓϩτλΠϓʯ͸಺෦Ͱٞ࿦Λ Ҿ͖ى͜͢༻్ͰPoCͷҙຯͰ͸ͳ͍Ͱ͢ɻ
34. 1೔Ͱ΋ૣ͘ϚΠτϨʔυΛ෮׆ͤ͞Δ ܝ͛ͨ໨ඪ ߴ଎͔ͭॊೈͳϓϩμΫτ։ൃΛ໨ࢦͯ͠
35. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ૣظ෮׆Λ๬Ήཧ༝ 35 ɾݩϢʔβʔ্ཱ͕ͪ͛ͨྨࣅαʔϏε͕ͪΒ΄Β࿩୊ʹͳ͖͍ͬͯͯͨ ɾݩύʔτφʔ͕໛฿඼Λఏڙ࢝͠Ίͨ ɾYahoo!ϑΝΠφϯεʢSBIܥ౷ʣ΍ΈΜגͳͲͷ͔ͬ͠Γͱͨ͠ձ͕ࣾऔΓ૊Έ࢝Ίͨ ϚΠτϨʔυʹ୅ΘΖ͏ͱ͢ΔαʔϏε͕ଟํ໘͔Βग़࢝Ί͖͍ͯͯͨ
36. ͱʹ͔͘ૣ͘ܗʹ͢ΔͨΊʹ ࠓ͋ΔΞηοτΛ࠷େݶ׆༻ͯ͠ × ମ੍ ։ൃख๏
37. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ಺੡ʹΑΓՃ଎͢ΔϓϩμΫτ։ൃ 37 چϚΠτϨʔυ ৽ϚΠτϨʔυ 委託 内製 σβΠϯ ։ൃ ύʔτφʔࣾ υίϞ ӡ༻อक ύʔτφʔࣾ σβΠϯ ։ൃ υίϞ ӡ༻อक υίϞ υίϞ
38. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ಺੡ʹΑΓՃ଎͢ΔϓϩμΫτ։ൃʢ௽Ԭ໨ઢʣ 38 چɿύʔτφʔఏܞ ࠓɿࣾ಺಺੡ اը ࢓༷ σβΠϯ ։ൃ ςετ Ͳ͔͕͜ఀཹ͢ΔͱҰ޲ʹਐ·ͳ͍ঢ়ଶ ͍ΘΏΔ΢ΥʔλʔϑΥʔϧܕ ݻ·ͬͨཁ͔݅ΒॊೈʹਐΊ͍ͯ͘ ࣗવͱΞδϟΠϧʹ͍ۙਐΊํͱͳͬͨɻ اը ࢓༷ σβΠϯ ։ൃ ςετ ௽Ԭ ௽Ԭ
40. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࠓ͸Adobe XDΛ޷ΜͰ࢖͍ͬͯ·͢ 40 ࢥߟͷ଎౓ͰσβΠϯ͢Δ Figma΍Sketch΋Ұ௨Γܦݧ͋Γ·͕͢ Figma: ౰࣌೔ຊޠೖྗʹόά͕͋Γ࢖͍෺ʹͳΒͳ͔ͬͨ Sketch: ϓϥάΠϯ౳͸ॆ࣮͍ͯ͠Δ͕લ࣌୅తʢগͳ͘ͱ΋ಉ೥୅ͷσβΠφʔ͕࢖͍ͬͯΔҹ৅͸ͳ͍ʣ Ex) ϦϐʔτάϦου Ex) γϯϘϧԽ 1ϲ݄ʹ1ճͷര଎ΞοϓσʔτʹΑΔஶ͍͠ਐԽ ଞͷAdobeπʔϧʢAi, Psʣͱ΄΅ಉ͡γϣʔτΧοτ Ϋϥ΢υυΩϡϝϯτͰര଎ϦϯΫڞ༗ ͍ܰʢୟ͖Λ࡞Δ্Ͱඇৗʹେࣄʣ ݸਓతʹ޷͖ͳͱ͜Ζ
41. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢ༨ஊʣFigmaͷ੎͍͕ࢭ·Βͳ͍ʂ 41 5000ສυϧʢ໿53ԯԁʣͷࢿۚௐୡ 2021೥4݄24೔ ΢ΣϒϕʔεͷίϥϘσβΠϯπʔϧFigma͕ϗϫΠτϘʔυʮFigJamʯެ։ ΦϯϥΠϯϗϫΠτϘʔυʮFigJamʯࢼͯ͠Έͨ https://zenn.dev/nomura2020/articles/d76c0e69556cad νϟοτɺελϯϓɺϝϞɺ ෇ᝦɺςΩετɺΞʔτϘʔυɺ ίϝϯτɺڞಉฤू etc…
42. Google੡ͷ࣮ࡍʹಈ͘ΞϓϦΛ ࡞ΕΔϑϨʔϜϫʔΫ
43. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ՝୊ײʛैདྷͷ΍Γํʹ൥Θ͠͞Λײ͖ͯͨ͡ 43 ը໘ભҠΛඥ෇͚ͯ Ϋϥ΢υυΩϡϝϯτͰڞ༗ͯ͠ - ϨΠΞ΢τͷݕ౼ͱͯ͠͸े෼͕ͩૢ࡞ײ΍ΠϯλϥΫγϣϯ͸ශऑ ঃʑʹײ͖ͯͨ͡൥Θ͠͞ ※چ൛ϚΠτϨʔυͰ͸֓Ͷ͜ͷӡ༻Ͱͨ͠ - มߋʹऑ͘ʢಛʹը໘ભҠͷඥ෇͚ʣɺεΫϥοϓϏϧυͳελΠϧʹ߹Θͳ͍ - ࣗ෼ͷ಄ʹ͋ΔΠϝʔδΛॻ͖ग़ͨ͠ޙɺશ͘ಉ࣮͡૷Λ͢Δͷ͕खؒ
44. ϨΠΞ΢τͷݕ౼΍νʔϜ಺ͷίϛϡχέʔγϣϯ ʢ௽Ԭͷ಄ͷதΛϥϑʹݟ͑Δܗʹ͢Δ࡞ۀʣ ࣮ࡍͷૢ࡞ײ΍ΠϯλϥΫγϣϯ ʢνʔϜʹ഑෍ͯ͠ϑΟʔυόοΫΛ΋Β͏ʣ ໌֬ʹ੹຿Λ෼͚͍ͯΔΘ͚Ͱ͸ͳ͍Ͱ͕͢ɺ֓Ͷ্هͷ࢖͍෼͚Ͱ͢
45. ίʔσΟϯάͰΠϯλϑΣʔεΛݻΊ͍ͯ͘ FlutterΛ࢖ͬͯ ಺੡ԽͷϝϦοτΛ࠷େݶʹ׆͔͍ͯ͘͠
46. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. εΫϥοϓϏϧυͳϓϩμΫτ։ൃͷྲྀΕ 46 ͳʹΛ࡞Δ͔ΛܾΊΔ " ϫΠϠʔΛͭ͘Δ ࢓༷ΛݻΊ͍ͯ͘ ಄ͷதͰΠϝʔδΛ࡞Δ ίϛϡχέʔγϣϯΛਤΔ ૢ࡞ײΛ͔֬ΊΔ ΠϯλϥΫγϣϯΛ࡞Δ ࣮ΞϓϦͰ಺෦഑෍͢Δ STEP1 STEP2 STEP3
47. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. εΫϥοϓϏϧυͳϓϩμΫτ։ൃͷྲྀΕ 47 ※͋͘·Ͱखݩʹ͋ΔΞηοτͷதͰߟ͑ͨಠࣗͷํ๏Ͱ͢ ͜ͷ޻ఔΛ܁Γฦ͢ ͳʹΛ࡞Δ͔ΛܾΊΔ " ϫΠϠʔΛͭ͘Δ ࢓༷ΛݻΊ͍ͯ͘ ಄ͷதͰΠϝʔδΛ࡞Δ ίϛϡχέʔγϣϯΛਤΔ ૢ࡞ײΛ͔֬ΊΔ ΠϯλϥΫγϣϯΛ࡞Δ ࣮ΞϓϦͰ಺෦഑෍͢Δ ։ൃίετͱͷ݉Ͷ߹͍Λݟͭͭ ࢓༷ͷ࿙ΕͳͲ͕͋Ε͹ݕ౼΁໭Δ ͋Δఔ౓ݻ·ͬͨΒίʔσΟϯά΁ STEP1 STEP2 STEP3
48. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢྫʣෳ਺ޱ࠲ͷ੾Γସ͑ΠϯλϑΣʔε - ݕ౼ 48 STEP1 ָఱূ݊ 1ޱ࠲ͷΈ ָఱূ݊ ෳ਺ޱ࠲ͷରԠ΁ SBIূ݊ … ※ON/OFF੾Γସ͑Ͱ߹ࢉ͢Δ͔൱͔બ΂Δ എܠ Ϣʔβʔ1ʹରͯ͠ޱ࠲1ͷؔ܎ͰɺϝΠϯޱ࠲ͷΈొ࿥͢ΔϢʔβʔ͕ࢄݟɻچ൛ʹ΋͋ͬͨػೳ͕ͩɺ3ޱ࠲Λ্ݶʹมߋɻ ՝୊ײ ෳ਺ޱ࠲ʢͳ͍͠͸Ո଒ͷޱ࠲ʣΛҰݩ؅ཧ͍ͨ͠ ػೳ ূ݊ޱ࠲Λෳ਺ొ࿥Ͱ͖ΔΑ͏ʹ͠ɺϑΟϧλʔͷ࢖͍উखͰূ݊ޱ࠲͝ͱͷσʔλ͕ݟ͑Δ 5,000,000
49. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢྫʣෳ਺ޱ࠲ͷ੾Γସ͑ΠϯλϑΣʔε - Xd 49 ɾࢀর͢΂͖ΨΠυϥΠϯͷνΣοΫ ɾબ୒தͷূ݊ޱ࠲ͷදࣔ ɾϓϧμ΢ϯܗࣜͰબ୒Ͱ͖Δ͜ͱ ɾؾܰʹ੾Γସ͍͑ͨͷͰڞ௨ϔομʔʹ ɾূ݊ޱ࠲ΛΧϥʔͰ෼͚Δ ɾԡԼ࣌ʹϝχϡʔ͕දࣔ ɾূ݊ޱ࠲ͷΧϥʔʹରԠͨ͠νΣοΫϘοΫε ɾબ୒தͷূ݊ޱ࠲͕1ͭͷ࣌ͷΠϝʔδ ɾূ݊ޱ࠲͝ͱͷऔҾཤྺͷදࣔݕ౼ - ϛχϚϜʹόοδΈ͍ͨʹ͢Δ͔ - ΞΠίϯදࣔ͢Δ͔ - ςΩετΛখ͘͞දࣔ͢Δ͔ ɾࢀߟͱΠϯεύΠΞ͞ΕͨΞΠσΞ ʢࢥߟͷഎܠΛڞ༗ʣ ཁ఺͚ͩͬ͟ͱ·ͱΊΔ STEP2
50. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢྫʣෳ਺ޱ࠲ͷ੾Γସ͑ΠϯλϑΣʔε - Flutter 50 STEP3 1. ։ൃυΩϡϝϯτΛݟͯ PopupMenu͕ҙ֎ͱ࢖͍ͮΒ͍͜ͱʹ͜ͷஈ֊Ͱؾͮ͘ 2. ͜ͷνΣοΫϚʔΫελΠϧ͕σϑΥϧτ͕ͩ ͜ΕͩͱҰݟνΣοΫ͞Ε͍ͯΔͷ͔൱͔ͷ൑அ͕ ͮ͠Β͍ͷͰɺमਖ਼͕ඞཁ͕ͩ͜ͷཁૉͷ ΧελϚΠζ͕େมͦ͏Ͱࠓ΍Δ΂͖͔ݕ౼͢Δɻ 3. νΣοΫϚʔΫͱςΩετͷ༨നΛ٧ΊΔϓϩύςΟ͕ͳ͘·ͨɺ υϩοϓγϟυ΢ͷ۩߹΋ௐ੔͕ݫͦ͠͏ͱ͍͏͜ͱʹؾͮ͘ɻ 4. ݱ࣌఺ͰͷϏδϡΞϧ͸͔ͳΓҟͳΔ͕ɺ ࣮ݱ͍ͨ͠Ϣʔβʔମݧͱ։ൃίετͱఱṝʹ͔͚ͯதؒղʹམͱ͠ࠐΉ 5. Ϧετͷฒͼସ͑౳Ͱ࢖͍ͬͯΔڞ௨ίϯϙωϯτΛ࠶ར༻ ຊདྷɺϔομʔʹϘλϯ͕͋ͬͯԼ͔ΒϞʔμϧ͕Ͱͯ͘Δͷ͸ҧ࿨ײ͋Δ͸ͣͳͷͰ վળ͸ඞཁʢPopupMenuΛΧελϜͯ࣌ؒ͠Λ͔͚ͯ੔͍͑ͯ͘ͳͲʣ 6. ߟ͑ͯΈΕ͹ϑΟϧλʔʹදࣔ͞ΕΔϥϕϧ͸Ϣʔβʔ͕೚ҙʹઃఆ Ͱ͖ΔʮΧελϜ໊ʯͰ͋Γɺ࠷େ20จࣈͳͲ͋Δఔ౓௕͘ͳΓͦ͏ͳͷͰ PopupMenuͰ͸ऩ·Γ͖Βͣෆద੾ͩͬͨͷ͔΋ʁ
51. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢྫʣෳ਺ޱ࠲ͷ੾Γସ͑ΠϯλϑΣʔε - ·ͱΊ 51 STEP1 STEP2 STEP3 ෳ਺ޱ࠲ରԠΛ͢Δ " ޱ࠲ͷ੾Γସ͑΋ඞཁ ੾Γସ͑ίετΛԼ͍͛ͨ εΠονͷϓϧμ΢ϯ ޱ࠲ΛΞΠίϯͰ৭෼͚ MenusΨΠυϥΠϯ ։ൃίετͱͷதؒղ PopupMenuButtonΫϥε λοϓՄೳྖҬͷௐ੔
52. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. FlutterͰϓϩτλΠϐϯά͸ཧʹ͔ͳ͍ͬͯΔ 52 ެࣜυΩϡϝϯτʹͯ ࣗ෼ͷσβΠϯϏδϣϯΛҰ؏ͯ͠։ൃऀʹ఻͑Δ ίϛϡχέʔγϣϯಓ۩ͱͯ͠ͷར༻΋ਪ঑ɻ σβΠφʔڭҭ σβΠφʔ޲͚ʹFlutterڭҭΛಋೖ͢Δ૊৫΋͋Δ
53. ݫີͳҙࢥܾఆऀ͕͍ͳ͍ͷͰʢ௽Ԭͷࡋྔ࣍ୈʣͦͷลΓͷॊೈੑΛՃຯͯ͠΋ɺXDͰϓϩτλΠϐϯάΛ࡞ͬͯڞ༗͢ΔΑ Γɺ࣮ࡍʹΞϓϦͱͯ͠ಈ͘΋ͷΛఏڙͯ͠ɺϑΟʔυόοΫΛ΋Β͏΄͏͕ѹ౗తʹૣ͘ɺετϨε΋ͳ͔ͬͨɻ ·ͨɺ౰વίʔσΟϯάϨϕϧͰUIΛ࡞Δ͜ͱʹΑͬͯɺमਖ਼͕ແ͚Ε͹ͦͷ··಺෦࣮૷Λ͢Ε͹ྑ͍ͷͰɺʮϓϩτλΠϓ௨ ΓʹվΊ࣮ͯ૷͢ΔʯͷΑ͏ͳ޻ఔ͕ඞཁͳ͘ɺͦͷ··ϦϦʔεͰ͖Δɻ ಺੡։ൃͷϝϦοτΛੜ͔ͨ͠ॊೈͳ։ൃελΠϧ # " XDͩͱʮΫϥ΢υυΩϡϝϯτͰϦϯΫੜ੒ҰൃʯͰࡁΉ͕͕͢͞ʹͦΕ͸Ͱ͖ͳ͍ɻ౎౓Ϗϧυ͢Δඞཁ͕͋ΔͷͰɺ಺෦഑ ෍·Ͱ20෼͸࠷௿Ͱ΋ඞཁɻ͜ͷลΓ͕͔ͬ͠Γ੔͖ͬͯͨΒʮFlutterϓϩτλΠϐϯάʯ͸΋ͬͱྲྀߦΔͱࢥ͏ɻ ʢ20෼ͱ͍͏਺஋ΛͲ͏ݟΔ͔ͱ͍͏໰୊͕ͩɺଈ࣌ੑ͸ͳ͍΋ͷͷݸਓతʹ͸े෼ͳεϐʔυͩͱࢥ͏ɻTestFlight΍FirebaseͷਐԽʹΑΓ಺෦഑෍ͷॴ༻ ࣌ؒ͸೥ʑ୹͘ͳ͖͍ͬͯͯΔʣ XDͷϓϩτλΠϐϯά΋ΞʔτϘʔυ͝ͱʹඥ͚ͮͯɺϓϨϏϡʔͰӾཡͯ͠… ͱ͍͏ܗͰʮෳ਺ਓ੡࡞ʯʮڞ༗ʯͱ͍͏໘Ͱ ݟΔͱϝϦοτ͸͋Δ͕಺੡ͷগਓ਺ମ੍Ͱ͸ͦͷԸܙ΋ബ͘ɺྑ͍ܗʹ࠷దԽग़དྷ͍ͯΔͱࢥ͏ɻ ୯७ʹϚϯύϫʔతͳ෦෼͕େมɻͨͩɺΠϝʔδతʹ͸୯७ʹ଍͠ࢉͰʮσβΠϯ+ΤϯδχΞϦϯάͰ2അྗඞཁʯͱ͍͏Θ ͚Ͱ͸ͳ͘ɺײ֮తʹ͸1.3ఔ౓ͷΠϝʔδɻσβΠφʔ1ਓ͋ͨΓͷ෺ྔͱͯ͠͸΍΍ଟ͘ͳͬͯ͠·͏͕ɺϓϩδΣΫτશମͰ ΈͨΒগͳ͍ɺͱ͍͏ײ֮ɻ ಺෦഑෍ͷεϐʔυ͸΍΍ྼΔ σβΠφʔ̍ਓ͋ͨΓͷ෺ྔ͸΍΍ଟ͘ͳΔ ॏෳ͢Δ޻ఔΛল͍ͯετϨεϨεʹ
54. ՝୊ͱ·ͱΊ Chapter 04
55. ϕʔλఏڙͰ͖ͨͷ͸࢝ಈ͔Β̕ϲ݄ޙ ։ൃӡ༻αΠΫϧ͕੔͍̍ʙ̎िؒͷස౓ͰΞοϓσʔτ Ϣʔβʔධ൑͕ྑ͘ɺಛʹσβΠϯධՁ͕ߴ͍ ϏδωεαΠυͷKPI஋͕৳ͼͳ͍ υίϞ໊ٛͰαʔϏεΛϩʔϯν͢Δͷ͸ௐ੔͕૝ఆΑΓେมͩͬͨ͜ͱ͕ओͳཁҼ # ϩʔυϚοϓʹରͯ͠։ൃ͕஗Ε͓ͯΓ࠷௿ݶͷϥΠϯʹ·ཱ͍ͩͯͯͳ͍͜ͱ͕ཁҼ " " ࠃ಺ূ݊ձࣾͷΠϯλϑΣʔεͰ͸ͳ͘ɺ໨ࢦ͢΂͖͔࢟Βಋ͍ͨதੑతͳσβΠϯ͕ࠓͷͱ͜Ζॱௐ ػೳͷ੔ཧͱσβΠϯͱ։ൃ͕ҰମԽͨ͜͠ͱʹΑΓॏෳ͢Δ޻ఔΛল͍ͨ੒Ռ #
56. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. چ൛ʹ͸ແ͔ͬͨʮUIʯʮσβΠϯʯʹݴٴ͢ΔϢʔβʔͷ੠ʢҰ෦ൈਮʣ 56 https://twitter.com/kabuslime/status/1354082811955859458?s=20 https://twitter.com/dd1989/status/1103660492130705408?s=20 ※چ൛ͱͷେ͖ͳҧ͍Ͱڝ߹αʔϏε͕͍͔ͭ͘ग़͍ͯΔͷͰɺ૬ରతʹͱ͍͏ҙຯ͔΋͠Εͳ͍ɻ
57. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ͳΜͱͳ͘ߟ͍͑ͯΔ͜ͱ 57 Քಇෆ଍ͱਓһ૿Ճʹ൐͏ମ੍ͷݟ௚͠ ࣄۀυϝΠϯʹΑΔΞϓϩʔνͷҧ͍ " " ௒গਓ਺ମ੍Ͱॊೈʹಈ͚Δ൓໘ɺՔಇ͕଍Γͳ͍͜ͱʹΑΔεϐʔυෆ଍ ݸผג or ΠϯσοΫεɺ೔ຊג or ւ֎גͳͲม਺͕ଟ͗͢ΔυϝΠϯͷ౎߹
58. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࢀߟʛϚωʔϑΥϫʔυMEͷϦσβΠϯɺΘ͔ͣҰ೔Ͱࠩ͠໭͠΁ 58 ʰϚωʔϑΥϫʔυ MEʱWeb൛ϦχϡʔΞϧʹؔ͢Δࠓޙͷํ਑ʹ͍ͭͯ https://note.com/yosuke77/n/n19b2997d7219 https://kabumatome.doorblog.jp/archives/65965662.html CEO⁋͞Μ noteͰँࡑ 2020೥7݄
59. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ·ͱΊ 59 ৽ੜϚΠτϨʔυͷਐԽΛ໨ࢦͯ͠ ✍ Ұ౓Ϋϩʔζͨ͠αʔϏεͷ෮׆ɺͱ͍͏ܗͰ΍΍ಛघͳ୊ࡐͰͷ͓࿩ͩͬͨͱࢥ͍·͢ɻ ࠓճ͸ɺچ൛ͷӡ༻Λ౿·͑ͯݦࡏԽͨ͠՝୊ʹର͢ΔΞϓϩʔνΛ͝঺հ͠·ͨ͠ɻ αʔϏε։ൃҎ֎Ͱ΋ɺ໨ͷલͷ՝୊ʹରͯ͠ղܾΛ໛ࡧ͢Δօ༷ͷͳʹ͔ͷ໾ʹཱͯΕ͹޾͍Ͱ͢ɻ ৽نࣄۀʹ͓͚Δʮ੒ޭʯ͸Ұൠతʹ͸ച্ཱ͕ͭ͜ͱͰ͋Γɺ͜ͷࠜຊతͳ՝୊ʹ͸ࠓޙ΋޲͖߹͍ଓ ͚ͳ͚Ε͹ͳΓ·ͤΜ͕ɺʮ՝୊Λநग़͠ղܾʹಋ͘ʯσβΠϯͷྗΛ৴ͯ͡ߩݙ͍͖ͯ͠·͢ɻ ࠓޙͷϚΠτϨʔυͷൃలʹ͝ظ଴͍ͩ͘͞ʂ ମ੍΍ࣄۀϑΣʔζʹΑͬͯϚΠτϨʔυͱಉ͜͡ͱ͕࠷దղʹͳΔͱ͸શ͘ࢥΘͳ͍Ͱ͢ɻ ʮFlutterΛ࢖͍·͠ΐ͏ʯΛ఻͍͑ͨͷͰ͸ͳ͘ɺͦ͏͍ͬͨϓϩμΫτ։ൃΛ͍ͯ͠Δ૊৫͕͋Γɺ ಛʹΤϯδχΞϦϯάͷϑΟʔϧυ͔Β΋ͲΜͲΜσβΠφྖҬʹάϥσʔγϣϯ͖͍ͯͯ͠Δͷ͕ΞϓϦք ۾ͷۙ೥ͷྲྀΕͰɺͦͷڥք͸·͢·͢ᐆດʹͳ͖͍ͬͯͯΔࣄ࣮͕͋Δͱ͍͏͜ͱͰ͢ɻ ࣌୅ʹ߹ͬͨϓϩμΫτ։ൃΛৗʹ୳ٻ͍͖ͯ͠·͠ΐ͏ʂʢࣗռ΋ࠐΊͯʣ ✍ Chapter 03 εΫϥοϓϏϧυͳϓϩμΫτ։ൃ Chapter 04
60. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank You! օ༷ͷͳʹ͔ͷώϯτʹͳΕ͹޾͍Ͱ͢ @h_tsuruo
61. Ҏ߱ࢀߟ Reference
62. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. υίϞॳͷܗʢϕʔλ൛ʣͱͯ͠ఏڙ։࢝ 62 Ϣʔβʔ͞Μͷ੠Λฉ͖΍͘͢ɺϦϦʔεαΠΫϧΛૣ͘ճͤΔΑ͏ʹυίϞॳͷࣄྫΛ࡞ͬͨ iOS: TestFlight, Android: Φʔϓϯςετ഑৴
63. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ݸਓతʹ޷͖ͳԞా͞Μͷ࿩ 63 https://dev.classmethod.jp/articles/adobemaxjapan2019s1/ ͜͏͍ͬͨ࿩͕޷͖Ͱ͢
64. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࢀߟʛϚʔΫΞοϓʹۤखҙ͕ࣝͳ͍ͳΒ݁ߏ؆୯ 64 Flutterͷ৔߹ WidgetΛࢦఆ → WidgetπϦʔʢ಺෦తʹ͸RenderObjectʣΛߏங ϚʔΫΞοϓͷ৔߹ HTMLͷλάࢦఆ →ϒϥ΢β͕Α͠ͳʹղऍͯ͠ElementπϦʔΛߏங Flutter ͸͡ΊͷҰา https://medium.com/adobetech/announcing-xd-to-flutter-v2-0-82d09f3909a7
65. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࢀߟʛExport Adobe XD to Flutter 65 Announcing XD to Flutter v2.0 https://medium.com/adobetech/announcing-xd-to-flutter-v2-0-82d09f3909a7
66. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢ༨ஊʣϧοΫɾΞϯυɾϑΟʔϧͷ࿩ 66
67. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢ༨ஊʣϐΫηϧύʔϑΣΫτͱσβΠφʔͷॊೈੑ 67 7ͭͷ࣮ྫͰֶͿʮϫΠϠʔϑϨʔϜ௨ΓʯͷσβΠϯ͔Β୤٫͢Δ۩ମతͳํ๏ http://tomoyukiarasuna.com/as-it-is-wireframe/ https://coliss.com/articles/build-websites/operation/work/state-of-pixel-perfect.html
68. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ݱࡏͷূ݊ࢢ৔ 69 2018೥ 2015೥ 2019೥ ʰ౤ࢿʹରͯؔ͠৺͋Δ૚ʱͷมભ 23.7% 25.1% ??? +1.4% 3೥ؒ 1೥ؒ ・LINE証券 ・ドコモポイント投資 ・年⾦2000万円問題 ・FOLIOのCM広告 ⼀般層に『投資』という キーワードが浸透し始める ※ฏ੒30೥౓ূ݊౤ࢿʹؔ͢Δશࠃௐࠪʢ೔ຊূ݊ڠձʣ ࠓɺʰ౤ࢿʹؔ৺Λ࣋ͭʱ૚͸೔ʑ૿͑ଓ͚͓ͯΓࠓޙ΋Ճ଎͕༧૝͞ΕΔ ※2೥લͷσʔλͰ͢
69. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢ༨ஊʣAndroid12͔ΒMaterial Youͷొ৔ 70 ΧϥʔͳͲͷද૚తͳ෦෼͸رബԽ͞Εɺ ΑΓશମͷ৘ใɺମݧͷઃܭ͕ॏཁʹͳͬͯ͘Δͷ͔΋͠Εͳ͍ɻ
70. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢ༨ஊʣUIτϨʔεͱ͸ʢ͝ଘ஌ͩͱࢥ͍·͕͢..ʣ 71 ಛʹɺίί͕ॏཁʂ 4. Ϗδωεͷจ຺΋ߟ࡯Ͱ͖Δͱϕλʔ
71. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢҰྫʣUIτϨʔεͱαʔϕΠ 72 ͱʹ͔͘ؾʹͳͬͨUI΍࢖͑ͦ͏ͳΠϯλϑΣʔε͸ɺDribble΍Instagram, TwitterͳͲͰݟ͔͚ͨΒετοΫͯ͠؍࡯͢Δ ࡞ۀΛ͍ͯ͠·͢ɻ๻ͷ৔߹͸ɺؾʹͳͬͨUI͸εΫγϣͬͱͬͯNotionͳͲʹετοΫ͠ɺৄࡉʹݟ͍ͨ৔߹ʹ τϨʔε༻ͷΫϥ΢υυΩϡϝϯτʹ·ͱΊͯ؍࡯͍ͯ͠·͢ɻҾ͖ग़͠Λ૿΍͢͜ͱ͕ॏཁɻ ౤ࢿʹݶΒͣۜߦ΍ τϨϯυΞϓϦͳͲ ͱʹ͔͘৮ͬͯݟΔΑ͏ ҙ͍ࣝͯ͠·͢ɻ
72. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ࣮૷ΛΠϝʔδ͠UIΛద੾ʹίϯϙωϯτԽ 73 ࡞ͬͯ͸յ͠Λ܁Γฦ͠ɻ ࠷ۙAdobe XD͸όʔδϣϯ؅ཧ͕Ͱ͖ΔΑ͏ʹͳͬͨͷͰʢΑ͏΍͘ʣɺͦͷػೳΛ࢖ͬͯաڈͷฤू ʹ͔͞ͷ΅ͬͨΓ͠ͳ͕Βɺݻ·ͬͨ෦෼ΛίϯϙωϯτԽ͍ͯ͘͠ɻ ࣮ࡍʹ࣮૷͠΍͍͢Α͏ʹΠϝʔδͯ͠ίϯϙωϯτΛ࡞͍ͬͯ͘ɻ
73. © 2020 NTT DOCOMO, INC. All Rights Reserved. NTT DOCOMO Confidential. ʢ༨ஊʣ࠷ॳ͸Atomic Designʹ஧࣮ʹ฿͍͚ͬͯͨͲԸܙΛײͣ͡΍Ίͨ 74 ཧղ͠΍͘͢ྑ͍σβΠϯγεςϜͩͱࢥ͏͕ɺݫີʹϧʔϧΛकΖ͏ͱ͢Δͱ࢖͍ͮΒ͔ͬͨɻ ྫʣ͜ͷίϯϙωϯτ͸MoleculesͱOrganismsͷͲͪΒʹ͠Α͏ɺͳͲ ༨ܭͳҙࢥܾఆ͕հࡏ͢Δͷ͕ݏͩͬͨʢͦ͏͍͏੔ཧ࡞ۀ͸ݸਓతʹ͸޷͖͚ͩͲ΋ʣ