What is a Style Guide?

ウェブにはもともと従来のメディアよりも“早い”開発が可能であるという特性があります。その特性はこの数年で飛躍的な進化を遂げてきています。よりよいプロダクトを作る上で必須なイテレーションの土台となるのがスタイルガイドというワークフローではないでしょうか？

今回は自信を持ってイテレーションを回すために知っておきたいスタイルガイドについて紹介します。

Transcript

1. - 2012.11.10 / Yuya Saito - What is Style guide? υΩϡϝϯςʔγϣϯ ίʔσΟϯάͷ඼࣭Λอͭ ελΠϧΨΠυ ͷ࡞Γํ
2. L CSSRadar Yuya Saito
3. (Ex) Web Designer Front-END Developer I am @ CyberAgent
4. -Agenda- What is Style Guide? 1. Benefits of 2.Style Guide Creating Style Guide 3.
5. ?
6. New Guys Come 2 Launch Site 1 Broken Site 3
7. YOU Are! ! New Guys ⚠
8. ελΠϧΨΠυ͸ ͦΜͳࠞཚΛ ܰݮ͢Δ υΩϡϝϯτ
9. What is Style Guide? 1.
10. Identity Guide
11. www.gov.uk/designprinciples
12. Comprehensive GuideLine
13. www.bbc.co.uk/gel/
14. Coding Standard
15. github.com/rwldrn/idiomatic.js
16. github.com/necolas/idiomatic-css
17. Style Guide? So What is ໨త͸ ڞ௨ݴޠΛ ੜΈग़͢͜ͱ u
18. ڞ௨ݴޠ ≊ ίϛϡχέʔγϣϯ
19. Documentation isBoring So Make it Fun!
20. Benefits of 2.Style Guide
21. αΠτશମͰ ར༻͍ͯ͠Δ શͯͷ ίϯϙʔωϯτ ΛϖʔδͰ දࣔ͢Δ υΩϡϝϯτ
22. DEVELOPING/DESIGN Documentation 8F
23. 3 DEVELOPING/DESIGN Documentation 8F
24. Live & Automatic Live Automatic
25. No Documentation!? Wrong Documentation!?
26. Live & Automatic can solve them Say No More
27. kStyle Guide Makes CSS Testable
28. FFFFFFFFF FFFFFFFF X FStyle Guide is One Page Documentation
29. CSS CascadeS
30. rStyle Guide Helps develop with OOCSS
31. OOCSS?
32. github.com/stubbornella/oocss
33. smacss.com
34. blog.millermedeiros.com/solid-css/
35. OOCSS: ମܥཱͬͨ਺গͳ͍ $44։ൃ΁ͷΞϓϩʔν
36. X X X
37. Ͳ͏΍ͬͯϕʔεΦϒδΣΫτΛ ઃܭ͢Δͷ͔ʁ ?
38. Ernest Hemingway Said: The first draft of anything is shit. ղܾ ͱʹ͔͘࡞ͬͯ͠·͏
39. RefactorAble Make CSS
40. LStyle Guide Creates Shared Vocabulary
41. ίϛϡχέʔγϣϯͱ͸ ͓ޓ͍ͷڞ௨ೝࣝΛ ݶΓͳ͘ଟ͘࡞Δ͜ͱ υΩϡϝϯςʔγϣϯ͸ ͦͷڞ௨ೝࣝΛ ੜΈग़ͨ͢Ίͷπʔϧ
42. DStyle Guide Forces Writing Comments
43. © 2012, O'Reilly Media, Inc. Write Good Comment
44. ࣗಈͰ ͦͷίϝϯτ͔Β ελΠϧΨΠυ͸ )5.-Λੜ੒
45. Examples
46. github.com/styleguide
47. www.starbucks.com/static/reference/styleguide/
48. flic.kr/p/9v2Pgx
49. Not Just Examples Read the Code
50. Creating Style Guide 3.
51. BY Jacob Rask StyleDocco  github.com/jacobrask/styledocco
52. BY Kyle Neath KSS  github.com/kneath/kss
53. StyleDocco CUI
54. Install StyleDocco
55. sudo npm install -fg styledocco
56. styledocco <Φϓγϣϯ>
    <ελΠϧγʔτσΟϨΫτϦ> Usage:
57. styledocco assets/style
58. http://d.pr/cV2N
61. github.com/studiomohawk/demo-styleguide
62. /* # ϒϩοΫ໊
    ͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ
    
    ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ
    
    ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ هड़͠·͢ɻ
    
    ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
63. /* # ϒϩοΫ໊
    ͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ
    
    ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ
    
    ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ هड़͠·͢ɻ
    
    ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
64. /* # ϒϩοΫ໊
    ͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ
    
    ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ
    
    ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ هड़͠·͢ɻ
    
    ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
65. /* # ϒϩοΫ໊
    ͜͜ʹϘλϯɺφϏήʔγϣϯͳͲελΠϧ͕ԿΛ͍ͯ͠Δ͔Λ ؆ܿʹઆ໌͍ͯͩ͘͠͞ɻ Ұߦۭ͚ͯɺͪ͜Β͸ϒϩοΫͷઆ໌จͰ͢ɻ
    
    ελΠϧཁૉͷ໾ׂ΍ৼΔ෣͍Λઆ໌͢Δ৔ॴͰ͢ɻ
    
    ͕͜͜࢓༷ॻʹ͋ͨΔ෦෼ʹͳΓ·͢ɻ ίϝϯτϒϩοΫ಺͸NBSLEPXOͱ͍͏ܗࣜͰهड़͠·͢ɻ ``` ྫࣔ͞ΕΔ)5.-͸͜ͷόοΫςΟοΫΛճ܁Γฦͨ͠ϒϩοΫ಺ʹ هड़͠·͢ɻ
    
    ٙࣅཁૉΛදࣔ͢Δ৔߹͸Ϋϥε໊ͱͯ͠AIPWFSAɺABDUJWFAͳͲίϩϯΛ ؚΊͯهड़͍ͯͩ͘͠͞ɻ ``` */
66. /* # 
    Ϙλϯ 
    Ϙλϯ͸ͳΔ΂͘େ͖͘ɺΫϦοΫͰ͖Δͱ෼͔ΔΑ͏ʹ͢Δ͜ͱ 
    ABAɺACVUUPOAɺAJOQVU<UZQFCVUUPO>Aɺ
    
    
    ·ͨ͸AJOQVU<UZQFTVCNJU>A͸ಉ͡ελΠϧʹ͢Δ͜ͱ 
    AIPWFSAɺABDUJWFA GPSNλάܥʹ͸AIPWFSAɺABDUJWFAΫϥεΛ
    
    
    
    ෇༩͢Δ ʹ͸ ඞͣ ঢ়ଶʹ߹ΘͤͨελΠϦϯάΛߦ͏͜ͱ 
    AEJTBCMFEAɺ·ͨ͸AEJTBCMFEA΋ಉ༷ʹঢ়ଶʹ߹ΘͤͨελΠϧΛ
    
    
    
    ߦ͏͜ͱ ``` <a href="#" class="btn btn-fluid">Ϙλϯ (a.btn.btn-fluid)</a> ``` */
67. www.a-blogcms.jp
68. Tips and Tricks
69. Sass SCSS Less Stylus ΋ར༻Մೳ
70. Readme.md Index.html ͕͋Δ৔߹ʹ͸ Λੜ੒͢Δ
71. εϖʔεΛೖΕΔͱ ίϝϯτͷલʹ υΩϡϝϯτʹ ൓ө͠ͳ͍
72. :hover :focus දࣔͰ͖Δ ͳͲͷٙࣅΫϥε΋
73. styleGuide? What To
74. Not every CSS rule should be documented. You should document a rule declaration when the rule can accurately describe a visual UI element in the styleguide. Each element should have one documentation block describing that particular UI element's various states. - Kyle Neath
75. Buttons Navigations Forms Tabs Typography Etc.
76. ʹ͋ΔΑ͏ͳ6*ཁૉ͢΂ͯ Basically: Twitter Bootstrap Zurb Foundation
77. Conclusion...
78. ࣮ࡍͷαΠτͱڞ௨ͷ $44ͷίϝϯτ͔Β ࣗಈͰυΩϡϝϯτΛੜ੒ Style Guide:
79.  ߋ৽͞Εͳ͍υΩϡϝϯτΛࠜઈ͠  ΧεέʔυͷεύήοςΟΛςελϒϧͰ ݎ࿚ͳ؀ڥʹมԽͤ͞  ΦϒδΣΫτࢦ޲ͳ$44Λهड़͢Δ खॿ͚Λ͠  ΢ΣϒαΠτͷϧοΫϑΟʔϧΛ ౷Ұ͢Δ
80. Style Guide IS Not Just A Tool. it is a Workflow.
81. Design a system, not a web page or site. - Andy Clarke
82. THank you! L CSSRadar