ディレクターは「準備」と「調整」がすべて！ 〜制作現場の「もやもや」を吹き飛ばそう〜

様々なケースから学ぶ。Webディレクターのキャリア戦略@関西 Vol.3 講演資料

Transcript

1. σΟϨΫλʔ͸ʮ४උʯͱʮௐ੔ʯ ͕͢΂ͯʂ ʙ੍࡞ݱ৔ͷʮ΋΍΋΍ʯΛਧ͖ඈ͹ͦ͏ʙ 2017-02-25 @kobatatakayuki - Takayuki Kobata
2. ΞδΣϯμ • ࣗݾ঺հ • ४උฤ • ௐ੔ฤ • ·ͱΊ
3. ΞδΣϯμ • ࣗݾ঺հ • ४උฤ • ௐ੔ฤ • ·ͱΊ
5. খാλΧϢΩ
6. 37ࡀ
7. γχΞςΫχΧϧσΟϨΫλʔ
8. 150ϖʔδҎ্
9. 2ϲ݄Ҏ্
10. ͍ΘΏΔதɾେن໛Ҋ݅ ʢ৽نߏஙͱӡ༻ʣ
11. ໿ 8ׂ
12. ࣗࣾΞϓϦ ʢӡ༻ͱ։ൃʣ
13. ໿ 2ׂ
14. γχΞςΫχΧϧσΟϨΫλʔ
15. ࣾ಺֎ʹ͓͚Δ ४උͱௐ੔͕ओͳ࢓ࣄ
16. ʲ४උʳ ͙͢औΓ͔͔ΕΔঢ়ଶ
17. ४උʹඞཁͳ΋ͷ 1. ΤϏσϯε 1. ܖ໿ॻ 2. ٞࣄ࿥ 2. ཁ݅ఆٛ 1. ϨΪϡϨʔγϣϯ 2. ٕज़తཁ݅ 3. ߏ଄ઃܭ 1. αΠτϚοϓ 2. σΟϨΫτϦϚοϓ
18. ʲௐ੔ʳ ਖ਼ৗঢ়ଶʹ߹ΘͤΔ͜ͱ
19. ௐ੔ʹඞཁͳ΋ͷ 1. ࣾ಺֎ௐ੔ 1. ίϛϡχέʔγϣϯ 2. ֎෦ύʔτφʔ؅ཧ 2. ਐḿ؅ཧ 1. λεΫ؅ཧ 2. ޻਺؅ཧ 3. ࢓૊ΈԽ 1. ϦϚΠϯμʔͷ׆༻ 2. ৼΓฦΓձ
20. ϑϩϯτΤϯυग़਎
21. ۀքྺ 15೥
22. ϑϩϯτΤϯυग़਎ͷ σΟϨΫλʔ͕গͳ͍
23. ΩϟϦΞύε
24. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ
25. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ
26. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ • 2003೥ WebσβΠφʔ
27. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ • 2003೥ WebσβΠφʔ • 2004೥ ίʔμʔ
28. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ • 2003೥ WebσβΠφʔ • 2004೥ ίʔμʔ • 2005೥ ϚʔΫΞοϓΤϯδχΞ
29. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ • 2003೥ WebσβΠφʔ • 2004೥ ίʔμʔ • 2005೥ ϚʔΫΞοϓΤϯδχΞ • 2006೥ ϚʔΫΞοϓσβΠϯΤϯδχΞ
30. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ • 2003೥ WebσβΠφʔ • 2004೥ ίʔμʔ • 2005೥ ϚʔΫΞοϓΤϯδχΞ • 2006೥ ϚʔΫΞοϓσβΠϯΤϯδχΞ • 2010೥ ϑϩϯτΤϯυΤϯδχΞ
31. • 1998೥ झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002೥ WebΫϦΤΠλʔ • 2003೥ WebσβΠφʔ • 2004೥ ίʔμʔ • 2005೥ ϚʔΫΞοϓΤϯδχΞ • 2006೥ ϚʔΫΞοϓσβΠϯΤϯδχΞ • 2010೥ ϑϩϯτΤϯυΤϯδχΞ • 2013೥ γχΞςΫχΧϧσΟϨΫλʔ
32. ͋ͳͨ͸ͲͷΑ͏ͳ ΩϟϦΞύεΛඳ͖·͔͢ʁ
33. ʲ༨ஊʳ ࣗ෼ͷ୨Է͠Λͯ͠ΈΔ
34. ϚΠϯυϚοϓͰࢥߟΛ੔ཧ͢Δ • ίϯηϓτΛཱͯΔ • ͍ͭ·Ͱʹୡ੒ͤ͞Δ͔Λ໌ه͢Δ • ୡ੒ͤ͞Δʹ͸Կ͕ඞཁ͔ʁ • ͜ͷઃܭਤΛ೔ʑϝϯςφϯε͍ͯ͘͠ • ࣗ෼ͷ୨Է͠Λ͢Δ͜ͱͰɺࠓͷཱͪҐஔ͕Θ͔Δ
35. ͜Ε͕ΩϟϦΞΞοϓͷۙಓ
36. ·ͣ͸ࣗ෼Λ஌Δ͜ͱ͔Β࢝ΊΑ͏
37. ࠓ೔ͷΰʔϧ
38. ४උͱௐ੔Ͱ੍࡞ݱ৔ͷ ΋΍΋΍Λਧ͖ඈ͹ͦ͏
39. ΞδΣϯμ • ࣗݾ঺հ • ४උฤ • ௐ੔ฤ • ·ͱΊ
40. ʲ४උʳ ͙͢औΓ͔͔ΕΔঢ়ଶ
41. ४උʹඞཁͳ΋ͷ 1. ΤϏσϯε 1. ܖ໿ॻ 2. ٞࣄ࿥ 2. ཁ݅ఆٛ 1. ϨΪϡϨʔγϣϯ 2. ٕज़తཁ݅ 3. ߏ଄ઃܭ 1. αΠτϚοϓ 2. σΟϨΫτϦϚοϓ
42. ४උͷ΋΍΋΍
43. ʢίϛϡχέʔγϣϯͷ໰୊ʣ
44. ϓϩδΣΫτͰى͜Δ໰୊ͷ 9ׂ͸ίϛϡχέʔγϣϯ
45. ΞϨͲ͏ͳͬͨʁ
46. ͜ͷલɺ఻͑ͨΑͶ
47. ͦΜͳΜฉ͍ͯͳ͍͠
48. ΤϏσϯεΛ࢒͠·͠ΐ͏
49. ʢཁ͕݅֬ఆ͍ͯ͠ͳ͍ʣ
50. ର৅ϒϥ΢βͲ͏ͳͬͨʁ
51. ϨεϙϯγϒରԠʁ
52. jQueryͷόʔδϣϯ͸ʁ
53. ཁ݅Λ֬ఆͤ͞·͠ΐ͏
54. ʢHTMLΛ஌Βͳ͍ʣ
55. ͜ͷϫΠϠʔ จॻߏ଄͓͔͘͠Ͷʁ
56. ΞΫηγϏϦςΟߟ͑ͯΔʁ
57. HTMLΛษڧ͠·͠ΐ͏
58. ;Θͬͱͨ͠·· ਐߦ͢ΔͱࣄނΔ
59. ΤϏσϯε
60. ূڌ
61. 1. ܖ໿ॻ 2. ࢓༷ॻ 3. QAγʔτ 4. ٞࣄ࿥ 5. ϝʔϧ
62. ܖ໿ॻ͸௒େࣄ
63. ݟͨ͜ͱͳ͍ਓ
65. ඞͣ֬ೝ͍ͯͩ͘͠͞
66. 1. ᘥᙪ୲อظؒ 1. ظؒͷ֬ೝ 2. ໰୊ʹͳΓ΍͍͢ 2. લఏ৚݅ͷఏࣔ 1. ݕऩɺೲ඼ํ๏ 2. ΍Βͳ͍͜ͱΛϦετΞοϓ 3. ੒Ռ෺ͷ໌ࣔԽ 1. ೲ඼ൣғʢϓϩάϥϜΛؚΉͷ͔౳ʣ
67. 1. ೲ඼෺ʹೖͬͯΔͱࢥͬͯͨ 2. ରԠൣғʹͳͬͯΔͱࢥͬͯͨ 3. ᘥᙪ୲อظؒͩͱࢥͬͯͨ 4. ࢓༷ͷதʹೖͬͯΔͱࢥͬͯͨ
68. ʙͱʮࢥͬͯͨʯ͸ةݥ
69. ʊਓਓਓਓਓਓਓਓʊ ʼɹಥવͷ࢓༷มߋɹʻ ʉ^Y^Y^Y^Y^Y^Y^ʉ
70. ΤϯδχΞʹͱͬͯ͸ ࢮ׆໰୊
72. ࣗ෼ͷ਎ʢձࣾʣΛ कΔͨΊʹඞཁ
73. ΤϏσϯεΛ࢒͠·͠ΐ͏
74. ΞʔΩςΫνϟμΠΞάϥϜ
75. ઃܭॻ
76. 2005೥ࠒʹ։ൃ
77. ཁ݅Λ֬ఆͤ͞Δ΋ͷ
78. ϓϩδΣΫτͷ ։࢝ͱಉ࣌ʹ࡞੒
79. Google Spreadsheet
80. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ
81. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ
82. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧ͸ৗʹΫϥ΢υʹ͋Δ
83. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧ͸ৗʹΫϥ΢υʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ
84. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧ͸ৗʹΫϥ΢υʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ 5. ඞཁ͕͋Ε͹ɺExcelϑΝΠϧʹΤΫεϙʔτͰ͖Δ
85. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧ͸ৗʹΫϥ΢υʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ 5. ඞཁ͕͋Ε͹ɺExcelϑΝΠϧʹΤΫεϙʔτͰ͖Δ 6. ڞ௨ೝࣝΛ࣋ͭ͜ͱ͕Ͱ͖Δ
86. Google SpreadsheetΛ࢖͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧ͸ৗʹΫϥ΢υʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ 5. ඞཁ͕͋Ε͹ɺExcelϑΝΠϧʹΤΫεϙʔτͰ͖Δ 6. ڞ௨ೝࣝΛ࣋ͭ͜ͱ͕Ͱ͖Δ 7. ίϛϡχέʔγϣϯͷ૬ҧΛ๷͙͜ͱ͕Ͱ͖Δ
88. 1. ϨΪϡϨʔγϣϯʢجຊ࢓༷ʣ 2. αΠτϚοϓ 3. σΟϨΫτϦϚοϓ 4. meta৘ใ 5. ਐḿ؅ཧ 6. σόοάγʔτ
89. Ҋ݅ʹԠͯ͡ΧελϚΠζ
90. HTMLΛ஌Δ
91. HTML͸࠷௿ݶͷ஌ࣝ
92. HTMLΛॻ͍ͨ͜ͱ͋Δਓ
93. σΟϨΫλʔͦ͜ HTMLͷ஌͕ࣝඞཁ
94. HTML͕ཧղͰ͖Δͱ ࢓ࣄ͕͓΋͠Ζ͘ͳΔʂ
95. 1. ਖ਼͍͠จॻߏ଄ 2. SEO 3. ΞΫηγϏϦςΟ 4. ϢʔβϏϦςΟ 5. ϑϩϯτΤϯυଆͱձ࿩͕Ͱ͖Δ
96. ਆ࡚ઌੜͷ͘͝؆୯ͳHTML ͷઆ໌͸ඞಡ ࢀߟɿ͘͝؆୯ͳHTMLͷઆ໌ʢ֎෦ϦϯΫʣ
98. ·ͣ͸7ͭͷཁૉ͚ͩʂ
99. 1. ݟग़͠ʢϒϩοΫཁૉʣ 2. ςΩετʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ 3. ϦετʢϒϩοΫཁૉʣ 4. ද૊ΈʢϒϩοΫཁૉʣ 5. ը૾ʢΠϯϥΠϯཁૉʣ 6. ϦϯΫʢΠϯϥΠϯཁૉʣ 7. άϧʔϓԽʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ
100. ϫΠϠʔ࡞੒ʹ΋໾ཱͭ
101. Webͷࠜװ͸HTMLͱ͍͏͜ ͱΛ๨Εͯ͸ͳΒͳ͍
102. ͔ͬ͠Γͱ४උ͠·͠ΐ͏
103. ΞδΣϯμ • ࣗݾ঺հ • ४උฤ • ௐ੔ฤ • ·ͱΊ
104. ʲௐ੔ʳ ਖ਼ৗঢ়ଶʹ߹ΘͤΔ͜ͱ
105. ௐ੔ʹඞཁͳ΋ͷ 1. ࣾ಺֎ௐ੔ 1. ίϛϡχέʔγϣϯ 2. ֎෦ύʔτφʔ؅ཧ 2. ਐḿ؅ཧ 1. λεΫ؅ཧ 2. ޻਺؅ཧ 3. ࢓૊ΈԽ 1. ϦϚΠϯμʔͷ׆༻ 2. ৼΓฦΓձ
106. ʲ࣭໰ʳ ௐ੔͸͍ͭ΍Δ΋ͷʁ
107. 1. ໰୊͕ى͜Δલ 2. ໰୊͕ىͬͨ͜ޙ
108. ໰୊͕ൃ͔֮ͯ͠ΒͰ͸஗͍ʂ
109. ʲ౴͑ʳ ໰୊͕ى͜Δલ
110. Ͱ͸ɺͲ͏͢Ε͹ྑ͍ʁ
111. ໰୊͕ى͜Γʹ͍͘ ࢓૊ΈΛ࡞Δ
112. ࢀߟεϥΠυ https://www.slideshare.net/ ikeharu/9-58134344
114. ௐ੔ͷ΋΍΋΍
115. ʢεέδϡʔϧͷ໰୊ʣ
116. ࢥ͍௨Γʹਐߦ͠ͳ͍
117. ظݶ͕ܾΊΒΕͯͳ͍
118. ๨Εͯͨ
119. క੾Λৗʹҙࣝ͢Δ ࢓૊ΈΛͭ͘Δ
120. ϦϚΠϯμʔΛ࢖͍·͠ΐ͏
121. ʢಉ͡աͪΛ܁Γฦ͢໰୊ʣ
122. ͜ͷલ΋ಉ͡ϛεͨ͠ΑͶ
123. ଞͷҊ݅Ͱ΋ ಉ͡ࣄ৅͕ى͖ͨΑͶ
124. ໰୊Λڞ༗͢Δ ࢓૊ΈΛͭ͘Δ
125. ৼΓฦΓձΛߦͳ͍·͠ΐ͏
126. ϦϚΠϯμʔ
127. ϦϚΠϯμʔΛ࢖ͬͯΔਓ
128. 1. Todoist 2. Google Calendar 3. Slack Reminderػೳ
129. ظݶ͕໌ه͞Εͯͳ͍ͷ͸ λεΫͱݺ΂ͳ͍
130. ୭͕͍ͭ·ͰʹԿΛ͢Δ͔ Λ໌֬ʹ͓ͯ͘͠
131. ͦΜͳͷ֮͑ͯΒΕͶ͐ʔʂ
132. πʔϧʹཔΓ·͠ΐ͏
133. ৼΓฦΓձ
134. ৘ใ͸ڞ༗͢Δ͜ͱʹ Ձ஋͕͋Δ
135. ΋΍΋΍ձ
136. ΋΍΋΍Λॻ͖ग़͢ձ
137. 1. Ҋ݅લͷ΋΍΋΍ 2. Ҋ݅தͷ΋΍΋΍ 3. Ҋ݅ޙͷ΋΍΋΍
139. ϓϩδΣΫτΛৼΓฦΔ
140. 1. Keepʢྑ͔ͬͨ͜ͱʣ 2. Problemʢѱ͔ͬͨ͜ͱʣ 3. Tryʢ࣍ʹࢼ͢͜ͱʣ
142. 1೔ͷऴΘΓΛৼΓฦΔ
143. 1. Ͱ͖ͨ͜ͱϦετΛͭ͘Δ 2. ໌೔ͷTaskΛ੔ཧ͢Δ 3. ׂ࣌ؒΛͭ͘Δ
144. ೔ʑௐ੔͢Δ͜ͱ͕େࣄ
145. ΞδΣϯμ • ࣗݾ঺հ • ४උฤ • ௐ੔ฤ • ·ͱΊ
146. ࠓ೔ͷΰʔϧ
147. ४උͱௐ੔Ͱ੍࡞ݱ৔ͷ ΋΍΋΍Λਧ͖ඈ͹ͦ͏
148. ४උͷ΋΍΋΍ • ίϛϡχέʔγϣϯͷ໰୊ • ཁ͕݅֬ఆ͍ͯ͠ͳ͍ • HTMLΛ஌Βͳ͍
149. ղܾ͢Δʹ͸ɺɺɺ • ΤϏσϯε • ΞʔΩςΫνϟμΠΞάϥϜ • HTMLΛ஌Δ
150. ௐ੔ͷ΋΍΋΍ • εέδϡʔϧͷ໰୊ • ಉ͡աͪΛ܁Γฦ͢໰୊
151. ղܾ͢Δʹ͸ɺɺɺ • ໰୊͕ى͜Γʹ͍͘࢓૊ΈΛ࡞Δ • ϦϚΠϯμʔ • ৼΓฦΓձ
152. ࣄྫΛަ͓͑ͯ࿩͔ͨͬͨ͠Ͱ͕͢ ·ͨ࣍ͷػձʹ
153. ͥͻ࣋ͪؼͬͯ ݄༵೔͔Β࣮ફͯ͠Έ͍ͯͩ͘͞
154. ײ૝ͳͲ΋͓଴͓ͪͯ͠Γ·͢
155. @kobatatakayuki
156. PR
157. ϑϩϯτΤϯυ͔ΒWebͷະདྷΛߟ͑Δձ http://frontend-x.github.io/
158. Thank you! http://www.kobatatakayuki.com @kobatatakayuki