Skip to content
K
KGAIT Solutions
制作実績一覧
マイクロSaaS / プロダクトBeta

NAVI — プロダクトオンボーディングSDK

NAVI — Product Onboarding SDK

SaaS製品向けにノーコードでプロダクトツアー、チェックリスト、NPS調査を構築できる軽量SDK。Web Components + Shadow DOMで宿主アプリのスタイル汚染を防ぎ、1KB未満のコア + 遅延ロードで実現する。

2026 ベータ 2026-03
#SDK#Growth#Web Components#Edge#Analytics#No-code

ライブデモ

実際のアプリケーション画面のプレビュー

DEMO
app.navi.jp/dashboard

オンボーディングフロー

新規ユーザー向け · アクティブ

ライブ
Step 1ウェルカム
メッセージ

パーソナライズされた挨拶とプロダクト紹介

完了率98%
平均所要時間8秒
Step 2機能紹介
インタラクティブ

主要機能のハンズオンガイド（5ステップ）

完了率72%
平均所要時間2分30秒
Step 3完了
チェックリスト

セットアップ確認と次のステップ案内

完了率58%
平均所要時間45秒

コンバージョンファネル

ウェルカム画面
100%
2,480人
プロフィール設定
86%
2,133人
-14%
機能紹介ツアー
72%
1,786人
-14%
初回アクション
58%
1,438人
-14%
完了
51%
1,265人
-7%

NPS スコア

+4
72
58%推奨者
28%中立
14%批判者
回答数: 1,840件

ユーザーセグメント

リアルタイムアクティビティ

田中太郎 が オンボーディング完了

2分前

完了

佐藤花子 が 機能紹介でドロップ

5分前

Step 2

鈴木一郎 が ウェルカム閲覧

8分前

Step 1

高橋美咲 が オンボーディング完了

12分前

完了

伊藤健太 が プロフィール設定スキップ

15分前

Step 2

課題

既存のオンボーディングSaaSはSDKサイズが大きく、宿主アプリのパフォーマンス予算を圧迫する。またCSS衝突やイベント競合が発生しがちで、宿主開発者の負担が大きい。

ソリューション

コアランタイムを Preact signals ベースで 0.9KB(gzip) に抑え、フローはCloudflare Workersから遅延ロード。UIは Web Components + Shadow DOM で完全に隔離し、イベントは宿主の CustomEvent で取得。管理UIは DnD でフローを構築し、React / Vue / Svelte を混在させるデモも用意。

成果

  • コアSDK 0.9KB (gzip) / ランタイム初期化 6ms
  • フロー配信はグローバルP95 120ms
  • 社内試験製品のD7 リテンションを +22pt
  • 宿主スタイル汚染インシデント 0件
Key Metrics

Measured Impact

コアSDK

0.9KB

初期化時間

6ms

グローバルP95

120ms

D7リテンション

+22pt

Features

What it does

SDK

超軽量コア

0.9KB(gzip)でツアー / チェックリスト / NPSをサポート。

宿主非干渉

Shadow DOMで完全隔離し、宿主のCSS/JSを汚染しない。

ビルダ

条件分岐フロー

ユーザー属性 / 行動に応じて分岐するフローを視覚的に構築。

多言語

フロー単位で多言語コンテンツを管理。

分析

フローファネル

各ステップの離脱率を可視化。

NPS トレンド

NPSスコアの時系列とカテゴリ別要因を分析。

Architecture

System Layers

Layered architecture showing components, responsibilities, and data flow.

L1

Layer

SDK

宿主アプリに依存せず動作するスタンドアロンSDK。

Preact SignalsWeb ComponentsShadow DOM
L2

Layer

配信

フロー定義はエッジキャッシュから最速で配信。

Cloudflare WorkersKVETag
L3

Layer

管理画面

Drag & Drop でフローを構築し、JSONスキーマをPgに保存。

Next.jsReact DnDZod
L4

Layer

分析

アクション完了率やNPSスコアを時系列で可視化。

PostHogClickHouse
L5

Layer

品質

主要ブラウザでの表示回帰をVisual Regressionで検出。

PlaywrightVisual Regression
Development Process

How we built it

01

Discovery

自社プロダクトおよび友人企業のオンボーディング痛点をインタビュー。

Deliverables

  • 痛点マップ
02

パフォーマンス要件

コアSDKサイズと初期化時間のハード予算を設定。

Deliverables

  • 予算ドキュメント
03

SDK設計

Shadow DOM境界とイベントインターフェースを決定。

Deliverables

  • ADR
04

Implementation

コアランタイム → 管理画面 → 分析の順で実装。

Deliverables

  • SDKパッケージ
  • ダッシュボード
05

QA

Playwright + Visual Regression + SDKバジェットCIで防御。

Deliverables

  • CIパイプライン
06

Beta

自社および協業プロダクト3つで試験導入。

Deliverables

  • ベータFB
07

Iteration

フロー完了率を指標にしたA/B改善サイクル。

Deliverables

  • 改善レポート
Roadmap

Delivery Timeline

  • P0Done2026-03-08

    SDKアーキテクチャ

    コアランタイムとフロー遅延ロードの分離方針を確定。

  • P1Done2026-03-26

    コアランタイム

    0.9KBのコアランタイムを実装し、シンプルツアーを動作検証。

  • P2In Progress2026-04-18

    ビジュアルビルダ

    ノーコードビルダで条件分岐フローを構築可能にする開発中。

  • P3Planned2026-05

    NPS & 分析

    PostHog連携でNPSおよびアクションイベント分析を予定。

  • P4Planned2026-06

    一般公開

    マイクロSaaSとして料金プラン整備後に公開予定。

Team

Who built it

2engineers

Roles

  • フロントエンドエンジニア
  • バックエンド/エッジ
技術スタック

Tools & Platforms

Frontend

TypeScriptPreact

Data

PostgreSQL

Infrastructure

Cloudflare Workers

Other

SignalsWeb ComponentsShadow DOMDurable ObjectsKVPostHogSupabasePlaywright
前のプロジェクト次のプロジェクト
Build with KGA

同様のプロジェクトをお考えですか？

お客様のビジネスに最適なソリューションをご提案いたします。

プロジェクトを相談する