Monacaを使えばiOS/Android両方で動作するハイブリッドアプリが開発できます。しかしハイブリッドアプリという技術上、特定のUIフレームワークがありません。そのためアプリっぽく動作する部分を自分で工夫しなければなりません。
しかし、そのためのUIフレームワークはすでに多数存在します。これらを使えば、より優れたUI/UXのアプリが開発できるでしょう。
- Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI
- Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular
- Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css
- Kendo UI Web Components - Build Better Apps Faster
- Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps
- Phonon · A light weight and scalable HTML5 Mobile Framework
- Material-UI
- Ratchet
- Vue.js 2 Material Component Framework | Vuetify.js
- cblanquera/mobility: Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications.
- まとめ
Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI
Onsen UIはMonaca開発元であるアシアル社がメインで開発を行っています。素のJavaScriptはもちろん、Angular/React/Vueなどと組み合わせることもできます。モバイルに特化することで高いパフォーマンスが出ます。
Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI
Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular
モバイルに向いたUIフレームワークですが、ElectronであったりデスクトップのWebブラウザもサポートされています。Angularが必須のようです。
Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular
Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css
Angular JSと組み合わせて使うUIフレームワークです。Bootstrap3も使っています。Angular JSとBootstrap3という組み合わせは若干古いですが情報も多く、対応ライブラリも多いのが利点でしょう。
Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css
Kendo UI Web Components - Build Better Apps Faster
jQuery/Angular/React/Vueといったフレームワークとの組み合わせをサポートしています。モバイルだけでなくデスクトップでも利用可能です。チャートやカレンダー、ツリーマップなどコンポーネントが多彩です。
Kendo UI Web Components - Build Better Apps Faster
Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps
特にフレームワークを特定することなく使えるUIフレームワークです。依存性がない分、自由に使えますがそれぞれ特有の問題を自分で解決する必要がありそうです。アコーディオンやスワイプ、ポップアップなどUIコンポーネントが多彩に用意されています。
Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps
Phonon · A light weight and scalable HTML5 Mobile Framework
IE9から使えるUIフレームワークです。Riot/Angular/Vueと組み合わせ利用できます。他のUIフレームワークに比べてサイズが小さいのが特徴です。
Phonon · A light weight and scalable HTML5 Mobile Framework
Material-UI
Googleのマテリアルデザインに合わせて開発されているReactコンポーネントです。そのためAndroid向きと言えそうです。タップした時のアニメーションは別途ライブラリを用いる必要がありそうです。
Ratchet
iOS/Android両方に対応したテーマを提供しています。基本的なUI部品は揃っているようです。素のHTMLで実装されていますのでフレームワークは自由に選択できそうです。
Vue.js 2 Material Component Framework | Vuetify.js
Vue向けのUIフレームワークです。デスクトップもサポートされています。UIコンポーネントも多数揃っており、多くのWebサイト/ハイブリッドアプリで使えるでしょう。
Vue.js 2 Material Component Framework | Vuetify.js
cblanquera/mobility: Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications.
Bootstrap3/jQueryを使ったUIフレームワークです。画面の遷移もサポートされています。技術的には目新しくないですが、学習コストは低く使いやすいと言えそうです。
まとめ
Monacaで使うのであればOnsen UIがベストな選択になるでしょう。さらに開発したフロントエンドのコードをデスクトップ向けにも使いたいとなると、デスクトップもサポートしたUIフレームワークを選択するのが良いでしょう。また、React/Angular/VueといったVirtualDOM系フロントエンドフレームワークのサポート状況も選択の余地があると言えそうです。
