Save 37% off PRO during our Black Friday Sale! »

Think Design for Future.

Think Design for Future.

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

980365ab463cc17e9b1a390573515649?s=128

Kazuki YAMASHITA

March 08, 2016
Tweet

Transcript

  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%BO4BGGFS ΋ͱ΋ͱ͸ϢʔβʔͱϞϊ΍αʔϏεͷ૬ޓ࡞༻ΛσβΠϯ͢ΔΠϯλϥΫγϣϯσβΠϯ͕த৺తͳ໾ׂͰͨ͠ɻ
  8. σβΠϯʁ ͜͜Ͱ͓࿩͢ΔσβΠϯͱ͸ʁ

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

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

  11. ͭ͘Δ #PPUTUSBQ4UVEJP 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/