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

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





1

Intro.js

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

2

anno.js

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

3

Driver

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

4

aSimpleTour

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

5

pageguide.js

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

6

Bootstrap Tour

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

7

Bootstro.js

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



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるフリーイラスト素材サイト54選(商用利用可)
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • フォントを調べる時に役に立つツール・サイト10選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2023年12月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるフリーイラスト素材サイト54選(商用利用可)
  • 【2023年12月】Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【CodePen】CSSで作る3Dボタンのアイデア15選
  • Photoshopで使用できる“かすれ・グランジ系”ブラシ10選