ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

2015年に出てきたハイブリッドアプリにも使えるCSSフレームワークまとめ

デザインの世界は毎年新しいトレンドが生み出されています。それはアプリでも同じでしょう。フラットUIやマテリアルデザインを取り入れたアプリも増えています。そしてハイブリッドアプリでもそのトレンドに乗っていかなければいけません。

今回は2015年に出てきたCSSデザインフレームワークを紹介します。これらはレスポンシブになっていますので、タブレットやスマートフォンアプリでの利用もできるはずです。

WeUI

中国で流行っているメッセンジャーアプリ、WeChatが開発したスマートフォン向けのWebアプリケーションUIフレームワークです。かなりシンプルなデザインが特徴となっています。

Material

その名の通り、マテリアルデザインなのが特徴です。ボタンを押したり、入力時にアニメーションが実行されます。Androidアプリと親和性が高そうです。

Scooter - Welcome to Scooter

ScooterはDropboxが開発しているSCSSフレームワークとなっています。SCSSで作られていますので、変数や便利な関数などが定義されていて、拡張も容易です。

WTF is Solid?- Solid

BuzzFeedが開発しているデザインフレームワークです。色が濃く、はっきりとしたデザインとなっています。シンプルなデザインなのでどのデバイスにもマッチするでしょう。

tacit

素のHTMLタグに対してスタイル設定を施しています。最低限のHTMLを組めば、ちょっとしたデザインに仕立て上げてくれるのがポイントです。

Kickstart - The CSS Library we've been waiting for

BootstrapやFoundationに対抗するデザインフレームワークで、サイズが軽量であったりjQueryに非依存で使えるのが利点となっています。

Bootply snippet - Bootstrap Bootstrap Google Plus Theme

こちらはBootstrapテンプレートで、Google+っぽいデザインにしてくれます。Androidアプリに最適ではないでしょうか。

Scaffolding · Primer

GitHubが公開したデザインフレームワークです。Webアプリケーションはもちろんハイブリッドアプリでも活躍してくれるはずです。

MUI - Material Design CSS Framework

マテリアルデザイン向けのCSSフレームワークです。HTMLメールテンプレートとして使うこともできます。

Toolkit - Project Titon

多数のコンポーネントが用意されているフレームワークなので、様々なアプリで使えるのではないでしょうか。


CSSデザインフレームワークを使う場合にはMonacaPhoneGapを使ってみてください。WebテクノロジーでiOS/Androidアプリが一気に開発できます!そして、サーバサイドが必要になった時にはニフティクラウド mobile backendを組み合わせてみてください。