ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

  • Posted on
  • Category : Tips
ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

初めてサイトに訪れてくれた人にどのような機能やコンテンツがあるのか紹介をしたり、ちょっとわかりづらいサービスなどでユーザーが戸惑わないよう手助けしたりするのに便利なサイトツアー機能を実装できるスクリプトのまとめです。jQueryプラグインや中にはBootstrapと組み合わせて使用する感じのものもありますが、単体で動くものもあります。大体同じような動きではありますが、単純にヒントを出していくだけのシンプルなものから、オプション・コールバックが豊富に用意されていていろいろ好みにいじれるものまで様々です。

Intro.js

Intro.js

注目させる箇所以外はオーバーレイがかかるようになっているタイプのもので、data属性で表示内容や順番を指定していくスクリプトです。
豊富に用意されているサンプルにあるように、現在の表示をプログレスバーで表示させたり、ツアー終了後に現在見ているページから他のページに移動させたりすることもできます。
ただし、商用利用時はライセンス購入が必要となります。

Crumble

Crumble

円形の吹き出しを使ってツアー表示してくれるjQueryプラグインです。
表示位置や角度などを指定できる他、onSteponStartonFinishといったコールバックオプションも用意されています。

Tourist.js

Tourist.js

見た目はシンプルなサイトツアー用ライブラリですが、オプションが多数用意されているので組み合わせることでいろいろな見せ方が可能です。

jQuery Joyride Plugin

jQuery Joyride Plugin

サイトデザインは凝った感じになっていますが、こちらもシンプルな感じのサイトツアーを表示させるjQueryプラグインです。
同じくオプションはいろいろと用意されており、jQueryでオプションを指定していく方法とdata属性を使っていく方法とがあります。

Trip.js

Trip.js

こちらもパッと見はシンプルなツールチップが表示されるような感じですが、位置指定やハイライト指定をはじめとするオプションが多数用意されています。
また、animate.cssと組み合わせることでbounce・shake・fade・rotateInなど様々なアニメーションでツールチップを表示させることができます。

Bootstrap Tour

Bootstrap Tour

名前の通りBootstrapと一緒に使うサイトツアープラグインですが、それ以外の場合でも使えるよう(本当に使えるかは未検証)です。
オプションも豊富に用意されていますし、Bootstrap好きな方は使ってみると良いかもしれませんね。

Bootstro.js

Bootstro.js

こちらもBootstrapと一緒に使うタイプのプラグインです。

jQuery TourBus

jQuery TourBus

キャプチャの見た目はシンプルなモーダルのようになっていますが、吹き出しにしたり表示位置を調整できたりも可能ですし、オーバーレイとハイライト表示付きの見せ方にできるようになっていたりと、必要そうなのはひと通りオプションが用意されています。

Shepherd

Shepherd

同じく見た目はシンプルですが必要そうなオプションはひと通り用意されており、詳細はページ下部にある「VIEW DOCS」から確認することができます。

TourTip

TourTip

前後の移動や表示・非表示のコールバック、スクロール機能、任意のHTMLを追加など、こちらも必要そうなオプションはひと通り用意されているjQueryプラグインです。

Back to Top

ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。