見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ

• 作成：2014/05/7
• 更新：2014/11/01
• Web制作 >

ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

メニュー

• １．フィーチャーリスト
• ２．スティッキーヘッダー

画像エフェクト

• ３．マウスオーバーで画像にキャプション
• ４．イメージビューア
• ５．ズームインエフェクト
• ６．ブラーエフェクト

スクロール

• ７．Infinite Scroll(無限スクロール)
• ８．画像シーケンス
• ９．横スクロール
• １０．フリック機能

レイアウト

• １１．画面全体に写真
• １２．フロートボックスを詰めて表示

フォーム

• １３．ダイアログ
• １４．バリデーション
• １５．確認画面

メニュー

１．フィーチャーリスト

コーポレートサイトでよく見かける横タブメニューはこちらを使うと簡単に実現できます。キャプションが変わったあとに画像が変わるエフェクト。ニュースや新着情報などに。

• jQuery Image Rotator with Descriptions - DesignM.ag

２．スティッキーヘッダー

ウィンドウのスクロールに応じてヘッダーを移動させるスティッキーヘッダー。どれだけページが長くなっても、ウェブページの上部に検索フォームやナビゲーション・メニューを配置されるので、例えばナビをおけばいつでもページ遷移ができるようになります。以下はclingifyの使い方。

• ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify | コリス

画像エフェクト

３．マウスオーバーで画像にキャプション

写真にマウスオーバーすると、テキストをかぶせてくれるMosaic。企業サイトだけでなく、様々なサイトで見かけるようになりました。ギャラリーページにちょっとした工夫を凝らしたいときに、これを使えば見栄えが随分よくなります。

• jQuery | マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

４．イメージビューア

サムネイル画像をクリックしたら画像が切り替わるイメージビューア。こちらは下にある画像をクリックするとフェードしながら画像を差し替えるというもの。シンプルなので使いやすいですね。

• jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法 | BlackFlag

５．ズームインエフェクト

ECサイトによくみられる商品画像や写真をマウスホバーすると拡大されるズームインエフェクト。一つは画像の一部をズームアップできるjQueryプラグインjqZoom。省スペースで画像をすっきり見せたいときに使いたいですね。もう一つはjQueryプラグインまとめで様々なパターンが用意されています。

• 画像の一部をズームアップできるjQueryプラグイン「jqZoom」: 小粋空間
• 画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room

６．ブラーエフェクト

いわゆるボカシ効果を入れるプラグインblur.js。背景をベースにブロックに対してぼかしがかかった画像を設定します。

• 背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」:phpspot開発日誌

スクロール

７．Infinite Scroll(無限スクロール)

ブラウザのスクロールに対応しコンテンツを表示していくinfinite scroll（無限スクロール)。下部まで移動すると次のページを表示してくれるプラグイン。ページ遷移を行うことなく大量のコンテンツをユーザーに提供できます。無限スクロールはTwitterやFacebookなどのサービスで使われていますね。

• ASCII.jp：Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
• Infinite Scroll | jQuery plugin, WordPress plugin

８．画像シーケンス

画像シーケンスは映像を複数の連続した画像に分け、マウスホイールすると画像が動いているように見せる手法。通常は連続した画像を１箇所に重ねて配置し、１点以外を非表示にします。

• スクロールに合わせて静止画を切り替えるjQueryプラグイン – jQuery.mpic | JLINE.create();

９．横スクロール

サイト全体を横や縦にスクロールさせる方法や、簡単に効果を付与できるjQueryプラグインまとめ。

• jQueryで横スクロールのアニメーションするサイトを作る方法 | Webロケッツマガジン

１０．フリック機能

スマートフォンで使われるフリック機能を実装するならjQuery.flickSimple.jsがおすすめです。iPhone/Android/PCのブラウザ対応で縦フリック、自動スライドもあり。flipsnap.jsもフリック操作のスライドを作れます。

• iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン - makogの日記
• flipsnap.jsというのを書いた - Webtech Walker

レイアウト

１１．画面全体に写真

写真をトップページのブラウザいっぱいに表示するデザインを作るならこちら。bgStretcherもよいと思ったんですが有料になってましたね。

• jQueryで背景画像を全画面表示する | webOpixel

１２．フロートボックスを詰めて表示

隙間なくボックスを敷き詰めていくレイアウトも多くみるようになりましたが、Masonryを利用することで簡単に作ることができます。各ボックスのサイズを取得後絶対配置で並び替える処理をしてくれます。

• Pinterest風のデザインを実装する「jQuery Masonry」を試してみた｜WEB Drawer

フォーム

１３．ダイアログ

最近はフォームがポップアップで表示されるサイトも多くなってきました。こちらはjQuery UIのDialogでメッセージを表示する方法。

• jQuery UI の Dialog プラグインのダイアログを使ったフォーム
• jQuery UIのDialogでメッセージやフォームをダイアログ表示

１４．バリデーション

ECサイトや会員登録時に見られるフォームで、入力内容に不備がないかチェックするバリデーション。フォームに入力したデータの簡単なチェックをしたいときに。

• [JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta | コリス

１５．確認画面

フォーム入力の確認画面を生成するプラグイン。

• フォームの確認画面を自動生成するjQueryプラグイン autoConfirm.js-14時の間食