Design Talk#2 Information Architecture 1/2

Design Talk#2 @AnyPay, Inc.
"Information Architecture 1/2 ~ IAとは & 何が嬉しいの ~"

Next Slides:
2/2 https://speakerdeck.com/ikutani41/2-1

Links in Slides:
1. PMのミッションって何ですか
https://note.mu/ikutani41/n/nb3e99db1f08b

2. デザインリサーチの具体的なプロセスと大事にしていること
https://note.mu/ikutani41/n/n12157f5cef01

Transcript

1. Information Architecture ~ IAͱ͸ & Կ͕خ͍͠ͷ ~ @ikutani41 2018/1/31 Design Talk#2
2. ΈΜͳ͕IAΛཧղ͢Δͱ ൵͕ܶݮΔ
3. ։ൃݱ৔ͷ൵ܶ͋Δ͋Δ ▸ ࣮෺Λݟͳ͍ͱΘ͔Βͳ͍ ▸ Ϗδωεཁ݅ˠγεςϜઃܭˠγεςϜ࢓༷ˠ࣮૷ˠςετ ▸ ςετஈ֊ͰॳΊ࣮ͯ෺ΛݟΔ ▸ Ғ͍ਓʮࢥͯͨΜͱͪΌ͏ʯ ▸ ೝࣝͷҧ͍ ▸ Ғ͍ਓɿͪΐͬͱม͚͑ͨͩɹˠɹೲظͦͷ·· ▸ ݱ৔ɿθϩ͔Β࡞Γ௚͠ʢͪΌͿ୆ฦ͠ʣɹˠɹప໷֬ఆ
4. ։ൃݱ৔Ͱੜ·Εͨൃ૝ ▸ ͪΌΜͱߟ͑ͯ࡞ΔҙࣝΛඇΤϯδχΞ΋࣋ͱ͏ʢ౰ͨΓલ ▸ ਆ༷͸͍ͳ͍͔Βɺ࠷ॳ͔Βશ෦૝ఆͯ͠࡞Δͷ͸ແཧ ▸ ࣮෺ΛݟΔ޻ఔ͕̍൪࠷ޙͷςετ޻ఔͳͷ͕ѱ͍
5. ։ൃݱ৔Ͱੜ·ΕͨϓϥΫςΟε ▸ ͦΕͬΆ͍࣮෺Λઌʹ࡞Ζ͏ʢϓϩτλΠϐϯάʣ ▸ ʮࢥͯͨ΍ͭʯ͔Ͳ͏͔νΣοΫ ▸ ϑΟʔυόοΫ΍ೝࣝͷᴥᴪ͕͋Ε͹मਖ਼ ▸ Πϝʔδ͕ݻ·͔ͬͯΒઃܭˠ࣮૷ϑΣʔζ΁ ▸ ॳظϦϦʔε࣌͸͋·Γ࡞ΓࠐΈ͗ͣ͢ɺมߋʹ଱͑΍͘͢ ͓ͯ͘͠
6. ·ͱΊΔͱ ▸ ΋ͷͮ͘Γ͸ɺ্ྲྀ͔ΒԼྲྀʹ޻ఔ͕ਐΜͰ͍͘ ▸ ্ྲྀͷΞ΢τϓοτ඼࣭͕ΊͪΌେࣄ ▸ ্ྲྀͷΞ΢τϓοτ඼࣭ΛߴΊΔͨΊͷख๏ʹ஫໨ू·Δ ▸ ϓϩτλΠϐϯά ▸ ΞδϟΠϧ
7. How About “UI/UX Design”?
8. ࠓ೔ͷݴ͍͍ͨ͜ͱ Design ʮIAͱτϯϚφʯ͕େࣄ Dev ʮཁ݅ఆٛͱσʔλઃܭʯ͕େࣄ
9. UI/UXσβΠϯ͸ײ֮100%͡Όͳ͍ ▸ ·ͣώΞϦϯάͯ͠Կͱͳ͘Πϝʔδ͢Δ ▸ ҊΛ·Δͬͱ࡞ͬͯΈΔ ▸ ݟͤͯϑΟʔυόοΫ΋Β͏ ▸ मਖ਼͢Δ ▸ ݟͤͯϑΟʔυόοΫ΋Β͏ ▸ मਖ਼͢Δ ▸ … ▸ Ғ͍ਓ͕ೲಘͨ͠Β׬ྃ
10. UI/UXσβΠϯ͸ײ֮100%͡Όͳ͍ ▸ ·ͣώΞϦϯάͯ͠Կͱͳ͘Πϝʔδ͢Δ ▸ ҊΛ·Δͬͱ࡞ͬͯΈΔ ▸ ݟͤͯϑΟʔυόοΫ΋Β͏ ▸ मਖ਼͢Δ ▸ ݟͤͯϑΟʔυόοΫ΋Β͏ ▸ मਖ਼͢Δ ▸ … ▸ Ғ͍ਓ͕ೲಘͨ͠Β׬ྃ ×
11. UI/UXσβΠϯ΋ɺੵΈ্͛ɻ ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ ϒϥϯσΟϯάɾΫϦΤΠςΟϒ ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ Visual/UI Design Layout, Components ૢ࡞ϑϩʔ IA ίϯηϓτɾτϯϚφ
12. σβΠϯݱ৔ͷ൵ܶ͋Δ͋Δ ▸ ίϯηϓτͱ՝୊ղܾΞΠσΟΞྑͦ͞͏ ▸ τϯϚφ΋Πϝʔδڞ༗ͨ͠ ▸ جຊతͳػೳϦετͱૢ࡞ϑϩʔܾ·ͬͨ ▸ ؆қUIͱϨΠΞ΢τ΄΅Ͱ͖ͨ ▸ VDͷ࡞ΓࠐΈஈ֊ͰΫϦΤΠςΟϒҊݟͤΔ ▸ Ғ͍ਓʮࢥͯͨΜͱͪΌ͏ʯ ▸ Ғ͍ਓʮ͜͏͍͏ͷͲ͏͔ͳʁʢίϯηϓτɾIAมߋʣʯ
13. ࣮෺͕ݟΕΔλΠϛϯά ▸ ίϯηϓτͱ՝୊ղܾΞΠσΟΞ͸ϓϩτλΠϓͰݕূͨ͠ ▸ τϯϚφ΋Πϝʔδڞ༗ͨ͠ ▸ جຊతͳػೳϦετͱૢ࡞ϑϩʔܾ·ͬͨ ▸ ؆қUIͱϨΠΞ΢τ΄΅Ͱ͖ͨ ▸ VDͷ࡞ΓࠐΈஈ֊ͰΫϦΤΠςΟϒҊݟͤΔ ▸ Ғ͍ਓʮࢥͯͨΜͱͪΌ͏ʯ ▸ Ғ͍ਓʮ͜͏͍͏ͷͲ͏͔ͳʁʢίϯηϓτɾIAมߋʣʯ ϋϦϘςײ ࣮෺ײ
14. Designݱ৔ͷࠔ೉ ▸ Dev ▸ ৼΔ෣͍Λఆٛ͢Ε͹ɺγεςϜ෦෼͸ϞοΫͰ͖Δ ▸ ઃܭཁ݅Λݟ͚ͭΔͨΊͷձ࿩͸ϓϩτλΠϓͰ΍ΕΔ ▸ Design ▸ ࠷ޙ·Ͱ࡞Γ্͛ͳ͍ͱɺ࣮෺likeͳ΋ͷ͕Ͱ͖ͳ͍ ▸ ࠷ऴ޻ఔͷVD΍ΠϯλϥΫγϣϯ࣍ୈͰҹ৅͕େมԽ ▸ ʢVD΍ΠϯλϥΫγϣϯ͸՝୊ղܾͱ΄΅ؔ܎ͳ͍ʣ
15. Ͳ͏͢Δ͔ɻ
16. IAͰձ࿩Λ͠Α͏ ▸ σβΠϯ࡞ͬͯյ͠·͘Δͷ͸ඇޮ཰ͩ͠ਫ਼ਆతʹෆӴੜ ▸ σβΠφʔͱϊϯσβΠφʔ্͕ྲྀͰձ࿩Ͱ͖ΔϨΠϠʔ͕ ඞཁ ▸ ͦΕ͕ʮIAʢ৘ใઃܭʣʯ ▸ IA͸ٕज़͕ͩɺந৅తࢥߟྗ͑͋͞Ε͹ೖ໳ૣ͍ ▸ νʔϜͷج൫εΩϧͱͯ͠Φεεϝ
17. Information Architecture: ৘ใઃܭ ▸ ۩ମతͳUI΍άϥϑΟοΫΛߟ͑ΔࡐྉΛ࡞Δ޻ఔ ▸ ʮ΍Γ͍ͨ͜ͱΛ৘ใϨϕϧͰ੔ཧ͢Δ͜ͱʯ ▸ ԿΛ఻͑Δ͔ɺԿΛݟͤΔ͔ ▸ ԿΛͤ͞Δ͔ ▸ ৘ใಉ࢜ͷؔ܎ੑ͸Ͳ͏ͳ͍ͬͯΔ͔ ▸ Groups, Central-Peripherals, General-Examples ▸ Parent-Child, Siblings, Counterparts ▸ PriorityɿԿ͕࠷ॏཁͰɺԿ͕αϒͰɺԿ͕Φϓγϣφϧ͔
18. ྫʣʮΫϨΧΛొ࿥͢Δʯػೳ ▸ ΫϨΧҰཡ ▸ ݅਺ ▸ 0݅ ▸ 1݅~5݅ʢPSPͷ࢓༷Ͱ্ݶ͋Γʣ ▸ දࣔ৘ใ for ࣝผ ▸ ϒϥϯυϩΰ* ▸ ϒϥϯυ ▸ PANͷলུදࣔɿʢOSඪ४ʣԼ4ܻ ▸ ༗ޮظݶ ▸ ༗ޮظݶܥΞϥʔτ*ɿ΋͏͙͢੾Εͦ͏ or ੾Εͨ ▸ ΞΫγϣϯ ▸ ৽نొ࿥* ▸ มߋɿܾࡁ࢓༷తʹมߋෆՄ* → ʮ࡟আ+৽نొ࿥ʯ ▸ ࡟আ ▸ ϔϧϓ
19. ྫʣʮΫϨΧΛొ࿥͢Δʯػೳ ▸ ొ࿥৚݅ ▸ VISA, Master ▸ ඇରԠϒϥϯυ͕͋ΔɿJCB, Amex, Diners ▸ ΫϨΧొ࿥৘ใ ▸ PAN ▸ ܗࣜ͸ϒϥϯυʹΑͬͯมΘΔ ▸ ઌ಄਺ܻͷ࠾൪ϧʔϧͰϒϥϯυಛఆՄೳ ▸ mܻ۠੾Γͷܭnจࣈͷ൒֯਺ࣈ ▸ ΧϝϥͰOCRεΩϟϯ΋Մೳ ▸ ༗ޮظݶɿmm/yy ▸ ະདྷറΓ ▸ ηΩϡϦςΟίʔυɿ3~4ܻʢϒϥϯυຖʣ ▸ هࡌ৔ॴ͕ϒϥϯυʹΑͬͯҧ͏ ▸ ݺͼํ͕ଟ͘Θ͔Γʹ͍͘ͷͰϔϧϓ ▸ Χʔυ໊ٛɿେจࣈӳ਺ࣈεϖʔε͋Γ ▸ ϝΠϯΧʔυϑϥά ▸ 1͚ͭͩ ▸ มߋՄೳ ▸ ͦͷଞɿϢʔβͷηΩϡϦςΟෆ҆Λ෷১͢Δ࢓ֻ͚*
20. IAϨϕϧͰҙࢤܾఆ͢Ε͹ɺେ୾ͳ͜ͱ͕Ͱ͖Δ ▸ ͜Ε͸Կ΋νϟϨϯδ͠ͳ͍൛ ▸ ৘ใʹಛʹ༏ઌ౓͸෇͚ͳ͔ͬͨ ▸ ʮඪ४ͦͷ··ʯΛ࠾ͬͨ ▸ ʢྑ͍ྫݟ͚ͭΒΕͣɾɾ
21. ͲΜͳϨΠϠʔͷσβΠϯ΋ɺ·ͣ͸IA͔Βɻ ▸ αʔϏεશମͷσβΠϯ ▸ ίϯηϓτɾίΞମݧ ▸ φϏήʔγϣϯ ▸ ػೳͷσβΠϯ ▸ ػೳཁ݅ɾఏڙՁ஋ ▸ σʔλมԽ ▸ ը໘ɾUIͷσβΠϯ ▸ ࢹઢ༠ಋ ▸ ΞΫγϣϯ༠ಋ ▸ ৘ใҰཡɾมԽՄೳੑ
22. ·ͱΊ ▸ IAΛҙࣝͨ͠ϓϩμΫτ࡞Γ ▸ ʮࢥͯͨΜͱͪΌ͏ʯͷޙग़͠ճආ ▸ ఏڙՁ஋ΛੵΈ্͛ΔͨΊ ▸ σβΠφʔɾϊϯσβΠφʔؒͰIAϨϕϧͷձ࿩Λ͠Α͏ ▸ ࠷ऴతͳݟͨ໨΍ؾ࣋ͪྑ͞͸σβΠφʔ͕ؤுΔ ▸ ΑΓຊ࣭తͳ՝୊ղܾ΍Ծઆɾ৘ใͷධՁʹूத͠Α͏ ▸ IAͷձ࿩͕Ͱ͖Ε͹ɺϓϩμΫτͮ͘ΓʹࢀՃͰ͖Δ
23. ࣍ճɿInformation Architecture 2ʮͦͷΧΠθϯ͸UIมߋʁIAมߋʁʯ ▸ σβΠϯͷ࢓ࣄͱIAͷؔ܎ͷ۩ମྫ ▸ ॳظϦϦʔε·Ͱ ▸ εϜʔζͰSolutionΫϦςΟΧϧͳମݧ ▸ γϯϓϧͳIAɺໃ६ͷͳ͍UI ▸ ϦϦʔεޙͷԾઆݕূϑΣʔζ ▸ IAͷධՁ ▸ VDͷ໰୊ൃݟɾௐ੔ ▸ New Features ▸ ΫΠζܗࣜͰIAͱσβΠϯΛߟ͑Δ ▸ IAσβΠϯۀ຿ͷΞϯνύλʔϯ ▸ IAͱVDͷ޻ఔΛ෼அ͗͢͠Δ ▸ IAͷΞ΢τϓοτ͸WF
24. @ikutani41 2018/1/31 Thank you! Information Architecture ~ IAͱ͸ & Կ͕خ͍͠ͷ ~
25. Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ