Sustinable Frontend Design

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Question

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Which is your best?

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

࣋ଓՄೳͳσβΠϯ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ࣗવͳΞΫγϣϯ ਐߦ͢ΔΞΫγϣϯ ӈʹ഑ஔ͢Δ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Airbnb

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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