Topcoat ITかあさん

ITかあさん

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

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

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

記事の最後スマートフォン用のサンプルを置いておきます

Topcoap レスポンシブCSSフレームワーク

Topcoatとは

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

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

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

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

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

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

Topcoatインストール方法

ダウンロード

Topcoatダウンロード

右上のダウンロードボタンを押してTopcoatのファイルをダウンロード

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

Topcoatダウンロードファイルリスト
デスクトップ用、モバイル用、暗めのデザイン、明るいデザイン、 合計4つのhtmlファイルが用意されています。
ダウンロードされたTopcoapの表示確認

ダウンロードされたファイルは、TopcoatのUsage Guidelinesに表示されたものとほぼ同じ。

アイコンの設置

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

アイコンのダウンロード

Topcoatのアイコン
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;
}

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

html

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

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

Topcoatのお気に入りポイント

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

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

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

フォントファイル付

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

デメリット

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

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

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

サンプルダウンロード

トップコードのサンプルを作成しました

サンプルを作成しました。利用したのはmobile lightファイルから作りました。

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