目次：Topcoat

• Adobe製超軽量！！レスポンシブCSS フレームワークTopcoat

Adobe製超軽量！！レスポンシブCSS フレームワークTopcoat

Adobe製超軽量レスポンシブフレームワークTopcoat

デザインしたくないシリーズ、第二弾！最近とっても気に入っているレスポンシブフレームワークTopcoatを紹介します。

Topcoatとは

TopcoatはAdobe製のレスポンシブフレームワークで、最大の特徴がとにかくめっさ早い！ってこと。

jQueryMobileを使ってよくスマートフォンサイトを作っていたのですが、「いかにもjQuerymobile」感があったり、重い、デザイン上のカスタマイズがしずらいというものがありました。

ところがどっこい、Topcoatはとにかく軽く、さくさく。フレームワーク元のデザインも「今風」なフラットでシンプルなデザイン。
シンプルだから、後からカスタマイズも非常にしやすいのが特徴です。

流行りのフラットなデザイン

ボタンやフォームの一つ一つがフラットで洗練されたデザインというのも特徴で、シンプルかつ、オシャレ！デザインセンスゼロなかあさんでも、今すぐ一流のデザイナーっぽくサイトが作れます。

2013年4月にcolisさんでも紹介されており、ご存知の方もいらっしゃると思いますが、そこからバージョンも代わりましたので改めて紹介したいと思います。

Topcoatインストール方法

ダウンロード

ダウンロードされたファイル

デスクトップ用、モバイル用、暗めのデザイン、明るいデザイン、　合計４つのhtmlファイルが用意されています。

アイコンの設置

アイコンは100個Topcoatでは用意されているのですが、ダウンロードしたばかりの状態ではメニュー用に１個メニュー用のSVGファイルがあるだけです。「アイコンは自分が必要なものだけ選んで、設置したほうがよい」と公式で言っているので、そのようにしたいと思います。

アイコンのダウンロード

Gitからアイコンをダウンロードします。

ダウンロードしたアイコン

アイコンはPNGも、SVGもaiファイルもあります。私はSVGファイルを使うことにしました。SVGファイルを使うのであれば、必要なファイルだけを自分のTopcoatのimgフォルダに設置します。

自分のtopcoatのcssファイルにアイコンの設置について追記

以下はアラート用のアイコンの設置。

css

.topcoat-icon--alert-stack {
  background: url("../img/alert.svg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

これでやっと１つのアイコンの設置が完了。

html

CSSの記述さえ終わればアイコンの表示はクラスの呼び出しだけでOK。

TwitterBootstrapに比べると、ちょっとこのあたりだけ面倒かもしれません。

Topcoatのお気に入りポイント

はっきり言って、TwitterBootstrapや、jQuerymobileと比べるとダウンロードしたらすぐに使える！とはいかないのでちょっと面倒ですが、
デザインがフラットで今風で早いっていうところが気に入っています。
この他にもいいな〜と思っているのが

Topcoat専用PSDファイルがダウンロード可能

TopcoatのPSDファイルがダウンロード可能なのでラフ、モックアップを作るのにも助かります。

フォントファイル付

Adobeオープンソースのフォント付。Adobeのフォントが予め同梱されているのでそこもポイント。

デメリット

確かに手間な部分もあるのですが、フラットなデザインで応用もしやすく、PSDファイルのダウンロードも可能なのでモックアップ、ラフの作成にも買いそうです。

残念ながら情報がまだまだ少なく、今後に期待したいところですがAdobe制ということで流行る可能性は十分にあるかと思います。

当サイトでも取り上げていければと思います。

サンプルダウンロード

試行錯誤で簡単ではありますが、作ってみました。良かったら見て下さい。