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

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





1

Intro.js

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

2

anno.js

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

3

Driver

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

4

aSimpleTour

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

5

pageguide.js

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

6

Bootstrap Tour

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

7

Bootstro.js

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


  • 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
  • 【jQuery】レスポンシブ対応のタブを実装できる「GridTab」
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
  • 【jQuery】ページにマーカーを実装することができる「markerPen」
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
RELATED POSTS
  • 画像を使わずにCSSだけで三角・矢印を作る方法
  • vue.jsを使用したプロジェクトをまとめたサイト「made with vue.js」
  • アニメーションアイコンのライブラリ「60 Free Animated Icons」
  • 料金表のページをまとめたギャラリーサイト「Pricing Pages」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • あると便利なスクロールアニメーションライブラリ11選
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」