Think Design for Future.

Slide 1

Slide 1 text

Λߟ͑Δ ͜Ε͔Βͷ 5 Mar. 2016 - FRONTEND CONFERENCE 2016 σβΠϯ

Slide 2

Slide 2 text

ࢁ Լ Ұ थ ΠϯϑΥϝʔγϣϯΞʔΩςΫτ 69σΟϨΫλʔ ਓؒத৺ઃܭਪਐػߏࢍॿձһ ώϡʔϚϯΠϯλϑΣʔεֶձࢍॿձһ

Slide 3

Slide 3 text

ҙঊͷܭը ઃܭ ػೳ΍ඒత଄ܗ designare design “Design is how it works.” Why Design? ͳͥσβΠϯ͠ͳ͚Ε͹ͳΒͳ͍ͷͰ͠ΐ͏ʁ͜Ε·Ͱ΋σβΠϯʹ͍ͭͯ͸ٞ࿦͞Εਚ͘͞Ε͖ͯ·ͨ͠ɻ

Slide 4

Slide 4 text

ϑϩϯτΤϯυʹ͓͚ΔσβΠϯ͸ͭ͘ΔͨΊͷ΋ͷ΍ٕज़͕ᷓΕɺͦͷεϐʔυ΋૿͍ͯ͠·͢ɻ

Slide 5

Slide 5 text

UI UX IA accessibility ΤϯδχΞʹ΋͜ͷΑ͏ͳΩʔϫʔυͰσβΠϯࢹ఺ΛٻΊΒΕ͍ͯ·͢ɻ

Slide 6

Slide 6 text

UX 69ᴷᴷϢʔβʔத৺ʹαʔϏεΛσβΠϯ͢Δͱ͍͏ຐ๏ͷΑ͏ʹײ͡ΒΕΔΩʔϫʔυͰ͕ͨ͘͢͞Μͷཁૉ͕แׅ͞Ε͍ͯ·͢ɻ

Slide 7

Slide 7 text

UX *" ৘ใઃܭ *Y% 6* 6& ϢʔβϏϦςΟ޻ֶ )$* ίϯϐϡʔλ޻ֶ *% ޻ۀσβΠϯ %&4*(/*/('03*/5&3"$5*0/CZ%BO4BGGFS ΋ͱ΋ͱ͸ϢʔβʔͱϞϊ΍αʔϏεͷ૬ޓ࡞༻ΛσβΠϯ͢ΔΠϯλϥΫγϣϯσβΠϯ͕த৺తͳ໾ׂͰͨ͠ɻ

Slide 8

Slide 8 text

σβΠϯʁ ͜͜Ͱ͓࿩͢ΔσβΠϯͱ͸ʁ

Slide 9

Slide 9 text

ϏδϡΞϧ ࢹ֮৘ใσβΠϯ IUUQXXXKKHOFUFMFNFOUTQEGFMFNFOUTQEG ࠎ֨ ৘ใߏ଄ ཁ݅ ໨త σβΠϯ͸ϏδϡΞϧ͚ͩͰͳ͘ɺ໨తΛ۩ମԽ͍ͯ͘͜͠ͱ΋σβΠϯͰ͢͠ɺͻͱͭͻͱͭΛߟ͑Δ͜ͱ΋σβΠϯͰ͢ɻ

Slide 10

Slide 10 text

σβΠϯʺͭ͘Δ ͭ͘Δ Ή͠ΖσβΠϯͷଟ͘ͷ෦෼͸ͭ͘ΔҎ֎ͷ͜ͱͩͱݴͬͯ΋աݴͰ͸͋Γ·ͤΜɻ

Slide 11

Slide 11 text

ͭ͘Δ #PPUTUSBQ4UVEJP 8FCqPX 1JOHFOEP MBOEJOHQBHFJP "44&.#-: ͭ͘ΔͨΊͷαʔϏε͸ͨ͘͞Μ͋Γ·͢ɻྫ͑͹8FCαΠτ͸΋͏ίʔσΟϯά͢Δ࣌୅Ͱ͸ͳ͍ͷ͔΋͠Ε·ͤΜɻ

Slide 12

Slide 12 text

ͭ͘Δ "QQMF)VNBO*OUFSGBDF(VJEFMJOF (PPHMF.BUFSJBM%FTJHO(VJEF σβΠφʔͷҙٛʁ ΤϯδχΞͷͨΊͷσβΠϯΨΠυϥΠϯᴷᴷσβΠφʔͷҙٛ͸Ͳ͜ʹ͋ΔͷͰ͠ΐ͏͔ʁ

Slide 13

Slide 13 text

σβΠφʔ ΤϯδχΞ σβΠφʔͱΤϯδχΞᴷᴷ৬ೳʹ෼ۀ͞Ε͍ͯͯ౰ͨΓલͷΑ͏ʹײ͡ΒΕ·͕͢ɺͦ΋ͦ΋͸ҰॹͰ͋ͬͨ͸ͣͰ͸ͳ͍Ͱ͠ΐ͏͔ɻ

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

༻ ඒ ͷ ༄फӻ 1889-1961 ຽܳӡಈ IUUQXXXNJOHFJLBOPSKQBCPVUZBOBHJTPFUTVIUNM

Slide 22

Slide 22 text

༄फӻ 1889-1961 ༻ͱඒ͕݁͹ΕΔ΋ͷɺ ͜Ε͕޻᥁Ͱ͋Δ ༻ͱ͍͏ͷ͸ػೳͰ͸ͳ͘ɺ ෺৺΁ͷ༻Ͱ͋Δ ʮ޻᥁ͷಓʯ ༻ ඒ ͷ Ұൠతʹػೳඒͱ͍͏΋ͷ͕͋Γ·͕͢ɺ͜ͷʮ༻ͷඒʯ͸ʮ෺৺ʯͱ͍͏ݴ༿Ͱ৺ͷॆ଍Λॏཁࢹ͍ͯ͠·͢ɻ ৺ͷॆ଍ͱ͸ࠓͰݴ͏69ͰಘΒΕΔ΋ͷͰ͢ɻඒ͠͞͸ɺ࢖͏΋ͷͷ৺͕ຬͨ͞Εɺ ͦ͜ʹඋΘΔػೳΛࢦ͍ͯ͠Δͱ౰͔࣌Βݴ͍ͬͯͨ͜ͱʹͳΓ·͢ɻ

Slide 23

Slide 23 text

σβΠϯͷࢹ఺ σβΠϯʺͭ͘Δʜͭͳ͛Δ σβΠφʔͱΤϯδχΞ ͭ͘Δ͜ͱ͸΋ͬͱ؆୯ʹ

Slide 24

Slide 24 text

ײੑΛຏ͘ ͦͯ͠σβΠϯʹͲ͏ͯ͠΋֎ͤͳ͍ඞཁͳʮײੑʯ͸σβΠφʔ͚ͩͷ໰୊Ͱ͸͋Γ·ͤΜɻײੑΛຏ͘ͱ͍͏͜ͱ͸ɺͦΕͧΕͷ࢓ࣄͷྖҬΛ ޿͛ͯϞϊΛݟΔ͜ͱ͕Ͱ͖·͢ɻ౒ྗ΍ษֶͰ͸ͳ͘ɺϞϊͷݟํΛগ͠ม͑Δ͜ͱͰײੑ͸্͕Δͱࢥ͍ͬͯ·͢ɻ ײੑΛຏ͖ɺࠓ೔͓࿩ͨ͠Α͏ͳσβΠϯࢹ఺Λ࣋ͭ͜ͱͷํ͕࢓ࣄͷ࣭Λม͑ΒΕΔͱࢥ͍·͢ɻ

Slide 25

Slide 25 text

ඒ͍͠ Ԓ΍͔ ઱΍͔ ࣸਅΛࡱΔ໨త΋มΘΓ·͕ͨ͠ɺ͖Ε͍ͩͳͱࢥ͏ॠؒΛ͙͢ʹ4/4ʹྲྀͯ͠͠·͍ͬͯ·͢ɻ σδλϧԽ͸ࣗવʹ͍ͨ͢Δײੑ͑͞΋σδλϧͷதʹ͠·͍ͬͯΔ͜ͱ͕͋Γ·͢ɻͦΕͰ͸ײੑ͸਎ʹ͔ͭͳ͍··ʹͳΓͦ͏Ͱ͢ɻ ͦ΋ͦ΋ײੑ͸ඒ͍͠ɺԒ΍͔ɺ઱΍͔ͳͲɺͦ͏ײ͡ΔॠؒͰ͢ɻ

Slide 26

Slide 26 text

ۭΛͳ͕Ίͯ៉ྷͩͳͱࢥ͏͚ͩͰ΋͍͍ͱࢥ͍·͢ɻۭ͸ຖ೔ҧ͏৭Ͱɺຖ೔ܾͯ͠ಉ͡৭͸ͳ͍ͱݴΘΕ͍ͯ·͢ɻ ؟Ͱݟͯɺ4/4Ͱ͸ͳ͘৺ʹײ৘ΛೖΕΔ͜ͱ͕ײੑΛຏ͘ҰาʹͳΓ·͢ɻ ͳʹ΋ࣸਅʹࡱΒͳͯ͘΋ɺهԱͷதʹೖΕ͓͚ͯͩ͘Ͱ͍͍ͱࢥ͍·͢ɻ

Slide 27

Slide 27 text

͓͍͍͠ɺ͓͍ͦ͠͏ɻͦ͏ࢥ͑Δͷ΋ײੑͰ͢ɻྉཧͷϓϩηε͸σβΠϯʹࣅ͍ͯ·͢ɻ ೉͍͠ςΫχοΫ΍ݟͨ໨ͷ੝Γ෇͚Ͱ͸ͳ͘ɺ०ͷ΋ͷ΍ͦͷͱ͖৯΂͍ͨɺ৯΂ͯ΋Β͍͍ͨͳͱࢥ͏΋ͷΛߟ͑ͯɺ૊Έ߹ΘͤΔɻ Ͳ͏΍ͬͨΒ͖Ε͍ʹͰ͸ͳ͘ɺ͓͍͘͠ͳΔ͔Λௐཧͯ͠ߟ͑Δ͜ͱ͸σβΠϯͷϓϩηεͰ͢ɻ

Slide 28

Slide 28 text

ཧղ ؍࡯ ఆٛ ૝૾ ࢼ࡞ ࢖͏ Կ͕޷͖ʁ ०ͷ΋ͷ͸ʁ ݙཱΛߟ͑ ম͖Ճݮ͸ʁ ຯݟΛͯ͠ ঌ্͕͠Ε σβΠϯࢥߟͱ͍͏΋ͷ͕͋Γ·͕͢ɺ΋ͷΛ࡞ΔલʹԿ͕ඞཁͳͷ͔Λཧղ͢ΔɺͲ͏ͳͷ͔ͬ͘͡Γ؍࡯͠ɺ໰୊Λఆٛ͢Δɻ ఆٛ͞Εͨ΋ͷ͔Β૝૾͠ɺࢼ࡞ͯ͠Έ࣮ͯࡍʹ࢖ͬͯͲ͏͔Λςετ͢Δ΍Γํ͸ྉཧ΋ಉ͡Ͱ͢ɻ

Slide 29

Slide 29 text

࠷ޙʹ

Slide 30

Slide 30 text

ػೳ͚ͩͰ͸ղܾͰ͖ͳ͍ෆ߹ཧ͕͋͞Δɻ ࠷ޙʹͰ͕͢ɺࢲ͕σβΠϯͱ͍͏΋ͷΛ௨͍ͯ͠·ߟ͍͑ͯΔ͜ͱͰ͢ɻ ػೳ͚ͩͰ͸ղܾͰ͖ͳ͍ෆ߹ཧ͞ᴷᴷ͜Ε͸͜Ε͔ΒͲΜͳʹศརͳ΋ͷ͕Ͱ͖ͯ΋ͦͷ΋ͷ͚ͩͰ͸ຬ଍͠ͳ͍ෆ߹ཧ͞͸ ඞͣ࢒Δͱݴ͏͜ͱͰ͢ɻෆ߹ཧ͞Λগͳ͘͢ΔͨΊʹମݧΛҰຊʹ͢ΔͨΊʹσβΠϯͷߟ͑ํΛେ੾ʹ͍ͨ͠Ͱ͢ɻ

Slide 31

Slide 31 text

ྖҬͷதͰٕज़Λڝͬͯྑ͔ͬͨ࣌୅͔Βɺ ྖҬΛ֦ு͠ͳ͕Βͭͳ͕ΓΛ͍ͭͬͯ࣌͘͘୅ɻ ࠓ͸͔ͭͯͷͦΕͧΕͷྖҬͰ/PΛͱΔ͜ͱͰ͸ͳ͘ɺͦΕΒΛ֦ுͯͭ͠ͳ͕ΓΛ͍ͭͬͯ࣌͘͘୅ͩͱࢥ͍·͢ɻ ྖҬͱ͸σβΠϯͰ͋ͬͨΓΤϯδχΞϦϯάͰ͋ͬͨΓͰ͢ɻ ৬ҬʹͱΒΘΕͳ͍΍ΓํͰσβΠϯͷྗͰͭͳ͍͖͍͛ͯͨͱࢥ͍ͬͯ·͢ɻ

Slide 32

Slide 32 text

σβΠφʔ͕ৗʹҙࣝ͠ɺ ຊ౰ͷྑ͞Λࠜఈ͔Βม͍͑ͯ͘༐ؾ͕ඞཁɻ ͋ΒΏΔ΋ͷ͸σβΠϯ͞Ε͍ͯ·͢ɻଟ͘ͷແ໊ͳσβΠφʔʹΑͬͯɺಛʹ*5ͷσβΠϯ͸͢Ͱʹࣗવ౫ଡ͞Ε͍ͯΔ͔΋͠Ε·ͤΜɻ Ͱ΋σβΠφʔ͸ਅͬਖ਼໘͔Βຊ౰ͷྑ͞Λৗʹҙࣝͯ͠ม͍͑ͯ͘༐ؾ͕ඞཁͩͱࢥ͍ͬͯ·͢ɻ ؆୯ʹͭ͘ΕΔ͔Βͱ͍ͬͯσβΠϯ͢Δ͜ͱΛ΍Ίͳ͍Ͱ͍ͩ͘͞ɻ

Slide 33

Slide 33 text

ͦΕʹ͸ଟ͘ͷײੑΛඞཁͱ͢Δɻ ײੑ͕ͳ͍··Ͱ͸ɺඞͣյΕΔၪ͍΋ͷɻ ײੑ͸ʮײͨ͡ऀউͪʯ ײੑ͸ਓؒͰ͋Ε͹୭΋͕ຏ͚Δ΋ͷɻಛʹ೔ຊਓͷײੑ͸ૉ੖Β͍͠ͱݴΘΕ͍ͯ·͢ɻσβΠϯͱ͍͏ߦҝ͸ɺײੑ͕ͳ͍··औΓ૊Ήͱɺ ؆୯ʹର৅෺͕͜ΘΕͯ͠·͏͸͔ͳ͍΋ͷͰ͢ɻ͔ͩΒײੑΛຏ͘͜ͱΛࢭΊͯ͸͍͚ͳ͍ͱࢥ͍ͬͯ·͢ɻ ͦͷײੑ͸ײͨ͡ऀউͪͰ͢ɻੜ׆΍ࣗવͷதʹͨ͘͞Μ͋Γ·͢ɻ

Slide 34

Slide 34 text

Why Design? ΤϯδχΞɺσβΠφʔؔ܎ͳ͘ࠓ͸σβΠϯ͕ٻΊΒΕ·͢ɻͳͥ࡞Δͷ͔ʁΛߟ͑Δ͜ͱ͸΋͏σβΠϯࢹ఺Ͱ͢ɻ ͜Ε͔Β΋ࢲ͸ແ໊ͳσβΠφʔͱͯ͠ɺ͍ͭͷؒʹ͔ͦ͜ʹ͋ΔΑ͏ͳσβΠϯΛ৺͕͚͍ͨͰ͢ɻಛʹ6*ͳͲ͸ۭؾͷΑ͏ʹɺͳʹ΋ײ͡Β Εͳ͍͘Β͍ͳ΋ͷͰ͋Ε͹͍͍ͳͱࢥ͍·͢ɻօ͞ΜͷσβΠϯ͸ͲΜͳ΋ͷͰ͠ΐ͏͔ʁ·ͨσβΠϯʹ͍ͭͯߟ͑Λ͓ฉ͔͍ͤͩ͘͞ɻ

Slide 35

Slide 35 text

Thank you http://ykazu.com/