スタイルガイドを既存サイトを使って生成「Stylify Me」
Stylify Meはnode/JavaScript製のソフトウェアです。
Webサイトにはそれぞれのカラーリングが存在します。例えばYahoo! Japanであれば赤を思い浮かべるでしょう。MOONGIFTでは黄色と黒が基調になります。そんなカラーリングをはじめとするスタイル情報を抜き出してくれるサービスがStylify Meです。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.05.29.1381234559.png)
トップページです。任意のURLを入れます。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.05.55.1381234566.png)
MOONGIFTで試しました。このようなカラーリングが抽出されたようです。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.06.05.1381234570.png)
カラー抽出の基準になった画像がピックアップされています。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.06.05.1381234578.png)
下にはスクリーンショットが表示されています。日本語は文字化けしています。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.06.52.1381234586.png)
Yahoo! Japanのカラーリング。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 21.07.18.1381234590.png)
PDFによるレポート保存もできます。
カラーリングの抽出は思ったほどの精度ではないように見えますが、実運用されていないテストデザインであれば画像も仮のものを使ったりするので、もっと精度が高く出せるのではないでしょうか。
Webサイトの更新、機能追加を行っていると徐々につぎはぎになっていきます。その結果、ページごとの雰囲気が変わってきてユーザにとって使い勝手が悪くなります。それを防ぐのがデザインガイドラインです。
配色や文字の大きさ、クラス名の定義方法などを記しておくことで指針となり、方向性がずれないようにできます。まだスタイルガイドがないサイトであれば、Stylify Meを使ってベースを生成するというのは良さそうです。