Design Talk#3 Information Architecture 2/2

by Yutaro Ikutani

Slide 1

Slide 1 text

Information Architecture 2 ~ ʮͦͷΧΠθϯ͸UIมߋʁIAมߋʁʯ ~ @ikutani41 2018/2/21 Design Talk#3

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

લճͷ͓͞Β͍ɿ·ͱΊ ▸ IAΛҙࣝͨ͠ϓϩμΫτ࡞Γ ▸ ఏڙՁ஋ΛੵΈ্͛ΔͨΊ ▸ ʮࢥͯͨΜͱͪΌ͏ʯͷޙग़͠ճආ ▸ σβΠφʔɾϊϯσβΠφʔؒͰIAϨϕϧͷձ࿩Λ͠Α͏ ▸ ΑΓຊ࣭తͳ՝୊ղܾ΍Ծઆɾ৘ใͷධՁʹूத ▸ IAͷձ࿩͕Ͱ͖Ε͹ɺϓϩμΫτͮ͘ΓʹࢀՃͰ͖Δ લճͷεϥΠυɿhttps://speakerdeck.com/ikutani41/2

Slide 5

Slide 5 text

Index ▸ σβΠϯͷ࢓ࣄͱIAͷؔ܎ͷ۩ମྫ ▸ ॳظϦϦʔε·Ͱ ▸ ϓϩμΫτͷίΞମݧΛܾΊΔ ▸ IA౷ҰΛͱΓͳ͕Βۤͯ͘͠΋࢈Έͩ͢ ▸ ϦϦʔεޙͷԾઆݕূϑΣʔζ ▸ New Features, ϦϑΝΫλϦϯά ▸ IAɾVDͷԾઆݕূͱམͱ݀͠ ▸ IAσβΠϯۀ຿ͷΞϯνύλʔϯ ▸ IAͱVDͷ޻ఔΛ෼அ͗͢͠Δ ▸ IAͷΞ΢τϓοτ͸WF ▸ ΫΠζܗࣜͰIAͱσβΠϯΛߟ͑Δ

Slide 6

Slide 6 text

ॳظϦϦʔε·Ͱͷ σβΠφʔͷ࢓ࣄͱ͸

Slide 7

Slide 7 text

ίΞମݧΛݕূͯ͠ݻΊΔ ࣌ؒ͸ͳ͍ɻ͔ͩΒIAΛ࢖͏ɻ ▸ ࠷ॏཁͳϢʔβ՝୊ͱղܾΞΠσΟΞΛIAͰఆٛ ▸ Problem-Solutionʹूத͢Δ ▸ ݟͨ໨ʹὃ͞Εͳ͍ ▸ ݟͨ໨ʹૣ͍ஈ֊Ͱ࣌ؒΛ͔͚ͳ͍ʢͲ͏ͤյ͢ʣ ▸ ϓϩτλΠϓ౳Λ࢖͍ɺIAͷݕূɾݟ௚͠Λ࣮ࢪ ▸ ݻ·ͬͨIAʢProblem-SolutionʣΛશମͱڞ༗

Slide 8

Slide 8 text

v1.0ͷۤ೰ʮ࢈Ήۤ͠Έʯ ࢓༷Խɾ࣮૷ϑΣʔζ΋ϦεΫ൑அͷ࿈ଓ ▸ पลྖҬͷIAʹ͍ͭͯɺϦεΫͷߴ͍ҙࢥܾఆ͸ආ͚Δ ▸ ίΞԾઆ͕֎Ε͍ͯΔ͔΋͠Εͳ͍ ▸ ਎ಈ͖͕औΕͳ͘ͳΔͷΛ๷͙ ▸ αʔϏε಺ͰIAͷໃ६͕ൃੜ͠ͳ͍Α͏࢓༷Λ౷੍͢Δ ▸ ࣮૷ஈ֊Ͱ࢓༷ௐ੔͕ൃੜͨ࣌͠ɺIAΛյ͞ͳ͍Α͏౷੍ ▸ ؾΛൈ͘ͱ؆୯ʹյΕΔ → σβΠφ΋։ൃݱ৔ʹೖΔ΂͖ ▸ εϐʔυΛग़͢ʢ஗͍ͱܟԕ͞ΕͯDev͔Β૬ஊདྷͳ͍ʣ ▸ ৽͍͠पล໰୊ͷղܾ vs. ϦϦʔεͯ͠ݕূελʔτ

Slide 9

Slide 9 text

ͦͯ͠ ϦϦʔεޙ

Slide 10

Slide 10 text

ϦϦʔεޙͷσβΠϯۀ຿ͱIA ▸ IA͓ΑͼVDͷԾઆݕূ ▸ New Features ▸ طଘIAͱͷ੔߹ੑΛอͪɺ৽ػೳͷ໾ׂΛIAϨϕϧͰద੾ʹఆٛ ͢Δ ▸ ഁյతͳมߋΛ͢Δࡍ͸खް͘έΞ ▸ ϝϯλϧϞσϧͷҠߦ͕εϜʔζʹਐΉΑ͏ͳIAઃܭΛ৺͕͚ Δ ▸ Ϣʔβίϛϡχέʔγϣϯͷઃܭ ▸ ϦϑΝΫλϦϯάʢ৘ใઃܭͷ่Εɾഁ୼ɾໃ६Λղফ͢Δʣ

Slide 11

Slide 11 text

ʮԾઆݕূʯʹ͸ མͱ͕݀͋͠Δ

Slide 12

Slide 12 text

Ծઆݕূͷམͱ݀͠ ݁Ռͷղऍʹࣦഊ͢Δͱ୆ແ͠ ▸ ϢʔβϑΟʔυόοΫ΍਺஋͕खʹೖΓ·ͨ͠ ▸ ݁ՌΛੜΜͩཧ༝ͷ௥ٻʢAttributionʣ͕伴ΛѲΔ ▸ ྑ͍݁Ռɹˠ IA͕ྑ͍ʁVDs͕ྑ͍͚ͩʁ ▸ ѱ͍݁Ռɹˠ IA͕ѱ͍ʁVDs͕ѱ͍͚ͩʁ ▸ ʮྑ͔ͬͨ/ѱ͔ͬͨʯʮ࣍͸ԿΛ͢Δʯ͕େ͖͘มΘΔ ▸ ૣͱͪΓΛ͠ͳ͍Α͏ʹ

Slide 13

Slide 13 text

Ծઆݕূͷ͜ͱΛߟ͑ͯσβΠϯ͢Δ ▸ Ϣʔβʹఏࣔ͞ΕΔͷ͸UI͚ͩ ▸ IA͸ݟ͑ͳ͍ ▸ ʮVDsʢVisual/UI Design, Interaction, Creative GraphicsʣʯͷӨڹେ ▸ ॳظ͸ಛʹIAݕূʹ஫ྗ͢΂͖ͳͷͰɺඪ४తͳVDʹ͓ͯ͠ ͘ͱ٢ ▸ ݕূՄೳੑΛߟྀͯ͠PDCA͢Δ ▸ ʮԾઆͷݕূ݁ՌΛ֬ఆͤ͞ΔͨΊʯͷमਖ਼͕͋ͬͯ΋͍͍

Slide 14

Slide 14 text

Deep dive: 8ύλʔϯ͋Δ Ϣʔβʹͱͬͯͷਅ࣮͸Ͳͷύλʔϯ͔ ྑ͍݁Ռ IA Good Bad VDs Good A B Bad C D ѱ͍݁Ռ IA Good Bad VDs Good E F Bad G H ɾAͩͱࢥ͍͍ͨ ɾCͳΒ໰୊ͳ͍ʢVDվળ͢Δ͚ͩʣ ɾຊ౰͸BͳͷʹA,Cͱޡೝ͢Δͷ͕࠷ѱ ɾ࣮͸DʢقઅཁҼ΍Ұ࣌త֎෦ཁҼʣͷՄೳੑ ɾF,HͳΒݕূଓ͚Δ͚ͩ ɾຊ౰͸F,HͳͷʹE,Gͱޡೝ͢Δͷ͸ࣗݾਖ਼౰Խ ɾE,G͸DͱಉཁҼɻG͸ஶ͘͠VD͕ѱ͍Մೳੑ΋ ɾFalse-Positive vs False-Negative

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Ξϯνύλʔϯ ▸ IA͸ԾઆͰ͋Γཧ૝Ͱ͋Δ ▸ ʮݕূՄೳͳܗͰ࣮૷Մೳ͔ʯΛҙࣝ͠Α͏ ▸ ݕূෆՄೳͳԾઆʹͩ͜Θ͍ͬͯͯ΋ҙຯ͸ͳ͍ ▸ ݕূՄೳͳܗͰදݱͰ͖ͳ͍ͳΒIAΛॊೈʹมߋ͢΂͖ ▸ ʮIA͸WFʯ͸ࣄނͷݩ ▸ WF͸͍͔ͭ͘ϏδϡΞϧ৘ใΛ࣋ͬͯ͠·͍ͬͯΔ ▸ WFʹ͋ΔϨΠΞ΢τΛେ͖͘ม͑ΔҊΛ཈੍ͯ͠͠·͏ ▸ ͦͷ··UI,VD͸͓Խহ͢Δ͚ͩʹͳͬͯ͠·͍͕ͪ ▸ ଓ͖͸ͪ͜ΒͷهࣄʢQ3ʣͰɿhttps://note.mu/ikutani41/n/n4b3119aeae8e

Slide 17

Slide 17 text

Slide 18

Slide 18 text

໰୊1 ·ͣ͸ͪ͜ΒΛݟ͍ͯͩ͘͞

Slide 19

Slide 19 text

What Designers Think & How to Embody Ideas#1 @ikutani41 2018/1/17

Slide 20

Slide 20 text

σβΠϯLTୈ1ճͷεϥΠυදࢴͰ͢ɻ໰୊ʹؾ෇͖·͔͢ʁ

Slide 21

Slide 21 text

εϥΠυσβΠϯ΋IA͔Βɻɹ- 1/3 - Sequence Number - Incremental - #1, #2, #3… - Title - Required - Variable - Subtitle - Optional - Variable - Author - Const. - Date - Variable - Fixed format

Slide 22

Slide 22 text

εϥΠυσβΠϯ΋IA͔Βɻɹ- 2/3 - Primary - Title - Required - Variable - Subtitle - Optional - Variable - Misc - Sequence Number - Incremental - #1, #2, #3… - Author - Const. - Date - Variable - Fixed format

Slide 23

Slide 23 text

εϥΠυσβΠϯ΋IA͔Βɻɹ- 3/3 - Primary - Title - Required - Variable - Subtitle - Optional - Variable - Secondary - Series name - Sequence Number - Incremental - #1, #2, #3… - Misc - Author - Const. - Date - Variable - Fixed format

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Before / After - Primary - Title - Required - Variable - Subtitle - Optional - Variable - Secondary - Series name - Sequence Number - Incremental - #1, #2, #3… - Meta info - Author - Const. - Date - Variable - Fixed format

Slide 26

Slide 26 text

໰୊2 ͜ͷ2ͭͷαʔϏεͷσβΠϯ Կ͕ҧ͏Ͱ͠ΐ͏

Slide 27

Slide 27 text

νϟʔτ: ίΠϯ૬৔ vs Coincheck

Slide 28

Slide 28 text

৘ใͷཻ౓ ▸ ίΠϯ૬৔ͷํ͕৘ใྔ͕ଟ͘ɺϚʔέοτϦαʔνπʔϧͷϨϕϧײ ▸ औҾྔ ▸ औҾॴ໊ʢෳ਺औҾॴʣ ▸ quoteͷ໌ࣔʢෳ਺ͷquote currencyʣ ▸ ৘ใऩू΢ΟδΣοτͱͯ͠ͷΧελϚΠζੑ͕த৺ ▸ products௥Ճ, Ξϥʔτ ▸ ίΠϯνΣοΫ͸৘ใऩूΑΓചങΛॏࢹͨ͠ΞϓϦ ▸ ৘ใྔ͸ଟ͘ͳ͍ͨΊΧελϚΠζෆཁ ▸ ͦͷ୅ΘΓɺνϟʔτͷൺֱ͕͠΍͍͢ಋઢʹͳ͍ͬͯΔ

Slide 29

Slide 29 text

Navigations: Parent - Childs

Slide 30

Slide 30 text

Navigations: Siblings x 2

Slide 31

Slide 31 text

@ikutani41 2018/2/21 Thank you! Information Architecture 2 ~ ʮͦͷΧΠθϯ͸UIมߋʁIAมߋʁʯ ~

Slide 32

Slide 32 text

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