EST 製品ツアー フロントエンド アプリ用の JavaScript ライブラリ

アビオラ・ファロウンビ著✏️

最新の Web アプリケーションには通常、多くの機能と使用例が詰め込まれています。ただし、これらの機能を表示する方法は、特に初めてのユーザーや新機能または更新された機能に対して、ユーザー エクスペリエンスに大きな影響を与える可能性があります。

オンボーディング プロセスが正しく行われていない場合、ユーザーは圧倒されたり、ナビゲーションが不明確に感じたりする可能性があります。スムーズなオンボーディング プロセスを実現し、ユーザー満足度を向上させる効果的な方法の 1 つは、製品ツアーの利用です。

幸いなことに、アプリケーション向けに有益で魅力的なガイド付きツアーを作成するのに役立つ製品ツアー ライブラリが多数あります。この記事では、利用可能な最高のツアー ライブラリのいくつかを検討し、その機能、長所、短所、および選択に役立つユースケースについて説明します。

製品ツアー ライブラリを使用する理由は何ですか?

製品ツアーは、アプリケーションの主要な機能をユーザーに理解してもらうための、構造化された対話型の方法です。一連の画面上の要素、モーダル、またはツールヒントを使用して、ユーザーに製品機能をスムーズに案内できます。これにより、全体的な UX が向上し、ユーザー エンゲージメントが向上します。

製品ツアーの実施に役立つ無料のオープンソース ライブラリが多数あります。カスタム ツアーを最初から構築することは誘惑に駆られるかもしれませんが、現実には、そうすることは、時間をかけて維持し反復するための時間とリソースの点で非常にコストがかかる可能性があります。

ツアー ライブラリに備えるべき重要な機能

ツアー ライブラリが「優れている」理由は何ですか?もちろん、答えはあなたのニーズによって異なるかもしれません。ただし、一般的に、優れたツアー ライブラリには次の機能が重要です。

• 好みに応じてツアーの外観と動作を制御する柔軟でカスタマイズ可能なオプション
• 明確で広範なドキュメントと API リファレンス
• さまざまな UI フレームワーク間で互換性があり、簡単な統合をサポートします
• 分析機能が組み込まれているか、他の外部分析ツールとの統合をサポートしています
• ユーザーと貢献者の活発なコミュニティを備えたオープンソース
• トレンドや技術の変化に対応するために、継続的に保守および更新されます

これらの重要な機能を念頭に置いて、さまざまなユーザー オンボーディング ライブラリを検討し、この記事で説明する上位 7 つを選択しました。

• イントロ.js
• 機内
• ブートストラップ ツアー
• Driver.js
• ツアーガイド.js
• フロー
• 羊飼い

ここで、各ライブラリの詳細な説明と、その機能を紹介し、プロジェクトのニーズに最も適したものを選択するのに役立つ実際の例を見てみましょう。

イントロ.js

Intro.js は、シンプルで効果的な製品ツアーを簡単に作成する方法を提供するオープンソース JavaScript ライブラリです。ファイル サイズはおよそ 12.5 KB なので、簡単なウォークスルーを簡単に構築できる軽量ライブラリです。 Intro.js の重要な機能の 1 つはカスタマイズ可能です。さまざまなテーマや、色、フォント、位置などのカスタマイズ可能な要素を提供することで、アプリケーションのブランディングに合わせてツアーを調整できます。

Intro.js をプロジェクトに統合した後、Web ページ上の特定の要素をツアー ステップとして指定できます。ツアー中、Intro.js はこれらの要素を強調表示し、アプリケーションを通じてユーザーをガイドするための有益なテキスト オーバーレイまたはツールヒントを提供します。ユーザーは、直観的なボタンを使用して、前方、後方に移動したり、ツアーを終了したりすることで、自分のペースでツアーをナビゲートできます。

Intro.js は、一般的な React、Angular、または Vue.js フレームワーク上に構築されたプロジェクトでの使用を容易にする既製のフロントエンド フレームワーク ラッパーを提供します。また、優れたドキュメント参照と再利用可能な例も含まれています。

Intro.js には高度な機能がいくつか欠けている場合がありますが、そのシンプルさと使いやすさにより、迅速かつ効率的なオンボーディング ソリューションを必要とするプロジェクトにとって優れた選択肢となります。 Intro.js の無料利用枠では商用利用が制限されていますが、商用プロジェクトの有料ライセンスは 9.99 ドルからであることに注意してください。

オンボルダ

Onborda は、Next.js アプリケーションでインタラクティブな製品ツアーを作成するための軽量 JavaScript ライブラリです。スムーズなアニメーションには Framer Motion、スタイル設定には Tailwind CSS などの一般的なフロントエンド ツールを使用します。 Onborda はプロバイダー コンポーネントを使用して、ツアー エクスペリエンス全体を管理します。 Next.js アプリケーション内で一連の「ステップ」を定義し、強調表示する要素とユーザーに提示するコンテンツを指定します。次に、Onborda がアニメーションとツールチップを使用してツアーをレンダリングし、アプリケーションの主要な機能をユーザーにガイドします。

ただし、Onborda は主に Next.js 用に設計されていることを考慮することが重要です。他のフレームワークと統合するには、追加の作業が必要になる場合があります。

また、新しいライブラリである Onborda は、確立されたオプションと比較してコミュニティが小さく、ドキュメントが少ない可能性があります。 Onborda がプロジェクトに適しているかどうかは、特定のニーズとフレームワークの好みによって決まります。

ブートストラップツアー

Bootstrap Tour は、Bootstrap ポップオーバーを使用して製品ツアーを作成するために特別に構築された無料のオープンソース JavaScript ライブラリです。これは、特にブートストラップのコンポーネントとスタイルを使用するプロジェクトにすでに取り組んでいる場合、開発者にとって人気の選択肢です:

ブートストラップ ポップオーバーの作成は、プロジェクトに JavaScript と CSS ファイルを含めるだけで簡単です。 Bootstrap ツアーには、セットアップのガイドとなる詳細なドキュメントも付属しています。

ブートストラップ ツアーを使用すると、Web ページ上の特定の要素をツアー ステップとして定義できます。ツアー中、Bootstrap ツアーは Bootstrap のポップオーバー コンポーネントを利用して、強調表示された要素の横に有益なコンテンツを表示します。ユーザーはキーボードを使用してツアーを操作し、手順をナビゲートできます。

Bootstrap Tour はユーザーフレンドリーな機能を提供しますが、欠点の 1 つはドキュメントが貧弱であることです。現時点ではドキュメントは積極的に更新されていません。 GitHub 上の未解決の問題の多さは、コミュニティのサポートが最小限であることを明確に示しています。

ドライバー.js

Driver.js は、保守性を高めるために TypeScript で構築された強力な JavaScript ライブラリです。設計上軽量であり、外部ライブラリに依存しないため、既存のプロジェクトに簡単に統合でき、パフォーマンスへの影響を最小限に抑えて動作します: Driver.js は単純な強調表示を超えて、特定のユーザーに合わせて高度なカスタマイズを提供します。使用事例。提供されたフックを使用して、フォーカス移動中に要素を操作する機能を使用して、要素をどのように強調表示するかを正確に定義できます。

さらに、Driver.js には、製品ツアーのカスタマイズに使用できるさまざまなオプションを提供するいくつかの準備されたサンプルが付属しています。また、ユーザー フレンドリーなキーボード ナビゲーションもサポートしており、オープン ソースであり、個人プロジェクトと商用プロジェクトの両方で自由に使用できる MIT ライセンスが付与されています。

ここで注意しなければならないのは、Driver.js はフレームワークに依存しないため、非常に柔軟であり、さまざまなフレームワークで適切に動作することができます。ただし、さまざまなフロントエンド フレームワークと完全に統合されていますが、フレームワーク固有のツアー コンポーネントは組み込まれていません。

これにより、より手間のかからないセットアップ手順を求める人にとっては、追加の開発時間が必要になる可能性があります。それに比べて、ドラッグ アンド ドロップ機能やフレームワーク固有のツアー コンポーネントを提供するライブラリを使用すると、より速くセットアップできる可能性があります。

Driver.js のさらに詳しいガイドについては、Driver.js チュートリアルをご覧ください。

ツアーガイド.js

TourGuide は、単一ページ アプリケーション内でカスタマイズ可能なユーザー ツアーとオンボーディング ジャーニーを構築するための実験ライブラリとして開発されました。コールバックを備えた多くの Promise 駆動メソッドを実装しているため、非同期操作のサポートが保証され、ツアーのフローをより詳細に制御できるようになります。 このライブラリのユニークな特徴の 1 つは、フローティング UI ライブラリに依存していることです。フローティング UI には、要素を相互に固定するために使用できるさまざまな配置機能が用意されています。たとえば、フローティング要素を参照要素のすぐ隣に配置します。

TourGuide ライブラリには幅広いカスタマイズ オプションが用意されており、配色やフォントから要素の位置まであらゆるものを定義できます。ツアー ステップ内にカスタム HTML コンテンツを組み込むこともでき、アプリケーションの設計とシームレスに統合された完全にカスタマイズされたオンボーディング エクスペリエンスを確保できます。

さらに、TourGuide.js はオープンソース開発を採用し、協力的なコミュニティと継続的な改善を促進します。これにより、商業プロジェクトと個人プロジェクトの両方で制限なくライブラリを自由に使用できるようになります。

TourGuide.js は運用環境で動作しますが、開発中であるため、一部の代替ライブラリと比較してドキュメントが包括的ではなくなる可能性があります。

フロー

Flows は、Web アプリケーション内で製品ツアーやユーザー オンボーディング エクスペリエンスを作成するために設計された独特のツールです。フローを視覚的に構築するための WYSIWYG エディターを提供し、SDK を使用してコードベース内でフローを直接定義するオプションを提供し、さまざまな好みを持つ開発者に対応します。 フロー エディターは、視覚的なガイドとライブ インターフェイスを使用してフローを作成するプロセスを容易にします。アプリのプレビュー。このライブラリは、速度、柔軟性、信頼性、設計を実践することにより、ユーザー主導のオンボーディングを重視しています。つまり、オンボーディング フローを瞬時に作成して展開できるため、ユーザーは待つ必要がありません。

Flows には、基本的なツールチップやモーダルだけでなく、ユーザー アクションのために一時停止する「待機」ステップや条件付きパスの「分岐」ステップなど、いくつかのステップ タイプが用意されています。また、条件分岐、関数呼び出し、AI による意思決定などの機能を強化するための、さらに高度なステップ タイプも含まれています。

Flows には、非常にネイティブな方法で、ビュー、完了、ドロップオフなどのパフォーマンス指標の分析機能も組み込まれています。これをさらに拡張してサードパーティ ツールと統合して、ユーザー ジャーニーをさらに全体的に把握したり、CSS と JavaScript を使用してオンボーディング フローを調整したりして、開発者にシームレスなブランド エクスペリエンスを確保することもできます。

毎月 1000 フローを提供する無料枠がありますが、それ以外の場合、Flows は従量制料金を使用します。大量のユーザーはコストが高くなるため、頻繁に使用することが予想される場合は、よりコスト効率の高いオプションを検討することをお勧めします。

Shepherd.js

Shepherd.js は、Web アプリケーションでユーザー ツアーを作成するプロセスを容易にすることを目的としたシンプルな JavaScript ライブラリです。これには、ツアーを段階的に説明する明確で直感的なインターフェイスがあり、ツアーの UX を向上させ、ユーザーの理解を高めるのに役立ちます。 Shepherd.js は、広範なカスタマイズ オプションとアプリケーションとのシームレスな統合を提供します。フルキーボードナビゲーションによるアクセシビリティを優先します。 TourGuide と同様に、Shepherd.js もフローティング UI を使用してツアーの各ステップのダイアログをレンダリングします。

また、Shepherd.js は、さまざまなフロントエンド フレームワークに簡単に統合できる、フレームワークに依存しない機能を提供します。どのフレームワークでも独立して動作できますが、よりフレームワーク固有の機能を備えたフレームワーク固有のラッパーも提供します。

もちろん、他のライブラリと同様に、Shepherd.js にもいくつかの制限があります。たとえば、ユーザー エンゲージメント分析が組み込まれておらず、単純なライブラリと比較して学習曲線が急になります。

ツアーライブラリ比較表

フロントエンド アプリケーションのツアー ライブラリを選択するときは、決定を下す前に各オプションの主な機能を必ず比較してください。以下は、これまで説明したライブラリの主な機能、長所、短所をまとめた比較表です:

Feature/Library	Intro.js	Shepherd	Onborda	Flows	Driver.js	TourGuide.js	Bootstrap Tour
Open source	✅	✅	✅	✅	✅	✅	✅
Community support	Large	Large	Small	Growing	Moderate	Small	Large
Free tier	✅	✅	✅	Up to 1000 flows per month	✅	✅	✅
Ease of use	Very easy	Easy	Moderate	Moderate	Moderate	Moderate	Very easy
Built-in analytics	❌	❌	❌	✅	❌	❌	❌
Framework support	Framework agnostic	Framework agnostic	Designed for Next.js, supports others	Framework agnostic	Framework agnostic	Framework agnostic	Bootstrap-based
Documentation	⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐	⭐
Pros	Simple, lightweight	Highly customizable, flexible	Easy integration, customizable	Intuitive, highly flexible, built-in analytics	Lightweight, flexible	Customizable, framework agnostic	Easy to use with Bootstrap projects
Cons	Limited advanced features	Steeper learning curve for complex customizations	Smaller community, designed for Next.js	Potential costs for high usage	Doesn't have pre-built components for specific frameworks	Limited advanced features, early development	Limited advanced features, requires Bootstrap
Best use cases	Simple onboarding, quick tours	Customizable onboarding for SPAs	Next.js apps, customizable tours	High-customization onboarding	Lightweight, flexible tours	Detailed and complex tours	Bootstrap-based projects

この概要は、要件に適合するライブラリをすばやく特定するのに役立ちます。

結論

Web サイトまたはアプリのユーザー オンボーディング エクスペリエンスは、第一印象を形成し、ユーザー維持率を向上させる上で非常に重要です。フロントエンド アプリケーションに適切なツアー ライブラリを選択すると、製品の機能をユーザーに案内する魅力的で有益なツアーを作成できるようになります。

各ライブラリは独自の機能と利点を提供し、さまざまな開発設定やプロジェクト要件に対応します。この記事では、決定に役立つように、最適なツアー ライブラリの比較概要を提供しました。これらの要素を慎重に考慮して、最初のインタラクションからシームレスで魅力的なユーザー エクスペリエンスを作成できるユーザー オンボーディング ライブラリを選択してください。

最終的に、最適なライブラリは、機能、使いやすさ、予算のバランスによって決まります。 React 製品ツアー ライブラリや Vue 製品ツアー ライブラリなど、プロジェクトで使用しているフレームワークやライブラリに合わせて厳選された製品ツアー ライブラリを検討することもできます。

ご質問がございましたら、お気軽に Twitter で私にご連絡いただくか、以下にコメントを残してください。コーディングを楽しんでください!

---

新しい機能を構築したり、パフォーマンスを向上させるために、新しい JS ライブラリを追加していますか?彼らが逆のことをしていたらどうなるでしょうか？

フロントエンドがより複雑になっていることは疑いの余地がありません。新しい JavaScript ライブラリやその他の依存関係をアプリに追加するときは、ユーザーが未知の問題に遭遇しないように、可視性を高める必要があります。

LogRocket は、JavaScript エラーを自分のブラウザで発生したかのように再生できるフロントエンド アプリケーション監視ソリューションで、バグにより効果的に対応できます。

LogRocket は、フレームワークに関係なく、あらゆるアプリで完璧に動作し、Redux、Vuex、および @ngrx/store からの追加のコンテキストをログに記録するプラグインを備えています。問題が発生する原因を推測する代わりに、問題が発生したときにアプリケーションがどのような状態にあったかを集計してレポートできます。 LogRocket はアプリのパフォーマンスも監視し、クライアントの CPU 負荷、クライアントのメモリ使用量などのメトリクスをレポートします。

自信を持って構築 — 無料でモニタリングを始めましょう。

以上がEST 製品ツアー フロントエンド アプリ用の JavaScript ライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。