苦労して新機能を実装したのに、ユーザーにまったく使われない——これは、プロダクト開発でよくある悲劇です。原因の多くは、機能の出来そのものではなく「気づかれていない」ことにあります。画面のどこに、何があり、どう使うのか。それを初見のユーザーに、押し付けがましくなく伝える仕組みが、プロダクトの成否を静かに左右します。
特に、初めてそのプロダクトに触れる「最初の5分」は決定的です。この短い時間で価値を体感できなければ、ユーザーは静かに離れていきます。だからこそ、初見ユーザーを迷わせない案内は、機能開発と同じくらい重要な投資なのです。その「案内役」を、驚くほど手軽に実装できるのが、本記事で紹介する Driver.js（ドライバー・ジェイエス） です。Kamran Ahmed氏が開発し、GitHubで25,000スター超を集めるこのオープンソースは、ページ上の任意の要素をハイライトし、吹き出し（ポップオーバー）で説明を添えて、ユーザーの視線を誘導するためのJavaScriptライブラリです。プロダクトツアー、機能紹介、フォーカス誘導、文脈ヘルプ——「ユーザーの注意をどこかに向けたい」あらゆる場面で活躍します。
最大の魅力は、その軽さと潔さです。外部依存ゼロ、わずか約5kb（gzip圧縮時）。多くの類似ライブラリが12kb以上ある中で、群を抜いて軽量です。「案内機能ひとつのために、重い依存やフレームワークを抱え込みたくない」という開発者の本音に、これ以上ないほど素直に応えてくれます。TypeScriptで書かれ、主要ブラウザすべてに対応し、MITライセンスで商用利用も自由にできます。プロダクトの「案内役」を探しているなら、まず最初に検討すべき定番の一つと言えるでしょう。
注記：当サイトはAI関連OSSの解説を主軸にしていますが、本記事は読者からのリクエストに応える番外編として、AIに直接関係しない開発ツールを扱います。とはいえ、AIプロダクトのオンボーディングや、AIコーディングエージェントが生成するUIにもツアー機能は有用であり、Web開発者にとって広く役立つ題材です。
1. Driver.jsとは — ページ上の「注意の誘導」に特化
Driver.jsは、公式に「プロダクトツアーと機能紹介のための、強力で高度にカスタマイズ可能なライブラリ」と銘打たれています。やることはシンプルで、ページを薄暗いオーバーレイで覆い、案内したい要素だけを切り抜いてハイライトし、その横に説明の吹き出しを表示する——これだけです。しかし、このシンプルな機能が、UXのあらゆる場面で効きます。地味に見えて、ユーザーの「分からない」を解消する力は侮れません。
公式READMEは、Driver.jsの特徴を以下のように挙げています。
・シンプル：使い方が簡単で、外部依存が一切ない
・軽量：gzipでわずか約5kb（他ライブラリは12kb以上が多い）
・高度にカスタマイズ可能：強力なAPIで思いどおりに制御できる
・何でもハイライト：ページ上の文字どおり「任意の」要素を強調できる
・機能紹介：Webアプリの強力な機能紹介を作れる
・フォーカス誘導：ユーザーの注意を特定要素に引きつける
・キーボード操作対応：すべてをキーボードで制御できる（アクセシビリティ）
・TypeScript製：型定義が整っている
・一貫した挙動：すべての主要ブラウザで同じように動く
・MITライセンス：個人・商用とも無料で利用・改変・再配布が可能
開発者はKamran Ahmed氏。エンジニア向け学習ロードマップで有名な「roadmap.sh」の作者でもあり、その実用主義的なセンスがDriver.jsにも表れています。リポジトリは現在 nilbuild/driver.js（氏のハンドル @nilbuild）で活発にメンテナンスされており、2026年には大きなランディングページ刷新とともに v1.6.0 がリリースされるなど、長年にわたり手入れが続く成熟したプロジェクトです。
注目すべきは、その採用実績の広さです。公式サイトには、Alibaba、Apache、Intel、Red Hat、Ethereum、Fiverr、GitKraken、MIT、Kakao といった名だたる組織がDriver.jsを使っていることが示されています。スタートアップから大企業、研究機関、OSSプロジェクトまで、これだけ多様な現場で採用されている事実は、Driver.jsが「枯れた」信頼できる選択肢であることの証左です。流行り廃りの激しいフロントエンド界において、長期にわたり使い続けられているライブラリには、それだけの安定性と実用性があります。
2. 「ツアーライブラリ」を超える守備範囲
Driver.jsの公式ドキュメントには、印象的な問いかけがあります。「で、また別のツアーライブラリ?」——そして、その答えは明確に「いいえ、それ以上のものです」。
公式は「ツアーは数ある用途の一つにすぎない」と強調します。Driver.jsは、本質的には「ページに何らかのオーバーレイ（覆い）が欲しい、あらゆる場面」で使える汎用ツールなのです。この割り切りが、Driver.jsを「もう一つのツアーライブラリ」から、開発者の道具箱に常備される汎用ツールへと押し上げています。公式が挙げる用途を整理すると、その応用範囲の広さがわかります。
・プロダクトツアー：初回ログイン時に主要機能を順に案内する
・機能紹介：新機能を1つだけスポットライトして「ここが新しくなりました」と伝える
・フォーカス誘導：ユーザーの注意を、いま見てほしい要素に引き寄せる
・文脈ヘルプ：フォーム入力中に、背景を暗くした吹き出しでヒントを出す
・「ライトを消す」効果：動画プレイヤーなどで周囲を暗くし対象を際立たせる
・シンプルなモーダル：軽量なモーダルダイアログとしても使える
このように、Driver.jsは「ツアー専用ツール」ではなく「注意の誘導とオーバーレイの汎用エンジン」です。だからこそ、一度導入すれば、ツアー以外のさまざまなUX改善にも転用でき、ライブラリの追加を抑えられます。依存をできるだけ増やしたくない開発者にとって、この「一つで何役もこなす」性質は大きな価値です。
この汎用性を支えているのが、Driver.jsの設計の「引き算の美学」です。多機能を詰め込むのではなく、「要素をハイライトして、説明を添える」という最小限のコアに徹したことで、かえって応用範囲が広がりました。コアがシンプルだからこそ、開発者は自分の文脈に合わせて自由に組み合わせられます。たとえば、ECサイトなら「初回購入者にチェックアウトの流れを案内する」、管理画面なら「新しく追加された設定項目だけをスポットライトする」、教育サービスなら「学習ツールの使い方を一歩ずつ手ほどきする」——同じライブラリが、まったく異なる場面で活きるのです。
「機能を絞ったことが、かえって用途を広げた」というのは、優れたツール設計によく見られる逆説です。Driver.jsは、その好例と言えるでしょう。
フロントエンドの世界では、バンドルサイズがそのままページの表示速度、ひいてはユーザー体験とSEOに直結します。Driver.jsが約5kbという軽さにこだわるのは、単なる自慢ではありません。「案内機能のために重いライブラリを足したくない」という現実的なニーズに応えるものです。依存ゼロであることも、将来のメンテナンスやセキュリティ上のリスクを減らす、堅実な設計判断です。
3. 仕組みと基本的な使い方
Driver.jsの使い方は驚くほど直感的です。npmでインストールするか、CDNから読み込み、driver を初期化して使います。ここでは、公式の流儀に沿った基本的な使い方を紹介します。
まずインストールです。モダンなフロントエンド環境なら、npm（やpnpm、yarn）で導入するのが基本です。
npm install driver.js
CDN経由で読み込めば、ビルドツールを使わない素のHTMLページでもすぐ試せます。まずは挙動を確かめたいだけなら、この手軽さが便利です。最もシンプルな「単一要素のハイライト」は、次のように書けます。
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver();
driverObj.highlight({
element: "#some-element",
popover: {
title: "タイトル",
description: "この要素についての説明文をここに書きます。",
},
});
これだけで、#some-element がハイライトされ、説明の吹き出しが表示されます。背景は自動で暗くなり、ユーザーの視線は対象に集中します。たった数行で、商用ツールに引けを取らない案内が完成する——この立ち上がりの速さが、Driver.jsが「とりあえず試してみよう」と選ばれ続ける理由です。
複数のステップを順に案内する本格的な「ツアー」も、ステップの配列を渡すだけで作れます。
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
showProgress: true,
steps: [
{ element: "#step1", popover: { title: "ようこそ", description: "まずはここから。" } },
{ element: "#step2", popover: { title: "検索", description: "ここで検索できます。" } },
{ element: "#step3", popover: { title: "設定", description: "最後に設定を確認しましょう。" } },
],
});
driverObj.drive(); // ツアーを開始
最後に drive() を呼ぶだけで、ユーザーはステップを順に巡るツアーを体験できます。「次へ」「前へ」「閉じる」といった操作は自動で用意され、キーボードでも操作できます。showProgress を有効にすれば、進捗（例：3分の1）も表示されます。
注目したいのは、CSSの読み込み（driver.js/dist/driver.css）以外に、特別なHTMLの準備が要らないことです。ハイライトしたい要素をCSSセレクタ（#step1 のようなID、あるいはクラスや任意のセレクタ）で指定するだけで、Driver.jsが対象を見つけてオーバーレイを描画します。既存のページに後付けで導入しやすく、マークアップを大きく変える必要がありません。これは、すでに動いているプロダクトに「あとからツアーを足したい」という現実的な要求に、きれいに応える設計です。
また、ツアーの各ステップでは、要素を指定せず「画面中央に吹き出しだけを出す」ことも可能です。これを使えば、ツアーの冒頭で「ようこそ! 簡単に使い方をご案内します」という導入メッセージを出し、その後に各機能を順番にハイライトしていく——という、自然な流れのオンボーディングが作れます。要素ハイライトと中央モーダルを自在に混在できる柔軟さも、Driver.jsの使い勝手の良さです。
4. 強力なフック（hooks）とカスタマイズ性
Driver.jsが「高度にカスタマイズ可能」と謳う根拠は、そのフック（hooks） の仕組みにあります。要素がハイライトされる前、された後、選択が解除される時——といったタイミングで、自前の処理を差し込めます。これにより、単なる静的な案内を超えた、動的でインタラクティブな体験を作れます。フックとは、ライブラリの処理の「節目」に自分のコードを割り込ませる仕組みのことです。Driver.jsはこの節目を要所に用意しているため、ライブラリの挙動を内側から拡張できます。
たとえば、次のような高度な制御が可能です。
・ハイライト前の準備：対象要素がまだ画面外なら、スクロールして表示してからハイライトする
・ハイライト後の演出：要素が強調された瞬間にアニメーションを加える
・ステップ遷移の制御：特定の条件を満たさなければ次へ進ませない（フォーム入力必須など）
・動的なコンテンツ：APIから取得したデータを吹き出しに差し込む
主要な設定オプションも豊富です。ツアーの進捗表示（showProgress）、ボタンのラベルやテキストの変更、オーバーレイの色や不透明度、ハイライトのパディングや角丸、アニメーションの有無、特定要素のクリック許可——といった細部まで、思いどおりに調整できます。
これらのフックとオプションを組み合わせると、かなり凝った体験も実現できます。たとえば、フォームの入力ツアーで「メールアドレスを入力してください」とハイライトし、ユーザーが実際に入力するまで「次へ」を無効化する。あるいは、SPA（シングルページアプリケーション）で、ツアーのステップに応じて画面遷移を自動で行い、遷移後の要素をハイライトする。さらに、ハイライト中の要素だけはクリックを許可して、ユーザーに実際に操作を体験させる「インタラクティブ・ツアー」も作れます。こうした作り込みは、オンボーディングの完了率を大きく左右する要素です。単に「読ませる」だけでなく「やらせる」ツアーは、機能の定着に直結します。
ボタンのテキストやラベルを変更できることは、多言語対応の観点でも重要です。「Next」「Previous」「Done」といったデフォルトのボタン文言を、日本語の「次へ」「戻る」「完了」に差し替えるのも設定一つです。グローバルなプロダクトでも、日本語に閉じたサービスでも、ユーザーの言語に合わせた自然な案内を提供できます。
Driver.jsの良さは「最初は3行で動き、必要になったら深くカスタマイズできる」という段階性にあります。とりあえずツアーを出すだけなら数分で実装でき、後からフックやオプションで体験を磨き込める。この『簡単に始められて、際限なく作り込める』バランスが、長年支持され続ける理由です。
5. ライフサイクルと、ツアーが動く流れ
Driver.jsのツアーが、内部的にどう進むのかを概念図で整理します。フックがどのタイミングで呼ばれるかを理解すると、カスタマイズの勘所が掴めます。
steps やオプションを設定"] --> B["drive() でツアー開始"] B --> C["ステップのハイライト前
onHighlightStarted フック"] C --> D["対象要素をハイライト
背景を暗転・吹き出し表示"] D --> E["ハイライト完了
onHighlighted フック"] E --> F{"ユーザー操作"} F -->|"次へ / 前へ"| G["選択解除
onDeselected フック"] G --> C F -->|"完了 / 閉じる"| H["ツアー終了
onDestroyed フック"]
この図が示すとおり、ツアーは「初期化 → 開始 → 各ステップ（ハイライト前→ハイライト→操作→解除）の繰り返し → 終了」という素直なライフサイクルで動きます。複雑な内部状態を意識しなくても、この流れさえ掴めば、どこに何のフックを差し込めばよいかが見えてきます。各段階にフックが用意されているため、「このステップに来たら特定の要素を表示する」「ツアーが終わったら完了フラグを保存する」といった処理を、自然に組み込めます。
たとえば、ツアー完了時の onDestroyed フックで「このユーザーはオンボーディングを見た」という状態を localStorage やサーバーに保存すれば、2回目以降は自動でツアーをスキップする——といった実装も容易です。初見ユーザーには丁寧に案内し、リピーターには邪魔をしない。この出し分けこそ、良いオンボーディングの基本です。
逆に、押し付けがましいツアーは逆効果になります。毎回起動するたびに同じ案内が出る、スキップできない、説明が長すぎる——こうしたツアーは、ユーザーに「邪魔」と感じさせ、かえって離脱を招きます。Driver.jsはキーボードでの操作（Escで閉じる等）や任意のステップへのスキップに対応しており、「いつでも抜けられる」自由をユーザーに残せます。ツアーは「見せたい側」の都合ではなく、「学びたい側」のペースに寄り添うべきもの。フックと状態管理を組み合わせて、その配慮を実装できることが、Driver.jsの実用性の核心です。
6. 他の選択肢との違いと、どんな人に向くか
ここで触れておきたいのが、アクセシビリティへの配慮です。Driver.jsは「すべてをキーボードで制御できる」ことを明確な特徴として掲げています。マウスを使えないユーザーや、スクリーンリーダーを利用するユーザーにとって、キーボードだけでツアーを進めたり閉じたりできることは重要です。オンボーディングは「すべてのユーザー」に届くべきものであり、一部のユーザーを置き去りにしないこの設計姿勢は、プロダクトの品質に対する開発者の誠実さを映しています。アクセシビリティは後回しにされがちな領域だけに、ライブラリ側が標準で対応してくれる意義は小さくありません。
プロダクトツアー系のライブラリは他にもいくつかあります。Driver.jsの立ち位置を、比較して整理します。
| 観点 | Driver.js | 重量級ツアーライブラリ | SaaS型オンボーディングツール |
|---|---|---|---|
| 形態 | OSSライブラリ | OSS/商用ライブラリ | 外部SaaS（ノーコード） |
| サイズ | 約5kb（gzip） | 12kb以上が多い | 外部スクリプト読み込み |
| 依存 | ゼロ | フレームワーク依存もある | ベンダーに依存 |
| 費用 | 無料（MIT） | 無料〜有料 | 月額課金が一般的 |
| 自由度 | コードで完全制御 | 中〜高 | GUI中心で制約あり |
Driver.jsが特に向くのは、次のような人々です。
第一に、バンドルサイズに敏感な開発者です。パフォーマンスを重視するプロダクトで、案内機能のために重い依存を足したくない場合、約5kb・依存ゼロのDriver.jsは理想的です。Core Web Vitalsのようなページ性能指標が検索順位にも影響する今、たかが案内機能のために数十kbを増やすのは避けたい——という判断は、多くの開発者にとって現実的です。
第二に、コードで細かく制御したい開発者です。SaaS型のノーコードツールは手軽ですが、デザインや挙動に制約があり、月額費用もかかります。さらに、外部スクリプトを読み込む方式はページ速度やプライバシーの観点で懸念が残ることもあります。Driver.jsなら、自分のコードベースの中で、見た目も動きも完全にコントロールでき、外部サービスへの依存もありません。プロダクトの中核体験であるオンボーディングを、他社のサービスに預けたくない——という判断は、十分に合理的です。
第三に、フレームワークを問わず使いたいチームです。Driver.jsはバニラなTypeScript/JavaScriptで書かれているため、React・Vue・Angular・Svelte、あるいは素のHTMLまで、どんな環境にも組み込めます。フレームワーク専用のツアーライブラリだと、技術スタックを変えた途端に使えなくなりますが、Driver.jsならその心配がありません。社内で複数の技術スタックが混在していても、オンボーディングの実装ノウハウを一つに統一できるのは、チームにとって地味に大きなメリットです。
一方で、注意点も挙げておきます。Driver.jsはあくまで「表示・誘導」のライブラリであり、ツアーの効果測定（どこでユーザーが離脱したか等の分析）や、ノーコードでのツアー編集といった機能は持ちません。これらが必要なら、有料のSaaS型オンボーディングツールのほうが向く場合もあります。Driver.jsは「コードで完全に制御したいが、分析や管理画面は自前で用意する（あるいは不要）」という開発者向けの選択肢だと理解しておくとよいでしょう。逆に言えば、余計な機能を背負わない分、軽量で自由なのです。
そして、AIプロダクトを作る開発者にとっても無関係ではありません。新しいAIツールやエージェントのUIは、ユーザーにとって馴染みのない操作が多く、丁寧なオンボーディングがとりわけ重要になります。「このチャット欄でこう指示します」「生成結果はここに出ます」といった案内を、Driver.jsで軽量に実装できることは、AIプロダクトの定着率を高める地味だが効果的な一手になります。
AIプロダクトは、従来のソフトウェア以上に「使い方が分からない」という壁にぶつかりがちです。なぜなら、AIは「何ができるか」がユーザーに伝わりにくいからです。空のチャット欄を前に「で、これに何を入力すればいいの?」と固まってしまうユーザーは少なくありません。こうした場面で、Driver.jsによる初回ツアーが「まずはここに、こんな指示を入れてみてください」と具体例を示せれば、最初の成功体験までの距離が一気に縮まります。AIの能力をどれだけ磨いても、ユーザーがそこにたどり着けなければ意味がありません。優れたオンボーディングは、AIプロダクトにおいてこそ価値を増すのです。
加えて、AIコーディングエージェントの普及は、Driver.jsのようなライブラリの導入障壁をさらに下げています。「この画面にプロダクトツアーをDriver.jsで追加して」とエージェントに指示すれば、ステップ定義のコードを自動生成してくれる時代です。ライブラリ自体がシンプルでAPIが素直なため、AIにとっても扱いやすく、人間とAIの協働でオンボーディングを素早く整備できます。
Driver.jsは、依存ゼロ・約5kbという驚異的な軽さで、ページ上の要素をハイライトしてユーザーを案内する、プロダクトツアーの定番OSSです。ツアーだけでなく、機能紹介・フォーカス誘導・文脈ヘルプ・モーダルまで、「注意の誘導」が必要なあらゆる場面で使えます。3行で始められ、フックで際限なく作り込める段階性、フレームワーク非依存の汎用性、そしてMITライセンスの自由さ——長年25,000以上のスターを集め続ける理由は、この『簡単・軽量・自由』の三拍子にあります。新機能が使われないと悩む前に、まず案内役を一つ、置いてみてはいかがでしょうか。
まとめ
本記事では、依存ゼロ・約5kbでプロダクトツアーや機能紹介を実装できる定番ライブラリ Driver.js を、当サイトの番外編として解説しました。
Driver.jsの本質は、「ページ上の注意の誘導」という一点に特化し、それを極限まで軽く・潔く実現していることにあります。背景を暗転させ、対象要素だけをハイライトし、吹き出しで説明する——このシンプルな機能が、プロダクトツアー、機能紹介、フォーカス誘導、文脈ヘルプ、モーダルと、驚くほど多くの場面で役立ちます。
3行で動き始め、フックとオプションで際限なくカスタマイズできる段階性。React・Vue・素のHTMLまで選ばないフレームワーク非依存性。そしてMITライセンスの自由さ。これらが揃ったDriver.jsは、Web開発者の道具箱に常備しておく価値のある、息の長い名作OSSです。AIプロダクトのオンボーディングを含め、「作った機能を、ちゃんと使ってもらう」ための確かな一手として、ぜひ一度試してみてください。
よくある質問（FAQ）
Q1. Driver.jsとは何ですか? ページ上の任意の要素をハイライトし、吹き出しで説明を添えてユーザーの視線を誘導するJavaScriptライブラリです。プロダクトツアー、機能紹介、フォーカス誘導などに使えます。依存ゼロ・約5kb（gzip）・MITライセンスで、GitHubで25,000スター超を集めています。
Q2. ツアー専用のライブラリですか? いいえ。ツアーは用途の一つにすぎません。公式は「ページにオーバーレイが欲しいあらゆる場面」で使えると説明しており、機能紹介、フォーカス誘導、フォーム入力時の文脈ヘルプ、動画の『ライトを消す』効果、軽量モーダルなど、幅広く応用できます。
Q3. どのフレームワークで使えますか? バニラなTypeScript/JavaScriptで書かれ依存ゼロのため、React・Vue・Angular・Svelte、素のHTMLまで、どんな環境でも使えます。フレームワークを問わない汎用性が強みです。
Q4. 無料で商用利用できますか? できます。Driver.jsはMITライセンスのオープンソースで、個人・商用を問わず無料で利用・改変・再配布が可能です。
Q5. なぜこんなに軽いのですか? 外部依存を一切持たず、機能を「注意の誘導」に絞り込んでいるためです。多くの類似ライブラリが12kb以上ある中、Driver.jsはgzipで約5kbに収まります。バンドルサイズはページ速度やSEOに直結するため、この軽さは実用上の大きな利点です。
Q6. AIプロダクトの開発に役立ちますか? 役立ちます。AIツールやエージェントのUIは初見ユーザーに馴染みが薄く、丁寧なオンボーディングが定着率を左右します。「ここに指示を入力」「結果はここに表示」といった案内を、Driver.jsで軽量に実装でき、AIプロダクトの使われ方を改善できます。
参照ソース
・Driver.js（nilbuild/driver.js 公式リポジトリ） — 本記事が解説した一次情報。特徴・用途・開発情報
・Driver.js 公式サイト・ドキュメント — デモとAPIドキュメント
・driver.js（npm） — パッケージ配布元
