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

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





1

Intro.js

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

2

anno.js

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

3

Driver

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

4

aSimpleTour

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

5

pageguide.js

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

6

Bootstrap Tour

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

7

Bootstro.js

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



  • 【jQuery】レスポンシブ・フレキシブルなモーダルウィンドウ「iziModal.js」
  • 【jQuery】ページにマーカーを実装することができる「markerPen」
  • 【jQuery】レスポンシブ対応のスライダー「Glide.js」
  • 【JS】マウスの動きに合わせて影の角度が変化する「shine.js」
  • 【jQuery】動画を背景にフルスクリーンで表示させる「covervid.js」
RELATED POSTS
  • 初心者から学べる無料プログラミング学習サイト8選
  • モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」
  • 【jQuery】ページ移動時にアニメーション効果をつけられるAnimsition
  • スクロール連動のエフェクトを実装できるライブラリ「AOS」
  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • 【jQuery】ジオメトリックを実装できる「particleground.js」
RECENT POSTS
  • バナーデザイン制作で参考になるバナー広告ギャラリーサイト12選
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選