初めてサイトに訪れてくれた人にどのような機能やコンテンツがあるのか紹介をしたり、ちょっとわかりづらいサービスなどでユーザーが戸惑わないよう手助けしたりするのに便利なサイトツアー機能を実装できるスクリプトのまとめです。
大体同じような動きではあるものの単純にヒントを出していくだけのシンプルなものから、オプション・コールバックが豊富に用意されていていろいろ好みにいじれるものまで様々です。
ただし、単体で動くものもありますが、jQueryプラグインや中にはBootstrapと組み合わせて使用する感じのものもあるのでその点は注意してください。
Intro.js
注目させる箇所以外はオーバーレイがかかるようになっているタイプのもので、data属性で表示内容や順番を指定していくスクリプトです。
豊富に用意されているサンプルにあるように、現在の表示をプログレスバーで表示させたり、ツアー終了後に現在見ているページから他のページに移動させたりすることもできます。
ただし、商用利用時はライセンス購入が必要となります。
Crumble
円形の吹き出しを使ってツアー表示してくれるjQueryプラグインです。
表示位置や角度などを指定できる他、onStep, onStart, onFinishといったコールバックオプションも用意されています。
Tourist.js
見た目はシンプルなサイトツアー用ライブラリですが、オプションが多数用意されているので組み合わせることでいろいろな見せ方が可能です。
jQuery Joyride Plugin
サイトデザインは凝った感じになっていますが、こちらもシンプルな感じのサイトツアーを表示させるjQueryプラグインです。
同じくオプションはいろいろと用意されており、jQueryでオプションを指定していく方法とdata属性を使っていく方法とがあります。
Trip.js
こちらもパッと見はシンプルなツールチップが表示されるような感じですが、位置指定やハイライト指定をはじめとするオプションが多数用意されています。
また、Animate.cssと組み合わせることでbounce, shake, fade, rotateInなど様々なアニメーションでツールチップを表示させることができます。
Bootstrap Tour
名前の通りBootstrapと一緒に使うサイトツアープラグインですが、それ以外の場合でも使えるよう（本当に使えるかは未検証）です。
オプションも豊富に用意されていますし、Bootstrap好きな方は使ってみると良いかもしれませんね。
Bootstro.js
こちらもBootstrapと一緒に使うタイプのプラグインです。
jQuery TourBus
キャプチャの見た目はシンプルなモーダルのようになっていますが、吹き出しにしたり表示位置を調整できたりも可能ですし、オーバーレイとハイライト表示付きの見せ方にできるようになっていたりと、必要そうなのはひと通りオプションが用意されています。
Shepherd
同じく見た目はシンプルですが必要そうなオプションはひと通り用意されており、詳細はページ下部にある「VIEW DOCS」から確認することができます。
