スマートフォンに。マルチデバイス対応のjQueryイメージスライダー

デザイナーの植村です。

レスポンシブWebデザインが叫ばれている昨今ですが、

その手法の一つにCSS3のMedia Queriesがあります。

簡単に言えば、ウィンドウサイズによってレイアウトを変更し、

マルチデバイス対応とする技術です。

PC用とスマートフォン用、

別々にサイトを用意する必要がないのが最大のメリットです。

そんなMedia Queriesですが、スマートフォンなど画面の小さなデバイスで

閲覧することを考慮しながらデザインする必要があるため、

あまり凝ったデザインには向いてません。

既存のjQuery(イメージスライダー等)が使いにくかったり

ちょっとデザインに制約が出てくるんですね。

そこで今回紹介するのは、iPhoneやiPadのような小さいウィンドウサイズでも

大きさを自動で調整してくれるjQueryのイメージスライダーです。

Media Queriesとうまく併用すれば、どのデバイスからも問題なく閲覧できるイメージスライダー

として、デザインに貢献してくれると思います。

１．Slides

https://github.com/nathansearles/Slides

見た目がすっきりしていますし、スタイリングが容易に可能。

容量も4KB程度しかないので、スマホでももっさりせず、快適に閲覧できます。

２．flickslide

http://blog.kaleido-jp.net/web/フリックスライド/

国産です。Androidでの動作をかなり意識されて作られています。

もちろん解説も日本語なので、取っ付きやすいと思います。

緻密に計算されたインターフェースが秀逸！

３．FLEXSLIDER

http://flex.madebymufffin.com/

ソースがシンプルなので気軽に実装できますね。

更に動きも滑らか！おすすめです。

4.jQuery Touch Swipe Slider

http://www.kara-full.com/hibi/etc/110606_touchswipeslider.html

こちらも国産です。制作者の方に感謝！

旧ブラウザ対応版とCSS3版が用意されています。

5．Roto

https://github.com/rdallasgray/roto

上の三つとは若干違うタイプですが、一応。

縦横にスライドさせられる、カルーセルタイプのプラグインです。

いずれもMedia Queriesと併用する場面が多くなると思います。

ただ、意識しておくべきなのは、Media Queriesは

「スマートフォン最適化」と呼べるほど合理的なテクニックではないということ。

解像度の大きなデバイスをカバーするため、

無駄に大きな画像を使用(環境に応じて縮小表示)したり、

CSSが膨れ上がったりするデメリットも抱えています。

(これをクリアするテクニックが実はあったりするのですが・・・またの機会に)

いずれにしても、今回ご紹介したjQueryは、

単純にPCサイトのイメージスライダーとしても使えるので、覚えておいて損はないと思います！

今後もレスポンシブWebデザインの動向には目が離せませんね。

台湾現地からオンリーワンのアジア情報メルマガを配信予定（2012年1月スタート）

登録はこちらに空メールを。