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
グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / S...
Search
itoh
April 07, 2017
Design
9
14k
グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc.
友人の広告企画制作会社で、Webサイトのコーディング指示に関する注意すべきことを話しました。
itoh
April 07, 2017
Tweet
Share
More Decks by itoh
See All by itoh
質問することのメリット
itoh
0
210
企業担当者向け、2017年のWebサイト制作の動向
itoh
1
2k
Other Decks in Design
See All in Design
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
290
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.7k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
550
オープンデータを利用して色々なものを作った話
hjmkth
1
120
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
AIで加速するアクセシビリティのこれから
magi1125
3
560
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
「デザイン」を信じるには
iflection
0
280
#Dubois Challenge 2025: Economics
ajstarks
0
130
Kid Cowboy 103
marilutwin
0
270
sachi_y_portfolio
sachi337
0
280
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf 2023
tenderlove
30
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Speed Design
sergeychernyshev
32
1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Adopting Sorbet at Scale
ufuk
77
9.5k
Transcript
άϥϑΟοΫσβΠφʔ σΟϨΫλʔ͕IUNMίʔσΟϯάͷࢦࣔʹؔͯ͠ ҙ͖͢͜ͱ גࣜձࣾγϩΫϩҏ౻ঙฏʗදऔకɾσβΠφʔɾσΟϨΫλʔʗIUUQTUXJUUFSDPNE ݄
ίʔσΟϯάͷࢦࣔ݁ߏେมʂ άϥϑΟοΫσβΠφʔσΟϨΫλʔͳͲɺ 8FCσβΠφʔͰͳ͍ํͳΒঘߋɻ Ͱɺ͖ͪΜͱ͓͔ͯ͠ͳ͍ͱޙͰ༨ܭͳ࣌ؒඅ༻͕͔͔ͬͯ͠·͏ɻ
қ ॳΊͯͷ֎ઌԿ͔ࣄͨ͜͠ͱͷ͋Δ֎ઌࣾελοϑ ࣾελοϑͩͱ͜Ε·ͰͷܦݧͰࢦࣔͳ͘Ͱ͖ͯ ֎෦ͷίʔμʔ͞Μʹɺࡉ͔͍Λڞ༗͓͔ͯ͠ͳ͍ͱ ఆ֎ͷ্͕Γʹͳͬͯ͠·͏͜ͱ͕͋Δɻ ॳΊͯΉํͱஸೡʹʂ
࠷ॳʹదͳࢦࣔΛग़͓͚ͯ͠ ίʔμʔ͞ΜͷࣄεϜʔζͰ্͕Γૣ͘ͳΔͷͰɺ Γ͠গͳ͘͢Ήɻ 8FCσβΠϯʹෆ׳ΕͳάϥϑΟοΫσβΠφʔʹ ίʔσΟϯά͍͢͠QTEΛ४උͯ͠Β͏ͷ͍͠ͷͰɺ ࢦࣔͰิ͠Α͏ɻ
ίʔσΟϯάґཔʹඞཁͳͷ ɾίʔσΟϯάϧʔϧ ɹʢରԠϒϥβʗ։ൃڥʗDMBTTͷ໋໊ϧʔϧɹͳͲʣ ɾσΟϨΫτϦϚοϓ ɹʢσΟϨΫτϦߏʗNFUBUJUMFʗτϥοΩϯάίʔυɹͳͲʣ ɾίʔσΟϯάࢦࣔ ɹʢσβΠϯϑΝΠϧͰ͔Βͳ͍෦ͷิઆ໌ʣˡࠓ͜͜ͷ
ίʔσΟϯάࢦࣔͰؾΛ͚ͭΔ͖Օॴ ɾը૾ϨΠΞτ ɾจࣈαΠζ ɾϦϯΫ ɾͦͷଞ
ը૾ϨΠΞτ
ԣ෯ʹஔͨ͠ը૾ ը૾ϨΠΞτ ԣ෯ஔͷը૾͍͔ͭ͘ͷύλʔϯ͕͋Γɺ QTEϑΝΠϧ͔ΒͰ༧ଌ͕͔ͭͳ͍ͷͰɺਖ਼֬ʹࢦࣔ͢Δඞཁ͕͋Δɻ ɾॎԣͱʹ֦େॖখ͢Δ ɾॎ෯ݻఆͰɺதͷࣸਅͷΈ֦େॖখ͢Δ ɾॎԣͱʹ֦େॖখͭͭ͠NBYXJEUINJOIFJHIUΛ͚ͭΔ ɾݻఆαΠζͰ֦େॖখ͠ͳ͍ʢਖ਼֬ʹԣ෯Ͱͳ͍ʣ ͳͲɻ
ॏ ཁ ʂ
ԣ෯ʹஔͨ͠ը૾ ը૾ϨΠΞτ ɾॎԣͱʹ֦େॖখ͢Δ ॏ ཁ ʂ
ԣ෯ʹஔͨ͠ը૾ ը૾ϨΠΞτ ɾॎ෯ݻఆͰɺதͷࣸਅͷΈ֦େॖখ͢Δ ͜ͷ߹ɺࣸਅ͕ݟΕΔέʔε͕ଟ͍ͷͰஔόϥϯεʹҙ͕ඞཁɻ ॏ ཁ ʂ
ԣ෯ʹஔͨ͠ը૾ ը૾ϨΠΞτ ɾॎԣͱʹ֦େॖখͭͭ͠NBYXJEUINBYIFJHIUΛ͚ͭΔ XJEUIͱNBYXJEUIQYΛࢦఆ ॏ ཁ ʂ
ԣ෯ʹஔͨ͠ը૾ ը૾ϨΠΞτ ɾݻఆαΠζͰ֦େॖখ͠ͳ͍ʢਖ਼֬ʹԣ෯Ͱͳ͍ʣ ԣ෯QYͷը૾Λதԝஔ͓ͯ͘͠ͱɺΟϯυ෯QYҎԼͩͱ ԣ෯ʹஔͨ͠Α͏ʹݟ͑Δɻ ॏ ཁ ʂ
ԣ෯ʹஔͨ͠ը૾ ը૾ϨΠΞτ ͞Βʹɺࣸਅͷ্ʹจࣈ͕ͷΔέʔε͋Δʢͦͷจࣈ֦େͤ͞Δͷ͔Ͳ͏͔ʣɻ ·ͨɺϨεϙϯγϒରԠͷεϥΠυγϣʔͷΈ߹Θͤͩͱɺ ͜͜ͷ༷ΛܾΊͯσβΠϯ͓͔ͯ͠ͳ͍ͱɺ࣮ʹࠔΔ͜ͱ͕͋ΔͷͰҙɻ 1$αΠτͷεϥΠυγϣʔ ԣը૾ͷέʔεগͳ͘ͳ͍͕ɺ εϚϗͰಉ͡ൺͷ··ॖখ͢Δͱ খ͗ͯ͢͞ݟͮΒ͘ͳͬͯ͠·͏ɻ
ࠨਤ1$ͱεϚϗͰ ը૾ΛΓସ͍͑ͯΔɻ
จষྔ͕มԽͨ͠ࡍͷରԠ ը૾ϨΠΞτ ݟग़͠ͳͲͰɺจࣈྔ͕ଟ͘ͳͬͨ࣌ɺQTE͔ΒஅͰ͖ͳ͍߹ࢦ͓ࣔͯ͘͠ɻ ʢྫʣ ͜ͷϨΠΞτͰೋߦҎ্ͷ߹ɺͲ͏ͳͬͯ΄͍͠ͷ͔
ϨΠΞτՄม͢Δͷ͔ ը૾ϨΠΞτ ϨεϙϯγϒσβΠϯͷ1$αΠτͱεϚϗαΠτͷதؒͷ࣌ɺ ΟϯυαΠζʹ߹ΘͤͯϨΠΞτ͕มԽ͢Δ͔Ͳ͏͔ܾΊ͓ͯ͘ɻ ࠨਤͷΑ͏ʹϨΠΞτݻఆͰεΫϩʔϧόʔΛग़͢ͷ͔ɺ ӈਤͷΑ͏ʹΟϯυαΠζʹ߹Θͤͯίϯςϯπ෯Λมߋͤ͞Δํ๏͕͋Δɻ
ը૾3FUJOBରԠʁ ը૾ϨΠΞτ ը૾Λ3FUJOBରԠʹ͖͔͢Ͳ͏͔Λࢦࣔɻ ෦తͳࢦఆΞϦɻ 3FUJOBରԠʹ͢Δ࣌ͷը૾ɺQTEʹߴը࣭ͷը૾ΛຒΊࠐΜͰ͓͔͘ɺ ผϑΝΠϧʹͯ͢͠ɻ
εϥΠυγϣʔ ը૾ϨΠΞτ εϥΠυγϣʔͷ༷ΛޙͰࢦࣔ͢Δͱɺ ϓϥάΠϯΛબͼ͢͜ͱʹͳΔʢ֬ೝ·Ͱ౿·͑Δͱ݁ߏͳϩεʹͳΔʣͷͰ ࣄલʹඞཁͳཁૉΛ͓͑ͯ͘ɻ ɾαϜωΠϧ͕ඞཁ ɾࣗಈ࠶ੜ͋Γ ɾಈըରԠ ɾΩϟϓγϣϯΛ͚ͭΒΕΔ
ɾϨεϙϯγϒʹରԠ ɾࠨӈͷҹϘλϯ͕ඞཁ ɾΞχϝʔγϣϯͷઃఆ͕Մೳ ɾॱ൪Λϥϯμ Ϝʹ͢Δ ɾϑϦοΫૢ࡞ʹରԠ ɾΩʔϘʔυͷࠨӈϘλϯʹରԠɹͳͲͳͲ ˞͜͜·Ͱݴ͏ͱݏΘΕΔܭࢉ͞ΕΔͷͰʮΑ͘ΘΕ͍ͯΔϓϥάΠϯͰʯ͘Β͍ͷࢦ͕ࣔϕλʔɻ
จࣈαΠζ
จࣈαΠζཧ͓ͯ͘͠ จࣈαΠζ QTEͰ͏จࣈͷαΠζϧʔϧԽ͓ͯ͘͠ɻྫ͑ ɾφϏήʔγϣϯQYɺݟग़͠QYɺຊจQYɺऍQY ͱ͍ͬͨײ͡ͰܾΊͯ࡞ۀ͢Δɻ ɾಉ͡ຊจͳͷʹQYͱQYͷՕॴ͕͋Δ ɾαΠζࢦఆʹʢྫɿQYʣ͕͋Δ ͱ͍͏ࣄଶආ͚Δɻ ॏ
ཁ ʂ
ಉ༷ʹߦؒཧ͓ͯ͘͠ จࣈαΠζ ߦؒΛؾʹͤͣʹ࡞ۀ͢ΔͱจࣈαΠζҎ্ʹࠞࡏͯ͠͠·͏ͨΊɺ จࣈαΠζͱಉ͡Α͏ʹϧʔϧԽ͓ͯ͘͠ɻྫ͑ ɾQYMJOFIFJHIU ɾQYMJOFIFJHIU ͱ͍ͬͨײ͡Ͱ͓͑ͯ͘ɻ QTEͷจࣈύϨοτ͔Βܭࢉͯ͠Βͬͯ ࡉ͔͍DMBTTΛྔ࢈ͤͯ͞ཧͮ͠Β͍ઃܭʹͳΔΑΓɺ ্هͷΑ͏ͳࢦࣔΛ͢Δ͔
ʮߦؒେମݟͨײ͡ʹ͚ۙΕʯͱ͍͏ࢦ͕ࣔΑ͍ɻ ॏ ཁ ʂ
ಉ༷ʹ༨നཧ͓ͯ͘͠ จࣈαΠζ ɾQTEͰಉ͡ίϯςϯπಉ࢜ͷ༨ന͕QYQYʹͳ͍ͬͯͯɺ ɹͦΕΛਖ਼֬ʹ࠶ݱͯ͠Βͬͯ൚༻ੑͷ͍ઃܭʹͳͬͯ͠·͏ ͱ͍͏ࣄଶ͚ͩආ͚͍ͨɻ ɾ༨നͷϧʔϧQYɺQYɺQYɺQYɺQYɺQYͷΈͱ͢Δ ɹQTE্͔ͦ͜ΒͣΕ͕ͨ͋ΕۙࣅʹدͤͯΒ͏ ɾݟग़͠ͱຊจͷؒFNɺϝΠϯίϯςϯπͱϑολʔͷؒFNͳͲ ɹཁૉಉ࢜ͷϧʔϧΛܾΊ͓ͯ͘ ͳͲɺQTE্ͷࡉ͔͍ζϨΛແࢹͯ͠Β͑ΔΑ͏ʹ͑Δɻ
ॏ ཁ ʂ
ը૾จࣈͷѻ͍ จࣈαΠζ ը૾จࣈͰͳ͍ɺ ςΩετѻ͍ͷจࣈώϥΪϊ֯ΰ͔ώϥΪϊ໌ேͰΜͰ͓͖ɺ ʮͦΕҎ֎ը૾ѻ͍Ͱʯͱ͍͏ࢦࣔΛग़͢ɻ ·ͨɺଠࣈʢGPOUXFJHIUCPMEʣʹͯ͠΄͍͠Օॴ ώϥΪϊ֯ΰ8ͰΜͰ͓͘ɻ
จষྔ͕૿͑Δ͜ͱఆ͓ͯ͘͠ จࣈαΠζ จষྔ͕૿͑ΔͱಡΈͮΒ͘ͳͬͨΓɺϨΠΞτ่͕ΕΔ͜ͱ͕͋ΔͷͰ จষྔ͕มԽͦ͠͏ͳՕॴؾΛ͚ͭΔ͜ͱɻ ӈਤจষ͕ಡΈͮΒ͘ͳͬͨ
ϦϯΫ
ςΩετϦϯΫͷϚεΦʔόʔࢦఆ ϦϯΫ ϖʔδͰͷςΩετϦϯΫϔομʔؚΊΔͱ݁ߏͳछྨ͕͋Δɻ ͦΕͧΕͷςΩετϦϯΫͷϚεΦʔόʔ࣌ͷ৭มԽΛࢦఆ͓ͯ͜͠͏ɻ
ςΩετϦϯΫͷϚεΦʔόʔࢦఆ ϦϯΫ ⁞৭มԽɹ ಁ໌ɹมԽͳ͠ɹΞϯμʔϥΠϯ͋Γɹഎܠ৭͕ಁ໌ όϦΤʔγϣϯ͕ଟ͘ͳΔ࣌ࣄલʹڞ༗͖͢ɻʮΑ͠ͳʹʯͰࡁΉͳΒͦΕͰɻ ⁞
ςΩετϦϯΫͷ๚ࡁΈελΠϧࢦఆ ϦϯΫ 8FCαʔϏεϙʔλϧαΠτͳͲ๚ࡁΈϦϯΫͷࢦఆΛ͓ͯ͘͠ɻ ͨͩ͠φϏήʔγϣϯ෦·Ͱࢦఆ͢Δͱ٫͔ͬͯΓʹ͘͘ͳΔͷͰҙɻ
ϘλϯͷϚεΦʔόʔࢦఆ ϦϯΫ ը૾ͰDTTͰɺϘλϯͷϚεΦʔόʔ ৭มԽ͔ಁ໌มԽ͕ଟ͍ɻ࠷ۙܗঢ়มԽӨͳͲΑ͘ݟ͔͚Δɻ ʮجຊͪΐͬͱಁ໌ɻࢦఆ͕͋Δͷࢦఆʹ߹Θͤͯʯ͘Β͍͕ϕλʔɻ Ϙλϯ ೱมԽ ৭มԽ ಁ໌
άϥσʔγϣϯ ؙ֯ Ө͖ Ξχϝʔγϣϯ
ͦͷଞ ݫີʹݴ͏ͱʢσβΠϯϑΝΠϧͰ͔Βͳ͍෦ͷิઆ໌ʣͰͳ͘ ίʔσΟϯάϧʔϧͳͲͷͰ͕͢ҙࣄ߲ͱͯ͠هɻ
QTEϑΝΠϧΛཧ͓ͯ͜͠͏ ͦͷଞ ɾϨΠϠʔϑΥϧμʹ໊લΛ͚ͭͯɺ͔Γ͍͢ߏʹ͓ͯ͘͠ ɾ͍Βͳ͍ϨΠϠʔআ͓ͯ͘͠ ɾΠϥετϨʔλʔ͔Βίϐϖ͖ͯͨ͠ϕΫτϧεϚʔτΦϒδΣΫτ ɹQTEʹຒΊࠐΜͰ͓͘ ɾը૾ΛಁաͰॻ͖ग़͞ͳ͍ͱ͍͚ͳ͍ͷɺ ɹࢉͳͲͷϨΠϠʔޮՌՃ͑ͳ͍ʢಁ໌0,ʣ
εϚϗͷը໘Λԣ͖ʹͨ࣌͠ͷରԠ ͦͷଞ ֬ೝڥͱͯ͠J04"OESPJEͷόʔδϣϯࢦఆΑ͋͘Δ͕ɺ ը໘Λԣ͖ʹͨ࣌͠ͷࢦࣔͳ͍͜ͱ͕ଟ͍ɻཁ͕͋ΔͳΒࣄલʹڞ༗Λɻ ॎ͖ͷݟӫ͕͑ ͦͷ··֦େ͞Εͨͷ ཁૉͷαΠζಉ͡Ͱ ը໘෯͕͕Δͷ
͓ΘΓ ࡉ͔͘ݴ͏ͱ·ͩ·ͩ͋Γͦ͏͚ͩͲɺ͜ͷ͋ͨΓΛϑΥϩʔ͓͚ͯ͠ ίʔσΟϯά͢ΔํΓ͍͔͢ͱɻ ࡉ͔͘Ѳ͢Δͷେมͱ͍͏ํ ʮQTEͷࡉ͔͍ζϨແࢹͯ͠IUNMDTTͷΈ͢͞༏ઌͰʂʯ ͘Β͍Ͱྑͦ͞͏ɻ ʮΑ͠ͳʹʯͰ͢ΉؔੑͰͳ͚ΕɺԿڞ༗͠ͳ͍ͷ͚ͩආ͚Δ͖ɻ
ڞஶͰࣥචͨ͠ ʮ͍ͪΜΑ͘Θ͔Δ8FCσβΠϯͷجຊ͖ͪΜͱೖʯධൃചதʂ ,JOEMF൛͋ΔΑʂ IUUQTXXXBNB[PODPKQ8FC%FTJHOEQ એ