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

jQueryのイラスト

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

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

関連記事 【初心者向】jQueryの基本的な知識と特徴

そこでこの記事では、初心者でも実装が簡単で、LPやサイトの味付けによく使うjQueryライブラリまとめについてご紹介します。

随時更新中の記事です。

この記事は、記事追加次第それに応じて更新しています。

目次

ヘッダーのjQuery

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

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

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

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

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

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

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

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

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

ドロワー

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

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

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

スクロールしたら上部に固定

ページを下部にスクロールしていき、ファーストビュー下にあるメニューエリアを通過すると、上部にそのメニューが固定表示。

よくLPとかで使うスクロール系のjQueryです。

jQueryのイラスト jQueryのコピペでスクロールしたら上部に固定させるスニペット

一定量スクロールしたらアニメーションして上部に固定

上記のスニペットに近いスニペットですが、こちらは上部から下に落ちてくるようなアニメーションで、その後上部に固定表示します。

ヘッダーのアニメーション jQueryのコピペでヘッダーにアニメーションをつけて固定表示させるスニペット

レイアウトの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ライブラリFancyboxです。

簡単なので、このライブラリを使うことが最近多いです。

Fancyboxのイラスト jQueryライブラリFancyboxのコピペでできる画像や動画のモーダル

スクロールしてYouTubeが表示されると自動で再生

YouTube Inview Autoplayは、ページ内に埋め込んだYouTubeの動画がウィンドウ内に表示されると、自動的に再生・停止するjQueryプラグインです。

ウィンドウ内に動画が入ると再生されるので、ユーザーが再生しなくても一番最初から見て欲しい時など、スクロールを挟んで見せたいYouTubeの動画がある時に役立ちます。

jQueryライブラリYouTube Inview AutoplayでYouTube動画がウィンドウ内に表示されたら自動で再生を開始

アニメーション系のjQuery

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

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

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

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

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

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

要素を任意の形でアニメーションさせながら表示

ScrollRevealという、jQueryでなくJavaScriptのライブラリですが、必要な記述が少なく、オプションを指定することで様々な動きが可能なのでかなり重宝しています。

非常に簡単にアニメーションをつけることができるので、オススメです。

JavaScriptのイラスト JavaScriptのScrollRevealを使ったスクロールアニメーション

jQuery無しでスクロールアニメーション

LPのシングルページにわざわざjQueryを読み込ませるのはサイト自体のサイズも多少増えてしまうので、その場合はこのAOSというJavaScriptのライブラリを使っています。

JavaScriptを色々と書く必要がなく、簡単に実装ができてしまいます。

jQuery無しでスクロールアニメーションを実装できるJavaScriptライブラリAOS

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

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

スライダーの定番 slick

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

かかかず
かかかず

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

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

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

slickはカスタマイズもパラメータででき、本当に便利なjQueryライブラリです。

この記事では、そんなslickを使って、要素の高さを揃えて表示させる方法とデザインについて解説しています。

jQueryライブラリslickの要素の高さを揃えて表示させるデザインスニペット

jQuery不要のスライダー Swiper

スライダー・カルーセルUIの超定番とも言えるSwiper.jsです。jQueryスライダーの分類に入れてしまっていますが、このライブラリは、jQuery不要で実装できます

カスタマイズも容易なのも非常に嬉しいところです。

Swiperのイラスト スライダーの超定番ライブラリSwiper.jsの基本と使い方

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

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

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

縦のスライダー

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

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

アコーディオンのjQuery

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

アコーディオン

よくある質問ページで使うjQueryです。また、カスタマイズもしやすく、LPでは「不安の解消」を目的に、CTAの直前に実装することが多いUIです。

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

テーブルのjQuery

HTML4でよく使われていたtable タグに挙動を加えるjQueryです。

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

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

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

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

棒グラフのjQuery

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

横棒のグラフ

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

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

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

目次を作るjQuery

特にブログで、h2 などのタグを指定して目次を作ってくれるjQueryです。WordPressではプラグインで対応できますが、それ以外でも使えるので便利です。

タグを指定した目次の生成

HTMLはすごくシンプルで、jQueryのカスタマイズも容易なので使いやすいライブラリです。

目次を作るイラスト jQueryを使ってWordPressのプラグインなしでTOC+風の目次を実装するスニペット

文字を装飾・変更するjQuery

ページ内のテキストのサイズや色を変えたり、文字数を短縮させたりするjQueryです。

指定の文字数に短縮

文字数を制限したい時に指定の文字数に短縮して、その末尾に文字を入れるjQueryです。

WordPressのタイトルを関数を使わず動的に出力させて、文字数を短縮させたい時に使ったりします。

jQueryのコピペで指定の文字数に短縮して、その末尾に文字を入れるスニペット

テキストを一文字づつサイズや色を変更

1文字ずつ異なる文字色や、サイズを変更して表示ができるjQueryのコードです。

WordPressの日付箇所をいじる時によく使っているスニペットで、コードがシンプルなのでカスタマイズも容易で非常に使いやすいです。

jQueryのテキスト装飾のイラスト jQueryのコピペで文字のサイズや色の変更を加えるスニペット

数字をカウントアップしながら表示

Webページに数字をそのまま載せず、数字に動きや装飾をつけたりして違った印象を持ってもらいたい時に使います。

個人的には、2桁程度の数字だと「で、何?」的な感じになるので、3桁以上の数字で使うとハマります。

タイマーのイラスト jQueryのコピペで数字をカウントアップしながら表示するスニペット

文字の置換・削除

静的なページでの実装はそんなに使わないですが、WordPressなどのCMSで使うことが多く、何かの文字を一律で置換・削除できてしまいます。

jQueryの置換削除のイラスト jQueryのreplace()を使って文字を置換・削除するスニペット3選

複数の文字列や要素を置換・削除

こっちは、複数の文字列や要素を置換。そして削除するスニペットです。

元ネタの文字列を直接変更することができない状態で、表示させる側で文字列を置換・削除したい場合に使っています。

jQueryの文字置換 jQueryのコピペで複数の文字列や要素を置換・削除するスニペット

フローティングのjQuery

フローティングは位置が固定されているUIです。フローティングのUIはスクロールに応じて追従してくれるので、ユーザーに常時見せたいものがある場合に使います。

フローティングメニュー

比較的昔からあるfloater.jsを使ってフローティングメニューの実装に使います。

メソッドを変更するといろんな挙動を表現できるので便利で、色々な動きを出すのにjquery.easing.jsのjQueryとセットにして使います。

jQueryのコピペでフローティングタイプナビゲーションのスニペット

ページ切り替え時のアニメーション

ページ内のコンテンツ量が多く、ページ遷移のアクセントに使うローディングアニメーションです。

ローディングアニメーション8種

8種類の中から、簡単なコピペで実装できるローディングアニメーションです。

CSSの色味変更が簡単で、トンマナも合わせやすいのでページコンテンツが多めの時に使ってます。

個人的には「大きめの円がグルグル」回るのを使っています。

ローディングアニメーションのイラスト HTMLとCSSのコピペでできるローディングアニメーション8種

JavaScriptのローディングアニメーション

JavaScriptでできるローディングアニメーションです。

jQueryではなく、JavaScriptなのでjQueryの記述が不要なので簡単です。

Javaローディングのイラスト Javascriptのコピペでできるページ切り替え時に丸がグルグル回るローディングアニメーション

カスタマイズがしやすいローディングアニメーション

画像や、CSSのカスタマイズがしやすいローディングアニメーションです。

汎用性が高いので、レンダリングに時間がかかる場合に使っています。

ローディングアニメーション jQueryのコピペでできるページ切り替え時のローディングアニメーション

14種から選べるプログレスバー

PACEは、そんなプログレスバーをHTMLを記述することなく、jsとCSSのコピペだけで実装できてしまう、超優れ物です。

全14種類のテーマをコピペするだけで使うことができるので、重宝しています。

プログレスバーのイラスト JavaScriptライブラリPACEのコピペでできるプログレスバー

JSONをいじるjQuery

おなじみJSONのデータを取得して整形するjQueryです。

単一のページでコンテンツを切り替える「SPA(シングルページアプリケーション)」のように運用もできてしまいます。

WP REST API

WP REST APIは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。

WP REST APIを使うことで、他のサイトの記事の情報を取得して表示することができます。

WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力

ページネイションのjQuery

ページネイションは、ページ内の文字やコンテンツが多い場合に使われる「ページ送り」等呼ばれるもので、ページを複数のページに分割します。

そんなページネイションが可能なjQueryです。

簡単に実装できるpaginathing.js

それぞれに分けられたページは、別途URLが別になったりせずに生成されるので、cannonical でURLの適正化もする必要がありません。

paginathing.js はそんな煩わしさがなくできる超便利なライブラリです。

jQueryライブラリpaginathing.jsのコピペでできるページネイションのスニペット

「もっと見る」ボタンクリックで要素を展開

ページネイションとは異なり、複数のページに分割はしませんが、要素を指定した数量に分け表示・非表示を行うので、この分類にしています。

以下のスニペットは、ググった時の検索結果のようなものを最初は一部表示させ、それ以降の内容については「もっと見る」で少しずつ表示させます。しかも結構簡単に実装できます。

jQueryのもっと見る 「もっと見る」ボタンクリックで要素を展開するjQueryのスニペット
カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影