intro.jsの代替を探す前に｜プロダクトツアー「自作」と「ノーコード」の使い分け

intro.jsでできること、つまずくところ

intro.jsは、ステップ式のサイトツアーやツールチップを軽量に実装できる定番ライブラリです。セレクタやdata属性で対象を指定すれば、数時間でツアーが動きます。導入の速さは今でも一級品です。

つまずくのは、実装後です。

• 文言をひとつ直すにも、コード修正→レビュー→デプロイが必要になる
• ツアーの中身をPMやカスタマーサクセスが直接編集できない
• UI変更でセレクタが壊れても、エラーにならず静かに表示されなくなる
• 「どのステップで離脱したか」の計測は、イベント送信を自前で実装する必要がある
• 「初回だけ表示」「役割別に出し分け」などの制御も自作になる

実装コストは小さい。しかし「ツアーをコンテンツとして運用するコスト」は、コード管理である限り減らない。

代替ライブラリに乗り換えても、運用課題は残る

intro.jsの代替としてよく挙がるのは、driver.js（軽量・依存なし）、Shepherd（柔軟なカスタマイズ）、react-joyride（React向け）などです。どれも良いライブラリですが、「ツアーの中身がコードの中にある」点は共通しています。乗り換えで変わるのはAPIの書き味で、文言修正のデプロイ・セレクタ保守・計測の自作という運用課題はそのまま残ります。

自作とノーコードの使い分け

判断軸はひとつです。ツアーの中身を「コード」として管理したいか、「コンテンツ」として運用したいか。リリース後に文言を何度も直すことが分かっているなら、最初からノーコード型を選ぶ方が総コストは小さくなります。

ノーコードでツアーを出す仕組み

ノーコード型のツアーガイドは、scriptタグを1行入れる（自社サイト）か、Chrome拡張を入れる（社内SaaS）だけで動きます。対象の要素は管理画面やその場のクリックで選択でき、セレクタの生成・保守はツール側が引き受けます。文言の修正は管理画面で保存するだけで、デプロイはありません。

• 対象要素はクリックで選択（セレクタを手で書かない・保守しない）
• 文言・順序の変更は管理画面で完結（デプロイ不要・非エンジニアが編集可）
• ステップ別の到達・離脱・完了率を標準で計測
• 入力欄には入力例・形式チェック・自動変換などの入力補助も追加できる

InputGuideでできること

InputGuideは、ノーコードで作れるツアーガイドです。自社サイトにはscript 1行、kintone・Salesforceなどの業務SaaSにはChrome拡張で、画面の上にツアーと入力補助を重ねて表示します。どのステップで離脱が起きているかを計測し、「どこを直すと完遂率が上がるか」の改善提案まで行います。

• ステップ式ツアー・ツールチップ・入力補助をノーコードで作成
• 対象はクリックで選択。UI変更時もガイド側の編集だけで追従
• ステップ別の到達・離脱・完了率を標準計測、改善ポイントを提案
• 月15,000円〜（税抜・目安）。1ヶ月無料・カード登録不要で試せる