デスクトップ、スマートフォンで使えるシックなデザインフレームワーク「TopCoat」
TopCoatはグレー系を主体とした落ち着いた雰囲気のWebデザインフレームワークです。
最近はWebデザインフレームワークが多数出揃ってきました。サイトの雰囲気によってフレームワークを選ぶと良いでしょう。グレー系の落ち着いた感じを出したいならばTopCoatを使ってみましょう。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.02.1366703503.png)
グレースケールを基調としたはっきりとした見た目のUIです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.05.1366703506.png)
ウィジェットは数多く提供されています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.09.1366703509.png)
フォーム系。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.25.1366703511.png)
スライダーなどもあります。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.13.1366703514.png)
スピナー。効果的に青が使われています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.36.1366703516.png)
こちらはモバイル。スマートフォンで使えます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.40.1366703518.png)
アイコンとラベルのセット。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.45.1366703521.png)
テキストエリアとチェックボックス。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.49.1366703523.png)
基本的に濃淡2色のバックグラウンドが選択できます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.24.56.1366703525.png)
オーバーレイ表示。これも色々使えそうです。
TopCoatはデスクトップとモバイルのそれぞれにデザインが提供されています。グレー系が約6色、青系が2色程度で構成されています。そしてホワイト系とグレー系の2つのテーマがあります。TopCoatでデザインを構築するとすっきりとした落ち着いた雰囲気のサイトに仕上がるでしょう。
TopCoatはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache License 2.0）です。
MOONGIFTはこう見る
デザインフレームワークを採用するメリットとしては、見栄えのいいWebサイトを素早く構築できるところにあります。また、様々な表現が考慮されているのでサイト全体の統一感が生まれやすくなります。問題はその範疇に収まらない場合でしょう。
そのため多数のウィジェットやパターンに対応したフレームワークを選択する必要があります。TopCoatではアイコンや画像を多用する形ではない、テキスト主体のサイトで採用すると良いと思います。