スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。 今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレームワークです。Bootstrapベースなのでカスタマイズもしやすくなっています。

Mobilityの使い方

Mobilityの主な画面です。まずはトップページ。

ハンバーガーアイコンをタップしてメニューが表示されます。

画面下にはタブバーがあり、画面上部でもメニューに分けた表示ができます。

リスト。画像付きです。

コードも表示できます。

フォーム。

チェックボックスだけでもこんなに多種多様です。

MobilityはスマートフォンネイティブなUIに似たデザインではないので、Webサイトでも安心して利用できそうです。スワイプなどのアニメーションは実装されていますので、ユーザビリティは高いでしょう。Cordovaと組み合わせれば、Bootstrapの使い勝手の良いハイブリッドアプリ開発に利用できそうです。

MobilityはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。

Mobility cblanquera/mobility: Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications.