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
minpaku-community-scrum-patterns
norinity1103
1
220
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
120
#Dubois Challenge 2025: Economics
ajstarks
0
150
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.8k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
510
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.9k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
360
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
420
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Designing for humans not robots
tammielis
253
25k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
The World Runs on Bad Software
bkeepers
PRO
70
11k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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 એ