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
310
ディレクターは「準備」と「調整」がすべて! 〜制作現場の「もやもや」を吹き飛ばそう〜
様々なケースから学ぶ。Webディレクターのキャリア戦略@関西 Vol.3 講演資料
kobatatakayuki
February 26, 2017
Tweet
Share
More Decks by kobatatakayuki
See All by kobatatakayuki
Webアクセシビリティ脳のつくりかた
kobatatakayuki
0
850
アクセシビリティのあれこれ 〜まずは、意識することから始めよう〜
kobatatakayuki
0
870
脳内マークアップのススメ
kobatatakayuki
1
930
【LT大会Vol3】a-blog cmsのススメ
kobatatakayuki
0
390
Other Decks in Technology
See All in Technology
Language Update: Java
skrb
2
290
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.4k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
170
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
380
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
460
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
16
6.8k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
300
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
360
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
260
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
YesSQL, Process and Tooling at Scale
rocio
173
14k
Six Lessons from altMBA
skipperchong
28
4k
How GitHub (no longer) Works
holman
315
140k
Statistics for Hackers
jakevdp
799
220k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Context Engineering - Making Every Token Count
addyosmani
1
23
Embracing the Ebb and Flow
colly
87
4.8k
KATA
mclloyd
32
14k
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