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
300
ディレクターは「準備」と「調整」がすべて! 〜制作現場の「もやもや」を吹き飛ばそう〜
様々なケースから学ぶ。Webディレクターのキャリア戦略@関西 Vol.3 講演資料
kobatatakayuki
February 26, 2017
Tweet
Share
More Decks by kobatatakayuki
See All by kobatatakayuki
Webアクセシビリティ脳のつくりかた
kobatatakayuki
0
840
アクセシビリティのあれこれ 〜まずは、意識することから始めよう〜
kobatatakayuki
0
850
脳内マークアップのススメ
kobatatakayuki
1
930
【LT大会Vol3】a-blog cmsのススメ
kobatatakayuki
0
390
Other Decks in Technology
See All in Technology
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
270
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
440
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
590
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Become a Pro
speakerdeck
PRO
28
5.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Faster Mobile Websites
deanohume
307
31k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
4 Signs Your Business is Dying
shpigford
184
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
GitHub's CSS Performance
jonrohan
1031
460k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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