Design Talk#2 Information Architecture 1/2

by Yutaro Ikutani

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

How About “UI/UX Design”?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Ͳ͏͢Δ͔ɻ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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