Think Design for Future.

これからのデザインを考える
FRONTEND CONFERENCE 2016, 5th Mar 2016
Designed by IMPATH

1. Λߟ͑Δ ͜Ε͔Βͷ 5 Mar. 2016 - FRONTEND CONFERENCE 2016 σβΠϯ
2. ࢁ Լ
   Ұ थ ΠϯϑΥϝʔγϣϯΞʔΩςΫτ
   69
   σΟϨΫλʔ ਓؒத৺ઃܭਪਐػߏ
   ࢍॿձһ
   ώϡʔϚϯΠϯλϑΣʔεֶձ
   ࢍॿձһ
3. ҙঊͷܭը ઃܭ ػೳ΍ඒత଄ܗ designare design “Design is how it works.” Why Design? ͳͥσβΠϯ͠ͳ͚Ε͹ͳΒͳ͍ͷͰ͠ΐ͏ʁ͜Ε·Ͱ΋σβΠϯʹ͍ͭͯ͸ٞ࿦͞Εਚ͘͞Ε͖ͯ·ͨ͠ɻ
4. ϑϩϯτΤϯυʹ͓͚ΔσβΠϯ͸ͭ͘ΔͨΊͷ΋ͷ΍ٕज़͕ᷓΕɺͦͷεϐʔυ΋૿͍ͯ͠·͢ɻ
5. UI UX IA accessibility ΤϯδχΞʹ΋͜ͷΑ͏ͳΩʔϫʔυͰσβΠϯࢹ఺ΛٻΊΒΕ͍ͯ·͢ɻ
6. UX 69ᴷᴷϢʔβʔத৺ʹαʔϏεΛσβΠϯ͢Δͱ͍͏ຐ๏ͷΑ͏ʹײ͡ΒΕΔΩʔϫʔυͰ͕ͨ͘͢͞Μͷཁૉ͕แׅ͞Ε͍ͯ·͢ɻ
7. UX *"
   ৘ใઃܭ *Y% 6* 6&
   ϢʔβϏϦςΟ޻ֶ )$*
   ίϯϐϡʔλ޻ֶ *%
   ޻ۀσβΠϯ 
   %&4*(/*/(
   '03
   */5&3"$5*0/
   CZ
   %BO
   4BGGFS ΋ͱ΋ͱ͸ϢʔβʔͱϞϊ΍αʔϏεͷ૬ޓ࡞༻ΛσβΠϯ͢ΔΠϯλϥΫγϣϯσβΠϯ͕த৺తͳ໾ׂͰͨ͠ɻ
8. σβΠϯʁ ͜͜Ͱ͓࿩͢ΔσβΠϯͱ͸ʁ
9. ϏδϡΞϧ
   ࢹ֮৘ใσβΠϯ 
   IUUQXXXKKHOFUFMFNFOUTQEGFMFNFOUTQEG ࠎ֨ ৘ใߏ଄ ཁ݅ ໨త σβΠϯ͸ϏδϡΞϧ͚ͩͰͳ͘ɺ໨తΛ۩ମԽ͍ͯ͘͜͠ͱ΋σβΠϯͰ͢͠ɺͻͱͭͻͱͭΛߟ͑Δ͜ͱ΋σβΠϯͰ͢ɻ
10. σβΠϯʺͭ͘Δ ͭ͘Δ Ή͠ΖσβΠϯͷଟ͘ͷ෦෼͸ͭ͘ΔҎ֎ͷ͜ͱͩͱݴͬͯ΋աݴͰ͸͋Γ·ͤΜɻ
11. ͭ͘Δ #PPUTUSBQ
    4UVEJP
    8FCqPX
    1JOHFOEP
    MBOEJOHQBHFJP
    "44&.#-: ͭ͘ΔͨΊͷαʔϏε͸ͨ͘͞Μ͋Γ·͢ɻྫ͑͹
    8FC
    αΠτ͸΋͏ίʔσΟϯά͢Δ࣌୅Ͱ͸ͳ͍ͷ͔΋͠Ε·ͤΜɻ
12. ͭ͘Δ "QQMF
    )VNBO
    *OUFSGBDF
    (VJEFMJOF
    (PPHMF
    .BUFSJBM
    %FTJHO
    (VJEF σβΠφʔͷҙٛʁ ΤϯδχΞͷͨΊͷσβΠϯΨΠυϥΠϯᴷᴷσβΠφʔͷҙٛ͸Ͳ͜ʹ͋ΔͷͰ͠ΐ͏͔ʁ
13. σβΠφʔ ΤϯδχΞ σβΠφʔͱΤϯδχΞᴷᴷ৬ೳʹ෼ۀ͞Ε͍ͯͯ౰ͨΓલͷΑ͏ʹײ͡ΒΕ·͕͢ɺͦ΋ͦ΋͸ҰॹͰ͋ͬͨ͸ͣͰ͸ͳ͍Ͱ͠ΐ͏͔ɻ
14. σΟϨΫλʔ ܦӦ Ϣʔβʔ σβΠφʔ ΤϯδχΞ ͞Βʹࢲͨͪ͸ϢʔβʔͷͨΊʹͳʹ͔Λͭ͘Δɺͱ͍͏͜ͱΛߟ͑ͨ৔߹ʹ͸ɺ͜ͷϢʔβʔ·Ͱʹ͸͋ΒΏΔਓ͕հࡏ͠·͢ɻ
15. Ϣʔβʔ͕࢖͍΍͍͢Α͏ʹσβΠϯͨ͠ ΠϯλϑΣʔεͱͯ͠ͷಓ۩͸ɺ͔ͭͯ͸࢖͏ਓ͕࢖͍΍͘͢࡞Δɺͭ·Γ࢖͏ਓ͕σβΠϯΛ͍ͯ͠·ͨ͠ɻ
16. ݐங
    σβΠϯ ϓϩμΫτ
    σβΠϯ άϥϑΟ οΫ
    σβΠϯ ΠϯςϦΞ
    σβΠϯ ࢈ۀֵ໋Ҏ߱ɺͦΕͧΕͷ෼ۀͰσβΠφʔͱͯ͠ͷઐ໳ੑཱ͕֬͞Ε·ͨ͠ɻ
17. ݐங
    σβΠϯ ϓϩμΫτ
    σβΠϯ ΠϯςϦΞ
    σβΠϯ άϥϑΟ οΫ
    σβΠϯ Ͱ΋ߟ͑ͯΈΕ͹ɺࢲͨͪͷීஈͷੜ׆ͷதͰ͸ͦΕͧΕͷσβΠϯྖҬΛҙࣝ͢Δ͜ͱ͸ͳ͘ɺମݧ͸ҰຊͷઢͷΑ͏Ͱ͢ɻ
18. ݐங
    σβΠϯ ϓϩμΫτ
    σβΠϯ άϥϑΟ οΫ
    σβΠϯ ΠϯςϦΞ
    σβΠϯ ༏ΕͨͦΕͧΕͷσβΠφʔ͸ɺ͓ޓ͍ͷྖҬΛΧόʔ͠߹͍ͳ͕ΒɺϢʔβʔʹҧ࿨ײͳ͘Ұຊͷମݧʹͭͳ͍͛ͯ·͢ɻ
    ͜ΕΒΛʮͭͳ͙ʯɻ͜Ε͸·͞ʹσβΠφʔͰ͔͠Ͱ͖ͳ͍͜ͱͩͱࢥ͍·͢ɻ
    ͦΕͧΕͷσβΠϯྖҬ͕ࣾձΛߏ੒͢Δݱ୅ʹ͓͍ͯɺͦΕ͸ҒେͳྗΛ͍࣋ͬͯΔͱݴ͑·͢ɻ
19. σβΠϯʹͭͳ͙ Ϟϊ αʔϏε ͜ͷΑ͏ʹɺσβΠϯͱ͸ͭ͘Δ΋ͷͰ͸ͳ͘ʮͭͳ͙ʯ͜ͱʹ͋Δɺͱ͍͏͜ͱ͕෼͔͖ͬͯ·ͨ͠ɻ
    ϞϊͱαʔϏεͷͦΕͧΕͷσβΠϯ͕͋ΓɺͦΕΒΛߦ͖དྷ͢ΔϢʔβʔͷͨΊʹͭͳ͙͜ͱ͕σβΠϯɺͱ͍͏ߟ͕͑͋Γ·͢ɻ
    ϑϩϯτΤϯυ͸ͦͷද໘తͳ΋ͷʹ஫ࢹ͕ͪ͠ʹͳΓ·͕͢ɺ͜ͷʮͭͳ͙ʯͱ͍͏͜ͱ͕σβΠϯࢹ఺Ͱ͢ɻ
20. ϞϊͷσβΠϯ Ϟϊ ʮϞϊ͹͔ΓσβΠϯͯ͠͸ͳΒͳ͍ʯᴷᴷࠓ͸Ϟϊͷ࣌୅Ͱ͸ͳ͘ɺίτɺମݧͷ࣌୅͔ͩΒͱ͍͏͜ͱͩͱࢥ͍·͢ɻ
    ͔͠͠ϞϊΛσβΠϯ͍ͯͨ͠ɺ͔ͭͯͷ޻ܳ඼΍޻ۀσβΠϯʹ΋ɺͱ͋Δߟ͕͑ਫ਼௨͍ͯ͠·ͨ͠ɻ
21. ༻ ඒ ͷ ༄
    फӻ 1889-1961 ຽܳӡಈ IUUQXXXNJOHFJLBOPSKQBCPVUZBOBHJTPFUTVIUNM
22. ༄
    फӻ 1889-1961 ༻ͱඒ͕݁͹ΕΔ΋ͷɺ
    ͜Ε͕޻᥁Ͱ͋Δ
    ༻ͱ͍͏ͷ͸ػೳͰ͸ͳ͘ɺ
    ෺৺΁ͷ༻Ͱ͋Δ
    ʮ޻᥁ͷಓʯ ༻ ඒ ͷ Ұൠతʹػೳඒͱ͍͏΋ͷ͕͋Γ·͕͢ɺ͜ͷʮ༻ͷඒʯ͸ʮ෺৺ʯͱ͍͏ݴ༿Ͱ৺ͷॆ଍Λॏཁࢹ͍ͯ͠·͢ɻ
    ৺ͷॆ଍ͱ͸ࠓͰݴ͏
    69
    ͰಘΒΕΔ΋ͷͰ͢ɻඒ͠͞͸ɺ࢖͏΋ͷͷ৺͕ຬͨ͞Εɺ
    ͦ͜ʹඋΘΔػೳΛࢦ͍ͯ͠Δͱ౰͔࣌Βݴ͍ͬͯͨ͜ͱʹͳΓ·͢ɻ
23. σβΠϯͷࢹ఺ σβΠϯʺͭ͘Δʜͭͳ͛Δ σβΠφʔͱΤϯδχΞ ͭ͘Δ͜ͱ͸΋ͬͱ؆୯ʹ
24. ײੑΛຏ͘ ͦͯ͠σβΠϯʹͲ͏ͯ͠΋֎ͤͳ͍ඞཁͳʮײੑʯ͸σβΠφʔ͚ͩͷ໰୊Ͱ͸͋Γ·ͤΜɻײੑΛຏ͘ͱ͍͏͜ͱ͸ɺͦΕͧΕͷ࢓ࣄͷྖҬΛ ޿͛ͯϞϊΛݟΔ͜ͱ͕Ͱ͖·͢ɻ౒ྗ΍ษֶͰ͸ͳ͘ɺϞϊͷݟํΛগ͠ม͑Δ͜ͱͰײੑ͸্͕Δͱࢥ͍ͬͯ·͢ɻ
    ײੑΛຏ͖ɺࠓ೔͓࿩ͨ͠Α͏ͳσβΠϯࢹ఺Λ࣋ͭ͜ͱͷํ͕࢓ࣄͷ࣭Λม͑ΒΕΔͱࢥ͍·͢ɻ
25. ඒ͍͠
    Ԓ΍͔
    ઱΍͔ ࣸਅΛࡱΔ໨త΋มΘΓ·͕ͨ͠ɺ͖Ε͍ͩͳͱࢥ͏ॠؒΛ͙͢ʹ
    4/4
    ʹྲྀͯ͠͠·͍ͬͯ·͢ɻ
    σδλϧԽ͸ࣗવʹ͍ͨ͢Δײੑ͑͞΋σδλϧͷதʹ͠·͍ͬͯΔ͜ͱ͕͋Γ·͢ɻͦΕͰ͸ײੑ͸਎ʹ͔ͭͳ͍··ʹͳΓͦ͏Ͱ͢ɻ
    ͦ΋ͦ΋ײੑ͸ඒ͍͠ɺԒ΍͔ɺ઱΍͔ͳͲɺͦ͏ײ͡ΔॠؒͰ͢ɻ
26. ۭΛͳ͕Ίͯ៉ྷͩͳͱࢥ͏͚ͩͰ΋͍͍ͱࢥ͍·͢ɻۭ͸ຖ೔ҧ͏৭Ͱɺຖ೔ܾͯ͠ಉ͡৭͸ͳ͍ͱݴΘΕ͍ͯ·͢ɻ
    ؟Ͱݟͯɺ4/4
    Ͱ͸ͳ͘৺ʹײ৘ΛೖΕΔ͜ͱ͕ײੑΛຏ͘ҰาʹͳΓ·͢ɻ
    ͳʹ΋ࣸਅʹࡱΒͳͯ͘΋ɺهԱͷதʹೖΕ͓͚ͯͩ͘Ͱ͍͍ͱࢥ͍·͢ɻ
27. ͓͍͍͠ɺ͓͍ͦ͠͏ɻͦ͏ࢥ͑Δͷ΋ײੑͰ͢ɻྉཧͷϓϩηε͸σβΠϯʹࣅ͍ͯ·͢ɻ
    ೉͍͠ςΫχοΫ΍ݟͨ໨ͷ੝Γ෇͚Ͱ͸ͳ͘ɺ०ͷ΋ͷ΍ͦͷͱ͖৯΂͍ͨɺ৯΂ͯ΋Β͍͍ͨͳͱࢥ͏΋ͷΛߟ͑ͯɺ૊Έ߹ΘͤΔɻ
    Ͳ͏΍ͬͨΒ͖Ε͍ʹͰ͸ͳ͘ɺ͓͍͘͠ͳΔ͔Λௐཧͯ͠ߟ͑Δ͜ͱ͸σβΠϯͷϓϩηεͰ͢ɻ
28. ཧղ ؍࡯ ఆٛ ૝૾ ࢼ࡞ ࢖͏ Կ͕޷͖ʁ ०ͷ΋ͷ͸ʁ ݙཱΛߟ͑ ম͖Ճݮ͸ʁ ຯݟΛͯ͠ ঌ্͕͠Ε σβΠϯࢥߟͱ͍͏΋ͷ͕͋Γ·͕͢ɺ΋ͷΛ࡞ΔલʹԿ͕ඞཁͳͷ͔Λཧղ͢ΔɺͲ͏ͳͷ͔ͬ͘͡Γ؍࡯͠ɺ໰୊Λఆٛ͢Δɻ
    ఆٛ͞Εͨ΋ͷ͔Β૝૾͠ɺࢼ࡞ͯ͠Έ࣮ͯࡍʹ࢖ͬͯͲ͏͔Λςετ͢Δ΍Γํ͸ྉཧ΋ಉ͡Ͱ͢ɻ
29. ࠷ޙʹ
30. ػೳ͚ͩͰ͸ղܾͰ͖ͳ͍ෆ߹ཧ͕͋͞Δɻ ࠷ޙʹͰ͕͢ɺࢲ͕σβΠϯͱ͍͏΋ͷΛ௨͍ͯ͠·ߟ͍͑ͯΔ͜ͱͰ͢ɻ
    ػೳ͚ͩͰ͸ղܾͰ͖ͳ͍ෆ߹ཧ͞ᴷᴷ͜Ε͸
    ͜Ε͔ΒͲΜͳʹศརͳ΋ͷ͕Ͱ͖ͯ΋ͦͷ΋ͷ͚ͩͰ͸ຬ଍͠ͳ͍ෆ߹ཧ͞͸
    ඞͣ࢒Δͱݴ͏͜ͱͰ͢ɻෆ߹ཧ͞Λগͳ͘͢ΔͨΊʹମݧΛҰຊʹ͢ΔͨΊʹσβΠϯͷߟ͑ํΛେ੾ʹ͍ͨ͠Ͱ͢ɻ
31. ྖҬͷதͰٕज़Λڝͬͯྑ͔ͬͨ࣌୅͔Βɺ
    ྖҬΛ֦ு͠ͳ͕Βͭͳ͕ΓΛ͍ͭͬͯ࣌͘͘୅ɻ ࠓ͸͔ͭͯͷͦΕͧΕͷྖҬͰ
    /P
    ΛͱΔ͜ͱͰ͸ͳ͘ɺͦΕΒΛ֦ுͯͭ͠ͳ͕ΓΛ͍ͭͬͯ࣌͘͘୅ͩͱࢥ͍·͢ɻ
    ྖҬͱ͸σβΠϯͰ͋ͬͨΓΤϯδχΞϦϯάͰ͋ͬͨΓͰ͢ɻ
    ৬ҬʹͱΒΘΕͳ͍΍ΓํͰσβΠϯͷྗͰͭͳ͍͖͍͛ͯͨͱࢥ͍ͬͯ·͢ɻ
32. σβΠφʔ͕ৗʹҙࣝ͠ɺ
    ຊ౰ͷྑ͞Λࠜఈ͔Βม͍͑ͯ͘༐ؾ͕ඞཁɻ ͋ΒΏΔ΋ͷ͸σβΠϯ͞Ε͍ͯ·͢ɻଟ͘ͷແ໊ͳσβΠφʔʹΑͬͯɺಛʹ
    *5
    ͷσβΠϯ͸͢Ͱʹࣗવ౫ଡ͞Ε͍ͯΔ͔΋͠Ε·ͤΜɻ
    Ͱ΋σβΠφʔ͸ਅͬਖ਼໘͔Βຊ౰ͷྑ͞Λৗʹҙࣝͯ͠ม͍͑ͯ͘༐ؾ͕ඞཁͩͱࢥ͍ͬͯ·͢ɻ
    ؆୯ʹͭ͘ΕΔ͔Βͱ͍ͬͯσβΠϯ͢Δ͜ͱΛ΍Ίͳ͍Ͱ͍ͩ͘͞ɻ
33. ͦΕʹ͸ଟ͘ͷײੑΛඞཁͱ͢Δɻ
    ײੑ͕ͳ͍··Ͱ͸ɺඞͣյΕΔၪ͍΋ͷɻ
    ײੑ͸ʮײͨ͡ऀ
    উͪʯ ײੑ͸ਓؒͰ͋Ε͹୭΋͕ຏ͚Δ΋ͷɻಛʹ೔ຊਓͷײੑ͸ૉ੖Β͍͠ͱݴΘΕ͍ͯ·͢ɻσβΠϯͱ͍͏ߦҝ͸ɺײੑ͕ͳ͍··औΓ૊Ήͱɺ
    ؆୯ʹର৅෺͕͜ΘΕͯ͠·͏
    ͸͔ͳ͍΋ͷͰ͢ɻ͔ͩΒײੑΛຏ͘͜ͱΛࢭΊͯ͸͍͚ͳ͍ͱࢥ͍ͬͯ·͢ɻ
    ͦͷײੑ͸ײͨ͡ऀউͪͰ͢ɻੜ׆΍ࣗવͷதʹͨ͘͞Μ͋Γ·͢ɻ
34. Why Design? ΤϯδχΞɺσβΠφʔؔ܎ͳ͘ࠓ͸σβΠϯ͕ٻΊΒΕ·͢ɻͳͥ࡞Δͷ͔ʁΛߟ͑Δ͜ͱ͸΋͏σβΠϯࢹ఺Ͱ͢ɻ
    ͜Ε͔Β΋ࢲ͸ແ໊ͳσβΠφʔͱͯ͠ɺ͍ͭͷؒʹ͔ͦ͜ʹ͋ΔΑ͏ͳσβΠϯΛ৺͕͚͍ͨͰ͢ɻಛʹ
    6*
    ͳͲ͸ۭؾͷΑ͏ʹɺͳʹ΋ײ͡Β Εͳ͍͘Β͍ͳ΋ͷͰ͋Ε͹͍͍ͳͱࢥ͍·͢ɻօ͞ΜͷσβΠϯ͸ͲΜͳ΋ͷͰ͠ΐ͏͔ʁ·ͨσβΠϯʹ͍ͭͯߟ͑Λ͓ฉ͔͍ͤͩ͘͞ɻ
35. Thank you http://ykazu.com/