jQueryを使いこなそう！便利すぎるプラグイン15選！

初心者でも使ってみたいjQueryプラグイン15選

余白のカスタムならBackstretch

Backstretch

Yahoo! JAPANやgooなどのポータルサイトで見られる画面サイドの余白。掲載するコンテンツにもよりますが、余白が寂しいと思ったりしたことはありませんか。そんな時Backstretchを活用すると両サイドの余白を好きな画像で埋めることができます。

写真スライダーのSimplejQuerySlider

SimplejQuerySlider

サクサク動くスライダーとして有名なプラグインに Simple jQuery Slider があります。余計な機能は省いて、写真スライドのみに機能を絞っています。

bing.com風の写真スライダーSupersized

Supersized

フルスクリーンの写真スライダーになりますが、画面下部に画像一覧の案内が表示できる特徴があります。

イメージマップ風ならiPicture

iPicture

画像内に複数リンクを設定できる機能の一つに「イメージマップ」があります。こちらの iPicture は、そのイメージマップをより強力にしたツールで画像内に設定したポイントにカーソルを合わせると、あらかじめ設定しておいた動画やイメージ、文章を表示することができます。

写真ちりばめ系PhotopileJS

PhotopileJS

写真を無造作にちりばめたような独特のレイアウトを演出できる、jQuery の写真系プラグインになります。画面の幅に合わせて散らかり方も変わり、ユニークな写真表現を演出することができます。

横スクロールならjInvertScroll

jInvertScroll

絵巻物風に横方向の画面移動をサポートしてくれるプラグインの一つに jInvertScroll があります。CSS で設定する方法もありますが、jQuery のプラグインを使うと簡単に横方向の移動が実現できます。

スクロールが楽しくなるSuperScrollorama

SuperScrollorama

ワンパターンになりがちなワンカラムの web デザインに遊び心をスパイスしてくれるプラグインが Super Scrollorama になります。ユーザーの好奇心をくすぐり、ページエンドまでスクロールしてくれる可能性に期待できます。

無限スクロールならinfinitescroll

infinitescroll

facebook やツイッターで馴染みのあるページを下までスクロールすると自動的に次のページが読み込まれる機能も jQuery プラグインを利用すると簡単に搭載できます。このような機能は一般的に「無限スクロール」や「インフィニティ・スクロール」と呼ばれています。

動きのある”表”ならFooTablePlugin

FooTablePlugin

表で何かを表現したい時に気がかりとなることが、モバイルで表示される時のレイアウトの崩れです。この問題を特別な知識や技術力が無くても難なくクリアできるツールが FooTable Plugin です。

グラフ表現ならChartjs

Chartjs

エクセルや Google シートで演出するグラフとは違い、柔らかい滑らかなグラフ表現を出来るツールの一つに Chart js があります。表現できるグラフは、棒グラフや円グラフをはじめ6種類で、レスポンシブ・デザインにも対応しています。

円グラフならCircliful

Circliful

円グラフに特化したプラグインとして有名な Circliful。アニメーション付きの表現方法がユニークで、データアイコン（車や人のマーク）もグラフ内に挿入できるメリットがあります。

入力フォームならProgression

Progression

資料請求や問い合わせなどでよく利用される入力フォーム。入力抜けや間違った入力をしない様に、アドバイスを入力フォームに札付けできるプラグインです。

今風のメニューならSlidebars

Slidebars

近年の web デザイン・トレンドの一つ「ドロワ―メニュー」もjQuery のプラグインを活用すると比較的簡単に装着できます。ドロワ―メニュー系のプラグインはいくつかありますが、こちらの Slidebars は左右両方にドロワ―メニューを設置できる特徴があります。

収納型シェア・ボタンならsharebutton

sharebutton

こちらもシェアボタン系の jQuery プラグインになります。常時 facebook やツイッターなどのアイコンを表示するのではなく、share をクリックすると設定しているシェア・コンテンツが表示する内容となっています。ボタンの色やサイズの変更はもちろん、シェア・コンテンツも自分の好みで設定できます。

まとめ

いかがでしたでしょうか？こんなデザインや機能を自分のサイトにも取り入れてみたい！と思っていたようなこともjQueryプラグインを利用すると、難しいプログラミングなしでセットすることができます。そんな便利なプラグインですが、あれもこれもとプラグインを搭載しすぎると、機能が重複したりしてうまく動作しなかったり、バグが発生する可能性もあるので使い方については注意が必要です。 jQuery プラグインは、使うだけでなく自分でプラグインを作成して、jQUeryの公式サイトでも公開することができますので、将来的には人に使ってもらえるようなプラグインを開発することもイイかもしれませんね。