デザイナーのための自分サービス開発のススメ/ web service development tips for designers
by
Muneaki Hayakawa
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
σβΠφʔͷͨΊͷ ࣗαʔϏε։ൃͷεεϝ Muneaki Hayakawa BASE, Inc.
Slide 2
Slide 2 text
ࣗ ݾ հ frontend designer Muneaki Hayakawa ૣफ྄ ݄ೖࣾɻ #"4&ͷXFCͷσβΠϯɾϑϩϯτ୲ɻ
Slide 3
Slide 3 text
ωοτγϣοϓ։ઃ αʔϏε γϣοϐϯάΞϓϦ
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
γϣοϓ։ઃສళฮҎ্
Slide 6
Slide 6 text
#"4&ͷΛࢧ͑Δ σβΠφʔͷࣄ
Slide 7
Slide 7 text
130+&$5 5"4,
Slide 8
Slide 8 text
৽ن"QQT։ൃ 130+&$5 5"4, ܾࡁܥͳͲେ͖Ίͷվम όάରԠɾվળ ʢ6*69νέοτʣ
Slide 9
Slide 9 text
৽ن"QQT։ൃ 130+&$5 5"4, ܾࡁܥͳͲେ͖Ίͷվम όάରԠɾվળ ʢ6*69νέοτʣ
Slide 10
Slide 10 text
# " 4 & " Q Q T
Slide 11
Slide 11 text
# " 4 & " Q Q T γ ϣ ο ϓ ͷ ֦ ு ػ ೳ
Slide 12
Slide 12 text
IUUQTUIFpSTUQFOHVJOKQ͓͞ΜઢͰ࡞ͬͯΈͨΒCBTFγϯϓϧͳαʔϏεʹͳͬͨFDBB
Slide 13
Slide 13 text
#"4&ຊମʮ͓͞ΜͰ͑ΔʯΛҙࣝ͠ɺ༨ܭͳػೳΛ͚ͭͣγϯϓϧʹอͭɻ
Slide 14
Slide 14 text
#"4&ຊମʮ͓͞ΜͰ͑ΔʯΛҙࣝ͠ɺ༨ܭͳػೳΛ͚ͭͣγϯϓϧʹอͭɻ ࣗ༝ʹՃͰ͖Δ"QQTʹΑͬͯɺଟछଟ༷ͳγϣοϓͷӡ༻ʹԠ͑Δ
Slide 15
Slide 15 text
৽ن"QQT։ൃ 130+&$5 5"4, ܾࡁܥͳͲେ͖Ίͷվम όάରԠɾվળ ʢ6*69νέοτʣ
Slide 16
Slide 16 text
6 * 6 9 ν έ ο τ
Slide 17
Slide 17 text
6 * 6 9 ν έ ο τ Ϣʔβʔ͔Βͷ ཁ όά ɾ վળҊ
Slide 18
Slide 18 text
6 * 6 9 ν έ ο τ ର Ԡ σβΠϯϨϏϡʔ ίʔυϨϏϡʔ ࣮ IUNMDTTKTQIQ 6*σβΠϯ
Slide 19
Slide 19 text
σβΠϯϨϏϡʔ ίʔυϨϏϡʔ ࣮ IUNMDTTKTQIQ 6*σβΠϯ 6 * 6 9 ν έ ο τ ର Ԡ σβΠφʔͷରԠൣғ
Slide 20
Slide 20 text
σβΠϯϨϏϡʔ ίʔυϨϏϡʔ ࣮ IUNMDTTKTQIQ 6*σβΠϯ σβΠφʔͷରԠൣғ ɾνέοτͷཻ͕খ͞ΊͳͷͰɺσβΠϯˠ࣮·ͰҰ؏ͯ͠Δํ͕ޮత ɾKT WJFXϑΝΠϧͷQIQҰ෦σβΠφʔ͕ίʔυॻ͘ 6 * 6 9 ν έ ο τ ର Ԡ
Slide 21
Slide 21 text
" K B Y ࣮ ɾΠϯλΫϥγϣϯΛߟྀ͢Δͱ"KBY͍͍ͨͱ͜Ζ͕Α͘ग़ͯ͘Δ ɾσβΠφʔ͔ΒΤϯδχΞʹ"1*ଆΛґཔ͢Δ ΤϯδχΞ σβΠφʔ ͜ͷλΠϛϯάͰ͛·͢ ͜Μͳσʔλ͍ͩ͘͞ ͜ͷ63-ʹ͛ͯͶ ύϥϝʔλʔ͜ΕૹͬͯͶ ͬ͘͟Γ༷ "1*
Slide 22
Slide 22 text
ɾσβΠφʔ͕%#ߏΛཧղͯ͠ΔͱఏҊ͍͢͠ɺ͕εϜʔζ ΤϯδχΞ σβΠφʔ ͜ͷλΠϛϯάͰ͛·͢ ͜Μͳσʔλ͍ͩ͘͞ ͜ͷ63-ʹ͛ͯͶ ύϥϝʔλʔ͜ΕૹͬͯͶ ͬ͘͟Γ༷ "1* " K B Y ࣮ ɾΠϯλΫϥγϣϯΛߟྀ͢Δͱ"KBY͍͍ͨͱ͜Ζ͕Α͘ग़ͯ͘Δ ɾσβΠφʔ͔ΒΤϯδχΞʹ"1*ଆΛґཔ͢Δ
Slide 23
Slide 23 text
# " 4 & ͷ σ βΠφ ʔ ͷ ࣄ σβΠϯ
Slide 24
Slide 24 text
# " 4 & ͷ σ βΠφ ʔ ͷ ࣄ σβΠϯ ϑϩϯτΤϯυ
Slide 25
Slide 25 text
# " 4 & ͷ σ βΠφ ʔ ͷ ࣄ σβΠϯ ϑϩϯτΤϯυ XFCαʔϏεͷ ߏͷѲ
Slide 26
Slide 26 text
# " 4 & ͷ σ βΠφ ʔ ͷ ࣄ Ͳ͏ͬͯษڧͨ͠Β͍͍Ͱ͔͢ɾɾ ! ৽ೖࣾһɾࡾࠤ͞Μ σβΠϯ ϑϩϯτΤϯυ XFCαʔϏεͷ ߏͷѲ
Slide 27
Slide 27 text
ͱ ͍ ͏ ͜ ͱ Ͱ ɾ ɾ
Slide 28
Slide 28 text
ͱ ͍ ͏ ͜ ͱ Ͱ ɾ ɾ ࣗ Ͱ α ʔ Ϗ ε ࡞ ͬͯ Έ Α ͏ ʂ
Slide 29
Slide 29 text
σβΠφʔͷͨΊͷ ࣗαʔϏε։ൃͷεεϝ
Slide 30
Slide 30 text
σβΠφʔ͔Β͢Δͱɺθϩ͔ΒࣗͰ࡞Ζ͏ͱࢥ͏ͱ ϋʔυϧ͕ߴ͍Πϝʔδ͕͋Δͱࢥ͍·͕͢ɺ ࠓ͕ࣗ࡞ͬͨܦݧΛγΣΞ͢Δ͜ͱͰɺগ͠Ͱ ͦͷϋʔυϧΛԼ͛ΒΕͨΒ͍͍ͳͱࢥ͍·͢
Slide 31
Slide 31 text
ࣗͰαʔϏε࡞ͬͯΈͨ ΞΠσΟΞग़͠
Slide 32
Slide 32 text
͖ ͳ ͜ ͱ ʗ झ ຯ -*,&
Slide 33
Slide 33 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ -*,& $ " /
Slide 34
Slide 34 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢ ͖ ͜ ͱ ʗ ՝ -*,& $ " / 4 ) 0 6 - %
Slide 35
Slide 35 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢ ͖ ͜ ͱ ʗ ՝ -*,& $ " / 4 ) 0 6 - %
Slide 36
Slide 36 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢ ͖ ͜ ͱ ʗ ՝ -*,& $ " / 4 ) 0 6 - % ɾԻָɺөը͖ ɾڝഅ͖ ɾٿ؍ઓ͖ ɾཱྀߦ͕͖ FUD ྫʣ ྫʣ ྫʣ FUD FUD ɾXFC࡞ΕΔ ɾ࡞ۂͰ͖Δ ɾӳޠͰ͖Δ ɾڕ͚͞Δ ɾࣾձͷ ɾ͕ࣗࠔͬͯΔ͜ͱ ɾՈ༑ୡ͕ࠔͬͯΔ͜ͱ
Slide 37
Slide 37 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢ ͖ ͜ ͱ ʗ ՝ -*,& $ " / 4 ) 0 6 - %
Slide 38
Slide 38 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢ ͖ ͜ ͱ ʗ ՝ -*,& $ " / 4 ) 0 6 - % өը XFC࡞ΕΔ
Slide 39
Slide 39 text
͖ ͳ ͜ ͱ ʗ झ ຯ Ͱ ͖ Δ ͜ ͱ ʗ ೳ ྗ ͢ ͖ ͜ ͱ ʗ ՝ -*,& $ " / 4 ) 0 6 - % өը XFC࡞ΕΔ ʢʣ ɾऴઓप ɾઓ૪ମݧੈͷݮগ
Slide 40
Slide 40 text
ઓ ૪ ө ը
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
IUUQXBSpMNTQFBDFDPN
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
ࣗͰαʔϏε࡞ͬͯΈͨ σʔλͷऔಘ
Slide 48
Slide 48 text
ө ը ͷ ใ Λ Ͳ ͏ ͬͯ औ ಘ ͢ Δ ͔
Slide 49
Slide 49 text
" 1 * ө ը ͷ ใ Λ Ͳ ͏ ͬͯ औ ಘ ͢ Δ ͔ ө ը ͷ ใ Λ Ͳ ͏ ͬͯ औ ಘ ͢ Δ ͔
Slide 50
Slide 50 text
ө ը ใ ͕ औ ಘ Ͱ ͖ Δ " 1 *
Slide 51
Slide 51 text
ө ը ใ ͕ औ ಘ Ͱ ͖ Δ " 1 *
Slide 52
Slide 52 text
ւ ֎ ͷ " 1 * ୳ ͢ ͷ Φ ε ε ϝ ʂ
Slide 53
Slide 53 text
ྫ ʣ Ի ָ ܥ " 1 *
Slide 54
Slide 54 text
ྫ ʣ Ի ָ ܥ " 1 *
Slide 55
Slide 55 text
IUUQTXXXQSPHSBNNBCMFXFCDPNDBUFHPSZTFBSDIBQJT
Slide 56
Slide 56 text
σ βΠφ ʔ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ւ ֎ ؚ Ί ͯ " 1 * ୳ ͯ͠ Έ Δ
Slide 57
Slide 57 text
ࣗͰαʔϏε࡞ͬͯΈͨ αʔϏεͷߏ
Slide 58
Slide 58 text
α ʔ Ϗ ε ͷ ߏ OPEFKT&YQSFTT OHJOY 4",63"714 .Z42- ཧը໘ ެ։αΠτ
Slide 59
Slide 59 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42-
Slide 60
Slide 60 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42- ษ ڧ ͢ Δ ͠ ͔ ͳ ͍ ɾ ɾ ʂ
Slide 61
Slide 61 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42- ษ ڧ ͢ Δ ͠ ͔ ͳ ͍ ɾ ɾ ʂ
Slide 62
Slide 62 text
σ βΠφ ʔ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ΦϯϥΠϯֶशαʔϏεͰษڧ͢Δɻ
Slide 63
Slide 63 text
ϋʔυϧԼ͕ͬͯͳ͍ΜͰ͚͢Ͳ ! ৽ೖࣾһɾࡾࠤ͞Μ
Slide 64
Slide 64 text
ͦ Μ ͳ ʹ ษ ڧ ͠ ͳ ͍Ͱ Ͱ ͖ Δ ํ ๏ ʂ ʂ
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
IUUQKBXQBQJPSH
Slide 67
Slide 67 text
OPEFKT&YQSFTT OHJOY 4",63"714 .Z42- ཧը໘ ެ։αΠτ α ʔ Ϗ ε ͷ ߏ
Slide 68
Slide 68 text
8PSE1SFTTͰͭ͘Δ ϩʔΧϧڥ Ϩϯλϧαʔόʔ ཧը໘ ެ։αΠτ
Slide 69
Slide 69 text
IUUQTNMLDDBDPN IUUQTXXXIFSPLVDPN ͋ Δ ͍ ɾ ɾ
Slide 70
Slide 70 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42-
Slide 71
Slide 71 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42- 7 1 4 ͳ ͘ ͯ 0 , % # ༻ ҙ ͠ ͳ ͘ ͯ 0 ,
Slide 72
Slide 72 text
σ βΠφ ʔ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ศརͳπʔϧΛϑϧ׆༻ͯ͠ ֶशίετΛԼ͛Δɻ
Slide 73
Slide 73 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42-
Slide 74
Slide 74 text
α ʔ Ϗ ε ͷ ߏ ɾαʔόʔɿ4",63"714 ɾXFCαʔόʔɿOHJOY ɾ։ൃݴޠϑϨʔϜϫʔΫɿOPEFKT&YQSFTT ɾ%#.Z42-
Slide 75
Slide 75 text
ɾ։ൃڥͷߏங͔Βஸೡʹղઆ ɾ"NB[PO"1*ͷαϯϓϧ ɾ'BDFCPPL 5XJUUFS"1*ͷαϯϓϧ ɾػցֶश ɾ%KTͬͨσʔλϏδϡΞϥΠθʔγϣϯ FUD ͓͢͢Ίʂ ग़యɿIUUQTXXXBNB[PODPKQFYFDPCJEPT"4*/
Slide 76
Slide 76 text
σ βΠφ ʔ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ KT͕গ͠Ͱॻ͚ΔਓOPEFKT͓͢͢Ίɻ
Slide 77
Slide 77 text
ࣗͰαʔϏε࡞ͬͯΈͨ ϑΟʔυόοΫ
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
͜ΜͳΜ࡞ͬͨΑʂ
Slide 80
Slide 80 text
͜ΜͳΜ࡞ͬͨΑʂ ͏Θɺઓ૪͖ͳΜ͔͢ʂʁͲΜҾ͖ɾɾ
Slide 81
Slide 81 text
͜ΜͳΜ࡞ͬͨΑʂ ͏Θɺઓ૪͖ͳΜ͔͢ʂʁͲΜҾ͖ɾɾ ͳΜͰελʔΥʔζೖͬͯͳ͍Μ͔͢ʁ
Slide 82
Slide 82 text
͏Θɺઓ૪͖ͳΜ͔͢ʂʁͲΜҾ͖ɾɾ ͳΜͰελʔΥʔζೖͬͯͳ͍Μ͔͢ʁ Θͬͯͳ͍ɾɾɾ !
Slide 83
Slide 83 text
σ βΠφ ʔ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ पғʹੵۃతʹγΣΞͯ͠ ϑΟʔυόοΫΒ͏
Slide 84
Slide 84 text
ࣗͰαʔϏε࡞ͬͯΈͨ ࡞ͬͨΛهࣄʹ͢Δ
Slide 85
Slide 85 text
IUUQTNFEJVNDPN!NNNBUDIઓ૪өըͷαΠτΛ࡞ͬͨͦͷ̍FBD
Slide 86
Slide 86 text
Կ ͔ ͷ λ Π ϛ ϯ ά Ͱ ͯ ϒ ͕ ͭ ͘ ͜ ͱ ͋ Δ
Slide 87
Slide 87 text
σ βΠφ ʔ ͚ α ʔ Ϗ ε ։ ൃ ͷ ϙ Π ϯ τ ։ ൃ ࣌ ͷ ۤ ࿑ ɺ α ʔ Ϗ ε ͷ ࢥ ͍ ͳ Ͳ Λ ه ࣄ ʹ ͢ Δ
Slide 88
Slide 88 text
ࣗͰαʔϏε࡞ͬͯΈͨ ࡞ΔϝϦοτ
Slide 89
Slide 89 text
ɾXFCΞϓϦέʔγϣϯͷߏ͕Θ͔Δ ࣗ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ
Slide 90
Slide 90 text
ࣗ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾXFCΞϓϦέʔγϣϯͷߏ͕Θ͔Δ ࣗࣾͷαʔϏεͷཧղ͕ਂ·Δ
Slide 91
Slide 91 text
ࣗ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾࣦഊౖͯ͠ΒΕͳ͍ɺ৽͍͜͠ͱΛΨϯΨϯࢼͤΔ ɾXFCΞϓϦέʔγϣϯͷߏ͕Θ͔Δ ࣗࣾͷαʔϏεͷཧղ͕ਂ·Δ
Slide 92
Slide 92 text
ࣗ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾXFCΞϓϦέʔγϣϯͷߏ͕Θ͔Δ ɾࣦഊౖͯ͠ΒΕͳ͍ɺ৽͍͜͠ͱΛΨϯΨϯࢼͤΔ ࣗࣾͷαʔϏεͷཧղ͕ਂ·Δ ͜͜ͰಘͨݟΛձࣾͷαʔϏεʹ׆͔ͤΔ
Slide 93
Slide 93 text
ɾXFCΞϓϦέʔγϣϯͷߏ͕Θ͔Δ ࣗ Ͱ α ʔ Ϗ ε Λ ࡞ Δ ϝ Ϧ ο τ ɾࣦഊౖͯ͠ΒΕͳ͍ɺ৽͍͜͠ͱΛΨϯΨϯࢼͤΔ ɾࣗ༝ʹσβΠϯͰ༡ΔɺσβΠϯΛָ͠Ή ͜͜ͰಘͨݟΛձࣾͷαʔϏεʹ׆͔ͤΔ ࣗࣾͷαʔϏεͷཧղ͕ਂ·Δ
Slide 94
Slide 94 text
σβΠφʔͳΒͰͷײੑɺൃ͕ܗʹͳͬͨαʔϏε͕ ͬͱͨ͘͞Μ૿͑ͨΒ͍͍ͳͱࢥ͍ͬͯ·͢
Slide 95
Slide 95 text
σβΠφʔͳΒͰͷײੑɺൃ͕ܗʹͳͬͨαʔϏε͕ ͬͱͨ͘͞Μ૿͑ͨΒ͍͍ͳͱࢥ͍ͬͯ·͢ ࠓͷΛ௨ͯ͠ɺগ͠Ͱࣗ࡞ͬͯΈΑ͏͔ͳɺ ͱࢥͬͯΒ͑ͨΒخ͍͠Ͱ͢ʂ
Slide 96
Slide 96 text
IUUQTXXXXBOUFEMZDPNDPNQBOJFTCBTFQSPKFDUT
Slide 97
Slide 97 text
THANK YOU! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ