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

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





1

Intro.js

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

2

anno.js

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

3

Driver

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

4

aSimpleTour

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

5

pageguide.js

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

6

Bootstrap Tour

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

7

Bootstro.js

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



RELATED POSTS
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
  • CSSグリッドレイアウトのコードを生成できるツール「Griddy」
  • Web上で差分が確認できるテキスト比較ツール「difff」
  • 様々なチャートを生成できるライブラリ「TOAST UI Chart」
PICKUP
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 長いURLを短くする短縮URLサービス8選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
RECENT POSTS
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • アイソメトリックなイラストを作成できるオンラインツール「Explore Isobuild」
  • Googleのプログラミング学習ツール「Grasshopper」にデスクトップ版がリリース
TAG LIST
  • Webサービス

    84

  • CSS

    58

  • jQuery

    34

  • 素材

    30

  • エフェクト

    29

  • ジェネレーター

    25

  • JavaScript

    23