新しいゲームを始めたり初めてのWebサービスを利用する時、どんな操作をすれば良いのか最初にチュートリアルがあると、とても分かりやすいですよね。今回はWebサイトにそんなチュートリアル機能を付与するプラグイン「Bootstro.js」を紹介したいと思います。

実際にデモを動かしてみるとわかりますが、対象箇所のハイライト + 画面スクロールで、とてもわかりやすく説明を受けることができます。

ボタンやキーボードによる操作も可能で、次々と説明を流すことも可能。例えばWebサービスで使い方を説明したり、ゲームコンテンツのサイトにも使えるのではないでしょうか。

jQueryプラグインなので使い方もとても簡単。特定のクラスをチュートリアルしたいタグに付与して実行することができます。また、すぐに使いたい場合は「.bootstro」のクラスを付与すれば動作します。使いようだとは思いますが、先に説明をすることでユーザービリティは大きく向上します。今までに無かったサービスなどを立ち上げる時には良い機能だと思います。

Bootstro.js demo