Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集

今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。

しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。

そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。

iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」

モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版とも言えるChocolateChipを紹介します。ChocolateChipはiOS 7風UIに対応し、さらにAndroidとWindows Phoneにも似せたテーマが提供されています。これだけのコンポーネントがあればネイティブ風Webアプリケーションも手軽に作れるようになりそうですね。

フラットデザインなスマートフォンWeb UIフレームワーク「Onsen UI」

スマートフォン向けのHTMLテンプレートを使うことで最適化された表示のWebサイトが素早く構築できるようになります。今回は日本製のOnsen UIを紹介します。Onsen UIはHTML/JavaScript/CSSで構築されていますので任意のWebサイトに適用できます。しかしPhoneGapを拡張したMonacaと組み合わせることでさらに便利に使えるようです。

iOS 7風UIをWebで再現「Project-Tyson」

間もなくリリースすると思われるiOS 7。あのがらっと変わったUIをWebで再現するのがProject-Tysonです。Project-Tysonは詳細を説明するブログ記事も書いており、そのエッセンスがコードとブログ記事の両方から学べるようになっています。今後iPhone向けのWebサイトを開発する際にはチェックした方が良いでしょう。