スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ

こんにちは。デザイナーのはるえです。

もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。
LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。
ありがとうございます！！

そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。

【こちらもおすすめ】
☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた

Facebookでもおなじみのドロワーメニュー3選

今じゃ基本中の基本となっているドロワーメニュー。
Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。

jQuery slimMenu

http://adnantopal.github.io/slimmenu/

軽量なところが嬉しいナビゲーションメニューです。

Drawer Sllide Menu

http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/drawer-slide-menu/

デモ：http://www.tradeomics.com/
Github：https://github.com/brewern/mobile-menu

TOP DRAWER

http://www.jordanm.co.uk/lab/topdrawer

プラグインを使用せず、CSS3アニメーションで実装されたナビゲーションです。

スワイプ・フリックで動作可能なスライドショー7選

スマホサイトでスライドショーなどを使用する場合は、UIを考慮し、スワイプやフリックでの動きが必ず求められます。
そんなときに便利なプラグインをご紹介いたします。

PHOTO SWIPE

http://www.photoswipe.com/

ダブルタップやピンチインなどの基本的なジェスチャーがすべて対応されています。

flipsnap.js

http://pxgrid.github.io/js-flipsnap/

デモ：http://pxgrid.github.io/js-flipsnap/demo.html
ダウンロード：http://pxgrid.github.io/js-flipsnap/download.html

Swipeshow

http://ricostacruz.com/swipeshow/

ドラッグ型スライドショーが実装できます。

Swipbox.

http://brutaldesign.github.io/swipebox/

デスクトップ、スマホ用jQueryの「lightbox」のプラグインです。

Sly

http://darsa.in/sly/

水平・垂直のスライドや、無限スクロールを実装できます。

TouchSwipe

http://labs.rampinteractive.co.uk/touchSwipe/demos/

スマホやタッチパッドなどのタッチデバイス用jQueryプラグイン。

TouchSlider

http://touchslider.com/

ボタンをタッチしてスライドさせるタイプのスライドショーになります。

まとめ

ストレスのない快適なスマホサイトを制作するうえで、こういったプラグインが必要不可欠になってきますよね。特にドロワーメニューやスライドショーは使用頻度も高いと思うので、さくっと実装したいときにぜひ使ってみてください。

また、デザイナーのせいと君がjQueryで簡単に実装できるアコーディオンメニューを分かりやすく紹介してくれています。

「超簡単jQuery！“toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法」

こちらもぜひ参考に！

【jQueryでサイトをリッチに】

※ 今すぐ試してみたくなる！CSS3やjQueryで実装できるリッチなエフェクト6選

※ アニメーションを高速化するjQueryプラグイン「Velocity.js」を使ってみた

※ animateとjQuery.Deferredで動きのある「トップへ戻る」ボタンを作ってみよう

※ 入力フォームを更に便利にするjQueryプラグイン5つ

※ 世簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選