企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。

Scooterの使い方

ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。

写真と説明。

リスト。

右寄せ。

アラート。

ボタン。

吹き出し付き。

フローティングカード。

フォーム。

アイコン。

こんな感じで文字だけのアイコンも表現できます。

モーダル。

ツールチップ。

ラベル。アイコン付きなのが良い感じ。

塗りつぶしたラベル。

タブ。

カレンダー。

Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れています。ScooterをベースにすることでDropboxを使っているアプリの良さが出るかも知れません。また、Scooterをベースにして自社のデザインベースを作っても良いでしょう。

ScooterはHTML5/CSS3製、MIT Licenseのオープンソース・ソフトウェアです。

Scooter - Welcome to Scooter dropbox/scooter