直感的に操作できるサイトツアーを実装できるライブラリまとめ

 
ある金融系サイトのインターフェイス操作ガイドで直感的に操作フローを案内する方法があったので、調べてみたらステップ形式で解説・説明できるチュートリアル・サイトツアーのライブラリが沢山ありました。
操作説明ページを作るより効果的に説明できるケースも多いと思うので、今後のためにサイトツアーのライブラリをまとめてみました。
ライブラリによって見せ方や挙動が違うものもあるので興味がある方はデモで試してみてください。





1

Intro.js

オーバーレイを使用して説明箇所をハイライト表示しながらツアーするライブラリ。オプション・デモが豊富な有名なスクリプト。商用利用は有料となります。

2

anno.js

オーバーレイと吹き出しで表示するシンプルなスクリプト。

3

Driver

オーバーレイと吹き出しで表示する軽量で依存性のない4kbのスクリプト。

4

aSimpleTour

吹き出しの位置を固定できるシンプルなスクリプト。

5

pageguide.js

フッター部でコントロールできるツアーガイドのスクリプト。

6

Bootstrap Tour

Bootstrapと一緒に使うサイトツアープラグイン。オプションも豊富に用意されている。

7

Bootstro.js

同じくBootstrapと一緒に使うサイトツアープラグイン。



  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
  • 【jQuery】レスポンシブ対応のスライダー「Glide.js」
  • 【jQuery】ジオメトリックを実装できる「particleground.js」
  • 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
RELATED POSTS
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
  • ポリゴンスタイルのイメージやテクスチャを生成できるジェネレーターまとめ
  • 【jQuery】レスポンシブ・フレキシブルなモーダルウィンドウ「iziModal.js」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • 音楽に合わせて要素を動かすことができる「Rythm.js」
  • SVGで背景パターンを作成できる「Hero Patterns」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 【2020年版】無料で使えるフリーイラスト素材サイト32選(商用利用可)