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

Kazuki YAMASHITA

March 18, 2017
Tweet

More Decks by Kazuki YAMASHITA

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. Question

    View Slide

  6. View Slide

  7. Which is your best?

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. ࣋ଓՄೳͳσβΠϯ

    View Slide

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

    View Slide


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

    View Slide

  22. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

  28. Airbnb

    View Slide

  29. ʠ"JSCOCͷΑ͏ͳྲྀߦͷ6*Ͱ
    ʂ
    ʡ

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

    View Slide

  30. ྲྀߦΓɺ
    ഇΓͷͳ͍
    ྗͷ͋ΔσβΠϯ͸ͲͪΒ
    ʁ
    άϥσΟΤϯτ
    ࡉ͍ઢ
    ηϦϑ
    Thin Bold
    ϑϥο
    τ
    ໌֬ͳઢ
    αϯηϦϑ
    σβΠϯݪଇͷ౷Ұ͕େલఏ
    a a

    View Slide


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

    View Slide

  32. 6*ͷϨϕϧ
    NG
    Lv.1
    Lv.2
    Lv.3
    ෆద੾ɺ
    ΨΠ
    υϥΠϯʹඇ४ڌ
    ࢖͑Δ͕ɺ
    ֶश͕ඞཁ
    ॳΊͯͰ΋࢖͑Δ
    Ϣʔβʔ΁ͷܟҙ
    ɾ
    ৴པ͕͋Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. ਖ਼͍͠දه
    web Web
    facebook Facebook
    Google Map Google Maps
    AppStore App Store
    ݐࠃه೦೔ ݐࠃه೦ͷ೔
    ϓϩͷϥΠλʔͰ͸ͳ͍ʁ͍͍͑ɺ
    ϓϩͷσβΠφʔ΍ΤϯδχΞ΋ݴ༿Λѻ͏࢓ࣄͰ͢

    View Slide


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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. ϫʔΫϑϩʔ
    ϫΠϠʔઃܭ ϓϩτλΠϐϯά
    ࣮ݱ͍ͨ͠
    ΰʔϧ
    ڞ௨ೝࣝΛͭ͘Δ

    View Slide

  48. ڞ௨ೝࣝΛͭ͘Δ
    ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔
    Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔
    Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔
    Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ

    View Slide

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

    View Slide

  50. Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ
    ࣸਅΛ֦େ͢Δ

    View Slide

  51. ڞ௨ೝࣝΛͭ͘Δ
    ͦͷͱ͖
    Ϣʔβʔ͸ԿΛ
    ͍ͯ͠Δ͔
    Ϣʔβʔ͸
    Ͳ͏͍͏ܦҢͰ
    ͦ͜ʹ͍Δ͔
    Ϣʔβʔ͸
    ԿΛ͢Δͷ͕
    ࣗવͳߦಈ͔
    Things
    ίτ
    Context Action
    എܠ
    ɾ
    จ຺ ߦಈ

    View Slide

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

    View Slide


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

    View Slide

  54. σβΠϯݪଇ
    ෼͔Γ΍͘͢γϯϓϧͳσβΠϯ
    ୭ʹͱͬͯ
    ʁ ৭͕গͳ͍ʁ
    ઢ͕ࡉ͍ʁ
    ԿΛ෼͔Γ΍͘͢
    ʁ
    ཁૉ͕গͳ͍ʁ
    ؆୯ͳݴ༿ʁ
    σβΠϯΛ໌จԽ͢Δʹ͸΋͏গ͠ݴ༿͕ඞཁͰ͢

    View Slide

  55. ͜ͷ,FZOPUFͷσβΠϯݪଇ
    ୅ʙ୅ʹ໌֬ʹ఻͑ΒΕΔ
    ݱଘ͢Δࣄྫ
    ɾ
    ࣸਅʹΑΔϦΞϦςΟͷ͋Δදݱ
    ௌऺऀʹ෼͔Βͳ͍༻ޠ͸࢖༻͠ͳ͍
    ཧղΛଅਐ͢Δૉૣ͍τϥϯδγϣϯ
    εϥΠ
    υͷ୯ޠ਺͸࠷খݶʹ͢Δ
    ϨΠΞ΢τͷݪଇʹଇ͠ద੾ͳ༨നΛ֬อ͢Δ

    View Slide

  56. σβΠϯݪଇ
    ͔ͬ͠Γߟ͑ΒΕͨݪଇ͸͢΂ͯʹ༏ઌ͢Δ
    ΞΠίϯ͸Ϣʔβʔ͕ར༻͢Δ֤04ʹϚον͢ΔάϥϑΟ
    οΫΛ࢖༻͢Δɻ
    Android
    iOS
    Maps Favorite Search Users
    (active)

    View Slide


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

    View Slide

  58. ࣋ଓՄೳ
    ๞͖ͳ͍ ఆண͢Δ
    ύλʔϯΛҳ୤͠ͳ͍
    ͦͷͨΊͷΨΠ
    υϥΠϯ
    ྲྀߦΓɺ
    ഇΓͷͳ͍
    ৴པੑ
    6*͕།Ұ΋ͨΒ͢΋ͷ
    ϝϯςφϒϧ ྑ͍ϫʔΫϑϩʔͷ४උ
    σβΠϯݪଇΛߟ͑Δ
    σβΠϯ΍6*ʹਖ਼ղ͸ͳ͍ͱݴΘΕ·͕͢
    ʮؒҧ͍ʯ
    ͕͋Δ͜ͱʹؾ෇͘ඞཁ͕͋Γ·͢
    ·ͨਖ਼ղ͸ͨ͘͞Μ͋ΔதͰɺ
    ͦͷϢʔβʔʹΑΓࣗવͰ͋Δ͜ͱ͕ਖ਼ղͰ͢

    View Slide

  59. UI
    ओ໾Ͱ͸ͳ͍
    ͣͬͱ࢖ͬͯ΋Β͑Δ͜ͱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  64. 6*Λ௨ͯ͡ઃܭख๏΍σβΠϯwϑϩϯτΤϯυΤϯδχΞϦϯάʹؔ͢ΔεΩϧ΍ߟ͑ํΛ
    ֶͿίϛ
    ϡχςΟ
    ʮ6*-BCʯ
    ΛӡӦ͍ͯ͠·͢ɻ

    'BDFCPPLʹͯ৘ใΛൃ৴͍ͯ͠·͢ͷͰɺ
    ΑΖ͚͠Ε͹ϑΥϩʔ͍ͯͩ͘͠͞ɻ

    View Slide