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

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





1

Intro.js

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

2

anno.js

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

3

Driver

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

4

aSimpleTour

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

5

pageguide.js

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

6

Bootstrap Tour

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

7

Bootstro.js

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



PICK UP
RELATED POSTS
  • 陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
  • スクロール連動のエフェクトを実装できるライブラリ「AOS」
  • 【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
  • Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
  • アイコンフォント「FontAwesome」の使い方
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年4月版】
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ