モバイルアプリで、一番大事なのはUI(ユーザーインターフェース)だとよく言われます。

 単に見た目の派手さだけじゃなくて、全体的な統一感とかバランスとか、直感的でわかりやすい配置とか、ボタンを押した時の動きとか、そういうやつです。

 普通のWebページだと、必要な情報さえわかれば、そんなに見た目でどうこう言われる事もありませんが、アプリの場合、UIがしょぼいと見向きもされなくなります。

 スタイルシート(HTMLの見た目を定義する部分)を、自作で最初からゴリゴリ作り上げている人は、今はほとんどいません。

 CSSフレームワークというのを、読み込む事によって、統一感のある、美しいUIが簡単に実装できます。ブラウザ間の微妙な挙動の誤差にも対応してくれていたり、レスポンシブデザイン(PCとタブレットとスマホでレイアウトを自動的に調整してくれる)に対応してくれていたりします。

 オリジナリティを出すにしても、CSSフレームワークをカスタマイズして使っている人が多いです。


jQuery Mobile

 jQueryの開発チームが手がけた、モバイル向けCSSフレームワーク。UI部品が、ブラウザ標準のものより大きめに設計されて、一昔前のiOSっぽいデザインで統一されています。テーマも自由に変更できます。

 かつては、モバイル向けCSSフレームワークで不動の地位を確立していましたが、モバイルに実装するには重すぎて動きがもっさりする事や、オリジナリティが出しにくかったり、コードの記述にくせがあったりするので、最近は敬遠される事も多いフレームワークです。

 それでも、昔はかなりバグが多かったんですが、長い時間の間にその辺も修正され、モバイル端末の処理能力も向上してきたので、全然ありかなぁと思います。何より、参考資料が豊富なので、とっかかり安いと思います。

 

jQuery mobile


jQuery UI

 jQuery mobileがモバイル向けのUIなのに対して、こちらはデスクトップ向けのUIです。ただ、軽くて使い勝手がいいので、こっちを使っている人も多いです。

 欲しいUIだけ選んで導入できるので、他のCSSフレームワークを使って、ダイアログやDate PickerだけjQuery UIを使うとかいうのを私はよくします。

 以前は、テーブルレイアウトとかも充実していた気もしますが、なんかUIの種類が減った気がします。


jQuery UI


Bootstrap

 Webデザイナー御用達のBootstrapです。美しいデザインと、豊富なテーマ、そしてスムーズな動きと、Webの世界では圧倒的な人気を誇っています。モバイルアプリでも、全然使えます。

 ただ、基本デスクトップ用なので、モバイルUIではおなじみのスイッチボタンがなかったり、セレクトボックスが選びにくかったりします。コードの記述に癖があるので嫌がる人も多いです。

 ちなみに、jQuery UIと併用するとアイコンとかがおかしくなるので、注意が必要です。


 Bootstrap


Topcoat

 Dream Weaverでお馴染みのAdobe社製のCSSフレームワークです。デスクトップ用/モバイル用、Light style/Dark styleを選択できます。シンプルですが、統一感があって美しいです。

 また、一番の特徴は非常に軽くて、高速です。

 「いろいろ決めるためのアプリ」で使わせてもらっています。


Topcoat


ionic

 開発の準備でも紹介していますが、CSSフレームワークとしてではなくて、統合開発環境として提供されていますが、ダウンロードした中から、CSSとJSファイル、それからアイコン画像だけ抜き出せば、CSSフレームワークとして使えます。

 ただ、Angular.jsと組み合わせる必要があるので、開発初心者には敷居が高いかもしれません。

 モバイルアプリ専用のCSSフレームワークとしては、トップクラスの完成度ではないかと思います。

 「マニュアルなしで誰でも使える簡単家計簿」「Tournament Manager beyond」で実装しています。 

 

ionic

 


Onsen UI

 Monacaの開発元アシアル(株)が開発した、CSSフレームワークです。ionic同様、angular.jsと親密製が高いですが、jQueryでも開発可能です。

 統合開発環境Monacaで開発する場合は、設定とかは楽です。

 日本の企業なので、日本語対応してくれるところも利点です。

 

Onsen UI


Materialize

 つい最近まで、やたらと「フラットデザイン」ってうるさかったのが、早くも「マテリアルデザイン」というのが今後のGoogleが提唱するスタンダードになるそうです。

 ネット上のあちこちで、フラットデザインとマテリアルデザインの違いについて語られていますが、要は、ボタンなどの要素に影をつけて立体感を出したり、ボタンを押すと波のようなエフェクトが走ったり、何をしたのか、またはすべきか、ユーザーに直感的につたわるデザインというところでしょうか。

 マテリアルデザイン関連のCSSフレームワークもいくつかありますが、この「Materialize」が一番使いやすそうでした。

 現在開発中の「POOL TIGER ver6」で実装予定です。

 

Materialize