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

TopCoatはグレー系を主体とした落ち着いた雰囲気のWebデザインフレームワークです。

最近はWebデザインフレームワークが多数出揃ってきました。サイトの雰囲気によってフレームワークを選ぶと良いでしょう。グレー系の落ち着いた感じを出したいならばTopCoatを使ってみましょう。


グレースケールを基調としたはっきりとした見た目のUIです。


ウィジェットは数多く提供されています。


フォーム系。


スライダーなどもあります。


スピナー。効果的に青が使われています。


こちらはモバイル。スマートフォンで使えます。


アイコンとラベルのセット。


テキストエリアとチェックボックス。


基本的に濃淡2色のバックグラウンドが選択できます。


オーバーレイ表示。これも色々使えそうです。

TopCoatはデスクトップとモバイルのそれぞれにデザインが提供されています。グレー系が約6色、青系が2色程度で構成されています。そしてホワイト系とグレー系の2つのテーマがあります。TopCoatでデザインを構築するとすっきりとした落ち着いた雰囲気のサイトに仕上がるでしょう。

TopCoatはHTML5/JavaScript製のオープンソース・ソフトウェア(Apache License 2.0)です。


MOONGIFTはこう見る

デザインフレームワークを採用するメリットとしては、見栄えのいいWebサイトを素早く構築できるところにあります。また、様々な表現が考慮されているのでサイト全体の統一感が生まれやすくなります。問題はその範疇に収まらない場合でしょう。

そのため多数のウィジェットやパターンに対応したフレームワークを選択する必要があります。TopCoatではアイコンや画像を多用する形ではない、テキスト主体のサイトで採用すると良いと思います。

TopCoat

デモ:Topcoat Style Guide

デモ:Topcoat Style Guide

topcoat/topcoat · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2