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
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2k
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.2k
7 Core Values of Round-L
wired888
0
1.4k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
160
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
Them Middle School Kids Pitch
stevie_vee
0
120
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
550
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
420
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
430
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
650
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
It's Worth the Effort
3n
187
28k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
How to Ace a Technical Interview
jacobian
279
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
For a Future-Friendly Web
brad_frost
179
9.9k
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 એ