インターネットビジネス最新情報ポータル IBNIP

Webデザイナーなら知っておきたい!おすすめのjQuery35選!

jQuery は、JavaScriptのライブラリの一種で、短いコードでJavaScriptを扱えるため、面倒な長いコードの記述を簡略化することができます。

jQueryを活用することで、Webデザインの効率を飛躍的に高め、Webページのクオリティも手軽に上げることができます。

特に初心者Webデザイナーは、jQueryの知識は是非持っておきたいところです。

デザイン、レイアウト、グラフなど、様々な場面で役立つおすすめのjQuery35選をご紹介します。

アニメーションに役立つjQuery 5選

1. anime.js

http://animejs.com/

記述の簡単さと軽量さが人気です。特にデータの軽さが重視されるスマートフォン向けのページのアニメーション制作に役立ちます。

2. jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/

jQueryの動作にエフェクトを付けられるプラグインです。32種類ものエフェクトを利用できるので、アニメーション描画の幅が広がります。

3. jAnimate

https://github.com/renatorib/janimate

シンプルな記述で手軽にフリップやバウンスなどのアニメーションが実装できるプラグインです。手軽に見栄えの良いアニメーション表現をしたいときに役立ちます。

4. TweenMax

https://greensock.com/docs/TweenMax

複雑なアニメーションの表現に長けており、高速な描画も可能なjavascriptアニメーションライブラリです。jQueryがなくても動きますが、jQueryを読み込んでおくと使い勝手が上がります。

5. Animsition

http://git.blivesta.com/animsition/

Webページの読み込みの際に、様々なアニメーション表示ができるプラグインです。使用できるエフェクトも豊富で、18種類の中から好きなものを選べます。

レイアウトに役立つjQuery 6選

1. multiscroll.js

https://alvarotrigo.com/multiScroll/

画面を縦方向に分割して、それぞれをスクロールできるようにするプラグインです。大胆なレイアウトで、スタイリッシュな効果を得られます。

2. Masonry

https://masonry.desandro.com/

レスポンシブ対応のグリッドレイアウトができる有名なプラグインです。可変レイアウトを手軽に実装できる上、オプションも充実していて、カスタマイズの自由度も高いです。

3. Freewall

https://kombai.github.io/freewall/

クロスブラウザ対応のグリッドレイアウト作成用プラグインです。アニメーション効果の付いたレイアウトを作成できるので、手軽に見栄えのする動的レイアウトを構築できます。

4. Gridster.js

http://dsmorse.github.io/gridster.js/

Gridsterは、ドラッグ・アンド・ドロップだけでレイアウトを構成できるプラグインです。直感的な操作で利用できるため、扱いやすさは抜群です。

5. jquery.heightLine.js

http://blog.webcreativepark.net/2013/10/21-112000.html

複数のブロックレベル要素の高さを揃えて、見た目を整えるのに役立つプラグインです。ブロックの高さを整えるのは、CSSだけでは変更できないため、見やすいレイアウトを作るのに便利です。

6. jquery.columns

https://github.com/elclanrs/jquery.columns

レスポンシブ対応のレイアウトを構築するのに役立つプラグインです。スマートフォンのレイアウトにも対応しており、画面サイズを変えるだけで、画像やフォントなどもスムーズに変更できる手軽さが人気です。

グラフ・チャート製作に役立つjQuery 5選

1. Chart.js

http://www.chartjs.org/

グラフやチャート関連の中でも、最も知名度の高いプラグインです。レスポンシブに対応しており、描画できるグラフの種類も豊富です。グラフがアニメーション表示されるので、見栄えの良さも抜群です。

2. Canvas.js

https://canvasjs.com/

数あるグラフ系のプラグインの中でも、記述の簡単さで支持を集めています。数行のコードを書くだけでグラフが作成できますが、パラメーターが豊富なので、細かいカスタマイズも可能です。

3. Google Charts

https://developers.google.com/chart/

Google製のjQueryプラグインで、機能の豊富さが自慢です。基本的なグラフはもちろん、Geochartを利用して分布図を作ることもできるなど、カスタマイズ性が非常に高いです。リアルタイム表示やインタラクティブ表現なども可能で、手軽にWebページのクオリティを上げられます。

4. OrgChart

https://github.com/dabeng/OrgChart

組織図や階層図を作るのに役立つプラグインです。決められたデータソースから手軽に作図できて、デザインもシンプルです。jQuery3系のみの動作ですが、使い勝手の良さで、Google Chartsよりこちらを選ぶWebデザイナーも多いようです。

5. jQPlot

http://www.jqplot.com/

canvasを利用して、様々なグラフを描画できるプラグインです。ズームや色の変更などのオプションも豊富で、視覚的にわかりやすいグラフやチャートを生成できます。

フォーム作成に役立つjQuery 5選

1. ArtDesign Radio CheckBox

https://plugins.jquery.com/jQuery-ArtDesign-Radio-CheckBox/

画像を使ったチェックボックスとラジオボタンが作成できます。明るい色と暗い色のパーンが用意されており、自分のWebサイトに合わせてデザインが決められます。

2. jQuery Raty

https://github.com/wbotelhos/raty

投票用機能を実装できるプラグインです。レーティングなどに便利な星形の投票を付けられます。実装の難易度も低く、小数点以下の評価を反映できる機能なども付いています。

3. Card

https://jessepollak.github.io/card/

ショッピングサイトなどで、クレジットカードの入力フォームを作るのに役立つプラグインです。わずか1行のコードの記述で、シンプルなカード情報入力フォームが完成します。Mastercard、Visa、Discover、American Expressのカードイメージを表示してくれる点もユニークです。

4. Date Selector

https://github.com/nicolaszhao/dateselector

日付を選ぶタイプのセレクトボックスが作成できます。「年」「月」「日」の範囲を細かく設定できるオプションもあり、シンプルながら汎用性の高いツールです。

5. WeekLine

https://github.com/dkLtd/weekLine

曜日を選ぶセレクトボックスを作成できるプラグインです。Date Selectorと併せて使うことで、日付入力のフォームが簡単に作成できます。オプションで欧文表記にできるなど、細かい設定も可能です。

検索ツール作成に役立つjQuery 4選

1. Advanced Search Form

https://codyhouse.co/gem/advanced-search-form/

Webページに検索窓を付けられるプラグインです。よく読まれている記事などのサジェスト候補が表示できるなど、オプションも充実しています。

2. HideSeek

http://vdw.github.io/HideSeek/

検索用プラグインの中でも、自由度の高さで人気です。検索用語のハイライト表示をはじめ、検索に役立つ様々なオプションがあります。

3. Animated Search Filter Plugin

https://github.com/bendc/search-filter

検索窓を表示するだけでなく、入力するとアニメーションでサジェスト表示が出る便利なプラグインです。簡単なコードで使いやすく見栄えの良いツールを実装できます。フィルターも利用できるので、検索ツールとしても優秀です。

4. QuickSerach

https://github.com/DeuxHuitHuit/quicksearch

テーブルやリストからデータを読み込んで検索できるプラグインです。テーブルに適用する点や、日本語にもしっかり対応している点が便利です。

ページデザインに役立つjQuery 5選

1. jScrollPane.js

http://jscrollpane.kelvinluck.com/

スクロールバーのデザインを変えられるプラグインです。パラメーターを指定したり、CSSを変更することで、サイトのデザインに合わせたおしゃれなスクロールバーに変更できます。

2. customSelect.js

http://adam.co/lab/jquery/customselect/

セレクトフォームのデザインを変えられるプラグインです。画像を用意すれば、好きなデザインにセレクトフォームを変更できます。目立たない部分ですが、デザインを変更することで、ページの統一感を出すのに役立ちます。

3. rowGrid.js

http://brunjo.github.io/rowGrid.js/

画像のバランスを揃えて、グリッド表示するためのプラグインです。画像の高さを揃える必要がありますが、余白を自動的に最適化してくれるため、整頓された画像配置のデザインが作れます。

4. ZooMove

http://thompsonemerson.github.io/zoomove/

マウスオーバーで、画像を拡大できるプラグインです。ネットショップなどで、商品の一部を拡大して見せたい時に役立ちます。

5. Tabslet

https://github.com/vdw/Tabslet

Webページ内に、手軽にタブを設置できるプラグインです。クロスブラウザ対応で、数行のコード記述のみで軽量のタブを実装できます。

ちょっとした小技に役立つjQuery 5選

1. Rippleria

http://nsept.github.io/rippleria/

画面をクリックやタップすることで、波紋のエフェクトを表示させるプラグインです。実装が手軽で軽量というメリットがありながら、視覚的に優れた効果を発揮することができます。

2. monthly.js

https://github.com/kthornbloom/Monthly

ページ内にカレンダーを作成できるプラグインです。レスポンシブ対応のため、どんなデバイスでもシンプルなカレンダーを表示させることができます。日本語化も簡単で、様々な使い道があります。

3. Vide.js

http://vodkabears.github.io/vide/

Webページの背景を動画にできるプラグインです。背景全面で動画を再生できるため、ダイナミックな視覚効果を得られます。

4. jQuery WebTicker

https://maze.digital/webticker/

画面上に、ニュースや最新情報などのお知らせを流すのにぴったりのプラグインです。テキストや画像が横に流れるティッカーを作ることができます。

5. jQuery Knob

http://anthonyterrien.com/knob/

一般的な棒状ではなく、円形のスライダーを作成できるプラグインです。CSSを使えばさらに見た目の自由度が変更できます。ちょっと変わったスライダーのデザインにおすすめです。

まとめ

今回は、ジャンルごとに使えるおすすめのjQueryをご紹介しました。jQueryをうまく活用することで、Webサイトのクオリティは大幅に向上します。

実装も手軽なものばかりなので、Webデザイナーは初心者のうちからでも積極的にjQueryを取り入れていくのがおすすめです。

ただし、jQueryを多用し過ぎると、リクエストが発生して処理に時間がかかるなどのデメリットもあります。

メリットとデメリットのバランスをとりつつ、jQueryを適切に使っていくことが大切です。

[記事公開日]2018.07.29
[最終更新日]2018.10.04
[ライター]首藤