Edited at

【2018年】 今でも現役!スタイルガイドジェネレータ3選

@shwldさんのスタイルガイドジェネレータを比べてみた という記事を読んで非常に良い!わかりやすい!とおもったのですが、古くなってしまっていたため、自分でまとめ直しました。


スタイルガイドジェネレータとは?


スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。

引用元 : Webデザインのスタイルガイドの作り方


今回でいうスタイルガイドは、HTML / CSSのルール・規約を集めたものを指します。

スタイルガイドジェネレータはそのスタイルガイドを生成するツールのことを指します。

bootstrapやbulma.ioのドキュメントのようなものを、自分の書いたHTML / CSSで作ることができます。

以下は一例ですが、このようにプレビューやHTMLのコードが書いてあるものが多いです。(スタイルガイドジェネレータはfrontnoteを使っています。)

スタイルガイドの例


スタイルガイド導入のメリット・デメリット

どのような場面でスタイルガイドを導入するのが最適なのか、わからない人のためにざっくりですが、メリットとデメリットを書いておきます。


メリット


  • 共通認識をもって制作を進めることができる。

  • コードの統一化がしやすい。

  • CSSが苦手な人も、HTMLをコピーしてスタイルを当てることができる。


デメリット


  • イレギュラーな改修が多い場合でも、スタイルガイドの制約に縛られてしまう。

  • スタイルガイドジェネレータのバージョン非対応などの問題が発生する可能性がある。

つまり、大規模なWebサイト複数人で作成するときに、スタイルガイドが大活躍します!


スタイルガイドジェネレータの選び方

スタイルガイドジェネレータを調べた際に、10個以上のスタイルガイドジェネレータを見つけましたが、冒頭でも述べた通り古くなってしまっているものが多いです。

そのようなスタイルガイドは、Node.jsなどのバージョン違いによって使えなかったりするかもしれないため、最終更新日をしっかり確認して導入しましょう。


オススメのスタイルガイドジェネレータ

私は以下の点を条件にスタイルガイドを見ていきました。


  • GitHubのスター数 1000以上

  • 更新が一年以内

条件を満たしていた、fractalsc5-styleguidekss-nodeに関してまとめていきます。

名前
github スター数
最終更新日
sass(less)
書き方

Fractal
★1412
1ヶ月以内

別ファイル

sc5-styleguide
★1243
4ヶ月前

コメントアウト

kss-node
★1397
2ヶ月前

コメントアウト


fractal

fractalのデモ

(引用元 : http://fractal.clearleft.com/)


特徴


  • 別ファイルにスタイルガイドで用いるhtml等を書く

  • 主なテンプレートエンジンはHandlebars

  • componentとdocumentに分類されており、構造がわかりやすい

  • スタイルガイドを導入する際に、他のスタイルガイドに比べて工数がかかる

  • configでかなり融通を利かせることができる


わかりやすい記事


sc5-styleguide

sc5-styleguideのデモ

(引用元 : http://demo.styleguide.sc5.io/)


特徴


  • スタイルにコメントアウトを書いて書き出せる

  • コメントアウトのルールが厳しく、エラーがでがち

  • navが上部にある(珍しい気がする)

  • スタイルを検索できる


わかりやすい記事


kss-node

kss-nodeのデモ

(引用元 : http://kss-node.github.io/kss-node/)


特徴


  • スタイルにコメントアウトを書いて書き出せる

  • コメントアウトのルールが厳しく、エラーがでがち

  • テーマが充実している


わかりやすい記事


以上、スタイルガイドジェネレータ3選でした!

sc5-styleguideがKSS準拠なので、sc5-styleguideとkss-nodeは大きくは変わりませんが、私は検索バーが欲しいが故にsc5-styleguideを導入しました!

Fractalは今後もどんどんアップデートしていく予感がしますね!

まだ私も知らないスタイルガイドがあるかもしれませんので、コメント等で教えていただけたら幸いです。

ご精読ありがとうございました!