Grow up your sense.

2018年4月3日に開催されたWebデザイン・Web制作に関する勉強会 #0 で発表させていただいたときのスライドです。
https://kfug.connpass.com/event/81301/
言葉足らずのところがあった上に30分くらいダラダラ喋りましたが、ご容赦くださいませ。

実は2年前くらいに同じようなことをブログに書いてたんだけど、そのことをすっかり忘れてました。
つまり軸はぶれてなかったようです（いいように言った）。

もうすぐ参加登録始まるので、みんなこっちにも来てね！
https://2018.osaka.wordcamp.org/

Transcript

1. (SPX
   ZPVS
   8FCσβΠϯɾ8FC੍࡞ʹؔ͢Δษڧձ
   5BLFOPSJ0LBTIJUB (065&/
   
   VQ
   TFOTF
   

   View Slide

2. Takenori Okashita
   a.k.a. GOUTEN
   @gouten5010
   ϑϩϯτΤϯυΤϯδχΞʗ8FCσβΠφʔ
   ΫοΫϏζגࣜձࣾ
   8PSE#FODIେࡕϞσϨʔλʔ
   8PSE$BNQ0TBLB࣮ߦҕһ௕
   $44ϑϨϯζӡӦ
   

   View Slide

3. ϓϩτλΠϓ6*ͷ࡞੒ɻ4LFUDI࣋ͬͯͳ͍ɻ
   9%WT4LFUDIͷफڭઓ૪ʹ͸ڵຯͳ͍ɻ
   ΞΠίϯ౳ͷϕΫλʔσʔλͷ࡞੒ɻ͍͍ͩͨ47(࡞੒Ͱ࢖͏ɻ
   ϕδΣۂઢͱ͸༑ୡʹͳΕͦ͏ʹͳ͍ɻ
   ؆୯ͳը૾Ճ޻ͱิਖ਼ʹར༻͢Δɻ
   ࡶίϥ͔ΒΞϦόΠ޻࡞·Ͱ෯޿͘࢖͍ͬͯΔɻ
   

   View Slide

4. 8FCͷ௚લͷσβΠϯͷ࿩
   

   View Slide

5. ηϯε͸ҭͯΔ͜ͱ͕Ͱ͖Δ
   ˞࣋࿦Ͱ͢ɻ
   

   View Slide

6. ྑ͠ѱ͠Λ൑அ͢Δ
   എܠ͸ͳΜͩΖ͏ʁ
   

   View Slide

7. ࣗ෼ͷ޷͖ݏ͍ɹɹٙ໰ɹɹ޷ح৺ɹɹՈఉ؀ڥɹɹτϥ΢Ϛɹɹग़਎஍ͷ෩౔
   ֶੜ࣌୅ͷަ༑ؔ܎ɹɹ࢓ࣄͰܨ͕Δަ༑ؔ܎ɹɹଞͷਓͷ࡞඼
   ϝσΟΞʢςϨϏɾ৽ฉɾࡶࢽɾԻָʣɹ࣌୅ɾੈ࿦ɾྲྀߦ
   ྺ࢙ɾ఻౷ɹɹલੈͷهԱɹɹFUDʜ
   ޙఱੑཁҼ ઌఱੑཁҼ ൒ઌఱੑཁҼ
   ྑ͠ѱ͠Λ൑அ͢Δഎܠʢྫʣ
   

   View Slide

8. ޙఱੑཁҼɹ㲈ɹӨڹΛड͚ͨ΋ͷ
   

   View Slide

9. ࣗ෼͕ײ͡Δʮྑ͠ѱ͠ʯ͸
   ɹɹɹɹɹͷ্Ͱ੒Γཱ͍ͬͯΔ
   ʮӨڹʯ
   ʜͷͰ͸ͳ͍͔ɻ
   

   View Slide

10. 8FC͓͚Δʮྑ͍σβΠϯʯΛ
    ࡞ΔͨΊͷɺӨڹͷड͚͔ͨ
    

    View Slide

11. 8FCͰ໨Λཆ͏
    

    View Slide

12. 4UFQ 8FCσβΠϯͷΪϟϥϦʔαΠτΛݟͯɺࣗ෼͕޷ΉαΠτΛෳ਺ݟ͚ͭΔ
    

    View Slide

13. 4UFQ ෳ਺ͷʮྑ͍ʯͱࢥ͏8FCσβΠϯͷڞ௨߲Λݟ͚ͭΔ
    ίϯςϯπ෯ʗ഑৭ʗઢͷଠ͞ʗ༨നʗΧʔχϯάFUDʜ
    ͍͍ͩͨҰॹ
    ւ֎αΠτͱ೔ຊαΠτͰ΋
    ڞ௨߲͸͙͢ݟ͔ͭΔ
    

    View Slide

14. 4UFQ ετϨεͷͳ͍ΞΫγϣϯΛ୳Δ
    λονͷಈ࡞΍
    Ϛ΢εͷಈ͖
    ࢹઢͷಈ͖
    ετϨεΛײ͡
    ͤ͞ͳ͍޻෉
    

    View Slide

15. &YUSB .BUFSJBMNPUJPO
    IUUQTNBUFSJBMJPHVJEFMJOFTNPUJPONBUFSJBMNPUJPOIUNM
    

    View Slide

16. ख਺Λ૿΍͢
    

    View Slide

17. 1BUUFSO ໛฿ͯ͠ɺ૊Έ߹ΘͤΔ
    ໛฿͢Δ جૅΛຏ͘ʗࣗ෼ͷதʹͳ͍ख๏Λձಘ͢Δʗ
    طʹ͋ΔσβΠϯͷߏ੒೺Ѳʗ
    Կ͕ૉ੖Β͍͠ͷ͔ʹؾͮ͘
    ؍࡯ྗΛ਎ʹ͚ͭΔ
    

    View Slide

18. 1BUUFSO
    ʮ͜Μͳײ͡ͷαΠτͳΒͰ͖Δ͔΋ʯ
    ͱࢥ͑ΔΑ͏ʹͳΕ͹࣍ͷεςοϓ΁
    ໛฿ͯ͠ɺ૊Έ߹ΘͤΔ
    

    View Slide

19. 1BUUFSO ໛฿ͯ͠ɺ૊Έ߹ΘͤΔ
    ૊Έ߹ΘͤΔ ՄೳੑΛݟ͚ͭΔʗνϟϨϯδ͢Δ
    ׆൛ҹ࡮ ϑΥʔυੜ࢈ํࣜ ΰοϗ
    

    View Slide

20. 1BUUFSO ϞϊΫϩʹͯ͠ΈΔ
    ʮೝࣝͰ͖Δʯ͸ɺ͘͢͝େࣄɻ
    #-6&#"$,(306/%
    03"/(&#"$,(306/%
    #-6&#"$,(306/%
    03"/(&#"$,(306/%
    

    View Slide

21. 1BUUFSO ϞϊΫϩʹͯ͠ΈΔ
    ʮೝࣝͰ͖Δʯ͸ɺ͘͢͝େࣄɻ
    

    View Slide

22. 8FCͷ֎Ͱࢥߟ͢Δ
    

    View Slide

23. )JOU 8FCͷ֎Ͱݟ͚ͭΔɺ8FCσβΠϯͷώϯτ
    ॻ੶ɾࡶࢽɾ৽ฉ
    ϙελʔ
    ిंͷ௻Γ޿ࠂ
    ঎඼ϓϩμΫτ
    Ϩδ·Ͱͷ༠ಋߏ଄
    γϣοϐϯάϞʔϧͷҊ಺Ϟχλʔ
    ίϯςϯπͷσβΠϯ΍Χʔχϯά౳
    Χʔτʹ͓͚Δಈઢͱ௥Ճߪೖ
    αΠτϚοϓɾϝχϡʔߏ଄
    

    View Slide

24. 2VFTUJPO
    ݟग़͠λά͸ͲΕͰ͠ΐ͏
    

    View Slide

25. จॻߏ଄͕ࢹ֮తͳڧௐʹ
    Өڹ͠ͳ͍8FCαΠτྫ
    "OTXFS
    I
    TQBO
    TUSPOH
    

    View Slide

26. ࡶࢽͷྫ
    

    View Slide

27. ϙελʔͷྫ
    

    View Slide

28. ✕4&0ͷͨΊͷσβΠϯ
    ̋๚໰ऀͷͨΊͷσβΠϯ
    8PSE$BNQ0TBLB
    ೥݄೔ɾ೔
    ؔ੢େֶകాΩϟϯύε,"/%"*.F3*4&
    ೔໨ҰൠࢀՃԁ೔໨࠙਌ձԁ೔໨ແྉ
    IUUQTPTBLBXPSEDBNQPSH
    ੈքதͷαΠτͷ͕͜ΕͰߏங͞Εͯ
    ͍ΔͱݴΘΕΔ$.4
    8PSE1SFTTͷΧϯϑΝϨϯεΛ
    େࡕͰ։࠵͠·͢ʂ
    2VFTUJPO
    Ͳ͜ʹݟग़͠λάΛ͚ͭ·͔͢ʁ
    

    View Slide

29. ✕4&0ͷͨΊͷσβΠϯ
    ̋๚໰ऀͷͨΊͷσβΠϯ
    8PSE$BNQ0TBLB
    ೥݄೔ɾ೔
    ؔ੢େֶകాΩϟϯύε,"/%"*.F3*4&
    ೔໨ҰൠࢀՃԁ೔໨࠙਌ձԁ೔໨ແྉ
    IUUQTPTBLBXPSEDBNQPSH
    ੈքதͷαΠτͷ͕͜ΕͰߏங͞Εͯ
    ͍ΔͱݴΘΕΔ$.4
    8PSE1SFTTͷΧϯϑΝϨϯεΛ
    େࡕͰ։࠵͠·͢ʂ
    I
    ॏཁͳཁૉ
    "OTXFS
    

    View Slide

30. ֎͔Β΋Α͍ɹɹɹɹɹΛड͚·͠ΐ͏
    ʮӨڹʯ
    

    View Slide

31. ηϯε͸ҭͯΔ͜ͱ͕Ͱ͖Δ
    ʜͱ৴ͯ͡Δɻ
    

    View Slide

32. ΈΜͳͰࢼߦࡨޡͯ͠
    Α͍8FCσβΠϯϥΠϑΛʂ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide

33. 8PSE$BNQ0TBLB
    ೥݄೔ɾ೔
    ؔ੢େֶകాΩϟϯύε,"/%"*.F3*4&
    ೔໨ҰൠࢀՃԁ೔໨࠙਌ձԁ೔໨ແྉ
    IUUQTPTBLBXPSEDBNQPSH
    ੈքதͷαΠτͷ͕͜ΕͰߏங͞Εͯ
    ͍ΔͱݴΘΕΔ$.4
    8PSE1SFTTͷΧϯϑΝϨϯεΛ
    େࡕͰ։࠵͠·͢ʂ
    དྷͯͶʂ
    

    View Slide