ページの使い方をページ内に埋め込んでしまえる「Amberjack2」
2010年04月08日-
スポンサード リンク
Amberjack: Amazing On-Page Tutorials
ページの使い方をページ内に埋め込んでしまえる「Amberjack2」。
ページの使い方のチュートリアルというと、動画とかで説明されるのが一般的ですが、Amberjackはサイト上にJavaScriptを使って説明を埋め込んでしまえるツールです。
サイトを使いながらそのままチュートリアルに移ることも可能なので、使い方次第ではユーザフレンドリーなサイトに仕上げることが可能かもしれません。
説明方法は、スポットライトを当てたい部分以外をグレーアウトして、ヒントを次のように表示させてあげることが出来ます。
←、→キーで次の説明に移ることも出来ます。
例えば、タイトル部分にスポットライトをあてて、その説明を表示するという例
説明のポップアップには動画を埋め込んでより分かりやすくするといったことも可能です。
サイトのここは、こういう意味ですよ、というような説明にもってこいですね。
あと、index.php → index2.php のようにページ間に渡って流れを引き継ぐことも出来ます。
ユーザが操作しながらサイトの使い方を覚えられるというアプローチで、本当に使い方次第だとは思いますがわかりやすいサイト利用法のチュートリアルが作れそうですね。
ソースコードはこちらにあるみたい
ページの使い方をページ内に埋め込んでしまえる「Amberjack2」。
ページの使い方のチュートリアルというと、動画とかで説明されるのが一般的ですが、Amberjackはサイト上にJavaScriptを使って説明を埋め込んでしまえるツールです。
サイトを使いながらそのままチュートリアルに移ることも可能なので、使い方次第ではユーザフレンドリーなサイトに仕上げることが可能かもしれません。
説明方法は、スポットライトを当てたい部分以外をグレーアウトして、ヒントを次のように表示させてあげることが出来ます。
←、→キーで次の説明に移ることも出来ます。
例えば、タイトル部分にスポットライトをあてて、その説明を表示するという例
説明のポップアップには動画を埋め込んでより分かりやすくするといったことも可能です。
サイトのここは、こういう意味ですよ、というような説明にもってこいですね。
あと、index.php → index2.php のようにページ間に渡って流れを引き継ぐことも出来ます。
ユーザが操作しながらサイトの使い方を覚えられるというアプローチで、本当に使い方次第だとは思いますがわかりやすいサイト利用法のチュートリアルが作れそうですね。
ソースコードはこちらにあるみたい
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ