Amberjack: Amazing On-Page Tutorials

ページの使い方をページ内に埋め込んでしまえる「Amberjack2」。
ページの使い方のチュートリアルというと、動画とかで説明されるのが一般的ですが、Amberjackはサイト上にJavaScriptを使って説明を埋め込んでしまえるツールです。
サイトを使いながらそのままチュートリアルに移ることも可能なので、使い方次第ではユーザフレンドリーなサイトに仕上げることが可能かもしれません。



説明方法は、スポットライトを当てたい部分以外をグレーアウトして、ヒントを次のように表示させてあげることが出来ます。
←、→キーで次の説明に移ることも出来ます。

例えば、タイトル部分にスポットライトをあてて、その説明を表示するという例



説明のポップアップには動画を埋め込んでより分かりやすくするといったことも可能です。



サイトのここは、こういう意味ですよ、というような説明にもってこいですね。

あと、index.php → index2.php のようにページ間に渡って流れを引き継ぐことも出来ます。
ユーザが操作しながらサイトの使い方を覚えられるというアプローチで、本当に使い方次第だとは思いますがわかりやすいサイト利用法のチュートリアルが作れそうですね。

ソースコードはこちらにあるみたい