Share
Embed
Understanding UX Design Proces - デザインリテラシーを高める方法
2022年10月29日に、青森商工会議所で開催されたセミナー・イベント「Web活用トレンドDX(デラックス)」で講演したスライド。
bookslope
October 29, 2022
Transcript
47 slides
-
UNDERSTANDING UX DESIGN PROCESS Mede by Takashi Sakamoto @bookslope
69σβΠϯϓϩηεΛཧղ͢Δ Photo by Keith Hardy on Unsplash -
UNDERSTANDING UX DESIGN PROCESS ࡔຊو࢙ @bookslope εϚʔτϞϏϦςΟࣄۀਪਐࣨࣨ ใઃܭɾ69σβΠϯ͕ઐྖҬ ΦϯϥΠϯίϛϡχςΟӡӦ
دߘɾߨԋଟ ஶ࡞ʰ*"γϯΩϯάʱͳͲ ౦ژࡏॅͷσβΠφʔͰ͢ɻσδλϧϓϩμΫτʹ͓͚ΔʮใΞʔΩςΫνϟʯ ʮ69σβΠϯʯͳͲΛֶͼɺݱࡏʮϞϏϦςΟʯʮ.BB4ʯʹ͓͚Δࣄۀ ։ൃɾαʔϏε։ൃʹܞΘ͍ͬͯ·͢ɻ -
࢈ࣗಈं υοπ 2017 2019 ϦϯΫε ωοτΠϠʔ άϧʔϓ 2000 2002 ύΠφοϓϧ
Χϯύχʔ ϰΠϩδοΫ 1999 1999 JDS 1997 2001 1995 େࡕ ౦ژ 2021 ݱࡏ UNDERSTANDING UX DESIGN PROCESS Career άϥϑΟοΫ σβΠφʔ 8FC σβΠφʔ 8FC σΟϨΫλʔ σδλϧશൠ 69σβΠφʔ ࣗಈं 69σβΠφʔ ϞϏϦςΟࣄۀ ίϯαϧɾऔࡐ 8FC σΟϨΫλʔ Πϯϋε -
UNDERSTANDING UX DESIGN PROCESS ϙελʔ %51 σεΫτοϓ 8FC εϚϗ "QQ
ࣗಈं ).* మಓ .BB4 ؍ޫ 4NBSU$JUZ ύοέʔδ Designing for … -
by Amazon 2011 2016 IAγϯΩϯά IA/UXϓϥΫςΟε UX x Biz Book
UNDERSTANDING UX DESIGN PROCESS -
69 γφϦΦ ϖϧιφ ϢʔβʔମݧΛࢦ͢ɻফඅऀͷମݧͱͯ͠ϚʔέςΟϯάͰ$9ͳͲΘΕΔ͕ 69Ͱ౷Ұ͢Δɻ·ͨͦͷऔΓΈΛࢦͯ͠69σβΠϯͱݺͿɻ ͦͷαʔϏεϓϩμΫτͷతୡ·ͰͷεςοϓΛඳ͍ͨͷΛࢦ͢ɻར༻ঢ়گ ΛετʔϦʔʢޠʣʹͯ͑͠Δ߹ʹɺίϚອը෩ʹͨ͠ͷ͕ଟ͍ɻ Ϣʔβʔ૾Λ۩ମԽͨ͠ͷɻԾϢʔβʔͱݺͿ߹͋Δ͕ɺλʔήοτͱҟ ͳΓɺಛఆͷਓΛࡐʹ༻͢Δ͜ͱ͕ଟ͍ɻσϞάϥͷ΄͔Ձ؍՝ͳͲݴٴɻ )$%
ਓؒத৺ઃܭͷ͜ͱɻਓΛத৺ʹߟ͑ΒΕͨσβΠϯͷऔΓΈΛࢦ͢ɻԤभͰ 6$%ͱݺΕΔ͕)$%Ͱ౷Ұ͢Δɻ *" ใઃܭͷ͜ͱɻใΛཧ͠Ϣʔβʔʹ͔Γ͑͘͢ΔߦҝɺϢʔβʔ͕ใ Λ୳͘͢͢͠ΔߦҝͳͲΛࢦ͢ɻ $+. ސ٬ͷߦಈΛδϟʔχʔʢཱྀʣʹݟཱͯͨϑϨʔϜϫʔΫͷ͜ͱɻαʔϏεΛ ೝ͠ɺڵຯΛ࣋ͪɺߪೖਃ͠ࠐΈʹ౸ୡ͢Δ·ͰͷߦಈΛਤࣜԽͨ͠ͷɻ UNDERSTANDING UX DESIGN PROCESS -
Service Design ϞϊͱαʔϏεͱ͕ผʑͰͳ͘ɺ αʔϏεͷதʹϞϊؚ͕·Ε͓ͯ ΓɺҰମԽͯ͠Γͤͳ͍ߏΛ αʔϏευϛφϯτϩδοΫͱݺ Ϳɻ UNDERSTANDING UX DESIGN
PROCESS Ϟϊ αʔϏε Ϟϊ αʔϏε 4%-4FSWJDF%PNJOBOU-PHJD (%-(PPET%PNJOBOU-PHJD by αʔϏεɾυϛφϯτɾϩδοΫͷൃͱԠ༻ -
About Design σβΠϯͱɺ૬ख͕Ͳ͏تΜͰΒ ͑Δ͔Λߟ͑ɺܭը͢Δ͜ͱʹ΄͔ ͳΒͳ͍ɻ͔ͩΒͦ͜ɺ૬खΛΑ͘ ΓɺͲ͏تͿ͔Λߟ͑ɺ࣮ߦ͢Δ͜ ͱ͕େࣄɻ UNDERSTANDING UX DESIGN
PROCESS by ৽ւ @shinkaimakoto -
Cusomer Journey ސ٬ͷߦಈΛδϟʔχʔʢཱྀʣʹݟཱ ͯͨϑϨʔϜϫʔΫͱͯ͠ɺΧελ ϚʔɾδϟʔχʔɾϚοϓΛ࡞͢Δ ߹͕͋Δɻ αʔϏεΛೝ͔ΒɺڵຯΛ ࣋ͪɺߪೖਃ͠ࠐΈʹ౸ୡ͢Δ· ͰͷߦಈΛਤࣜԽͨ͠ͷͰɺސ٬ ଆʢը໘্෦ʣͱϏδωεఏڙଆ
ʢը໘Լ෦ʣͱʹ͚ɺҰ࿈ͷମݧ ʹԿ͕ى͖ɺԿ͕ඞཁ͔Λ၆ᛌͯ͠ ܭը͢Δɻ UNDERSTANDING UX DESIGN PROCESS by RaIL Europe Experience Map -
Outcome Ұ࿈ͷମݧΛ၆ᛌ͢Δ͜ͱͰɺ͍ͭ ͲΜͳͱ͖ʹͦͷσβΠϯʹ৮ΕΔ ͨͷ͔ɺ·ͨɺͦͷՌʹͲ͏ ͍ͬͨ͜ͱ͕ߟ͑ΒΕΔͷ͔Λݟۃ ΊΔࢳޱʹͭͳ͕ΔͨΊɺϚʔέ ςΟϯάޮՌͱ߹Θͤͯ,1*Խʢඪ ΛԽʣ͢Δ߹͕ଟ͍ɻ UNDERSTANDING UX
DESIGN PROCESS ڵຯ ೝ ߦಈ ڞ༗ "55&/5*0/ */5&3&45 "$5*0/ 4)"3& ݕࡧ 4&"3$) Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ -
Outcome Ұ࿈ͷମݧΛ၆ᛌ͢Δ͜ͱͰɺ͍ͭ ͲΜͳͱ͖ʹͦͷσβΠϯʹ৮ΕΔ ͨͷ͔ɺ·ͨɺͦͷՌʹͲ͏ ͍ͬͨ͜ͱ͕ߟ͑ΒΕΔͷ͔Λݟۃ ΊΔࢳޱʹͭͳ͕ΔͨΊɺϚʔέ ςΟϯάޮՌͱ߹Θͤͯ,1*Խʢඪ ΛԽʣ͢Δ߹͕ଟ͍ɻ UNDERSTANDING UX
DESIGN PROCESS ڵຯ ೝ త ڞ༗ "55&/5*0/ */5&3&45 0#+&$5*7& 4)"3& खஈ "$$&44 Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ -
Outcome ͨͱ͑ɺཱྀߦ༧αΠτͷσβΠϯ Ͱ͋Εɺ࣮ࡍʹཱྀߦʹߦ͘·͑ʹ ޱίϛΛݟͯڵຯؔ৺ΛߴΊɺ༧ ͠ʹདྷΒΕ·͢ɻ·ͨɺͦΕ༧ ͕తͱݴ͏ΑΓɺཱྀߦʹߦͨ͘Ί ͷखஈͱͯ͠༧Λ͢Δͱ͍͏͜ͱ ʹͳΓ·͢ɻ UNDERSTANDING UX
DESIGN PROCESS ޱίϛ ϝσΟΞͰΔ ཱྀߦʹߦ͘ ϨϏϡʔ ཱྀߦ༧ αΠτ ڵຯ ೝ ڞ༗ "55&/5*0/ */5&3&45 4)"3& త 0#+&$5*7& खஈ "$$&44 Ͳ͔͜ΒΞΫηε͔ͨ͠ Ͳ͏͍͏ߦಈΛͱ͔ͬͨ -
INVISIBLE VALUE σβΠϯϓϩηεͱɺσβΠϯͷ࡞ ʢΞτϓοτʣ͚ͩΛࢦ͢ͷͰ ͳ͘ɺࣄલௐࠪઃܭஈ֊ΛܦͯΞ τϓοτ͢Δ·ͰͷҰ࿈ͷྲྀΕؚ͕ ·Ε͍ͯΔɻͦͷϓϩμΫταʔϏ ε͕ΘΕΔঢ়گΛཧղ͔ͯ͠Βσβ ΠϯΛਐΊΔඞཁ͕͋Δɻ ϞϊͱαʔϏεΓͤͳ͍
σβΠϯɺ͕ࣗओޠͰͳ͍ Ұ࿈ͷମݧΛ၆ᛌͯ͠ݟΔํ๏ΛΔ UNDERSTANDING UX DESIGN PROCESS -
5 LAYERS ++(ͷʮ69Λߏ͢Δͭͷஈ֊ʯͰ ߟ͑Δͱɺ༏ΕͨσβΠφʔ͜ΕΒ ͷఔͯ͢Λ͍ͯ͠Δ͜ͱ͕Θ͔ Δɻ σβΠϯ࡞ۀͱද෦͚ͩΛࢦ ͢͜ͱͰͳ͍ɻ ཁ݅ ߏ
ࠎ֨ ද ઓུ ίϯςπɾػೳ ใΞʔΩςΫνϟ ΠϯλϥΫγϣϯσβΠϯ ϏδϡΞϧσβΠϯ χʔζɾత UNDERSTANDING UX DESIGN PROCESS By Jesse James Garrett “Elements of User Experience” -
Design Outputs σβΠϯͷఔʹɺ࡞ۀ࣌ؒʢΞ 065165ʣͷ΄͔ʹɺೝࣝ͢Δ */165ͱɺࢥߟ͢Δ5)*/,ؚ͕·Ε Δ͜ͱΛΕ͕ͪɻ */165ʹɺࣄલௐؚ͕ࠪ·Εɺ 5)*/,ʹɺͲͷΑ͏ʹσβΠϯ͢ Δͷ͔ͱ͍ͬͨܭըؚ͕·ΕΔɻ 23
σβΠϯͷ࡞ 5)*/, 065165 */165 ઃܭ ௐࠪ UNDERSTANDING UX DESIGN PROCESS -
Double Diamond μϒϧμΠϠϞϯυɺʹӳ ࠃσβΠϯڠٞձͰॳΊͯಋೖ͞Ε ͨɺͭͷμΠϠϞϯυΛඳ͘Α͏ʹ ൃࢄͱऩଋΛߦ͏՝ղܾํ๏ͷͻ ͱͭɻ ਖ਼͍͠Λݟ͚ͭΔ ਖ਼͍͠ղܾΛݟ͚ͭΔ ୳ࡧ
ఆٛ ల։ ఏڙ %*4$07&3 %&'*/& %&7&-01 %&-*7&3 ൃࢄ ऩଋ ऩଋ ൃࢄ UNDERSTANDING UX DESIGN PROCESS -
UX Research σβΠϯఔΑΓલͷஈ֊ʹ͓͍ͯɺ Ќ൛ϓϩτλΠϐϯάͰɺ࣮ࡍʹυ ϥΠόʔΛ؍͢Δ69ϦαʔνΛ࣮ ࢪͨ͠ྫʢ6CFSʣ σβΠϯ اը ࣮ݧ ։ൃ
By Grace Vorreuter and new driver research participant in car testing in San Francisco UNDERSTANDING UX DESIGN PROCESS -
HCD Process *40ʢ+*4;ʣΠϯλϥ ΫςΟϒγεςϜͷਓؒத৺ઃܭϓϩ ηεΛࢦ͢ɻ )$%ͷਐΊํͷجຊɺͷߏ ஈ֊͔ΒରϢʔβʔͱͦͷཁٻΛ໌ ֬ʹͯ͠ɺཁٻʹ߹ͬͨͷΛઃܭ ͠ɺຬ߹͍ΛධՁ͢Δ͜ͱͰ͢ɻ Ϣʔβʔͷཁٻ͕ຬͨ͞ΕΔ·Ͱɺ͜
ΕΛ܁Γฦ͠·͢ɻ )$%ϓϩηε σβΠϯͷ࡞ ཁٻࣄ߲ͷ໌֬Խ ධՁ ˞)$%)VNBO$FOUFSFE%FTJHOͷུশ ར༻ঢ়گͷཧղ )$%ͷඞཁੑͷಛఆ 26 1 2 3 4 UNDERSTANDING UX DESIGN PROCESS -
Usage Condition ར༻ঢ়گͷཧղʕʕͨͱ͑ɺࢠ ͷσβΠϯΛ͢Δ߹ɺͲ͜ʹஔ͔ ΕΔ༧ఆ͔ ୭͚ͷͷ͔ͳͲɺࣄ લʹ֬ೝ͓ͯ͘͜͠ͱͰՌʹͭͳ ͕Γ͍͢σβΠϯʹ͢Δ͜ͱ͕Ͱ ͖·͢ɻ Ӻߏ
ॅใࢽ உੑ λΠτϧ͕ಡΊΔΑ͏ٯ͞·ʹஔ͔Ε͍ͯΔ༷ࢠ UNDERSTANDING UX DESIGN PROCESS -
IA ॻ੶ʮใΞʔΩςΫνϟʯͰɺ ྑ͍ใΞʔΩςΫνϟʮϢʔ βʔʯʮίϯςϯπʯʮίϯςΩετʯ ͷͭΛόϥϯεΑ͘ߟྀ͍ͯ͠Δ ͷͱ͍ͯ͠·͢ɻϢʔβʔͷཱ จ຺Λߟྀͯ͠ίϯςϯπΛఏࣔ͢ Δ͔Βͦ͜ɺ͡Ίͯใ׆͖ͨ ͷʹͳΓ·͢ɻ ୭ʹ
USER ͲͷΑ͏ʹ CONTEXT ԿΛ CONTENT UNDERSTANDING UX DESIGN PROCESS -
Design Thinking ʮσβΠϯࢥߟʯͱɺσβΠφʔ ΫϦΤΠλʔ͕ۀͰ͏ࢥߟϓϩη εΛ׆༻͠ɺલྫͷͳ͍՝ະ ͷʹରͯ͠࠷దͳղܾΛਤΔͨ Ίͷࢥߟ๏ͩɻ ఏٞ ڞײ ࢼ࡞
ςετ &.1"5): %&'*/& 130505:1& 5&45 ऩଋ ൃࢄ *%&"5& UNDERSTANDING UX DESIGN PROCESS -
DESIGN PROCESS σβΠϯϓϩηεͱɺσβΠϯͷ࡞ ʢΞτϓοτʣ͚ͩΛࢦ͢ͷͰ ͳ͘ɺࣄલௐࠪઃܭஈ֊ΛܦͯΞ τϓοτ͢Δ·ͰͷҰ࿈ͷྲྀΕؚ͕ ·Ε͍ͯΔɻͦͷϓϩμΫταʔϏ ε͕ΘΕΔঢ়گΛཧղ͔ͯ͠Βσβ ΠϯΛਐΊΔඞཁ͕͋Δɻ σβΠϯ࡞͚͕ͩσβΠϯͰͳ͍
ΞτϓοτલͷఔʢௐࠪͳͲʣ͕ॏཁ ར༻ঢ়گΛཧղ͔ͯ͠ΒਐΊΔ UNDERSTANDING UX DESIGN PROCESS -
UNDERSTANDING UX DESIGN PROCESS Design Literacy σβΠϯϦςϥγʔͱɺओʹσβΠ ϯͷܗཧɺ੍࡞ͷϓϩηεɺྺ ࢙ɾจԽʹର͢ΔࣝͳͲΛࢦ͢ઐ ༻ޠɻ
ۙɺސ٬ମݧʹ͓͍ͯσβΠϯ͕ ॏཁࢹ͞Ε͍ͯΔྲྀΕΛड͚ɺσβΠ ϯϦςϥγʔΛϕʔεʹͨ͠அྗ͕ ٻΊΒΕ͍ͯ·͢ɻ σβΠφʔ͚ͩͰͳ͘ɺσβΠϯʹ ؔΘΔਓ͕͖࣋ͭεΩϧͱ͍͑· ͢ɻ σβΠϯʹ͓͚Δஅྗ ͨͩͷࢥ͍͜Έ σβΠϯϦςϥγʔ ೝόΠΞε -
UNDERSTANDING UX DESIGN PROCESS Mind Control ϚΠϯυίϯτϩʔϧͱɺૢ࡞ऀ͔ ΒͷӨڹڧ੍Λؾ͔ͮΕͳ͍͏ͪ ʹɺଞऀͷਫ਼ਆաఔߦಈɺਫ਼ਆঢ় ଶΛૢ࡞ͯ͠ɺૢ࡞ऀͷ߹ʹ߹Θͤ
ͨಛఆͷҙࢥܾఆɾߦಈͱ༠ಋ͢ Δ͜ͱɾٕज़ɾ֓೦Ͱ͋ΔɻΟΩ ϖσΟΞ Credit: ASSOCIATED PRESS -
Horai EMot my route LUUP aimo WHILL docomo bike share
Multimodal Single-mode JR East JR East WILLERS Whim ANA Uber Special Public UNDERSTANDING UX DESIGN PROCESS -
Semi Roadstar Model S Model 3 By Tesla UNDERSTANDING UX
DESIGN PROCESS -
LAYOUT PATTERN ϞϏϦςΟʢࣗಈंʣͷ).*σβΠϯ ͷτϨϯυͱͯͭ͠ͷϨΠΞτύ λʔϯ͕͋Γ·͢ɻ /*0 1PMFTUBS %ZTPOʜ #:50/ 40/:
)0/%"ʜ Meter + Infortainment Infortainment Meter ηύϨʔτܕ ίϯόΠϯܕ UNDERSTANDING UX DESIGN PROCESS -
Meter + Infortainment Side Monitor Side Monitor UNDERSTANDING UX DESIGN
PROCESS By SONY VISION -
DESIGN PATTERNS σβΠϯύλʔϯͲ͜ʹͰଘࡏ͢ Δ͕ɺݟա͢͝ͱ͙͢ʹݹष͍ࣝ ʹมΘͬͯ͠·͏ɻৗʹΞοϓσʔτ ͢ΔࣝͷҰͭͱͯ͠ɺ·ͨσβΠϯ Ϧςϥγʔͱͯ͠ʹ͚ͭΔΑ͏৺͕ ͚Δɻ σβΠϯͷஅྗσβΠϯϦςϥγʔ ύλʔϯΛࣝͱͯ͠ʹ͚ͭΔ
ύλʔϯมԽ͠Ξοϓσʔτ͞ΕΔ UNDERSTANDING UX DESIGN PROCESS -
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ THANKS FOR YOUR ATTENTION! FIN Mede by Takashi Sakamoto
@bookslope Photo by Keith Hardy on Unsplash