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
940
【LT大会Vol3】a-blog cmsのススメ
kobatatakayuki
0
400
Other Decks in Technology
See All in Technology
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
slog.Handlerのよくある実装ミス
sakiengineer
4
480
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
360
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
sansan_randd
1
110
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
590
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Designing for humans not robots
tammielis
253
25k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
GraphQLとの向き合い方2022年版
quramy
49
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