Edited at

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

More than 1 year has passed since last update.

こちらはウェブクルー 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さんになります。

宜しくお願いします。