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に公開して、一緒にスタイルガイドも公開していきたいなーと思ってます(*ゝω・*)

関連記事

【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...