Cntlog > スキルアップ・ノウハウ > コーディング > 【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました

【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました

これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。

乗り換えた理由

以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。
理由は単純で、Frontnoteだと導入が楽だったからです。
スタイルガイドジェネレーターを探していた当時aigisを導入してみたのですが、私は上手くできなかったので泣く泣く諦めて,Frontnoteを使うことにしました。

Frontnoteは今でも使いやすいスタイルガイドジェネレーターだと思うのですが、カスタマイズが私にとってはしにくくて自分の作りたい形での出力ができなかったので、使ってるうちに自分の要望が増えてきてしまったので、この度aigisに乗り換えました。

現在もaigisはバージョンアップが進められており、導入もしやすくなったと聞いたのも乗り換えのきっかけです。
サンプルとかもちゃんと用意されています。嬉しい事に日本語版のドキュメントもあります。

aigisの良いところ

aigisを導入してみて良かったと思うところはjadeが使えるところです。
jadeで書くとこんな感じでかけるので、cssのclassがコピペしやすくてドキュメントを書く負担が減るところです。
```jade
.c-btn
      a ボタンの名称だよ
```

※こんな感じに書くとスタイルガイド内にHTMLが生成されます。

他にも、スタイルガイドのテンプレートが自分用にカスタマイズし易いところも気に入っています。
スタイルガイドのテンプレートはjadeベースで使えるものがあってレイアウトや色など自分のCSSで簡単に変更できるので拡張性が高いという印象です。
外部JSも簡単に入れれます。

aigisの使い方

node.jsとgulpを使える環境があればすぐお試しいただけるようにサンプルを作りました。
よかったら使って見てください。
サンプル

サンプルの使い方

ターミナルを開いて、下記コマンドを入力してください。
npm install

gulp aigis

これをすると「styleguide」ってディレクトリができていると思うのでその中にあるindex.htmlにアクセスするとスタイルガイドが出来上がってるかと思います。

スタイルガイドについて

スタイルガイドは作って終わりじゃありません。
作り続ける事が大事です。

よく「CSSなんですぐ死んでしまうん」と言った声を現場で良く聞くのですがそれは情報の共有がされていない事と適切なCSSの設計ができていないからと思います。

私はスタイルガイドを作り始めてCSSの設計をちゃんと考える時間を作るようになりました。
世の中ではBEMやFLCSSが良い風潮を感じますが、個人的にはBEMやFLCSSを使うだけでは、活きの良いCSSは書けないかなと思っています。

絶対にコレといったCSS設計はないと思っていますが、スタイルガイドに合わせてCSSを設計するとそれなりに良い感じの設計になるのでは無いのでしょうか。少なくとも何もない状態のオレオレコーディングよりは使いやすいと思います。

CSSを書くプロの人はたくさんいると思いますが、CSSを設計できるプロはそれほど見たことがありません。
私はスタイルガイドを通じて納品のためのCSSではなくプロジェクト運用のためのCSSを書ける人材になろうかなと思う次第です。

今後はなるべく業務と関係ない自分のプロジェクトはgithubに公開して、一緒にスタイルガイドも公開していきたいなーと思ってます(*ゝω・*)

関連記事

コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...