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
860
脳内マークアップのススメ
kobatatakayuki
1
930
【LT大会Vol3】a-blog cmsのススメ
kobatatakayuki
0
390
Other Decks in Technology
See All in Technology
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
640
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
AI エージェントと考え直すデータ基盤
na0
18
7.3k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
150
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
55
22k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
CDK Vibe Coding Fes
tomoki10
1
540
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
2.2k
Featured
See All Featured
KATA
mclloyd
30
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
BBQ
matthewcrist
89
9.7k
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