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

Design Talk#2 Information Architecture 1/2

Yutaro Ikutani
January 31, 2018

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

Yutaro Ikutani

January 31, 2018
Tweet

More Decks by Yutaro Ikutani

Other Decks in Design

Transcript

  1. Information Architecture
    ~ IAͱ͸ & Կ͕خ͍͠ͷ ~
    @ikutani41
    2018/1/31
    Design Talk#2

    View full-size slide

  2. ΈΜͳ͕IAΛཧղ͢Δͱ
    ൵͕ܶݮΔ

    View full-size slide

  3. ։ൃݱ৔ͷ൵ܶ͋Δ͋Δ
    ▸ ࣮෺Λݟͳ͍ͱΘ͔Βͳ͍
    ▸ Ϗδωεཁ݅ˠγεςϜઃܭˠγεςϜ࢓༷ˠ࣮૷ˠςετ
    ▸ ςετஈ֊ͰॳΊ࣮ͯ෺ΛݟΔ
    ▸ Ғ͍ਓʮࢥͯͨΜͱͪΌ͏ʯ
    ▸ ೝࣝͷҧ͍
    ▸ Ғ͍ਓɿͪΐͬͱม͚͑ͨͩɹˠɹೲظͦͷ··
    ▸ ݱ৔ɿθϩ͔Β࡞Γ௚͠ʢͪΌͿ୆ฦ͠ʣɹˠɹప໷֬ఆ

    View full-size slide

  4. ։ൃݱ৔Ͱੜ·Εͨൃ૝
    ▸ ͪΌΜͱߟ͑ͯ࡞ΔҙࣝΛඇΤϯδχΞ΋࣋ͱ͏ʢ౰ͨΓલ
    ▸ ਆ༷͸͍ͳ͍͔Βɺ࠷ॳ͔Βશ෦૝ఆͯ͠࡞Δͷ͸ແཧ
    ▸ ࣮෺ΛݟΔ޻ఔ͕̍൪࠷ޙͷςετ޻ఔͳͷ͕ѱ͍

    View full-size slide

  5. ։ൃݱ৔Ͱੜ·ΕͨϓϥΫςΟε
    ▸ ͦΕͬΆ͍࣮෺Λઌʹ࡞Ζ͏ʢϓϩτλΠϐϯάʣ
    ▸ ʮࢥͯͨ΍ͭʯ͔Ͳ͏͔νΣοΫ
    ▸ ϑΟʔυόοΫ΍ೝࣝͷᴥᴪ͕͋Ε͹मਖ਼
    ▸ Πϝʔδ͕ݻ·͔ͬͯΒઃܭˠ࣮૷ϑΣʔζ΁
    ▸ ॳظϦϦʔε࣌͸͋·Γ࡞ΓࠐΈ͗ͣ͢ɺมߋʹ଱͑΍͘͢
    ͓ͯ͘͠

    View full-size slide

  6. ·ͱΊΔͱ
    ▸ ΋ͷͮ͘Γ͸ɺ্ྲྀ͔ΒԼྲྀʹ޻ఔ͕ਐΜͰ͍͘
    ▸ ্ྲྀͷΞ΢τϓοτ඼࣭͕ΊͪΌେࣄ
    ▸ ্ྲྀͷΞ΢τϓοτ඼࣭ΛߴΊΔͨΊͷख๏ʹ஫໨ू·Δ
    ▸ ϓϩτλΠϐϯά
    ▸ ΞδϟΠϧ

    View full-size slide

  7. How About “UI/UX Design”?

    View full-size slide

  8. ࠓ೔ͷݴ͍͍ͨ͜ͱ
    Design ʮIAͱτϯϚφʯ͕େࣄ
    Dev ʮཁ݅ఆٛͱσʔλઃܭʯ͕େࣄ

    View full-size slide

  9. UI/UXσβΠϯ͸ײ֮100%͡Όͳ͍
    ▸ ·ͣώΞϦϯάͯ͠Կͱͳ͘Πϝʔδ͢Δ
    ▸ ҊΛ·Δͬͱ࡞ͬͯΈΔ
    ▸ ݟͤͯϑΟʔυόοΫ΋Β͏
    ▸ मਖ਼͢Δ
    ▸ ݟͤͯϑΟʔυόοΫ΋Β͏
    ▸ मਖ਼͢Δ
    ▸ …
    ▸ Ғ͍ਓ͕ೲಘͨ͠Β׬ྃ

    View full-size slide

  10. UI/UXσβΠϯ͸ײ֮100%͡Όͳ͍
    ▸ ·ͣώΞϦϯάͯ͠Կͱͳ͘Πϝʔδ͢Δ
    ▸ ҊΛ·Δͬͱ࡞ͬͯΈΔ
    ▸ ݟͤͯϑΟʔυόοΫ΋Β͏
    ▸ मਖ਼͢Δ
    ▸ ݟͤͯϑΟʔυόοΫ΋Β͏
    ▸ मਖ਼͢Δ
    ▸ …
    ▸ Ғ͍ਓ͕ೲಘͨ͠Β׬ྃ
    ×

    View full-size slide

  11. UI/UXσβΠϯ΋ɺੵΈ্͛ɻ
    ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ
    ϒϥϯσΟϯάɾΫϦΤΠςΟϒ
    ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ
    Visual/UI Design
    Layout, Components
    ૢ࡞ϑϩʔ
    IA
    ίϯηϓτɾτϯϚφ

    View full-size slide

  12. σβΠϯݱ৔ͷ൵ܶ͋Δ͋Δ
    ▸ ίϯηϓτͱ՝୊ղܾΞΠσΟΞྑͦ͞͏
    ▸ τϯϚφ΋Πϝʔδڞ༗ͨ͠
    ▸ جຊతͳػೳϦετͱૢ࡞ϑϩʔܾ·ͬͨ
    ▸ ؆қUIͱϨΠΞ΢τ΄΅Ͱ͖ͨ
    ▸ VDͷ࡞ΓࠐΈஈ֊ͰΫϦΤΠςΟϒҊݟͤΔ
    ▸ Ғ͍ਓʮࢥͯͨΜͱͪΌ͏ʯ
    ▸ Ғ͍ਓʮ͜͏͍͏ͷͲ͏͔ͳʁʢίϯηϓτɾIAมߋʣʯ

    View full-size slide

  13. ࣮෺͕ݟΕΔλΠϛϯά
    ▸ ίϯηϓτͱ՝୊ղܾΞΠσΟΞ͸ϓϩτλΠϓͰݕূͨ͠
    ▸ τϯϚφ΋Πϝʔδڞ༗ͨ͠
    ▸ جຊతͳػೳϦετͱૢ࡞ϑϩʔܾ·ͬͨ
    ▸ ؆қUIͱϨΠΞ΢τ΄΅Ͱ͖ͨ
    ▸ VDͷ࡞ΓࠐΈஈ֊ͰΫϦΤΠςΟϒҊݟͤΔ
    ▸ Ғ͍ਓʮࢥͯͨΜͱͪΌ͏ʯ
    ▸ Ғ͍ਓʮ͜͏͍͏ͷͲ͏͔ͳʁʢίϯηϓτɾIAมߋʣʯ
    ϋϦϘςײ
    ࣮෺ײ

    View full-size slide

  14. Designݱ৔ͷࠔ೉
    ▸ Dev
    ▸ ৼΔ෣͍Λఆٛ͢Ε͹ɺγεςϜ෦෼͸ϞοΫͰ͖Δ
    ▸ ઃܭཁ݅Λݟ͚ͭΔͨΊͷձ࿩͸ϓϩτλΠϓͰ΍ΕΔ
    ▸ Design
    ▸ ࠷ޙ·Ͱ࡞Γ্͛ͳ͍ͱɺ࣮෺likeͳ΋ͷ͕Ͱ͖ͳ͍
    ▸ ࠷ऴ޻ఔͷVD΍ΠϯλϥΫγϣϯ࣍ୈͰҹ৅͕େมԽ
    ▸ ʢVD΍ΠϯλϥΫγϣϯ͸՝୊ղܾͱ΄΅ؔ܎ͳ͍ʣ

    View full-size slide

  15. Ͳ͏͢Δ͔ɻ

    View full-size slide

  16. IAͰձ࿩Λ͠Α͏
    ▸ σβΠϯ࡞ͬͯյ͠·͘Δͷ͸ඇޮ཰ͩ͠ਫ਼ਆతʹෆӴੜ
    ▸ σβΠφʔͱϊϯσβΠφʔ্͕ྲྀͰձ࿩Ͱ͖ΔϨΠϠʔ͕
    ඞཁ
    ▸ ͦΕ͕ʮIAʢ৘ใઃܭʣʯ
    ▸ IA͸ٕज़͕ͩɺந৅తࢥߟྗ͑͋͞Ε͹ೖ໳ૣ͍
    ▸ νʔϜͷج൫εΩϧͱͯ͠Φεεϝ

    View full-size slide

  17. Information Architecture: ৘ใઃܭ
    ▸ ۩ମతͳUI΍άϥϑΟοΫΛߟ͑ΔࡐྉΛ࡞Δ޻ఔ
    ▸ ʮ΍Γ͍ͨ͜ͱΛ৘ใϨϕϧͰ੔ཧ͢Δ͜ͱʯ
    ▸ ԿΛ఻͑Δ͔ɺԿΛݟͤΔ͔
    ▸ ԿΛͤ͞Δ͔
    ▸ ৘ใಉ࢜ͷؔ܎ੑ͸Ͳ͏ͳ͍ͬͯΔ͔
    ▸ Groups, Central-Peripherals, General-Examples
    ▸ Parent-Child, Siblings, Counterparts
    ▸ PriorityɿԿ͕࠷ॏཁͰɺԿ͕αϒͰɺԿ͕Φϓγϣφϧ͔

    View full-size slide

  18. ྫʣʮΫϨΧΛొ࿥͢Δʯػೳ
    ▸ ΫϨΧҰཡ
    ▸ ݅਺
    ▸ 0݅
    ▸ 1݅~5݅ʢPSPͷ࢓༷Ͱ্ݶ͋Γʣ
    ▸ දࣔ৘ใ for ࣝผ
    ▸ ϒϥϯυϩΰ*
    ▸ ϒϥϯυ
    ▸ PANͷলུදࣔɿʢOSඪ४ʣԼ4ܻ
    ▸ ༗ޮظݶ
    ▸ ༗ޮظݶܥΞϥʔτ*ɿ΋͏͙͢੾Εͦ͏ or ੾Εͨ
    ▸ ΞΫγϣϯ
    ▸ ৽نొ࿥*
    ▸ มߋɿܾࡁ࢓༷తʹมߋෆՄ* → ʮ࡟আ+৽نొ࿥ʯ
    ▸ ࡟আ
    ▸ ϔϧϓ

    View full-size slide

  19. ྫʣʮΫϨΧΛొ࿥͢Δʯػೳ
    ▸ ొ࿥৚݅
    ▸ VISA, Master
    ▸ ඇରԠϒϥϯυ͕͋ΔɿJCB, Amex, Diners
    ▸ ΫϨΧొ࿥৘ใ
    ▸ PAN
    ▸ ܗࣜ͸ϒϥϯυʹΑͬͯมΘΔ
    ▸ ઌ಄਺ܻͷ࠾൪ϧʔϧͰϒϥϯυಛఆՄೳ
    ▸ mܻ۠੾Γͷܭnจࣈͷ൒֯਺ࣈ
    ▸ ΧϝϥͰOCRεΩϟϯ΋Մೳ
    ▸ ༗ޮظݶɿmm/yy
    ▸ ະདྷറΓ
    ▸ ηΩϡϦςΟίʔυɿ3~4ܻʢϒϥϯυຖʣ
    ▸ هࡌ৔ॴ͕ϒϥϯυʹΑͬͯҧ͏
    ▸ ݺͼํ͕ଟ͘Θ͔Γʹ͍͘ͷͰϔϧϓ
    ▸ Χʔυ໊ٛɿେจࣈӳ਺ࣈεϖʔε͋Γ
    ▸ ϝΠϯΧʔυϑϥά
    ▸ 1͚ͭͩ
    ▸ มߋՄೳ
    ▸ ͦͷଞɿϢʔβͷηΩϡϦςΟෆ҆Λ෷১͢Δ࢓ֻ͚*

    View full-size slide

  20. IAϨϕϧͰҙࢤܾఆ͢Ε͹ɺେ୾ͳ͜ͱ͕Ͱ͖Δ
    ▸ ͜Ε͸Կ΋νϟϨϯδ͠ͳ͍൛
    ▸ ৘ใʹಛʹ༏ઌ౓͸෇͚ͳ͔ͬͨ
    ▸ ʮඪ४ͦͷ··ʯΛ࠾ͬͨ
    ▸ ʢྑ͍ྫݟ͚ͭΒΕͣɾɾ

    View full-size slide

  21. ͲΜͳϨΠϠʔͷσβΠϯ΋ɺ·ͣ͸IA͔Βɻ
    ▸ αʔϏεશମͷσβΠϯ
    ▸ ίϯηϓτɾίΞମݧ
    ▸ φϏήʔγϣϯ
    ▸ ػೳͷσβΠϯ
    ▸ ػೳཁ݅ɾఏڙՁ஋
    ▸ σʔλมԽ
    ▸ ը໘ɾUIͷσβΠϯ
    ▸ ࢹઢ༠ಋ
    ▸ ΞΫγϣϯ༠ಋ
    ▸ ৘ใҰཡɾมԽՄೳੑ

    View full-size slide

  22. ·ͱΊ
    ▸ IAΛҙࣝͨ͠ϓϩμΫτ࡞Γ
    ▸ ʮࢥͯͨΜͱͪΌ͏ʯͷޙग़͠ճආ
    ▸ ఏڙՁ஋ΛੵΈ্͛ΔͨΊ
    ▸ σβΠφʔɾϊϯσβΠφʔؒͰIAϨϕϧͷձ࿩Λ͠Α͏
    ▸ ࠷ऴతͳݟͨ໨΍ؾ࣋ͪྑ͞͸σβΠφʔ͕ؤுΔ
    ▸ ΑΓຊ࣭తͳ՝୊ղܾ΍Ծઆɾ৘ใͷධՁʹूத͠Α͏
    ▸ IAͷձ࿩͕Ͱ͖Ε͹ɺϓϩμΫτͮ͘ΓʹࢀՃͰ͖Δ

    View full-size slide

  23. ࣍ճɿInformation Architecture 2ʮͦͷΧΠθϯ͸UIมߋʁIAมߋʁʯ
    ▸ σβΠϯͷ࢓ࣄͱIAͷؔ܎ͷ۩ମྫ
    ▸ ॳظϦϦʔε·Ͱ
    ▸ εϜʔζͰSolutionΫϦςΟΧϧͳମݧ
    ▸ γϯϓϧͳIAɺໃ६ͷͳ͍UI
    ▸ ϦϦʔεޙͷԾઆݕূϑΣʔζ
    ▸ IAͷධՁ
    ▸ VDͷ໰୊ൃݟɾௐ੔
    ▸ New Features
    ▸ ΫΠζܗࣜͰIAͱσβΠϯΛߟ͑Δ
    ▸ IAσβΠϯۀ຿ͷΞϯνύλʔϯ
    ▸ IAͱVDͷ޻ఔΛ෼அ͗͢͠Δ
    ▸ IAͷΞ΢τϓοτ͸WF

    View full-size slide

  24. @ikutani41
    2018/1/31
    Thank you!
    Information Architecture
    ~ IAͱ͸ & Կ͕خ͍͠ͷ ~

    View full-size slide

  25. Twitter & note
    @ikutani41
    ྑ͔ͬͨΒಡΜͰͶ

    View full-size slide