知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ

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

あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。

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

もくじ

スライドショー

• １．カルーセル（横）
• ２．フェードアウト
• ３．画像と文字をスライド
• ４．文字が遅れて移動する効果
• ５．異なるタイミングを設定できる

ナビゲーション・メニュー

• ６．多階層 ドロップダウンメニュー
• ７．多階層 効果つき
• ８．スマホではドロップダウン
• ９．スマホではセレクトメニューに
• １０．Amazon風 メガドロップダウンメニュー
• １１．横スライド
• １２．アニメーションで下線が付いてくる

パネル

• １３．アコーディオンパネル
• １４．タブパネル
• １５．amazon風 カルーセル

画像関連

• １６．モーダルウィンドウ
• １７．ソート
• １８．ライトボックス
• １９．写真にぼかし
• ２０．画像のサイズを揃える
• ２１．フルスクリーン（画面幅にピッタリ）

テーブル

• ２２．ストライプテーブル
• ２３．ソート テーブル

ドラッグ＆ドロップ

• ２４．フローティングウィンドウ
• ２５．並べ替え＋DBに保存

メールフォーム

• ２６．郵便番号検索
• ２７．チェックされたら送信可能に
• ２８．バリデーション

スクロール系

• ２９．トップへ戻る
• ３０．グローバルナビなどをスクロール時にトップに固定

ニュース・ブログ

• ３１．ソーシャルボタン
• ３２．ニュースティッカー
• ３３．ツールチップ

解析

• ３４．スクロール計測
• ３５．外部リンクのクリック数をカウント

その他

• ３６．スキルグラフ
• ３７．IE アラート
• ３８．動画

スライドショー

１．カルーセル（横）

右から左へ写真を移動させる、よく見かけるスライダー。レスポンシブ対応で自由にカスタマイズ、カルーセルスライダー。おなじみのFLEXSLIDERはフェードとスライドを選択できます。

• カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」 | スターフィールド株式会社
• レスポンシブなコンテンツスライダーのjQueryプラグイン-FLEXSLIDER | memocarilog

２．フェードアウト

軽量ならこれだと思います。モバイル表示での高速化を考えて、軽量であるResponsiveSlides.jsもおすすめです。スライド・フェードの早さはオプションで変更可。一応文字も同時にスライドさせることができます。

• レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js | memocarilog

３．画像と文字をスライド

他に軽量ならjQuery Slider²もあります。divで囲んだdiv要素ごとにスライドさせるという便利なスライダー。文字も一緒にスライドできます。

• div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

４．文字が遅れて移動する効果

色々なスライダーがある中で、見栄え重視ならjQuery Destaque Plugin。文字やアイコンに遅延効果。IE7に対応していたのが嬉しいですね。

• IE7も対応しているパララックスエフェクトのスライダープラグイン「jQuery Destaque」 | NxWorld

５．異なるタイミングを設定できる

目をひかせたいならFractionSliderだと思います。画像だけじゃなくて、複数の要素をタイミングをずらしながら見せることができます。背景も適用OKです。

• スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider | コリス

ナビゲーション・メニュー

６．多階層 ドロップダウンメニュー

レスポンシブでクロスブラウザー（IEは7以降）対応のドロップダウンメニューはFLEXNAVが良い感じでした。スマホにしたときの入れ子構造がとても分かりやすいです。

• ASCII.jp：レスポンシブにも対応したドロップダウン FlexNav｜こうめの“これから使える”jQueryプラグイン

７．多階層 効果つき

デモの一番最後Fold Outは株式会社LIGさんのサイトっぽくナビを作れそうです。

• 水平型の多階層ナビゲーションのアイテムをさまざまなアニメーションで表示するスタイルシート | コリス

８．スマホではドロップダウン

レスポンシブ対応のドロップダウン対応メニュー。入れ子もOKです。Responsive NavはIE６にも対応してます。

• 簡単に設置できるレスポンシブ対応のナビゲーションメニューjQueryプラグイン – Naver | STUDIO BENKEI
• Responsive Nav — Responsive Navigation Plugin

９．スマホではセレクトメニューに

PCでは普通のナビ、スマホではセレクト（ドロップダウンナビ）にしてくれるjQueryプラグイン（TinyNav.js）を使います。軽量な上、スマホ表示の際、スペースを確保できるので重宝します。

• li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js - かちびと.net

１０．Amazon風 メガドロップダウンメニュー

遅延のないAmazon風 メガドロップダウンメニュー。マウスホバーでサブカテゴリを横展開できます。

• Amazonのメガドロップダウンメニューの動作を実現する「jQuery-menu-aim.js」の使い方 | Tips Note
• サンプルイメージ - Ben Kamens

１１．横スライド

スマホサイトでよく見かけるサイドバーを表示したり隠したりするメニュースライダー。

• Sidr - A jQuery plugin for creating side menus
• クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

１２．アニメーションで下線が付いてくる

コーポレートサイトでたまにみかけるので。メニューに下線が遅れてついてくるような効果。

• [作り方] メニューにアニメーションで下線が付いてくる - かちびと.net

パネル

１３．アコーディオンパネル

短いコードでアコーディオン・タブメニューを実装するslideToggleを使った実装方法。短い記述とシンプルなのが嬉しいですね。

• [作り方] "toggle系メソッド"を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG
• [作り方] スマートフォンにも使える、クリックで開くアコーディオンメニュー

１４．タブパネル

情報量が多いポータルサイトなんかで必ず出てくるタブ切り替えのサンプル集。フェードインやスクロール等のアニメーション付き。

• jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions
• [作り方] ASCII.jp：jQueryでタブパネルを作るチュートリアル

１５．amazon風 カルーセル

バナーやちょっとしたコンテンツを並べたパネルを横にスライドさせる見え方を実現。amazonのレコメンドで使われていました。

• [作り方] ASCII.jp：jQuery＋CSSによるカルーセルパネル

画像関連

１６．モーダルウィンドウ

クリックすることにより、子ウィンドウを生成し制御します。こちらはレスポンシブ対応のモーダルウィンドウスクリプト。

• レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal - かちびと.net

１７．ソート

画像などをアニメーション効果をつけて、並べ替えをしてくれるプラグインMixItUp。制作実績のページで、カテゴリ別にソートさせたいときに使えます。

• アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌

１８．ライトボックス

自作で作るライトボックス。画面クリックで閉じるタイプです。もう一つはRWD対応と非対応別のまとめ。

• [作り方] jQueryでlightbox風の画像表示を自作する
• [まとめ] 商用利用可のフリーjQuery Lightboxプラグインまとめ - W3Q

１９．写真にぼかし

コーポレートというよりは、サービス系サイトで使えそうなVague.js。写真にぼかしを入れるプラグイン。ブラウザによっては非対応もありますが、ぼかしを調節できます。

• 試してみよう。背景の要素を自然にぼかす·Vague.js MOONGIFT
• GianlucaGuarini/Vague.js · GitHub

２０．画像のサイズを揃える

高さや横幅がバラバラな写真を、指定サイズに揃え、トリミングもしてくれるというもの。クライアントさんがアップロードした写真を自動で揃えることができそうです。

• 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌

２１．フルスクリーン（画面幅にピッタリ）

背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。

• ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

テーブル

２２．ストライプテーブル

サービスやプランの料金表など、テーブルが必要なページを作るときが必ず出てくると思います。こちらは要素毎に奇数、偶数を数える方法も記載。

• [作り方] jQueryでいろいろな要素をストライプ（縞模様）にする。 | webOpixel

２３．ソート テーブル

テーブルの行をソートできるようにするプラグインの使い方。指定した列と並び順でソートしたり、指定した列のソートを無効にする方法も。

• 指定した条件でテーブルの行を並び替える - tablesorter

ドラッグ＆ドロップ

２４．フローティングウィンドウ

子ウィンドウをドラッグ＆ドロップで移動させる方法。情報を追加して表示したいけど、レイアウトを崩したくないときに。

• [作り方] ASCII.jp：jQueryで自作するフローティングウィンドウ (1/2)｜Web制作の現場で使えるjQuery　UIデザイン入門

２５．並べ替え＋DBに保存

管理画面を作るなら知っておきたいなと。ドラッグ＆ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。

• jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え
• 並び順をデータベースに保存 | hijiriworld Web

メールフォーム

２６．郵便番号検索

入力時のハイフンの有無は関係なく都道府県と住所を分けて、テキストボックスに情報を表示してくれます。

• ajaxzip3
• ajaxzip3 - 郵便番号検索API, JSONP対応 これで郵便番号のメンテナンス作業から解放されます。 - Google Project Hosting
• 郵便番号から住所を補完するjQueryプラグインを作ってみた - けんごのお屋敷

２７．チェックされたら送信可能に

チェックボックスをクリックしないと、送信ボタンをクリックできない状態にできます。

• チェックされたら or 入力されたら送信可能にするボタンを実装する方法 | NxWorld

２８．バリデーション

フォームに数値を入力したときに、ユーザー側で入力ミスを確認させる方法の一つ。ユーザビリティを高めるために。

• ASCII.jp：jQueryでバリデーション付きメールフォームを作ろう (1/3)｜Web制作の現場で使えるjQuery　UIデザイン入門

スクロール系

２９．トップへ戻る

webOpixelさんの以下の記事の一番最初に書いてあるトップへ戻るボタンをフェードして表示する方法が一番使いやすかったなぁと思いました。

• [まとめ] jQueryでスクロールすると表示する系いろいろ | webOpixel
• スクロールで表示されるページトップの実装方法 | NxWorld

３０．グローバルナビなどをスクロール時にトップに固定

最初から上部にあるものを固定する方法はよく見ますが、こちらはページ途中にあるナビゲーションメニューをスクロールで上部に固定する方法。

• ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC

ニュース・ブログ

３１．ソーシャルボタン

ソーシャルボタン（はてブ・ツイッター・フェイスブック）をまとめて設置できるプラグイン。

• ソーシャルボタンを簡単にまとめて設置「jquery.socialbutton」 | リスティング広告の運用代行ならカルテットコミュニケーションズ
• レスポンシブかつフラットなソーシャルボタンを実装できる「rrssb」:phpspot開発日誌

３２．ニュースティッカー

新着情報をティッカーで表示している企業サイトもあったのでご紹介です。最近のお知らせのタイトルなどをティッカーで表示したり。

• [作り方] jQueryを利用した簡単なニュースティッカー
• クールなニュースティッカーを実装できるjQueryプラグイン「Advanced News Ticker」:phpspot開発日誌
• 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」:phpspot開発日誌

３３．ツールチップ

ツールチップ系のまとめ。Tooltipsterはリンクにホバーすると、リンク先の情報をツールチップで表示。

• [まとめ] 吹き出し（ツールチップ）をつけるプラグイン10個 - NAVER まとめ

解析

３４．スクロール計測

LPでも使えると思うので。ユーザーがどれくらいスクロールしているのか、表示される時間はどれくらいかかるのかGAで解析できるScroll Depth。25%・50%・75%・100%で解析表示。

• ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth | コリス

３５．外部リンクのクリック数をカウント

リンクにコードを埋め込み、アナリティクスのイベントトラッキングで外部サイトへのクリック数を確認する方法。

• Google Analyticsで外部リンクのクリック数確認「イベントトラッキング」が変わってた | それだよ。

その他

３６．スキルグラフ

弊社スタッフのある１日のスケジュール、スキルなど円グラフを使って情報を視覚的に見せたいときに使えそうなChart.jsの使い方。

• Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

３７．IE アラート

IE6/7/8等でアクセスすると、IEバージョンアップや他のモダンブラウザのインストールを促すIE Alert js。

• IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js | コリス

３８．動画

背景に動画を入れ、Packのような動画フルスクリーンサイトにする方法。サイトの雰囲気やオフィスの光景などを入れたいときに。ドット画像などを埋め込み、荒れた画質をオシャレに見せる方法など。

• 背景に動画を使ったWebサイトの作り方 | Webクリエイターボックス