Sacss マークアップは下準備が80%

SaCSS登壇資料
https://sacss.net/special21/

Transcript

1. ϚʔΫΞοϓ͸
   Լ४උ͕ˋ ίʔσ Οϯάઐ໳ϓϩμΫγϣϯ
   '-"5
   ατ΢ϋϧϛ !
   ָΛ͢ΔͱΫΦϦςΟ্͕͕Δ
   
2. 自己紹介 " גࣜձࣾ'-"5
   ϚʔΫΞοϓ͸
 Լ४උ͕
3. ϓϩϑΟʔϧ ατ΢ϋϧϛ
   
   גࣜձࣾ'-"5
   ୅දऔక໾
   ϚʔΫΞοϓΤϯδχΞ
   ೥
   ઐ໳ֶߍ
   XFCඇৗۈߨࢣ
   ೥
   -*,&ɿࣂ͍ݘεύϯ
   ߦಈࢦ਑ɿ ΤϯδχΞϥΠϑΛͨͷ͠Ή
4. ίʔσΟϯάઐ໳
   '-"5 "#
   $!! ϑϩϯτΤϯυશൠ ελοϑ໊ ίʔσΟϯάʹಛԽͨ͠डୗ੍࡞ձࣾ
5. ݸਓϫʔΫɿΠϕϯτొஃ ϚʔΫΞοϓʢ)5.-$44ʣ
 ೥
   $44
   /JUFొஃ
   ਓ
   ೥
   ϚʔΫΞοϓܥΠϕϯτਓ
   ೥
   ๺ւಓΠϕϯτ
   ਓ 8FCܥͷΠϕϯτ
   ొஃ಺༰
 ɾ)5.-
   $44
   ॳڃʙ্ڃ
 ɾ࣮ફతͳۀ຿Ͱ࢖͑ΔϚʔΫΞοϓ
   ɾडୗ੍࡞ͷٕज़τϨϯυ
 ɾतۀͰ)5.-ΛֶͿֶੜ
   ɾ)5.-ͷجຊΛֶΜͩޙͷಠֶͷίπ
   ٕज़ऀ޲͚ొஃ💻 ࣮ઓతͳ)5.-ɾ$44ͷઐ໳Ո
6. ݸਓϫʔΫɿઐ໳ֶߍͷඇৗۈߨࢣ ܂୔σβΠϯݚڀॴ
   ݱ໾ͷΫϦΤΠλʔ
   
   ੍࡞τϨϯυΛऔΓೖΕͨतۀ
   σβΠφʔ͞ΜʹϚʔΫΞοϓΛڭ͑ͯ·͢ اۀͱ߹ಉतۀ ΦϦδφϧ໰୊
   8FCΛमਖ਼ͤΑ ઐ໳ֶߍͷඇৗۈߨࢣ
   ೥໨
7. なぜ Լ४උ͕ॏཁ͔
   🙌 גࣜձࣾ'-"5
   ϚʔΫΞοϓ͸
 Լ४උ͕
8. खൈ͖ʹͳΒͳ͍ʁ ࣌ؒΛ͔͚Δͱ
 ྑ͍΋ͷ͕Ͱ͖Δʁ 🤔 Լ४උͰָΛ͢Δͱ
   ΫΦϦςΟ্͕͕Δ
9. ௐཧ ఏڙ ϑΝϛϦʔϨετϥϯͷ৔߹ ࢓ࠐΈ Լ४උΛࡁ·͓ͤͯ͘
10. Լ४උͰϕʔε࡞ۀΛݮΒ͢ ࢓্͛ ެ։ ϕʔε ϚʔΫΞοϓͷ৔߹
11. खଧ͕͍͍ͪͷ͸
    ʮڶഴʯͱʮ͏ͲΜʯ͚ͩ͆
12. ҆ఆ඼࣭ εϐʔυ 61 ίετ
    μ΢ϯ खؒΛ
    ݮΒ͢ νϟϨϯδ ೰·ͳ͍ 作業を効率化して悩まない ＝クオリティに時間を使える
13. 下準備1 खॻ͖ίʔσΟϯά📝 גࣜձࣾ'-"5
    ϚʔΫΞοϓ͸
 Լ४උ͕
14. デザインだけを設計として コードを書いていた Լ४උφγࢠ /0ʂ )
15. 手書きコーディングで 設計と手順を見える化 Լ४උΞϦࢠ 0,̇ *
16. 視覚認知を 利用する Point!
17. ྫɿөըͷֆίϯς
    ຐঁͷ୐ٸศ
    ελδΦδϒϦֆίϯςશू
    c
    ٶ࡚
    ॣ
    cຊ
    c
    ௨ൢ
    c
    "NB[PO
    IUUQTXXXBNB[PODPKQEQ ʮΞχϝࢦࣔʯʮԻʯʮॱ൪ʯʮεϐʔυʯ
18. ྫɿ$.
    ֆίϯς Ӭԕͷ$.मߦૐɺதౡ৴໵ͷֆίϯςू
     ʛΞʔτʛ&YDJUF
    JTN Τ ΩαΠτΠζϜ
    IUUQJTNFYDJUFDPKQBSUSJE@0SJHJOBM@ ʮඵ਺ʯʮηϦϑʯʮίϚׂΓʯʮঢ়گઆ໌ʯ
19. ͲΜͳ͜ͱΛॻ͘ʁ දࣔ਺+BWB4DSJQUΞχϝʔγϣϯ"1*ʹίʔυଆͰܾΊΔ͜ͱ
 ֬ೝ఺͋ͱͰਐߦ͢Δͱ͜ΖʹϝϞ
    ૊Ή͚ͩʗΑ͠ͳʹਐߦʗ֬ೝ఺
    ༏ઌ౓ʗ෼୲ʗ೉қ౓
    σβΠϯʗ࢓༷Ͱܾ·͍ͬͯͳ͍࣮૷಺༰Λݟ͑ΔԽ
    GPOUTJ[FɺNBSHJOɺQBEEJOHɺXJEUIɺIFJHIUɺMJOFIFJHIU ࡞ۀલʹݟ͑ΔԽ͓ͯ͘͠
20. ࣮ࡍͷखॻ͖ίʔσΟϯά ࡞ۀલʹݟ͑ΔԽ͓ͯ͘͠
21. 📍
    ༏ઌ౓ͱ೉қ౓Λચ͍ग़͢
    📍
    σβΠϯπʔϧͱͷԟ෮ΛݮΒ͢
    📍
    ݟ͑ΔԽͯ͠੔ཧ͢Δ 3つのメリット
22. 下準備2 ετοΫ͢Δ📎 גࣜձࣾ'-"5
    ϚʔΫΞοϓ͸
 Լ४උ͕
23. イチからコードを 書いていた Լ४උφγࢠ - /0ʂ
24. 50%ほどは 過去のストックコード Լ४උΞϦࢠ . 0,̇
25. 自分の 型を決める Point!
26. ͓͢͢ΊϑϨʔϜϫʔΫ .646#JJʢϜεϏʔʣ IUUQTHFUCPPUTUSBQDPN IUUQTCVMNBJP IUUQTRSBDHJUIVCJPNVTVCJJ IUUQTHFUCBTJTHJUIVCJP #6-."ʢϒϧϚʣ #PPUTUSBQ #BTJTʢϕʔγεʣ ࢀߟʹͯࣗ͠෼༻ʹΞϨϯδ
27. ࣗ࡞ϑϨʔϜϫʔΫ )5.-$44ɺNJYJO
 ϞδϡʔϧʹΧʔυɺҰཡ
    ೖྗܥʹ'03.ɺ8:4*8:(
    ϖʔδʹ'"2ɺϓϥΠόγʔϙϦγʔɺ
    ػೳ
    "1*ʹ(PPHMFϚοϓɺ:PV5VCFɺ'BDFCPPL
    ຒΊࠐΈ
 4/4Ϙλϯɺ*OTUBHSBNϑΟʔυ
 $.4ʹ8PSE1SFTTɺ.PWBCMF5ZQF
    ৚݅෼ذɺλά IUUQTqBUTBUPHJUIVCJPUFNQIUNM TQBOϩΰ </S> ࣗ෼ͷϑϨʔϜϫʔΫΛ࡞Ζ͏
28. 📍
    ίϐϖͰѹ౗తͳ࣌ؒ୹ॖ
 📍
    ಉ͜͡ͱͰճ೰·ͳ͘ͳΔ
    📍
    ࣗ෼ͷϫʔΫϑϩʔΛ੔ཧͰ͖Δ 3つのメリット
29. 下準備3 ಁ͔͢🔍 גࣜձࣾ'-"5
    ϚʔΫΞοϓ͸
 Լ४උ͕
30. /0ʂ 0 デザインカンプを 並べて目視チェック Լ४උφγࢠ
31. 1 0,̇ 透かしコーディングで チェックも同時に済ます Լ४උΞϦࢠ
32. モジュール 単位で進行 Point!
33. ಁ͔͠ίʔσΟϯά DPOUBJOFS σβΠϯΧϯϓΛॏͶͯίʔσ Οϯά
34. 🤔 💡操作デモ
35. 📍
    ψέϞϨɺNBSHJOɺGPOUTJ[F
 📍
    ؒҧ͍୳ָ͕͠ʹͰ͖Δ
    📍
    νΣοΫ࣌ؒ
    େ෯୹ॖ 3つのメリット
36. 下準備4 νΣοΫϦετΛ࡞Δ✅ גࣜձࣾ'-"5
    ϚʔΫΞοϓ͸
 Լ४උ͕
37. /0ʂ ヌケモレ多し 時間も足りない Լ४උφγࢠ 4
38. 0,̇ チェック項目を 意識しながら制作 ヌケモレ減った Լ४උΞϦࢠ 5
39. 段階ごとに チェックする Point!
40. 8)Ͱ੔ཧ͢Δ 8IPʢ୭͕ʣ
    ୲౰ऀ
    8IBUʢԿΛʣ
    )PXʢͲͷΑ͏ʹʣ಺༰Λॻ͘
    8IFOʢ͍ͭʣ
    క੾೔
    
    ஈ֊ʢ४උʗ։࢝ʗςετΞοϓʗຊ൪ެ։ʣ
    8IFSFʢͲ͜Ͱʣ63-ɾΩϟϓνϟ ϫʔΫϑϩʔʹ͋ͬͨνΣοΫϦετ
41. ΧςΰϦ෼ྨ͢Δ ɾϓϩδΣΫτશମ
    ɾαʔόʔ
 ɾ$.4ʗγεςϜ
 ɾσβΠϯɾϞʔγϣϯ
 ɾίʔσΟϯάઃܭ
    ɾૉࡐ؅ཧ
    ɾ4/4
 ɾӡ༻ ΧςΰϦผʹνΣοΫϦετΛ࡞Δ ߲໨ΛΧςΰϦ෼ྨ͢Δ
42. 📍
    ψέϞϨɺNBSHJOɺGPOUTJ[F
 📍
    ඼࣭ͷόϥπΩ͕ͳ͘ͳΔ
    📍
    νΣοΫ࣌ͷ߲໨ΛݮΒͤΔ 3つのメリット
43. ࣗ෼ͷϫʔΫϑϩʔΛ࡞͓ͬͯ͘
    ָͯ͠
    ΫΦϦςΟʹ࣌ؒΛ࢖͏ ·ͱΊ ϑϨʔϜϫʔΫ νΣοΫϦετ ಁ͔͠
    ίʔσΟϯά खॻ͖
    ίʔσΟϯά
44. 😀5IBOLT ʮ
    ָΛ͢ΔͱΫΦϦςΟ্͕͕Δ
     ɹϚʔΫΞοϓ͸Լ४උ͕ˋʯ
    ίʔσ Οϯάઐ໳ϓϩμΫγϣϯ
    '-"5
    ατ΢ϋϧϛ