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

Grow up your sense.

Grow up your sense.

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

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

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

Tweet

More Decks by Takenori Okashita (GOUTEN)

Other Decks in Design

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