タグ: UI

ここ最近スマホ用のUIフレームワークを比較検討をする機会があり、一言にスマホUIフレームワークといっても、各々一長一短があり、用途や目的によって使い分ける必要もあると感じましたので、本日はそれぞれのUIフレームワークを「導入の手軽さ」「カスタマイズ性」「動作の安定感」「デザインの美しさ」「対応範囲」の5軸で評価してみました。

今回比較するのは以下の4つ

1. JQueryMobile
jqm
以前のエントリーでも紹介した、言わずと知れたJQueyの正統なモバイル版フレームワークです。スマホのフレームワークではこれがデファクトスタンダードになりつつあります。

2. iUI
iui
これも以前のエントリーでも紹介しましたが、iPhone風のUIテイストのフレームワークです。もちろんiPhone以外にもAndroidやその他のプラットフォームにマッチしたテーマもいくつか用意されています。

3. Sencha Touch
snc
これも定番のフレームワーク。もともと有料だったのが現在では無料で利用できます。玄人向けのツールというイメージ。

4. JQTouch
jqt
割と早くから存在していたスマホUIフレームワークのパイオニア的なツール。Sencha Touchに吸収されたとのことですが、使い勝手がなかり違うように感じたので、今回の比較検討に含めました。

では早速比較してみましょう。

評価ポイント1 : 導入の手軽さ


JQuery Mobile ★★★★★
iUI ★★★☆☆
Sencha Touch ★★☆☆☆
JQTouch ★★★☆☆

JQueryMobileについては以前のエントリーで書いたように、公式WEBサイト上でジェネレータを使って直感的にサンプルソースを形成できたり、有志による日本語リファレンスが充実していたりと、導入のハードルの低さはダントツです。
iUIとJQTouchはHTMLとCSSが理解できていれば問題ありませんが、フレームワークの仕様を理解するまでは少し手間取るかもしれません。
Sencha TouchはJavaScriptの知識がある程度必要なのと、フレームワークの規模も他のものよりも大きいので仕様を把握するまでちょっと骨が折れそう。

評価ポイント2 : カスタマイズ性


JQuery Mobile ★★☆☆☆
iUI ★★★☆☆
Sencha Touch ★★★★★
JQTouch ★★★★☆

JQuery Mobileは導入しやすさの反面カスタマイズのしにくさがネックです。カッチリ組み込み過ぎて自由度が少ないというイメージ。iUIとJQTouchは結構似た感じですが、UIのパターンの多さ的にJQTouchのほうが自由度は高そうです。
Sencha Touchは逆にゴリゴリJavaScriptを弄れる人にとっては拡張性はかなり高いです。玄人向け。

評価ポイント3 : 動作の安定感


JQuery Mobile ★★☆☆☆
iUI ★★★★★
Sencha Touch ★★★☆☆
JQTouch ★★★★☆

検証の期間も短かったので、あくまで個人的な感想ですが、構成がシンプルな分、iUIが安定性が高いように感じました。JQTouchも結構いい感じですが、端末によって一部レイアウトが崩れていたりしたので、その分マイナス。Secha TouchはWebkitペースのブラウザじゃないと動かないという欠点があり、サードパーティ製のブラウザを利用しているユーザーを考慮してこの結果。JQuery Mobileは実はまだベータ版であり、動作はちょっと不安定で、かつ描画に時間がかかってしまう欠点があり、レスポンスを重視する方にはちょっとそぐわないかもしれません。ただ正式版がリリースされたら、この問題は解消されるかも。

評価ポイント4 : デザインの美しさ


JQuery Mobile ★★★★★
iUI ★★☆☆☆
Sencha Touch ★★★★☆
JQTouch ★★★☆☆

個人的な意見になりますが、デザインは文句なしにJQuery Mobileが美しいです。次点はSencha Touch。 iUIはちょっとシンプルすぎる気がします。JQTouchは悪くないですが、ちょっとチープな感じがします。どの道、デザインも多少なりともカスタマイズして利用することになるので、余り気にするところではないかもしれませんが。

評価ポイント5 : 対応範囲


JQuery Mobile ★★★★★
iUI ★★★★☆
Sencha Touch ★★☆☆☆
JQTouch ★★★★☆

どのフレームワークも主要なプラットフォームは抑えていますが、Sencha TouchについてはWebkitブラウザのみ対応なので、ちょっと不安があります。

総括すると、すばやく、美しいデザインのサイトを作りたいならJQuery Mobile、カスタマイズ性を求めるならSencha Touch、安定感を取るならJQTouchかiUIといった感じです。ただ、JQTouchに関してはSencha Touchに吸収されたという事情もあり、今後の発展という意味では期待できないかもしれません。



昨今のスマートフォンブームで、もはやスマートフォン対応はする、しないの検討の余地をはさむまでもない大きな課題になっていますが、それに伴いWEB担当者は相当に頭を悩ませています。僕のご多分にもれず苦労したタチですが、もともとガラケーサイトのディレクターだったのですが、「スマホも似たようなもんだろ?」見たいなノリで、ガラケーに加えスマートフォン担当の任に就きました。

それで、何が大変だったかというと、

  • (ガラケー、PCとも)レイアウトの考え方がまったく違う
  • タップという独特の使用感を考慮しなければならない
  • PCサイト並みのデザインやUXを求められる

といった点で、暗中模索状態でサイトやアプリの開発を行ってきました。そんなWEBサイト制作者を救うホワイトナイトそれがスマホ・タブレットサイト専用フレームワーク「iUI」です。

スマホ・タブレットサイト専用フレームワーク iUI:ダウンロードサイト

iUI


ここでいうフレームワークとは、簡単に言ってしまうと、あらかじめ必要とされる機能がまとめて構築されているソフトウェアのセットみたいなもので、これがあると大雑把なサイトの構築の手間を省略できちゃう優れものです。もちろんディテールを追求すると、相応に手間やフレームワークの中身の理解が求められますが。


さて、話を戻しますが、このiUIはいわゆる動的な機能を提供するものというよりは、その名の通りUI(ユーザーインターフェース)に特化したフレームワークとなっており、スマホ的なデザインや動きを実装するCSS、Javascriptファイルが盛りだくさんです。デザインは7種のテーマに対応しており、シチュエーション別にテーマを使い分けることもできます。


いきなりスマホ担当に任命されててんてこ舞いなあなた!これを使って卒なくスマホ需要を乗り切りましょう!