Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

@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は今後もどんどんアップデートしていく予感がしますね!

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

cheez921
フロントエンドエンジニアになりたい新卒2年生
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away