Webデザインの勉強にいい!レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ
Post on:2016年1月6日
レイアウトの基本構成・展開例、UIエレメントのバリエーション、カラーの使い方など、Webページのデザインの定義がまとめられたスタイルガイドを紹介します。
各リンク先では、スタイルガイドの大きいものやアニメーションなどを見ることができます。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-01.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-02.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-10.png)
元ページでは、アニメーションでスタイルガイドを楽しめます。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-03.png)
元ページでは、アニメーションでスタイルガイドを楽しめます。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-04.png)
Introducing the Salesforce Lightning Design System
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-05.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-06.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-07.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-08.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-09.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-11.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-12.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-13.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-14.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-15.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-16.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-17.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-18.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-19.png)
Style Guide — Product guidelines
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-20.png)
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016010602-21.png)
sponsors