【コピペで簡単】LPやサイトの味付けによく使うjQueryライブラリまとめ

jQueryのイラスト

jQueryはついつい入れすぎてしまうと途端にサイトが激重になるので注意が必要ですが、JavaScriptよりもコード量が比較的少なく、簡単に実装ができるので非常に便利です。

特にサイトのデザインが大枠で完了したら、簡単に実装できるjQueryで味付けをしても良く、各ライブラリを知っていることで仕様を折込んでデザインすることができるなど、表現の幅も広がります。

そこで今回は、初心者でも実装が簡単で、LPやサイトの味付けによく使うjQueryライブラリまとめについてご紹介しますが、この記事は追加次第適宜更新予定です。

ヘッダーのjQuery

ヘッダー周りはFV(ファーストビュー)にも含まれるので、仕様とデザインはじっくり検討して決めることが多いですが、仕様が決まればjQueryで簡単に実装することが可能です。

スクロールでヘッダーの表示・非表示

特にスマホで、文字量が多めのページや、写真が大きめのデザインで、常時本文のエリアを広く取りながら回遊しやすいサイトを作る時に使っています

使う時、対象となるヘッダーブロックのheight が大きすぎるとユーザーもびっくりしてしまうので、ヘッダーブロックのサイズ調整も一緒に行う必要があるjQueryです。

jQueryのイラスト jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペット

レスポンシブでアコーディオンになるヘッダー

LPのブロックに、それぞれアンカーで飛ばすメニューを作る時によく使うアコーディオン型のヘッダーです。

子階層があるサイトなど、階層が深くページ数が多数ある場合は、このjQueryは不向きですが、簡単に設置できるので重宝しています。

アコーディオンヘッダーのイラスト jQueryのコピペでできるアコーディオンヘッダーのレスポンシブデザインテンプレート

ドロワー

スマホでよく見かけるドロワーを簡単に実装できるjQueryで、メニューに入れ込む量によって、主にこのドロワーとアコーディオン使い分けすることが多いです。

これをベースにして、CSSでデザインを変えることも簡単にできるイケてるjQueryです。

ドロワーメニューのイラスト jQueryライブラリDrawerのコピペでできるドロワーメニュー

レイアウトのjQuery

レイアウトは基本CSSで組みますが、お風呂のタイルのような均等なグリッドを作る時など、更新頻度が多く、都度CSSで調整する時が面倒な場合使います。

グリッドレイアウト

イラストや写真などの画像を使って、綺麗なグリッドをCSSで調整せずレスポンシブデザインに対応しようと思った場合、お世話になっているjQueryです。

このタイリングのレイアウトに、CSSの z-indexabsoluteを使って色々レイヤーを重ねて使うと色んな表現ができます。

グリッドレイアウトのイラスト jQueryのコピペでタイル状のグリッドレイアウトができるRect Grid Helper

インタースティシャルなjQuery

トップページ限定や、ユーザーが主体的に見たいと思ってくれた場合に、ストレスにならず、きちんと表示をさせたい場合によく使うjQueryです。

拡大画像をポップアップで表示

単体で使うことはなく、スライダー・カルーセルとセットで使うことが比較的多いjQueryです。

とは言え、最近はスライダー・カルーセルにも標準で拡大して表示させる機能があるので、あまり使わなくなりました。

lightboxのイラスト コピペでできるlightbox2を使ったギャラリーの表示

cookieでモーダルを表示

インタースティシャルとは、メインのコンテンツを覆い隠すように表示されるポップアップ。

いわゆるモーダルで、強制的に表示されてしまう、かなり強制力が強いUIなので、使う時は結構慎重に使うことが適切かどうかを検討しますが、使う場合このjQueryのcookieなしで実装することが多いです。

クッキーのイラスト jQueryのコピペでcookieを使って初回アクセス時にモーダルを表示させるスニペット

YouTubeやvimeoの動画モーダル

モーダルはCSSでも実装できますが、YouTubeやvimeoの動画を組み合わせて動画を再生した場合、動画を停止せずにモーダルを非表示にしても再生が止まりません。

その為、動画をモーダルで表示する場合だ、このjQueryが勝手に制御してくれるので非常に重宝します。

また、フワッと表示される感じでそこまで強い感じがしないのも、GOODなポイントです。

モーダルウィンドウのイラスト jQueryライブラリmodal-videoのコピペでできるYouTubeやvimeoの動画モーダル

アニメーション系のjQuery

デザインとコーディングが終わり、インタラクティブな味付けによく使うjQueryです。

スクロールでふわっとフェードイン

それぞれのオブジェクトまでスクロールした時、上下左右の方向を任意で指定したアニメーションを付与します。

これは簡単な記述でできてしまうので、デザインの中で強調したい箇所にピンポイントでよく使います

簡単にできてしまう故、逆に入れすぎてしまうとチラチラしすぎてしまうので適度に使うことが大切です。

jQueryのイラスト jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット

スライダー・カルーセルのjQuery

限られたスペースで、多少多めのコンテンツブロックを作る時に使うjQueryです。

スライダーの超定番

スライダーUIの超定番ともいえるslickで、細かい動きも指定して制御することができるので、本当にお世話になっているjQueryです。

かかかず
かかかず

slickは本当にお世話になっています。

もちろんですが、スマホのスワイプにも対応しています。

slickのイラスト jQueryライブラリの定番、slickのコピペでできるスライダー・カルーセル

YouTubeや画像のギャラリースライダー

画像だけでなくYouTubeの動画も簡単にスライダーで表示することができるので、YouTubeと使う場合と、画像をクリックして全画面で表示するUIを実装する場合、このFotoramaをよく使います

Fotoramaのイラスト jQueryライブラリFotoramaのコピペでできるYouTubeや画像のギャラリースライダー

縦のスライダー

横型のスライダーが使えない場合に、縦のスライダーが作れます。画像切り替えのポインタの位置と、大きさの調整が必要で、全体感を見ながらCSSをいっぱい追記して使っています。

縦のスライダーのイラスト jQueryのコピペでできる縦にスクロールするスライダー・カルーセルのスニペット

アコーディオンのjQuery

よくある質問など、一つの情報に紐づくコンテンツ量が多い場合によく使うjQueryです。

アコーディオン

よくある質問ページで使うjQueryで、LPでは「不安の解消」を目的に、CTAの直前にこのライブラリで実装することが多いです。

アコーディオンのイラスト よくある質問ページに使えそうなjQueryのアコーディオンUI

テーブルのjQuery

テーブルにソート機能を追加

tableタグを使って、表組みのテーブルレイアウトで使うjQueryで、列数が多く左端にNo1・No2などのナンバリングがある場合によく使うjQueryです。

このナンバリングがない場合に実装すると、なんだかよく分からないソートがかかってしまうので、その場合にソート機能は付けない方が逆に親切な気がします。

テーブルレイアウトのアイキャッチ コピペでできるテーブルにソート機能を実装するjQueryライブラリtablesorter

棒グラフのjQuery

グラフはjQueryを使い実装することは少なく、イラストレーターの画像で作ってしまうことが多いですが、ごく稀に使います。

横棒のグラフ

棒グラフはCSSだけでも実装することができますが、ソースになる数値が変わった場合、CSSを色々書き換える必要があり面倒です。

そこでjQueryを使うと簡単に更新ができ、動きもつくので重宝しています。

グラフのイラスト HTMLとCSSのコピペでできる横棒グラフ