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
220
企業担当者向け、2017年のWebサイト制作の動向
itoh
1
2k
Other Decks in Design
See All in Design
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
520
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
770
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Findyのプロデチームの 歩みとこれから
satty9556
0
320
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
Installing and Running decksh/pdfdeck
ajstarks
1
870
7 Core Values of Round-L
wired888
0
2.3k
高卒公務員から Webデザイナーになるまで
kinomidesign
0
120
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
710
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Building an army of robots
kneath
305
46k
GraphQLとの向き合い方2022年版
quramy
49
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Site-Speed That Sticks
csswizardry
13
930
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Context Engineering - Making Every Token Count
addyosmani
8
300
Balancing Empowerment & Direction
lara
5
700
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 એ