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

デザイナーの植村です。


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

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

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

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

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

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


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

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

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


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

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


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

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


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

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



1.Slides


https://github.com/nathansearles/Slides

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

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



2.flickslide


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

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

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

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




3.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月スタート)

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



コメントを残す

*

Copyright©2004- 2013 海外のホームページ作成|㈱メディアウェイブ All Rights Reserved.