ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Stylify Meはnode/JavaScript製のソフトウェアです。

Webサイトにはそれぞれのカラーリングが存在します。例えばYahoo! Japanであれば赤を思い浮かべるでしょう。MOONGIFTでは黄色と黒が基調になります。そんなカラーリングをはじめとするスタイル情報を抜き出してくれるサービスがStylify Meです。


トップページです。任意のURLを入れます。


MOONGIFTで試しました。このようなカラーリングが抽出されたようです。


カラー抽出の基準になった画像がピックアップされています。


下にはスクリーンショットが表示されています。日本語は文字化けしています。


Yahoo! Japanのカラーリング。


PDFによるレポート保存もできます。

カラーリングの抽出は思ったほどの精度ではないように見えますが、実運用されていないテストデザインであれば画像も仮のものを使ったりするので、もっと精度が高く出せるのではないでしょうか。

Webサイトの更新、機能追加を行っていると徐々につぎはぎになっていきます。その結果、ページごとの雰囲気が変わってきてユーザにとって使い勝手が悪くなります。それを防ぐのがデザインガイドラインです。

配色や文字の大きさ、クラス名の定義方法などを記しておくことで指針となり、方向性がずれないようにできます。まだスタイルガイドがないサイトであれば、Stylify Meを使ってベースを生成するというのは良さそうです。

Stylify Me - Online Style Guide Generator

micmro/Stylify-Me

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2