Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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ʹͯใΛൃ৴͍ͯ͠·͢ͷͰɺ ΑΖ͚͠ΕϑΥϩʔ͍ͯͩ͘͠͞ɻ