このページの本文へ

jQuery Mobileを使った国内スマホサイトまとめ (1/3)

2012年03月01日 11時00分更新

文●小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

 jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。

 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。

※商品紹介/キャンペーンサイトに、「太鼓の達人学園(太鼓の達人×AKB48キャンペーンサイト)」を追加しました。(2012年3月1日16時更新)

※ネットサービスに、「一休.com」「recbike」を追加しました。(2012年3月2日16時更新)


人材サービス


DODA

 インテリジェンスが運営する転職情報サイト「DODA」(デューダ)のスマートフォン版。職種やエリア、雇用形態など、さまざまな条件で求人情報を検索・閲覧できる。画像をほとんど使わず、テキストとCSS3によるシンプルなデザイン。jQuery Mobileによるページ遷移効果と、独自実装の開閉パネルを組み合わせて、スマートフォンらしい操作性を実現している。


マイナビバイト

 マイナビが運営するアルバイト情報サイト「マイナビバイト」のスマートフォンサイト。トップページのイラストやアイコン画像でやわらかい雰囲気を印象付ける一方、サイト内ではjQuery Mobileの標準UIやページ遷移効果をじょうずに活用し、カスタマイズコストを抑えている。


マイナビ派遣

 マイナビが運営する派遣求人情報サイト「マイナビ派遣」。さまざまな条件を設定して派遣の求人情報や派遣会社を検索できる。「マイナビバイト」同様、jQuery MobileのUIやページ遷移効果などを積極的に利用している。


ネットサービス


じゃらんnet

 リクルートが運営する大手旅行情報サイト「じゃらんnet」のスマートフォン版も、jQuery Mobileで制作されている。スマートフォン版では、ホテルや旅館の予約など、機能を絞って提供。jQuery Mobileのフォームを活用することで、使い勝手のいい検索機能を実現している。


一休.com

 高級ホテル・高級旅館に特化した宿泊予約サイト「一休.com」のスマートフォンサイト。リストビュー、カウントバブル、フォームなど、jQuery MobileのUIを活用してアプリケーションのような操作性を実現している。


エキサイト天気

 大手ポータル「Excite」(エキサイト)の天気予報サイト。ヘッダー/コンテンツ領域などの基本的なレイアウトと、リストビューや開閉パネルなど一部でjQuery Mobileを利用している。


QLife

 国内最大級の医療機関クチコミサイト。スマートフォンサイトではGPS機能を使って最寄りの病院を検索できるなど、Webサイトというよりもアプリケーションに近い。リストビュー、カウントバブル、開閉パネルなど、jQuery Mobileの標準UIを最低限のカスタマイズで利用。


WALLPAPER COLLECTION

 スマートフォン向けの壁紙(待ち受け画像)配信サイト。iPhone、REGZA Phone、Xperiaなど、端末機種ごとに最適な壁紙をダウンロードできる。WordPressのテンプレートにjQuery Mobileを利用している。


recbike

 サイクリングの距離や行き先を記録し、友人と共有するネットサービス。モバイル版はjQuery Mobileで制作されている。ナビゲーションバー、ボタン、フォームUIなどをカスタマイズして利用。


jQuery Mobileでスマートフォンサイトを作ろう!

 そろそろ、jQuery Mobileでスマートフォンサイトを作ってみようかな――。そんな方にオススメなのが、2月3日に発売されたjQuery Mobile スマートフォンサイト デザイン入門(Web Professional Books)です。

Image from Amazon.co.jp
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

 本書は、jQuery Mobileの使い方をチュートリアルとリファレンスでていねいに解説した入門書。オールカラーの見やすいレイアウトで、豊富なサンプルを見ながら効率よく学習できます。

 著者は、“ドーナツ本”の愛称でおなじみの「Web制作の現場で使う jQueryデザイン入門」の西畑一馬さんと、高松在住のWebデザイナーである鍋坂理恵さん。 jQuery Mobileを学びたい方はもちろん、スマートフォンサイトを初めて作りたい方にもオススメです。

前へ 1 2 3 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています