サイトをリッチにするjQueryライブラリの紹介

こちらはウェブクルー Advent Calender 2017の21日目の記事です。
昨日は、@da-shiさんの「RailsAdminを使ってみた」でした。

はじめに

サイトをリッチにすることで何がしたいのかといいますと
・ コンバージョン率を上げたい
・ 直帰率、離脱率を下げたい
上記を改善する案としてユーザーへわかりやすく、直感的にさり気なく伝えることが課題にになります。
他にもいろいろ原因はあってリッチにすることも原因だったりするのですが
ここではユーザーの目にとまるような動きを付けたりすることができるjQueryライブラリを紹介したいと思います。

通知系

• iziToast
  様々な用途で使えるリッチな通知パネルが用意されています

• alertifyjs
  様々な用途で使える見栄えの良い通知パネルが用意されています

• Intro.js
  ページのチュートリアルを簡単に作成できます

• Push.js
  ブラウザからのプッシュ通知を作成できます

モーダル系

• iziModal
  様々な用途で使えるリッチなモーダルが用意されています

• Modaal
  アクセシビリティの高いモーダルを作成できます

スクロール系

• Barba.js
  シームレスなページ遷移を実現できます

• Scrollify
  セクションこどのスムーズなスクロールを実現できます

• Infinite Scroll
  無限スクロールを簡単に実装できます

チャート・グラフ系

• Highcharts
  様々な用途で使えるリッチなチャートやグラフが用意されています

• Chart.js
  軽単にチャートやグラフを作成できます

アニメーション系

• anime.js
  軽量なうえ簡単にアニメーションが作成できます

• p5.js
  ビジュアルプログラミングができます

まとめ

現状のサイトが何を伝えたいのか何が足りないのかを把握し、
補う機能として紹介したライブラリで課題解決ができればと思います。
しかしリッチにすることでパフォーマンスが落ち直帰率・離脱率が上がる懸念もありますので注意してください。
各ライブラリですが利用前に無料、有料、商用利用の可否などライセンスの確認をしてください。
実装方法もライブラリにより違いますのでその辺りは各ライブラリのドキュメントをお読みください。
実用的なライブラリはまだまだたくさんありますので用途に合わせて探してみてください。
より良いサイトにするために頑張りましょう。

明日の担当は@wc_tanaka_rinさんになります。
宜しくお願いします。