はじめに
個人開発しているタスク管理Webアプリ「LinkTasky」に
オンボーディングツアーを入れたくなり、
軽量でシンプルな driver.js を使ってみました。
結論から言うと、
- 実装がかなり簡単
- バニラJSでOK
- Djangoテンプレートとも相性がいい
という感じで、個人開発・小規模アプリにはかなりおすすめでした。
driver.jsとは？
driver.jsは、
画面上の要素を順番にハイライトして説明できるライブラリです。
- CDNで使える
- 依存関係なし
- デザインがシンプル
- 設定が直感的
公式
https://github.com/kamranahmedse/driver.js
なぜdriver.jsを選んだか
いくつかオンボーディング系ライブラリを検討しましたが、
- Shepherd.js → 少し重い
- Intro.js → 商用利用が微妙
- 自作 → さすがに大変
ということで、
👉 「軽くて無料で、すぐ使える」driver.js にしました。
CDNでの導入
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.css">
<script src="https://unpkg.com/driver.js/dist/driver.js.iife.js"></script>
基本的な使い方
const driver = new Driver({
animate: true,
opacity: 0.75,
showProgress: true,
nextBtnText: '次へ',
prevBtnText: '戻る',
doneBtnText: '完了'
});
driver.defineSteps([
{
element: '#createTaskBtn',
popover: {
title: 'タスク作成',
description: 'ここから新しいタスクを作れます'
}
},
{
element: '#taskList',
popover: {
title: 'タスクリスト',
description: '作成したタスクがここに表示されます'
}
}
]);
driver.start();
初回だけ表示したい（localStorage）
毎回表示されると邪魔なので、
初回アクセス時のみ表示するようにしました。
document.addEventListener("DOMContentLoaded", () => {
if (localStorage.getItem("onboard_done")) return;
driver.start();
localStorage.setItem("onboard_done", "true");
});
補足
ページが複数ある場合は、localStorageのキーを分けると安全
オンボーディングを再表示したい場合はキーを削除すればOK
Djangoで使ってみて感じたこと良かった点
Djangoテンプレートと相性がいい
バニラJSで完結する
フロント構成を壊さない
UXが一気に改善される
注意点
id や class は安定したものを使う
ページ遷移がある場合は設計を少し考える
表示条件（ログイン後／初回のみ）は必ず制御する
実際に導入して感じた効果
新規ユーザーの「何をすればいいかわからない」が減った
機能が多くても迷いにくくなった
サービス全体の完成度が上がった
オンボーディングは機能追加以上に効くと実感しました。
まとめ
driver.jsは軽量で簡単
Django × バニラJSでも問題なし
個人開発・小規模Webサービスに最適
UX改善のコスパがかなり高い
「オンボーディング入れたいけど大げさなのは嫌」という人は、
まずdriver.jsを試してみるのがおすすめです。
おまけ：作っているサービスの紹介
今回オンボーディングを導入したのは、
個人開発しているタスク管理Webアプリ LinkTasky（リンクタスキー） です。
- タスクを「リンク（URL）」単位で整理
- よくある作業をテンプレート化
- 初めての作業でも迷いにくい設計
「やることは分かってるけど、毎回調べ直すのが面倒」
そんな人向けに作っています。
オンボーディングやUXは今も改善中なので、
触ってみてフィードバックもらえると嬉しいです 🙏