Product Tourはレスポンシブに対応したプロダクトツアーを実装することができます。CSSとjQueryを使ってWebサイト内でステップごとにガイドを表示させることが可能です。順番に効率良く説明したい時に役立ちますね。
Product Tour
以下はProduct Tourのサンプルです。
Start tourというボタンをクリックするとステップ1〜3までのガイドを順番に見ることができます。Previous、Nextで前後のステップに移動します。
PC版ではフェードアニメーションでふんわりとさりげなく各ステップの位置へ移り変わっていきます。一方、モバイル版ではスライドで切り替わるようになっており、iPhoneで確認してみたところフリックでスライドすることもできました。
デザインも全体的にシンプルにまとまっていて非常に見やすいですね。
というわけで、レスポンシブなプロダクトツアーを実装したい方は是非チェックしてみてください。
詳しい使い方やProduct Tourのダウンロードは以下からどうぞ。
