Upgrade to Pro — share decks privately, control downloads, hide ads and more …

グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc.

itoh
April 07, 2017

グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc.

友人の広告企画制作会社で、Webサイトのコーディング指示に関する注意すべきことを話しました。

itoh

April 07, 2017
Tweet

More Decks by itoh

Other Decks in Design

Transcript

  1. άϥϑΟοΫσβΠφʔ΍ σΟϨΫλʔ͕IUNMίʔσΟϯάͷࢦࣔʹؔͯ͠ ஫ҙ͢΂͖͜ͱ גࣜձࣾγϩΫϩҏ౻ঙฏʗ୅දऔక໾ɾσβΠφʔɾσΟϨΫλʔʗIUUQTUXJUUFSDPNE ೥݄೔

  2. ίʔσΟϯάͷࢦࣔ͸݁ߏେมʂ άϥϑΟοΫσβΠφʔ΍σΟϨΫλʔͳͲɺ 8FCσβΠφʔͰ͸ͳ͍ํͳΒঘߋɻ Ͱ΋ɺ͖ͪΜͱ͓͔ͯ͠ͳ͍ͱޙͰ༨ܭͳ࣌ؒ΍අ༻͕͔͔ͬͯ͠·͏ɻ 

  3. ೉қ౓ ॳΊͯͷ֎஫ઌԿ౓͔࢓ࣄͨ͜͠ͱͷ͋Δ֎஫ઌࣾ಺ελοϑ ࣾ಺ελοϑͩͱ͜Ε·ͰͷܦݧͰࢦࣔͳ͘Ͱ͖ͯ΋ ֎෦ͷίʔμʔ͞Μʹ͸ɺࡉ͔͍࿩Λڞ༗͓͔ͯ͠ͳ͍ͱ ૝ఆ֎ͷ࢓্͕Γʹͳͬͯ͠·͏͜ͱ͕͋Δɻ ॳΊͯ૊Ήํͱ͸ஸೡʹʂ 

  4. ࠷ॳʹద੾ͳࢦࣔΛग़͓͚ͯ͠͹ ίʔμʔ͞Μͷ࢓ࣄ΋εϜʔζͰ࢓্͕Γ΋ૣ͘ͳΔͷͰɺ ΍Γ௚͠΋গͳ͘͢Ήɻ 8FCσβΠϯʹෆ׳ΕͳάϥϑΟοΫσβΠφʔʹ ίʔσΟϯά͠΍͍͢QTEΛ४උͯ͠΋Β͏ͷ΋೉͍͠ͷͰɺ ࢦࣔͰิ׬͠Α͏ɻ 

  5. ίʔσΟϯάґཔʹඞཁͳ΋ͷ ɾίʔσΟϯάϧʔϧ ɹʢରԠϒϥ΢βʗ։ൃ؀ڥʗDMBTTͷ໋໊ϧʔϧɹͳͲʣ ɾσΟϨΫτϦϚοϓ ɹʢσΟϨΫτϦߏ଄ʗNFUB΍UJUMFʗτϥοΩϯάίʔυɹͳͲʣ ɾίʔσΟϯάࢦࣔ ɹʢσβΠϯϑΝΠϧͰ͸෼͔Βͳ͍෦෼ͷิ଍આ໌ʣˡࠓ೔͸͜͜ͷ࿩ 

  6. ίʔσΟϯάࢦࣔͰؾΛ͚ͭΔ΂͖Օॴ ɾը૾΍ϨΠΞ΢τ ɾจࣈ΍αΠζ ɾϦϯΫ ɾͦͷଞ 

  7. ը૾΍ϨΠΞ΢τ

  8. ԣ෯ʹ഑ஔͨ͠ը૾ ը૾΍ϨΠΞ΢τ ԣ෯഑ஔͷը૾͸͍͔ͭ͘ͷύλʔϯ͕͋Γɺ QTEϑΝΠϧ͔ΒͰ͸༧ଌ͕͔ͭͳ͍ͷͰɺਖ਼֬ʹࢦࣔ͢Δඞཁ͕͋Δɻ ɾॎԣͱ΋ʹ֦େॖখ͢Δ ɾॎ෯͸ݻఆͰɺதͷࣸਅͷΈ֦େॖখ͢Δ ɾॎԣͱ΋ʹ֦େॖখͭͭ͠NBYXJEUI΍NJOIFJHIUΛ͚ͭΔ ɾݻఆαΠζͰ֦େॖখ͠ͳ͍ʢਖ਼֬ʹ͸ԣ෯Ͱ͸ͳ͍ʣ ͳͲɻ 

    ॏ ཁ ʂ
  9. ԣ෯ʹ഑ஔͨ͠ը૾ ը૾΍ϨΠΞ΢τ ɾॎԣͱ΋ʹ֦େॖখ͢Δ  ॏ ཁ ʂ

  10. ԣ෯ʹ഑ஔͨ͠ը૾ ը૾΍ϨΠΞ΢τ ɾॎ෯͸ݻఆͰɺதͷࣸਅͷΈ֦େॖখ͢Δ  ͜ͷ৔߹ɺࣸਅ͕ݟ੾ΕΔέʔε͕ଟ͍ͷͰ഑ஔόϥϯεʹ͸஫ҙ͕ඞཁɻ ॏ ཁ ʂ

  11. ԣ෯ʹ഑ஔͨ͠ը૾ ը૾΍ϨΠΞ΢τ ɾॎԣͱ΋ʹ֦େॖখͭͭ͠NBYXJEUI΍NBYIFJHIUΛ͚ͭΔ  XJEUIͱNBYXJEUIQYΛࢦఆ ॏ ཁ ʂ

  12. ԣ෯ʹ഑ஔͨ͠ը૾ ը૾΍ϨΠΞ΢τ ɾݻఆαΠζͰ֦େॖখ͠ͳ͍ʢਖ਼֬ʹ͸ԣ෯Ͱ͸ͳ͍ʣ  ԣ෯QYͷը૾Λதԝ഑ஔ͓ͯ͘͠ͱɺ΢Οϯυ΢෯QYҎԼͩͱ ԣ෯ʹ഑ஔͨ͠Α͏ʹݟ͑Δɻ ॏ ཁ ʂ

  13. ԣ෯ʹ഑ஔͨ͠ը૾ ը૾΍ϨΠΞ΢τ ͞Βʹɺࣸਅͷ্ʹจࣈ͕ͷΔέʔε΋͋Δʢͦͷจࣈ΋֦େͤ͞Δͷ͔Ͳ͏͔ʣɻ ·ͨɺϨεϙϯγϒରԠͷεϥΠυγϣʔͷ૊Έ߹Θͤͩͱɺ ͜͜ͷ࢓༷ΛܾΊͯσβΠϯ͓͔ͯ͠ͳ͍ͱɺ࣮૷ʹࠔΔ͜ͱ͕͋ΔͷͰ஫ҙɻ  1$αΠτͷεϥΠυγϣʔ͸ ԣ௕ը૾ͷέʔε΋গͳ͘ͳ͍͕ɺ εϚϗͰಉ͡ൺ཰ͷ··ॖখ͢Δͱ খ͗ͯ͢͞ݟͮΒ͘ͳͬͯ͠·͏ɻ

    ࠨਤ͸1$ͱεϚϗͰ ը૾Λ੾Γସ͍͑ͯΔɻ
  14. จষྔ͕มԽͨ͠ࡍͷରԠ ը૾΍ϨΠΞ΢τ ݟग़͠ͳͲͰɺจࣈྔ͕ଟ͘ͳͬͨ࣌ɺQTE͔Β൑அͰ͖ͳ͍৔߹͸ࢦ͓ࣔͯ͘͠ɻ ʢྫʣ  ͜ͷϨΠΞ΢τͰೋߦҎ্ͷ৔߹ɺͲ͏ͳͬͯ΄͍͠ͷ͔

  15. ϨΠΞ΢τ͸Մม͢Δͷ͔ ը૾΍ϨΠΞ΢τ ϨεϙϯγϒσβΠϯͷ1$αΠτͱεϚϗαΠτͷதؒͷ࣌ɺ ΢Οϯυ΢αΠζʹ߹ΘͤͯϨΠΞ΢τ͕มԽ͢Δ͔Ͳ͏͔ܾΊ͓ͯ͘ɻ  ࠨਤͷΑ͏ʹϨΠΞ΢τ͸ݻఆͰεΫϩʔϧόʔΛग़͢ͷ͔ɺ ӈਤͷΑ͏ʹ΢Οϯυ΢αΠζʹ߹Θͤͯίϯςϯπ෯Λมߋͤ͞Δํ๏͕͋Δɻ

  16. ը૾͸3FUJOBରԠʁ ը૾΍ϨΠΞ΢τ ը૾Λ3FUJOBରԠʹ͢΂͖͔Ͳ͏͔Λࢦࣔɻ ෦෼తͳࢦఆ΋ΞϦɻ 3FUJOBରԠʹ͢Δ࣌ͷը૾͸ɺQTE಺ʹߴը࣭ͷը૾ΛຒΊࠐΜͰ͓͔͘ɺ ผϑΝΠϧʹͯ͠౉͢ɻ 

  17. εϥΠυγϣʔ ը૾΍ϨΠΞ΢τ εϥΠυγϣʔͷ࢓༷ΛޙͰࢦࣔ͢Δͱɺ ϓϥάΠϯΛબͼ௚͢͜ͱʹͳΔʢ֬ೝ·Ͱ౿·͑Δͱ݁ߏͳϩεʹͳΔʣͷͰ ࣄલʹඞཁͳཁૉΛ఻͓͑ͯ͘ɻ  ɾαϜωΠϧ͕ඞཁ ɾࣗಈ࠶ੜ͋Γ ɾಈըରԠ ɾΩϟϓγϣϯΛ͚ͭΒΕΔ

    ɾϨεϙϯγϒʹ΋ରԠ ɾࠨӈͷ໼ҹϘλϯ͕ඞཁ ɾΞχϝʔγϣϯͷઃఆ͕Մೳ ɾॱ൪Λϥϯμ Ϝʹ͢Δ ɾϑϦοΫૢ࡞ʹ΋ରԠ ɾΩʔϘʔυͷࠨӈϘλϯʹ΋ରԠɹͳͲͳͲ ˞͜͜·Ͱݴ͏ͱݏΘΕΔ޻਺ܭࢉ͞ΕΔͷͰʮΑ͘࢖ΘΕ͍ͯΔϓϥάΠϯͰʯ͘Β͍ͷࢦ͕ࣔϕλʔɻ
  18. จࣈ΍αΠζ

  19. จࣈαΠζ͸੔ཧ͓ͯ͘͠ จࣈ΍αΠζ QTE಺Ͱ࢖͏จࣈͷαΠζ͸ϧʔϧԽ͓ͯ͘͠ɻྫ͑͹ ɾφϏήʔγϣϯ͸QYɺݟग़͠͸QYɺຊจ͸QYɺ஫ऍ͸QY ͱ͍ͬͨײ͡ͰܾΊͯ࡞ۀ͢Δɻ ɾಉ͡ຊจͳͷʹQYͱQYͷՕॴ͕͋Δ ɾαΠζࢦఆʹ୺਺ʢྫɿQYʣ͕͋Δ ͱ͍͏ࣄଶ͸ආ͚Δɻ  ॏ

    ཁ ʂ
  20. ಉ༷ʹߦؒ΋੔ཧ͓ͯ͘͠ จࣈ΍αΠζ ߦؒΛؾʹͤͣʹ࡞ۀ͢ΔͱจࣈαΠζҎ্ʹࠞࡏͯ͠͠·͏ͨΊɺ จࣈαΠζͱಉ͡Α͏ʹϧʔϧԽ͓ͯ͘͠ɻྫ͑͹ ɾQY͸MJOFIFJHIU ɾQY͸MJOFIFJHIU ͱ͍ͬͨײ͡Ͱ఻͓͑ͯ͘ɻ QTEͷจࣈύϨοτ͔Βܭࢉͯ͠΋Βͬͯ ࡉ͔͍DMBTTΛྔ࢈ͤͯ͞؅ཧͮ͠Β͍ઃܭʹͳΔΑΓɺ ্هͷΑ͏ͳࢦࣔΛ͢Δ͔

    ʮߦؒ͸େମݟͨײ͡ʹ͚ۙΕ͹ʯͱ͍͏ࢦ͕ࣔΑ͍ɻ  ॏ ཁ ʂ
  21. ಉ༷ʹ༨ന΋੔ཧ͓ͯ͘͠ จࣈ΍αΠζ ɾQTEͰಉ͡ίϯςϯπಉ࢜ͷ༨ന͕QY΍QYʹͳ͍ͬͯͯɺ ɹͦΕΛਖ਼֬ʹ࠶ݱͯ͠΋Βͬͯ൚༻ੑͷ௿͍ઃܭʹͳͬͯ͠·͏ ͱ͍͏ࣄଶ͚ͩ͸ආ͚͍ͨɻ ɾ༨നͷϧʔϧ͸QYɺQYɺQYɺQYɺQYɺQYͷΈͱ͢Δ ɹQTE্͔ͦ͜ΒͣΕͨ਺஋͕͋Ε͹ۙࣅ஋ʹدͤͯ΋Β͏ ɾݟग़͠ͱຊจͷؒ͸FNɺϝΠϯίϯςϯπͱϑολʔͷؒ͸FNͳͲ ɹཁૉಉ࢜ͷϧʔϧΛܾΊ͓ͯ͘ ͳͲɺQTE্ͷࡉ͔͍ζϨΛແࢹͯ͠΋Β͑ΔΑ͏ʹ఻͑Δɻ

     ॏ ཁ ʂ
  22. ը૾จࣈͷѻ͍ จࣈ΍αΠζ ը૾จࣈͰ͸ͳ͍ɺ ςΩετѻ͍ͷจࣈ͸ώϥΪϊ֯ΰ͔ώϥΪϊ໌ேͰ૊ΜͰ͓͖ɺ ʮͦΕҎ֎͸ը૾ѻ͍Ͱʯͱ͍͏ࢦࣔΛग़͢ɻ ·ͨɺଠࣈʢGPOUXFJHIUCPMEʣʹͯ͠΄͍͠Օॴ͸ ώϥΪϊ֯ΰ8Ͱ૊ΜͰ͓͘ɻ 

  23. จষྔ͕૿͑Δ͜ͱ΋૝ఆ͓ͯ͘͠ จࣈ΍αΠζ จষྔ͕૿͑ΔͱಡΈͮΒ͘ͳͬͨΓɺϨΠΞ΢τ่͕ΕΔ͜ͱ͕͋ΔͷͰ จষྔ͕มԽͦ͠͏ͳՕॴ͸ؾΛ͚ͭΔ͜ͱɻ  ӈਤ͸จষ͕ಡΈͮΒ͘ͳͬͨ

  24. ϦϯΫ

  25. ςΩετϦϯΫͷϚ΢εΦʔόʔࢦఆ ϦϯΫ ϖʔδ಺ͰͷςΩετϦϯΫ͸ϔομʔ΋ؚΊΔͱ݁ߏͳछྨ͕͋Δɻ ͦΕͧΕͷςΩετϦϯΫͷϚ΢εΦʔόʔ࣌ͷ৭มԽΛࢦఆ͓ͯ͜͠͏ɻ 

  26. ςΩετϦϯΫͷϚ΢εΦʔόʔࢦఆ ϦϯΫ ⁞৭มԽɹ ൒ಁ໌ɹ⁠มԽͳ͠ɹ⁡ΞϯμʔϥΠϯ͋Γɹ⁢എܠ৭͕൒ಁ໌ όϦΤʔγϣϯ͕ଟ͘ͳΔ࣌͸ࣄલʹڞ༗͢΂͖ɻʮΑ͠ͳʹʯͰࡁΉͳΒͦΕͰɻ  ⁞   ⁠ ⁡ ⁢

  27. ςΩετϦϯΫͷ๚໰ࡁΈελΠϧࢦఆ ϦϯΫ 8FCαʔϏε΍ϙʔλϧαΠτͳͲ͸๚໰ࡁΈϦϯΫͷࢦఆΛ͓ͯ͘͠ɻ ͨͩ͠φϏήʔγϣϯ෦෼·Ͱࢦఆ͢Δͱ٫ͬͯ෼͔Γʹ͘͘ͳΔͷͰ஫ҙɻ 

  28. ϘλϯͷϚ΢εΦʔόʔࢦఆ ϦϯΫ ը૾Ͱ΋DTTͰ΋ɺϘλϯͷϚ΢εΦʔόʔ͸ ৭มԽ͔ಁ໌౓มԽ͕ଟ͍ɻ࠷ۙ͸ܗঢ়มԽ΍Ө෇ͳͲ΋Α͘ݟ͔͚Δɻ ʮجຊ͸ͪΐͬͱ൒ಁ໌ɻࢦఆ͕͋Δ΋ͷ͸ࢦఆʹ߹Θͤͯʯ͘Β͍͕ϕλʔɻ  Ϙλϯ ೱ౓มԽ ৭มԽ ൒ಁ໌

    άϥσʔγϣϯ ؙ֯ Ө෇͖ Ξχϝʔγϣϯ
  29. ͦͷଞ ݫີʹݴ͏ͱʢσβΠϯϑΝΠϧͰ͸෼͔Βͳ͍෦෼ͷิ଍આ໌ʣͰ͸ͳ͘ ίʔσΟϯάϧʔϧͳͲͷ࿩Ͱ͕͢஫ҙࣄ߲ͱͯ͠௥هɻ

  30. QTEϑΝΠϧΛ੔ཧ͓ͯ͜͠͏ ͦͷଞ  ɾϨΠϠʔϑΥϧμʹ͸໊લΛ͚ͭͯɺ෼͔Γ΍͍͢ߏ଄ʹ͓ͯ͘͠ ɾ͍Βͳ͍ϨΠϠʔ͸࡟আ͓ͯ͘͠ ɾΠϥετϨʔλʔ͔Βίϐϖ͖ͯͨ͠ϕΫτϧεϚʔτΦϒδΣΫτ͸ ɹQTE಺ʹຒΊࠐΜͰ͓͘ ɾը૾ΛಁաͰॻ͖ग़͞ͳ͍ͱ͍͚ͳ͍΋ͷ͸ɺ ɹ৐ࢉͳͲͷϨΠϠʔޮՌ͸Ճ͑ͳ͍ʢ൒ಁ໌͸0,ʣ

  31. εϚϗͷը໘Λԣ޲͖ʹͨ࣌͠ͷରԠ ͦͷଞ ֬ೝ؀ڥͱͯ͠J04΍"OESPJEͷόʔδϣϯࢦఆ͸Α͋͘Δ͕ɺ ը໘Λԣ޲͖ʹͨ࣌͠ͷࢦࣔ͸ͳ͍͜ͱ͕ଟ͍ɻཁ๬͕͋ΔͳΒࣄલʹڞ༗Λɻ  ॎ޲͖ͷݟӫ͕͑ ͦͷ··֦େ͞Εͨ΋ͷ ཁૉͷαΠζ͸ಉ͡Ͱ ը໘෯͕޿͕Δ΋ͷ

  32. ͓ΘΓ ࡉ͔͘ݴ͏ͱ·ͩ·ͩ͋Γͦ͏͚ͩͲɺ͜ͷ͋ͨΓΛϑΥϩʔ͓͚ͯ͠͹ ίʔσΟϯά͢Δํ΋΍Γ΍͍͔͢ͱɻ ࡉ͔͘೺Ѳ͢Δͷ͸େมͱ͍͏ํ͸ ʮQTE಺ͷࡉ͔͍ζϨ͸ແࢹͯ͠IUNMDTTͷ૊Έ΍͢͞༏ઌͰʂʯ ͘Β͍Ͱ΋ྑͦ͞͏ɻ ʮΑ͠ͳʹʯͰ͢Ήؔ܎ੑͰͳ͚Ε͹ɺԿ΋ڞ༗͠ͳ͍ͷ͚ͩ͸ආ͚Δ΂͖ɻ

  33. ڞஶͰࣥචͨ͠ ʮ͍ͪ͹ΜΑ͘Θ͔Δ8FCσβΠϯͷجຊ͖ͪΜͱೖ໳ʯ޷ධൃചதʂ ,JOEMF൛΋͋ΔΑʂ IUUQTXXXBNB[PODPKQ8FC%FTJHOEQ એ఻