Web制作者がチェックしておきたい!デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ
Post on:2016年5月16日
Webサイトを制作している時、そして納品する時、サイトのデザインで定義されているカラー・タイポグラフィ・エレメントなどのスタイルを一覧できるようにまとめたスタイルガイドを紹介します。
Photoshop, Illustrator, Sketchなどのアプリを使ったり、オンラインツールを使ったものなどいろいろあり、中身だけでなくその見せ方の参考にもなると思います。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-01.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-02.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-03.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-04.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-05.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-06.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-07.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-08.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-09.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-10.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-11.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-12.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-13.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-14.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-15.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-16.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-17.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-18.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-19.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-20.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-21.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-22.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-23.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-24.png)
Style Guide Produce Guidelines
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-25.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-26.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-27.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-28.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-29.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-30.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-31.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051602-32.png)
sponsors