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のコピペでできるスクロールでふわっとフェードインさせるスニペット
スライダー・カルーセルの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
テーブルにソート機能を追加
tableタグを使って、表組みのテーブルレイアウトで使うjQueryで、列数が多く左端にNo1・No2などのナンバリングがある場合によく使うjQueryです。
このナンバリングがない場合に実装すると、なんだかよく分からないソートがかかってしまうので、その場合にソート機能は付けない方が逆に親切な気がします。
コピペでできるテーブルにソート機能を実装するjQueryライブラリtablesorter
棒グラフのjQuery
グラフはjQueryを使い実装することは少なく、イラストレーターの画像で作ってしまうことが多いですが、ごく稀に使います。
横棒のグラフ
棒グラフはCSSだけでも実装することができますが、ソースになる数値が変わった場合、CSSを色々書き換える必要があり面倒です。
そこでjQueryを使うと簡単に更新ができ、動きもつくので重宝しています。
HTMLとCSSのコピペでできる横棒グラフ
