Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sustinable Frontend Design

Sustinable Frontend Design

UI デザインから考える「持続可能なデザイン」
FRONTEND CONFERENCE 2017, 18th Mar 2017
Designed by IMPATH

980365ab463cc17e9b1a390573515649?s=128

Kazuki YAMASHITA

March 18, 2017
Tweet

More Decks by Kazuki YAMASHITA

Other Decks in Design

Transcript

  1. FRONTEND CONFERENCE 2017 18th Mar. 2017 ࣋ଓՄೳͳσβΠϯ

  2. ࢁ Լ  Ұ थ ΠϯϑΥϝʔγϣϯΞʔΩςΫ τ @yamashitakazuki

  3. 6*ͱ69Λઐ໳ ϑϩϯτΤϯυΞϓϦ։ൃ 6*վળɺ ৘ใઃܭɺ ΠϯλϥΫγϣϯσβΠϯ

  4. https://speakerdeck.com/ykazu ࡢ೥౓ͷεϥΠ υͰ͢

  5. Question

  6. None
  7. Which is your best?

  8. None
  9. None
  10. None
  11. 14mm 154°C 3’36” ࠷ߴͷτʔετͷম͖ํ - Scientists create perfect toast 2003

    by Vogel
  12. FRONT-END ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ σβΠϯΛ͢Δɺ ϑϩϯτΤϯυʹܞΘΔࢲͨͪ͸·ΔͰτʔετͷম͖ՃݮΛܾΊΔΑ͏ͳ΋ͷͰ͢

  13. ج४Λ࣋ͭ͜ͱ ͦΕͧΕ ʮྑ͍ʯ ͱࢥ͏ॠؒ͸ɺ օ͞Μͷ಄ʹ͋Δ ʮج४ʯ ʹΑܾͬͯΊΒΕ·͢

  14. 14mm 154°C 3’36” σʔλ

  15. 14mm 154°C 3’36” σʔλͰ͸ͳ͘ηΦϦʔ σβΠϯ͸ଟ਺ܾ΍ಋ͔ΕͨσʔλʹΑܾͬͯΊΔ΋ͷͰ͸ͳ͘ ʮηΦϦʔʯ ͕લఏͱͳΓ·͢

  16. Design UI σβΠϯͱ͍͏େ͖ͳྖҬͷதʹ͋Δ6*͸Ұ෦Ͱɺ σβΠφʔɺ ϑϩϯτΤϯυΤϯδχΞʹ΋ؔΘΔ͜ͱ

  17. Ϋʔϧͳ Ϣʔβʔ͕૿͑Δ $73͕ߴ͘ͳΔ ྲྀߦΞϓϦͷ λ οϓ͞ΕΔ UI ͜͏͍͏6*Λ໨ࢦ͢લʹɺ

  18. ͣͬͱ࢖ͬͯ΋Β͑Δ UI ͣͬͱ࢖ͬͯ΋Β͑Δ6*Λߟ͑·͠ ΐ͏

  19. ࣋ଓՄೳͳσβΠϯ

  20. ࣋ଓՄೳ ๞͖ͳ͍ ϝϯςφϒϧ

  21. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ

  22. None
  23. σβΠϯݪଇ ΠϯλϥΫγϣϯ ελΠϧ ϨΠΞ΢τ ίϯϙʔωϯτ σβΠϯݪଇ ΨΠ υϥΠϯ͸ϧʔϧҎ֎ʹ΋σβΠϯΛ໌จԽͨ͠ ʮσβΠϯݪଇʯ ͕σβΠϯֶशͷॿ͚ʹͳΓ·͢

  24. ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ӈʹ഑ஔ͢Δ

  25. औফɺ ഁյతΞΫγϣϯ ୀߦ͢ΔΞΫγϣϯ ࠨʹ഑ஔ͢Δ

  26. औফɺ ഁյతΞΫγϣϯ ࠨʹ഑ஔ͢Δ ӈʹ഑ஔ͢Δ ୀߦ͢ΔΞΫγϣϯ ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ͳͥͦ͏͢΂͖ͳͷ͔·Ͱ͕ॻ͔ΕͨΨΠ υϥΠϯ

  27. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍

  28. Airbnb

  29. ʠ"JSCOCͷΑ͏ͳྲྀߦͷ6*Ͱ ʂ ʡ  εϐʔσΟͳσβΠϯαΠΫϧΛ"JSCOCͷΑ͏ʹճͤ·͔͢ʁ ·ͨɺ "JSCOCͷҰ෦Λ·ͶΔɺ ͜Ε͸͋ͳͨͷσβΠϯݪଇΛഁ୼ͤͯ͞͠·͍·͢ 6*ͷྲྀߦΓ͸ɺ ͙͢ഇΕΔ

  30. ྲྀߦΓɺ ഇΓͷͳ͍ ྗͷ͋ΔσβΠϯ͸ͲͪΒ ʁ άϥσΟΤϯτ ࡉ͍ઢ ηϦϑ Thin Bold ϑϥο

    τ ໌֬ͳઢ αϯηϦϑ σβΠϯݪଇͷ౷Ұ͕େલఏ a a
  31. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།Ұ΋ͨΒ͢΋ͷ

  32. 6*ͷϨϕϧ NG Lv.1 Lv.2 Lv.3 ෆద੾ɺ ΨΠ υϥΠϯʹඇ४ڌ ࢖͑Δ͕ɺ ֶश͕ඞཁ

    ॳΊͯͰ΋࢖͑Δ Ϣʔβʔ΁ͷܟҙ ɾ ৴པ͕͋Δ
  33. ݴ༿͕΋ͨΒ͢৴པ ςΩετ ݸแ૷͸Ͱ͖·ͤΜɻ छྨ͸͓બͼ͍͚ͨͩ·ͤΜɻ ൱ఆܗͷςΩετ͕࿈ͳΔɺ ͦΜͳαΠ τ͔Βड͚Δҹ৅Λߟ͑ͯΈ·͠ ΐ͏

  34. ݴ༿͕΋ͨΒ͢৴པ ςΩετ ݸแ૷͸Ͱ͖·ͤΜɻ ‎·ͱΊͯแ૷͞Ε͍ͯ·͢ɻ छྨ͸͓બͼ͍͚ͨͩ·ͤΜɻ ‎͞·͟·ͳछྨΛ૊Έ߹Θ͍ͤͯ·͢ɻ ݴ͍׵͕͑Մೳ͔Λߟ͑ͯΈ·͠ ΐ͏

  35. Apple ༏ΕͨσβΠϯ͸ηϯςϯε΋༏Ε͍ͯ·͢ɺ ΋ͪΖΜάϩʔόϧʹ

  36. ΋ͬͱݟΔ ৄࡉ ৄ͘͠͸ίνϥ ༧໿͢Δ ༧໿ը໘΁ ࠓ͙͢༧໿͢Δ ݕࡧ ͕͢͞ ϥϕϧͱίϯϙʔωϯτ ϘλϯͰ͍͍ͷ͔ʁͦͷϥϕϧͰ͍͍ͷ͔ʁ

  37. ΋ͬͱݟΔ ৄࡉ ৄ͘͠͸ͪ͜Β ༧໿͢Δ ༧໿ը໘΁ ࠓ͙͢༧໿͢Δ ݕࡧ ͕͢͞ ϥϕϧͱίϯϙʔωϯτ ద੾ͳϥϕϦϯάͱίϯϙʔωϯτͷબఆ͕খ͞ͳ৴པੑʹͭͳ͕Γ·͢

  38. ਖ਼͍͠දه web Web facebook Facebook Google Map Google Maps AppStore

    App Store ݐࠃه೦೔ ݐࠃه೦ͷ೔ ϓϩͷϥΠλʔͰ͸ͳ͍ʁ͍͍͑ɺ ϓϩͷσβΠφʔ΍ΤϯδχΞ΋ݴ༿Λѻ͏࢓ࣄͰ͢
  39. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།Ұ΋ͨΒ͢΋ͷ

  40. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།Ұ΋ͨΒ͢΋ͷ

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
  41. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά σβΠϯ ϓϩτλΠϓϑΝʔετɺ ͜ͷ͋ͨΓͷϫʔΫϑϩʔ͸༷ʑͳπʔϧʹॿ͚ΒΕ͍ͯ·͢

  42. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ͦ΋ͦ΋Կ͕΍Γ͔ͨͬͨͷ͔ɺ ΰʔϧ͕ڞ༗Ͱ͖͍ͯͳ͍ͱɺ

  43. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ σβΠϯ ࣮૷ μϝͰͨ͠ ࠷ऴతʹഁ୼͔͠Ͷ·ͤΜ

  44. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ந৅తͳΠϝʔδ΍ΰʔϧͷڞ༗͸πʔϧͰͳ͍ํ͕Α͍৔߹΋͋Γ·͢

  45. ϖʔύʔϓϩτλΠϐϯά

  46. ϖʔύʔϓϩτλΠϐϯά ಄ͱख σεΫ τοϓ ܗʹͳͬͨ΋ͷΛ ޮ཰తʹ ͖Ε͍ʹ͢Δ ࢥߟ͠ͳ͕Β ͦΕΛܗʹͯ͠ ձ࿩͢Δ

    εϐʔσΟʹΰʔϧΛڞ༗͢Δ།Ұͷํ๏
  47. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ڞ௨ೝࣝΛͭ͘Δ

  48. ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖ Ϣʔβʔ͸ԿΛ ͍ͯ͠Δ͔ Ϣʔβʔ͸ Ͳ͏͍͏ܦҢͰ ͦ͜ʹ͍Δ͔ Ϣʔβʔ͸ ԿΛ͢Δͷ͕ ࣗવͳߦಈ͔

    Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
  49. Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ঎඼ΛӾཡ ஋ஈͷׂʹ࣭͸

    Ͳ͏ͳͷ͔ؾʹͳΔ ࣸਅΛ֦େ͍ͨ͠ ͜͏ͨ͜͠ͱΛνʔϜͰ࿩͠߹͍ɺ ͜ͷλΠϛϯάͰͲͷΑ͏ͳཁૉ͕ඞཁͳͷ͔Λߟ͑·͢
  50. Things ίτ Context Action എܠ ɾ จ຺ ߦಈ ࣸਅΛ֦େ͢Δ

  51. ڞ௨ೝࣝΛͭ͘Δ ͦͷͱ͖ Ϣʔβʔ͸ԿΛ ͍ͯ͠Δ͔ Ϣʔβʔ͸ Ͳ͏͍͏ܦҢͰ ͦ͜ʹ͍Δ͔ Ϣʔβʔ͸ ԿΛ͢Δͷ͕ ࣗવͳߦಈ͔

    Things ίτ Context Action എܠ ɾ จ຺ ߦಈ
  52. ϫʔΫϑϩʔ ϫΠϠʔઃܭ ϓϩτλΠϐϯά ࣮ݱ͍ͨ͠ ΰʔϧ ڞ௨ೝࣝΛͭ͘Δ ڞ௨ೝࣝΛͭ͘Δͷ͸Ұਓͷ୭͔Ͱ͸ͳ͘ɺ νʔϜͰͭ͘Δ΋ͷͰ͢

  53. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།Ұ΋ͨΒ͢΋ͷ

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
  54. σβΠϯݪଇ ෼͔Γ΍͘͢γϯϓϧͳσβΠϯ ୭ʹͱͬͯ ʁ ৭͕গͳ͍ʁ ઢ͕ࡉ͍ʁ ԿΛ෼͔Γ΍͘͢ ʁ ཁૉ͕গͳ͍ʁ ؆୯ͳݴ༿ʁ

    σβΠϯΛ໌จԽ͢Δʹ͸΋͏গ͠ݴ༿͕ඞཁͰ͢
  55. ͜ͷ,FZOPUFͷσβΠϯݪଇ  ୅ʙ୅ʹ໌֬ʹ఻͑ΒΕΔ  ݱଘ͢Δࣄྫ ɾ ࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ  ௌऺऀʹ෼͔Βͳ͍༻ޠ͸࢖༻͠ͳ͍ 

    ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ  εϥΠ υͷ୯ޠ਺͸࠷খݶʹ͢Δ  ϨΠΞ΢τͷݪଇʹଇ͠ద੾ͳ༨നΛ֬อ͢Δ
  56. σβΠϯݪଇ ͔ͬ͠Γߟ͑ΒΕͨݪଇ͸͢΂ͯʹ༏ઌ͢Δ ΞΠίϯ͸Ϣʔβʔ͕ར༻͢Δ֤04ʹϚον͢ΔάϥϑΟ οΫΛ࢖༻͢Δɻ Android iOS Maps Favorite Search Users

    (active)
  57. ೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།Ұ΋ͨΒ͢΋ͷ

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ
  58. ࣋ଓՄೳ ๞͖ͳ͍ ఆண͢Δ ύλʔϯΛҳ୤͠ͳ͍ ͦͷͨΊͷΨΠ υϥΠϯ ྲྀߦΓɺ ഇΓͷͳ͍ ৴པੑ 6*͕།Ұ΋ͨΒ͢΋ͷ

    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ σβΠϯݪଇΛߟ͑Δ σβΠϯ΍6*ʹਖ਼ղ͸ͳ͍ͱݴΘΕ·͕͢ ʮؒҧ͍ʯ ͕͋Δ͜ͱʹؾ෇͘ඞཁ͕͋Γ·͢ ·ͨਖ਼ղ͸ͨ͘͞Μ͋ΔதͰɺ ͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢
  59. UI ओ໾Ͱ͸ͳ͍ ͣͬͱ࢖ͬͯ΋Β͑Δ͜ͱ

  60. FRONT-END ද໘͔Βຊ࣭ΛܾΊΔ͜ͱ ਓʹΑͬͯ޷Έ͸ҧ͏ɺ Ͱ΋ͦΕΛܾΊͳ͚Ε͹ͳΓ·ͤΜ

  61. ʮྑ͍ʯ ج४Λ࣋ͭ͜ͱ ʮྑ͍ʯ ج४Λ࣋ͭ͜ͱ͸ɺ ͦΕΛܾΊΔखॿ͚Λͯ͘͠Ε·͢

  62. ຊ౰ͷ ʮྑ͍ʯ ΛܾΊΔ֮ޛ ܾΊΒΕͨ΋ͷΛ࡞Δઌʹ͸ ʮྑ͍ʯ ΛܾΊΔ֮ޛ͕ϑϩϯτΤϯυʹٻΊΒΕ·͢

  63. Thank you @yamashitakazuki https://impath.co.jp/

  64. 6*Λ௨ͯ͡ઃܭख๏΍σβΠϯwϑϩϯτΤϯυΤϯδχΞϦϯάʹؔ͢ΔεΩϧ΍ߟ͑ํΛ ֶͿίϛ ϡχςΟ ʮ6*-BCʯ ΛӡӦ͍ͯ͠·͢ɻ  'BDFCPPLʹͯ৘ใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠Ε͹ϑΥϩʔ͍ͯͩ͘͠͞ɻ