スマートフォンサイトのデザインを作るうえで、最も気をつけるべき項目の一つがフォームです。スマートフォンを使うようになって感じるのがブラウジング自体はかなり快適なんですが、登録や入力が凄く不便です。間違って違う選択肢を選んでしまったり、きちんとイベントを判別してくれなかったり。そこでサイトの利便性を落とさないためにもスマートフォンで使うことを想定したUIを実装していく必要があります。

だた、一言でフォームのデザインといっても、フォームのデザインは実は凄くやっかいなんです。端末のレンダリング仕様によって大きく差異が出やすい箇所ですし、タップやチェックなどのイベント毎にスタイルを用意せねばならず、かなりの労力を要します。

そこで、スピードを求められるWEB制作者を救うホワイトナイトの登場ですよ。それがJQueryMobile(ジェイクエリーモバイル)です。JQueryはもともとJavaScriptのフレームワークの一種で、インタラクティブなUIを実装するのに非常に大助かりなライブラリです。JQueryMobileはそのスマートフォン版ですね。

JQueryMobileダウンロード


これの何がいいかって、それはあらゆるスマートフォンのプラットフォームに対応しているのはもちろんのこと(iOS、Android、WindowsPhone、BlackBerry、Obada、palm webOS、symbian、MeeGoに対応)、

上記サイト上にデモ画面があって、そこで簡単にWEBページを作成し、そのままソースをダウンロードできてしまうということです。

JQM
デモ画面(iPad見たいなヤツ)の上部にパーツが表示されているので、それをドラッグ&ドロップでデモ画面に落とし込むとそのまま画面に反映されるので、HTMLの知識すらまったく必要がありません。細かい調整は編集したい要素をクリックすると右側にプロパティが開くので、そこで編集を行います。(より細かい調整が必要な場合は、一旦ダウンロードしてCSSファイルを修正してください)。実際に編集してダウンロードしてみました。かかった時間はものの数分!

jqm2

JQueryMobileサンプル


デザインもスマホらしくてとてもGoodです。もちろんフォームだけじゃなく、サイトのUI全般に利用できるフレームワークなので活躍の場はかなり幅広いです。導入のしやすさも抜群なので是非利用してみてください。