jQueryはついつい入れすぎてしまうと途端にサイトが激重になるので注意が必要ですが、JavaScriptよりもコード量が比較的少なく、簡単に実装ができるので非常に便利です。
特にサイトのデザインが大枠で完了したら、簡単に実装できるjQueryで味付けをしても良く、各ライブラリを知っていることで仕様を折込んでデザインすることができるなど、表現の幅も広がります。
そこで今回は、初心者でも実装が簡単で、LPやサイトの味付けによく使うjQueryライブラリまとめについてご紹介しますが、この記事は追加次第適宜更新予定です。
目次
ヘッダーのjQuery
ヘッダー周りはFV(ファーストビュー)にも含まれるので、仕様とデザインはじっくり検討して決めることが多いですが、仕様が決まればjQueryで簡単に実装することが可能です。
スクロールでヘッダーの表示・非表示
特にスマホで、文字量が多めのページや、写真が大きめのデザインで、常時本文のエリアを広く取りながら回遊しやすいサイトを作る時に使っています。
使う時、対象となるヘッダーブロックのheight が大きすぎるとユーザーもびっくりしてしまうので、ヘッダーブロックのサイズ調整も一緒に行う必要があるjQueryです。
jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペット
レスポンシブでアコーディオンになるヘッダー
LPのブロックに、それぞれアンカーで飛ばすメニューを作る時によく使うアコーディオン型のヘッダーです。
子階層があるサイトなど、階層が深くページ数が多数ある場合は、このjQueryは不向きですが、簡単に設置できるので重宝しています。
jQueryのコピペでできるアコーディオンヘッダーのレスポンシブデザインテンプレート
ドロワー
スマホでよく見かけるドロワーを簡単に実装できるjQueryで、メニューに入れ込む量によって、主にこのドロワーとアコーディオン使い分けすることが多いです。
これをベースにして、CSSでデザインを変えることも簡単にできるイケてるjQueryです。
jQueryライブラリDrawerのコピペでできるドロワーメニュー
レイアウトのjQuery
レイアウトは基本CSSで組みますが、お風呂のタイルのような均等なグリッドを作る時など、更新頻度が多く、都度CSSで調整する時が面倒な場合使います。
グリッドレイアウト
イラストや写真などの画像を使って、綺麗なグリッドをCSSで調整せずレスポンシブデザインに対応しようと思った場合、お世話になっているjQueryです。
このタイリングのレイアウトに、CSSの z-index と absoluteを使って色々レイヤーを重ねて使うと色んな表現ができます。
jQueryのコピペでタイル状のグリッドレイアウトができるRect Grid Helper
インタースティシャルなjQuery
トップページ限定や、ユーザーが主体的に見たいと思ってくれた場合に、ストレスにならず、きちんと表示をさせたい場合によく使うjQueryです。
拡大画像をポップアップで表示
単体で使うことはなく、スライダー・カルーセルとセットで使うことが比較的多いjQueryです。
とは言え、最近はスライダー・カルーセルにも標準で拡大して表示させる機能があるので、あまり使わなくなりました。
コピペでできるlightbox2を使ったギャラリーの表示
インタースティシャルとは、メインのコンテンツを覆い隠すように表示されるポップアップ。
いわゆるモーダルで、強制的に表示されてしまう、かなり強制力が強いUIなので、使う時は結構慎重に使うことが適切かどうかを検討しますが、使う場合このjQueryのcookieなしで実装することが多いです。
jQueryのコピペでcookieを使って初回アクセス時にモーダルを表示させるスニペット
YouTubeやvimeoの動画モーダル
モーダルはCSSでも実装できますが、YouTubeやvimeoの動画を組み合わせて動画を再生した場合、動画を停止せずにモーダルを非表示にしても再生が止まりません。
その為、動画をモーダルで表示する場合だ、このjQueryが勝手に制御してくれるので非常に重宝します。
また、フワッと表示される感じでそこまで強い感じがしないのも、GOODなポイントです。
jQueryライブラリmodal-videoのコピペでできるYouTubeやvimeoの動画モーダル
アニメーション系のjQuery
デザインとコーディングが終わり、インタラクティブな味付けによく使うjQueryです。
スクロールでふわっとフェードイン
それぞれのオブジェクトまでスクロールした時、上下左右の方向を任意で指定したアニメーションを付与します。
これは簡単な記述でできてしまうので、デザインの中で強調したい箇所にピンポイントでよく使います。
簡単にできてしまう故、逆に入れすぎてしまうとチラチラしすぎてしまうので適度に使うことが大切です。
jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット
要素を任意の形でアニメーションさせながら表示
ScrollRevealという、jQueryでなくJavaScriptのライブラリですが、必要な記述が少なく、オプションを指定することで様々な動きが可能なのでかなり重宝しています。
非常に簡単にアニメーションをつけることができるので、オススメです。
JavaScriptのScrollRevealを使ったスクロールアニメーション
スライダー・カルーセルのjQuery
限られたスペースで、多少多めのコンテンツブロックを作る時に使うjQueryです。
スライダーの超定番
スライダーUIの超定番ともいえるslickで、細かい動きも指定して制御することができるので、本当にお世話になっているjQueryです。
slickは本当にお世話になっています。
もちろんですが、スマホのスワイプにも対応しています。
jQueryライブラリの定番、slickのコピペでできるスライダー・カルーセル
YouTubeや画像のギャラリースライダー
画像だけでなくYouTubeの動画も簡単にスライダーで表示することができるので、YouTubeと使う場合と、画像をクリックして全画面で表示するUIを実装する場合、このFotoramaをよく使います。
jQueryライブラリFotoramaのコピペでできるYouTubeや画像のギャラリースライダー
縦のスライダー
横型のスライダーが使えない場合に、縦のスライダーが作れます。画像切り替えのポインタの位置と、大きさの調整が必要で、全体感を見ながらCSSをいっぱい追記して使っています。
jQueryのコピペでできる縦にスクロールするスライダー・カルーセルのスニペット
アコーディオンのjQuery
よくある質問など、一つの情報に紐づくコンテンツ量が多い場合によく使うjQueryです。
アコーディオン
よくある質問ページで使うjQueryで、LPでは「不安の解消」を目的に、CTAの直前にこのライブラリで実装することが多いです。
よくある質問ページに使えそうな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のコピペで文字のサイズや色の変更を加えるスニペット
数字をカウントアップしながら表示
Webページに数字をそのまま載せず、数字に動きや装飾をつけたりして違った印象を持ってもらいたい時に使います。
個人的には、2桁程度の数字だと「で、何？」的な感じになるので、3桁以上の数字で使うとハマります。
jQueryのコピペで数字をカウントアップしながら表示するスニペット
文字の置換・削除
静的なページでの実装はそんなに使わないですが、WordPressなどのCMSで使うことが多く、何かの文字を一律で置換・削除できてしまいます。
jQueryのreplace()を使って文字を置換・削除するスニペット3選
フローティングのjQuery
フローティングは位置が固定されているUIです。フローティングのUIはスクロールに応じて追従してくれるので、ユーザーに常時見せたいものがある場合に使います。
フローティングメニュー
比較的昔からあるfloater.jsを使ってフローティングメニューの実装に使います。
メソッドを変更するといろんな挙動を表現できるので便利で、色々な動きを出すのにjquery.easing.jsのjQueryとセットにして使います。
jQueryのコピペでフローティングタイプナビゲーションのスニペット
