プロトタイプドリブンなデザインを実現する考え方と環境 / Prototype-driven design

by sagaraya

Slide 1

Slide 1 text

ϓϩτλΠϓυϦϒϯͳσβΠϯ Λ࣮ݱ͢Δߟ͑ํͱ؀ڥ 2019/10/7 UX Engineer Meetup ॏా ܡ੤

Slide 2

Slide 2 text

ॏా ܡ੤ Shigeta Keisei ϛΫγΟ → Goodpatch → Sen → ΫοΫύου @sagaraya (Twitter/noteͳͲ) UXΤϯδχΞྺ2ʙ3೥

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

No content

Slide 8

Slide 8 text

IUUQTUZQFKQFUGFBUVSF ʲUXΤϯδχΞΛ໨ࢦ͢ʹ͸ʁʳΫοΫύουͷUXΤϯδχΞ ʹฉ͍ͨɺಇ͖ํ΍ษڧ๏ - ΤϯδχΞtype | స৬type 20΋ͷϓϩτλΠϓͱݴޠԽͷ྆ྠͰΞϓϦΛϦ χϡʔΞϧ͠·ͨ͠ IUUQTOPUFNVTBHBSBZBOOBCDBBFG ͜Ε·ͰͰҰ൪ϓϩτλΠϐϯάͰ͖ͯΔ࣮ײ͕͋Δ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

ͳͥͰ͖ͯΔͷ͔ʁ

Slide 11

Slide 11 text

1. ʮliving onʯΛॏࢹ͢Δ 2. ΤϯδχΞͱͯ͠ͷৗࣝΛࣺͯΔ 3. ଍ճΓΛॆ࣮ͤͯ͞εϐʔυΞοϓ

Slide 12

Slide 12 text

ʮliving onʯΛॏࢹ͢Δ 1

Slide 13

Slide 13 text

$SFBUJWF4FMFDUJPO Q lࣗࣾ੡඼ͷ։ൃதʹɺͦͷ੡඼Λ։ൃऀࣗ਎͕࢖ͬͯධՁ͢Δख๏ Λɺ͜ͷۀքͰ͸ʮυοάϑʔσΟϯάʯͱ͍͏ɻ͜ͷ༻ޠ͸ݸਓతʹ ͋·Γ޷͖Ͱ͸ͳ͔ͬͨ͠ɺΞοϓϧతͳηϯεʹ΋ૌ͑ͳ͍ɻʢத ུʣΞοϓϧࣾ಺Ͱ΋ʮυοάϑʔσΟϯάʯͱݺͿ৔߹͸͕͋ͬͨɺ ։ൃதͷ੡඼Λ೔ৗੜ׆Ͱ࣮੡඼ͷΑ͏ʹ࢖͏͜ͱΛࢦͯ͠ΑΓසൟʹ ࢖ΘΕͨͷ͸ɺʮMJWJOHPOʢ฻Β͢ʣʯͱ͍͏දݱͩͬͨɻz

Slide 14

Slide 14 text

ը໘

Slide 15

Slide 15 text

ը໘ ΞϓϦར༻தͷମݧ

Slide 16

Slide 16 text

ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δ೔ͷମݧ

Slide 17

Slide 17 text

ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δ೔ͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖ೔ͷମݧ

Slide 18

Slide 18 text

ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δ೔ͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖ೔ͷମݧ ຖ೔ͷମݧΛͱ͓ͯ͠ɺϢʔβʔ͕੒௕ͯ͠ ࣗ෼ͷײ֮ͰྉཧΛָ͠ΊΔΑ͏ʹͳΔ ໨ࢦ͢ͱ͜Ζ

Slide 19

Slide 19 text

ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δ೔ͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖ೔ͷମݧ ϢʔβʔςετͰ  ݕূͰ͖Δൣғ

Slide 20

Slide 20 text

ը໘ ΞϓϦར༻தͷମݧ ར༻લͷମݧ ར༻ޙͷମݧ ྉཧɾ৯ʹؔ͢Δ೔ͷମݧ ɾɾɾ ɾɾɾ ྉཧɾ৯ʹؔ͢Δຖ೔ͷମݧ ຊ౰ʹݕূ͍ͨ͠ൣғ

Slide 21

Slide 21 text

living on͢Δʢ೔ৗੜ׆ͷதͰ࢖͏ʣ ʹ͸࣮૷͢Δ͔͠ͳ͍

Slide 22

Slide 22 text

ΤϯδχΞͱͯ͠ͷৗࣝ ΛࣺͯΔ 2

Slide 23

Slide 23 text

σβΠϯ ΤϯδχΞϦϯά ࢖͍΍͢͞ ඒ͠͞ Ձ஋ΛఏڙͰ͖͍ͯΔ͔ ίϯηϓτ͕఻ΘΔ͔ อकੑ ҆ఆੑ ࢓༷Λຬ͍ͨͯ͠Δ͔

Slide 24

Slide 24 text

σβΠϯ ΤϯδχΞϦϯά ࢖͍΍͢͞ ඒ͠͞ Ձ஋ΛఏڙͰ͖͍ͯΔ͔ ίϯηϓτ͕఻ΘΔ͔ อकੑ ҆ఆੑ ࢓༷Λຬ͍ͨͯ͠Δ͔ ϓϩτλΠϐϯάͰߟ͑Δ  ͷ͸ͬͪ͜

Slide 25

Slide 25 text

ϓϩτλΠϐϯά͸ΤϯδχΞϦϯάΛ ൐͏σβΠϯߦҝ

Slide 26

Slide 26 text

ΤϯδχΞϦϯά อकੑ ҆ఆੑ ࢓༷Λຬ͍ͨͯ͠Δ͔ ΤϯδχΞͱͯ͠ ͷৗࣝ

Slide 27

Slide 27 text

͖Ε͍ͳίʔυͰ͸ͳ͘εϐʔυΛ༏ઌ͢Δ ίʔυϨϏϡʔ͸͠ͳ͍ ΞʔΩςΫνϟ͸ڽΒͳ͍ εϐʔυ্͕ΔͳΒίʔυڞ௨Խ͢Δ͠ςετॻ͘

Slide 28

Slide 28 text

࢓༷͸fix͢Δ΋ͷͰ͸ͳ͍ ͋Δͷ͸ݱ࣌఺ͷϕετ ࢓༷ܾ·ͬͯͳ͍͔Β࣮૷͠ͳ͍͸/(

Slide 29

Slide 29 text

ΈΜͳͰݟੵ΋Βͳ͍ ޻਺΍ظݶͰ͸ͳ͘ɺ඼࣭ʹϑΥʔΧε͢Δ  ʢͱ͸͍͑ࣗ෼ͳΓʹ͍ͭ·Ͱʹ΍Δ͔͸ܾΊΔʣ ͋ͱͰΑΓྑ͍΋ͷΛࢥ͍͍ͭͯ΋Χλνʹ  ͠΍͍͢

Slide 30

Slide 30 text

ίʔυΛॻ͘͜ͱʹͩ͜ΘΒͳ͍ σβΠϯπʔϧ࢖ͬͨ΄͏͕ૣ͘ࢼͤΔ৔߹΋͋Δ

Slide 31

Slide 31 text

଍ճΓΛॆ࣮ͤͯ͞ εϐʔυΞοϓ 3

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

αʔϏεͰ͸ͳ͘ ձࣾͷDesign System ৽نࣄۀͰ΋࢖͑Δ

Slide 34

Slide 34 text

ίʔυԽ΋͞Ε͍ͯͯɺૣ͘ߴ͍඼࣭ͷ΋ͷΛͭ͘ΕΔ

Slide 35

Slide 35 text

ΫοΫύουͷ։ൃதͷΞϓϦΛμ΢ϯϩʔυͰ͖ΔαΠτ

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ϥϕϧΛ͚ͭΕ͹Ϛʔδ͠ͳͯ͘΋ࣾ಺഑৴Ͱ͖Δ ૣ͘഑৴ͯ͠ϑΟʔυόοΫΛ΋Β͑Δ ৄ͘͠͸ͪ͜Βˣ ಈ࡞֬ೝͷͨΊͷࣾ಺ΞϓϦ഑৴αʔϏεΛ৽ͨʹ࡞ͬͨ࿩J04%$  IUUQTTQFBLFSEFDLDPNTMJHIUBJSJPTED

Slide 38

Slide 38 text

1. ʮliving onʯΛॏࢹ͢Δ 2. ΤϯδχΞͱͯ͠ͷৗࣝΛࣺͯΔ 3. ଍ճΓΛॆ࣮ͤͯ͞εϐʔυΞοϓ ೔ৗੜ׆Ͱ࢖͏ͨΊʹϓϩτλΠϐϯά͢Δ ϓϩτλΠϐϯά͸ΤϯδχΞϦϯάΛ൐͏σβΠϯߦҝ citrusʢձࣾͷσβΠϯγεςϜʣʗhanedaʢࣾ಺഑৴πʔϧʣ

Slide 39

Slide 39 text

͓·͚ ࠓ೔࿩͞ͳ͔ͬͨ͜ͱ ࠙਌ձͰ࿩ͯ͠Έ͍ͨ͜ͱ

Slide 40

Slide 40 text

• ߟ͑ํɾ؀ڥͰ͸ͳ͘εΩϧ໘ͷ࿩ • ΤϯδχΞͱͯ͠1ਓલʹ΍͍ͬͯ͘εΩϧ ʴ ྑ͍ײ͡ྗ • UXͱ͍͏ݴ༿΁ͷ൷൑ͱͦΕʹର͢Δճ౴ • ϓϩτλΠϐϯά͢Δͱ͖ͱ͠ͳ͍ͱ͖ͷ࢖͍෼͚ • ΫοΫύουͰͷUXΤϯδχΞͷಇ͖ํ • UXΤϯδχΞืूதͳͷͰɺڵຯ͍Δํ͍ͨΒ͓࿩͠·͠ΐ͏ʂ