Design Talk#2 Information Architecture 1/2

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

Fbaecd1b9921790b9a3ea9f209da4090?s=128

Yutaro Ikutani | MNTSQ, Ltd.

January 31, 2018
Tweet

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 ྑ͔ͬͨΒಡΜͰͶ