Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ディレクターは「準備」と「調整」がすべて! 〜制作現場の「もやもや」を吹き飛ばそう〜
Search
kobatatakayuki
February 26, 2017
Technology
0
270
ディレクターは「準備」と「調整」がすべて! 〜制作現場の「もやもや」を吹き飛ばそう〜
様々なケースから学ぶ。Webディレクターのキャリア戦略@関西 Vol.3 講演資料
kobatatakayuki
February 26, 2017
Tweet
Share
More Decks by kobatatakayuki
See All by kobatatakayuki
Webアクセシビリティ脳のつくりかた
kobatatakayuki
0
800
アクセシビリティのあれこれ 〜まずは、意識することから始めよう〜
kobatatakayuki
0
790
脳内マークアップのススメ
kobatatakayuki
1
890
【LT大会Vol3】a-blog cmsのススメ
kobatatakayuki
0
340
Other Decks in Technology
See All in Technology
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
On Your Data を超えていく!
hirotomotaguchi
2
690
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
530
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
230
JSON攻略法.pdf
miyakemito
8
5.1k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
390
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
VS CodeでAWSを操作しよう
smt7174
8
1.7k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
92
4.8k
How GitHub (no longer) Works
holman
304
140k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
A designer walks into a library…
pauljervisheath
200
23k
For a Future-Friendly Web
brad_frost
172
9k
Clear Off the Table
cherdarchuk
84
310k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
4 Signs Your Business is Dying
shpigford
175
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Typedesign – Prime Four
hannesfritz
36
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Transcript
σΟϨΫλʔʮ४උʯͱʮௐʯ ͕ͯ͢ʂ ʙ੍࡞ݱͷʮʯΛਧ͖ඈͦ͏ʙ 2017-02-25 @kobatatakayuki - Takayuki Kobata
ΞδΣϯμ • ࣗݾհ • ४උฤ • ௐฤ • ·ͱΊ
ΞδΣϯμ • ࣗݾհ • ४උฤ • ௐฤ • ·ͱΊ
None
খാλΧϢΩ
37ࡀ
γχΞςΫχΧϧσΟϨΫλʔ
150ϖʔδҎ্
2ϲ݄Ҏ্
͍ΘΏΔதɾେنҊ݅ ʢ৽نߏஙͱӡ༻ʣ
8ׂ
ࣗࣾΞϓϦ ʢӡ༻ͱ։ൃʣ
2ׂ
γχΞςΫχΧϧσΟϨΫλʔ
ࣾ֎ʹ͓͚Δ ४උͱௐ͕ओͳࣄ
ʲ४උʳ ͙͢औΓ͔͔ΕΔঢ়ଶ
४උʹඞཁͳͷ 1. ΤϏσϯε 1. ܖॻ 2. ٞࣄ 2. ཁ݅ఆٛ 1.
ϨΪϡϨʔγϣϯ 2. ٕज़తཁ݅ 3. ߏઃܭ 1. αΠτϚοϓ 2. σΟϨΫτϦϚοϓ
ʲௐʳ ਖ਼ৗঢ়ଶʹ߹ΘͤΔ͜ͱ
ௐʹඞཁͳͷ 1. ࣾ֎ௐ 1. ίϛϡχέʔγϣϯ 2. ֎෦ύʔτφʔཧ 2. ਐḿཧ 1.
λεΫཧ 2. ཧ 3. ΈԽ 1. ϦϚΠϯμʔͷ׆༻ 2. ৼΓฦΓձ
ϑϩϯτΤϯυग़
ۀքྺ 15
ϑϩϯτΤϯυग़ͷ σΟϨΫλʔ͕গͳ͍
ΩϟϦΞύε
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ • 2003 WebσβΠφʔ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ • 2003 WebσβΠφʔ •
2004 ίʔμʔ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ • 2003 WebσβΠφʔ •
2004 ίʔμʔ • 2005 ϚʔΫΞοϓΤϯδχΞ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ • 2003 WebσβΠφʔ •
2004 ίʔμʔ • 2005 ϚʔΫΞοϓΤϯδχΞ • 2006 ϚʔΫΞοϓσβΠϯΤϯδχΞ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ • 2003 WebσβΠφʔ •
2004 ίʔμʔ • 2005 ϚʔΫΞοϓΤϯδχΞ • 2006 ϚʔΫΞοϓσβΠϯΤϯδχΞ • 2010 ϑϩϯτΤϯυΤϯδχΞ
• 1998 झຯͰϗʔϜϖʔδ੍࡞Λ࢝ΊΔ • 2002 WebΫϦΤΠλʔ • 2003 WebσβΠφʔ •
2004 ίʔμʔ • 2005 ϚʔΫΞοϓΤϯδχΞ • 2006 ϚʔΫΞοϓσβΠϯΤϯδχΞ • 2010 ϑϩϯτΤϯυΤϯδχΞ • 2013 γχΞςΫχΧϧσΟϨΫλʔ
͋ͳͨͲͷΑ͏ͳ ΩϟϦΞύεΛඳ͖·͔͢ʁ
ʲ༨ஊʳ ࣗͷ୨Է͠Λͯ͠ΈΔ
ϚΠϯυϚοϓͰࢥߟΛཧ͢Δ • ίϯηϓτΛཱͯΔ • ͍ͭ·Ͱʹୡͤ͞Δ͔Λ໌ه͢Δ • ୡͤ͞ΔʹԿ͕ඞཁ͔ʁ • ͜ͷઃܭਤΛʑϝϯςφϯε͍ͯ͘͠ •
ࣗͷ୨Է͠Λ͢Δ͜ͱͰɺࠓͷཱͪҐஔ͕Θ͔Δ
͜Ε͕ΩϟϦΞΞοϓͷۙಓ
·ͣࣗΛΔ͜ͱ͔Β࢝ΊΑ͏
ࠓͷΰʔϧ
४උͱௐͰ੍࡞ݱͷ Λਧ͖ඈͦ͏
ΞδΣϯμ • ࣗݾհ • ४උฤ • ௐฤ • ·ͱΊ
ʲ४උʳ ͙͢औΓ͔͔ΕΔঢ়ଶ
४උʹඞཁͳͷ 1. ΤϏσϯε 1. ܖॻ 2. ٞࣄ 2. ཁ݅ఆٛ 1.
ϨΪϡϨʔγϣϯ 2. ٕज़తཁ݅ 3. ߏઃܭ 1. αΠτϚοϓ 2. σΟϨΫτϦϚοϓ
४උͷ
ʢίϛϡχέʔγϣϯͷʣ
ϓϩδΣΫτͰى͜Δͷ 9ׂίϛϡχέʔγϣϯ
ΞϨͲ͏ͳͬͨʁ
͜ͷલɺ͑ͨΑͶ
ͦΜͳΜฉ͍ͯͳ͍͠
ΤϏσϯεΛ͠·͠ΐ͏
ʢཁ͕݅֬ఆ͍ͯ͠ͳ͍ʣ
ରϒϥβͲ͏ͳͬͨʁ
ϨεϙϯγϒରԠʁ
jQueryͷόʔδϣϯʁ
ཁ݅Λ֬ఆͤ͞·͠ΐ͏
ʢHTMLΛΒͳ͍ʣ
͜ͷϫΠϠʔ จॻߏ͓͔͘͠Ͷʁ
ΞΫηγϏϦςΟߟ͑ͯΔʁ
HTMLΛษڧ͠·͠ΐ͏
;Θͬͱͨ͠·· ਐߦ͢ΔͱࣄނΔ
ΤϏσϯε
ূڌ
1. ܖॻ 2. ༷ॻ 3. QAγʔτ 4. ٞࣄ 5. ϝʔϧ
ܖॻେࣄ
ݟͨ͜ͱͳ͍ਓ
None
ඞͣ֬ೝ͍ͯͩ͘͠͞
1. ᘥᙪ୲อظؒ 1. ظؒͷ֬ೝ 2. ʹͳΓ͍͢ 2. લఏ݅ͷఏࣔ 1. ݕऩɺೲํ๏
2. Βͳ͍͜ͱΛϦετΞοϓ 3. Ռͷ໌ࣔԽ 1. ೲൣғʢϓϩάϥϜΛؚΉͷ͔ʣ
1. ೲʹೖͬͯΔͱࢥͬͯͨ 2. ରԠൣғʹͳͬͯΔͱࢥͬͯͨ 3. ᘥᙪ୲อظؒͩͱࢥͬͯͨ 4. ༷ͷதʹೖͬͯΔͱࢥͬͯͨ
ʙͱʮࢥͬͯͨʯةݥ
ʊਓਓਓਓਓਓਓਓʊ ʼɹಥવͷ༷มߋɹʻ ʉ^Y^Y^Y^Y^Y^Y^ʉ
ΤϯδχΞʹͱͬͯ ࢮ׆
None
ࣗͷʢձࣾʣΛ कΔͨΊʹඞཁ
ΤϏσϯεΛ͠·͠ΐ͏
ΞʔΩςΫνϟμΠΞάϥϜ
ઃܭॻ
2005ࠒʹ։ൃ
ཁ݅Λ֬ఆͤ͞Δͷ
ϓϩδΣΫτͷ ։࢝ͱಉ࣌ʹ࡞
Google Spreadsheet
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧৗʹΫϥυʹ͋Δ
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧৗʹΫϥυʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧৗʹΫϥυʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ
5. ඞཁ͕͋ΕɺExcelϑΝΠϧʹΤΫεϙʔτͰ͖Δ
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧৗʹΫϥυʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ
5. ඞཁ͕͋ΕɺExcelϑΝΠϧʹΤΫεϙʔτͰ͖Δ 6. ڞ௨ೝࣝΛ࣋ͭ͜ͱ͕Ͱ͖Δ
Google SpreadsheetΛ͏ཧ༝ 1. ڞ༗Ͱ͖Δ 2. ڞಉ࡞ۀ͕Ͱ͖Δ 3. ϑΝΠϧৗʹΫϥυʹ͋Δ 4. ӾཡݖݶΛ༩͑Δ͜ͱ͕Ͱ͖Δ
5. ඞཁ͕͋ΕɺExcelϑΝΠϧʹΤΫεϙʔτͰ͖Δ 6. ڞ௨ೝࣝΛ࣋ͭ͜ͱ͕Ͱ͖Δ 7. ίϛϡχέʔγϣϯͷ૬ҧΛ͙͜ͱ͕Ͱ͖Δ
None
1. ϨΪϡϨʔγϣϯʢجຊ༷ʣ 2. αΠτϚοϓ 3. σΟϨΫτϦϚοϓ 4. metaใ 5. ਐḿཧ
6. σόοάγʔτ
Ҋ݅ʹԠͯ͡ΧελϚΠζ
HTMLΛΔ
HTML࠷ݶͷࣝ
HTMLΛॻ͍ͨ͜ͱ͋Δਓ
σΟϨΫλʔͦ͜ HTMLͷ͕ࣝඞཁ
HTML͕ཧղͰ͖Δͱ ࣄ͕͓͠Ζ͘ͳΔʂ
1. ਖ਼͍͠จॻߏ 2. SEO 3. ΞΫηγϏϦςΟ 4. ϢʔβϏϦςΟ 5. ϑϩϯτΤϯυଆͱձ͕Ͱ͖Δ
ਆ࡚ઌੜͷ͘͝؆୯ͳHTML ͷઆ໌ඞಡ ࢀߟɿ͘͝؆୯ͳHTMLͷઆ໌ʢ֎෦ϦϯΫʣ
None
·ͣ7ͭͷཁૉ͚ͩʂ
1. ݟग़͠ʢϒϩοΫཁૉʣ 2. ςΩετʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ 3. ϦετʢϒϩοΫཁૉʣ 4. දΈʢϒϩοΫཁૉʣ 5. ը૾ʢΠϯϥΠϯཁૉʣ
6. ϦϯΫʢΠϯϥΠϯཁૉʣ 7. άϧʔϓԽʢϒϩοΫཁૉɾΠϯϥΠϯཁૉʣ
ϫΠϠʔ࡞ʹཱͭ
WebͷࠜװHTMLͱ͍͏͜ ͱΛΕͯͳΒͳ͍
͔ͬ͠Γͱ४උ͠·͠ΐ͏
ΞδΣϯμ • ࣗݾհ • ४උฤ • ௐฤ • ·ͱΊ
ʲௐʳ ਖ਼ৗঢ়ଶʹ߹ΘͤΔ͜ͱ
ௐʹඞཁͳͷ 1. ࣾ֎ௐ 1. ίϛϡχέʔγϣϯ 2. ֎෦ύʔτφʔཧ 2. ਐḿཧ 1.
λεΫཧ 2. ཧ 3. ΈԽ 1. ϦϚΠϯμʔͷ׆༻ 2. ৼΓฦΓձ
ʲ࣭ʳ ௐ͍ͭΔͷʁ
1. ͕ى͜Δલ 2. ͕ىͬͨ͜ޙ
͕ൃ͔֮ͯ͠ΒͰ͍ʂ
ʲ͑ʳ ͕ى͜Δલ
ͰɺͲ͏͢Εྑ͍ʁ
͕ى͜Γʹ͍͘ ΈΛ࡞Δ
ࢀߟεϥΠυ https://www.slideshare.net/ ikeharu/9-58134344
None
ௐͷ
ʢεέδϡʔϧͷʣ
ࢥ͍௨Γʹਐߦ͠ͳ͍
ظݶ͕ܾΊΒΕͯͳ͍
Εͯͨ
కΛৗʹҙࣝ͢Δ ΈΛͭ͘Δ
ϦϚΠϯμʔΛ͍·͠ΐ͏
ʢಉ͡աͪΛ܁Γฦ͢ʣ
͜ͷલಉ͡ϛεͨ͠ΑͶ
ଞͷҊ݅Ͱ ಉ͡ࣄ͕ى͖ͨΑͶ
Λڞ༗͢Δ ΈΛͭ͘Δ
ৼΓฦΓձΛߦͳ͍·͠ΐ͏
ϦϚΠϯμʔ
ϦϚΠϯμʔΛͬͯΔਓ
1. Todoist 2. Google Calendar 3. Slack Reminderػೳ
ظݶ͕໌ه͞Εͯͳ͍ͷ λεΫͱݺͳ͍
୭͕͍ͭ·ͰʹԿΛ͢Δ͔ Λ໌֬ʹ͓ͯ͘͠
ͦΜͳͷ֮͑ͯΒΕͶ͐ʔʂ
πʔϧʹཔΓ·͠ΐ͏
ৼΓฦΓձ
ใڞ༗͢Δ͜ͱʹ Ձ͕͋Δ
ձ
Λॻ͖ग़͢ձ
1. Ҋ݅લͷ 2. Ҋ݅தͷ 3. Ҋ݅ޙͷ
None
ϓϩδΣΫτΛৼΓฦΔ
1. Keepʢྑ͔ͬͨ͜ͱʣ 2. Problemʢѱ͔ͬͨ͜ͱʣ 3. Tryʢ࣍ʹࢼ͢͜ͱʣ
None
1ͷऴΘΓΛৼΓฦΔ
1. Ͱ͖ͨ͜ͱϦετΛͭ͘Δ 2. ໌ͷTaskΛཧ͢Δ 3. ׂ࣌ؒΛͭ͘Δ
ʑௐ͢Δ͜ͱ͕େࣄ
ΞδΣϯμ • ࣗݾհ • ४උฤ • ௐฤ • ·ͱΊ
ࠓͷΰʔϧ
४උͱௐͰ੍࡞ݱͷ Λਧ͖ඈͦ͏
४උͷ • ίϛϡχέʔγϣϯͷ • ཁ͕݅֬ఆ͍ͯ͠ͳ͍ • HTMLΛΒͳ͍
ղܾ͢Δʹɺɺɺ • ΤϏσϯε • ΞʔΩςΫνϟμΠΞάϥϜ • HTMLΛΔ
ௐͷ • εέδϡʔϧͷ • ಉ͡աͪΛ܁Γฦ͢
ղܾ͢Δʹɺɺɺ • ͕ى͜Γʹ͍͘ΈΛ࡞Δ • ϦϚΠϯμʔ • ৼΓฦΓձ
ࣄྫΛަ͓͔͑ͯͨͬͨ͠Ͱ͕͢ ·ͨ࣍ͷػձʹ
ͥͻ࣋ͪؼͬͯ ݄༵͔Β࣮ફͯ͠Έ͍ͯͩ͘͞
ײͳͲ͓͓ͪͯ͠Γ·͢
@kobatatakayuki
PR
ϑϩϯτΤϯυ͔ΒWebͷະདྷΛߟ͑Δձ http://frontend-x.github.io/
Thank you! http://www.kobatatakayuki.com @kobatatakayuki