mcpField
O
Onboarding Designer

Onboarding Designer

github.com/jmsktmデザイン・UI10202 回インストール40 週間前に更新
リポジトリ

Onboarding Designer について

Onboarding Designerは、ユーザーオンボーディングの設計、文案作成、改善を支援するスキルです。プロダクト設計やグロースに向け、アクティベーションの定義からメール施策、効果分析まで扱います。

主な機能

  1. 01アクティベーション指標とファネルの定義
  2. 02パーソナライズされた導線の設計
  3. 03画面文言やヒントの作成
  4. 04オンボーディングメールの計画
  5. 05指標分析と体験の改善

活用シーン

  1. 01プロダクトのアクティベーション基準の設定
  2. 02登録後のユーザー導線の設計
  3. 03案内手順やメール文面の作成
  4. 04オンボーディングファネルの離脱点の特定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/jmsktm/claude-settings --skill onboarding-designer

インストール後、Claude Code で/onboarding-designerを入力して読み込まれたか確認します。

詳細

オンボーディングデザイナー

初回訪問者を、利用を開始して成果を上げるユーザーへと導く、専門的なユーザーオンボーディングシステムです。このスキルでは、ユーザーの利用開始と長期的な継続を促すオンボーディング体験を設計、実装、最適化するための体系的なワークフローを提供します。

オンボーディングは、ユーザーの継続率に最も大きな効果をもたらす投資です。最初のセッションで、ユーザーが顧客になるか、離脱するかが決まります。このスキルは、ユーザーができるだけ早く「なるほど」と実感できる瞬間にたどり着けるオンボーディングフローの設計に役立ちます。

プロダクト主導の成長原則と行動心理学に基づき、このスキルではユーザー調査、フロー設計、データに基づく最適化を組み合わせ、ユーザーの獲得と継続につながるオンボーディング体験を作り上げます。

コアワークフロー

ワークフロー 1:利用開始の定義

プロダクトにおける「利用開始」の意味を定義する

  1. 「なるほど」と実感できる瞬間の発見

    • ユーザーコホート(継続ユーザーと離脱ユーザー)を分析する
    • 継続率と相関する行動を特定する
    • 最小限の価値あるアクションを見つける
    • 利用開始までの期間を定義する(一般的には最初の 7 日間)
    • 利用開始を測る指標を文書化する
  2. 利用開始の基準例

    プロダクトの種類利用開始の指標
    SaaS ツールコアアクションを 3 回以上完了
    マーケットプレイス初回購入
    ソーシャルアプリ5 人以上とつながる
    生産性向上ツール最初のプロジェクト/項目を作成
    B2B プラットフォームチームメンバーを招待
  3. 利用開始ファネル

    • サインアップ完了
    • プロフィール/アカウントの設定
    • コア機能の発見
    • 最初の意義あるアクション
    • アクションの繰り返し(価値を確認)
  4. 測定フレームワーク

    • ファネルの各ステップを正確に定義する
    • イベントトラッキングを設定する
    • ステップ間のコンバージョンを計算する
    • 業界標準と比較する
    • 改善目標を設定する
ワークフロー 2:オンボーディングフローの設計

サインアップから利用開始までの道筋を設計する

  1. フロー構成の選択肢

    • 直線型:ステップごとに順を追って案内する
    • 段階型:ユーザーの進行に合わせて機能を紹介する
    • チェックリスト型:進捗を確認しながらユーザー自身が進める
    • コンテキスト型:利用中に適切なタイミングでヒントを表示する
    • ハイブリッド型:複数のアプローチを組み合わせる
  2. フローの構成要素

    • ウェルカム画面:期待値を設定し、価値を示す
    • アカウント設定:必要最低限の情報だけを収集する
    • 製品ツアー:主要な機能を紹介する
    • 最初のタスク:初めての成功へ導く
    • 進捗インジケーター:完了状況を表示する
    • 空の状態:データがないときにユーザーを案内する
  3. パーソナライズの要素

    • ユーザーの役割/ペルソナ
    • ユースケース/目標
    • 会社の規模
    • 過去の経験
    • 流入経路/紹介元
  4. フローの原則

    • 利用開始までのステップを最小限にする
    • 進捗と勢いを示す
    • 小さな成功を称える
    • スキップを可能にしつつ、完了を促す
    • いつでも中断できるようにする
ワークフロー 3:コンテンツとメッセージ

ユーザーの意欲を高め、導くコピーを書く

  1. ウェルカムメッセージ

    • ユーザーの目標を理解していることを伝える
    • 得られる価値を予告する
    • 明確な期待値を設定する
    • 圧倒させずに期待感を高める
  2. 操作ガイドのコンテンツ

    • 行動を促す見出し
    • 画面ごとに指示を 1 つにする
    • 可能であれば、テキストよりビジュアルを使う
    • 機能とあわせてメリットを示す
    • 進捗インジケーター
  3. マイクロコピーのパターン

    • ボタン:具体的なアクション(「最初のプロジェクトを作成する」)
    • ラベル:明確で、専門用語を使わない表現
    • ツールチップ:簡潔で、状況に即した説明
    • エラー:責めるのではなく、役立つ説明
    • 空の状態:実行可能なガイダンス
  4. 意欲を高めるテクニック

    • ソーシャルプルーフ(X 人のユーザーが実行しました)
    • 進捗の可視化
    • 価値をすぐに実感できるデモ
    • パーソナライズ(「あなたのダッシュボード」)
    • コミットメントと一貫性
ワークフロー 4:メールオンボーディングシーケンス

メールでナーチャリングしながら、アプリ内フローをサポートします

  1. メールシーケンスの構成

    日メールの目的
    0ようこそ+すぐに成果を得られるアクション
    1主要機能の紹介
    3ユースケースの例/アイデア
    5よくある懸念の解消
    7アクティベーションの確認、またはソーシャルプルーフ
    14高度な機能、またはアップグレードの案内
  2. メールコンテンツの原則

    • メールごとに明確なCTAを1つにする
    • 特定のアプリ内アクションにリンクする
    • 150語以内に収める
    • ユーザーデータを活用してパーソナライズする
    • 件名をA/Bテストする
  3. 行動トリガー

    • セットアップが未完了 → リマインダー
    • X日間ログインがない → 再エンゲージメント
    • 機能を利用した → 関連機能の紹介
    • 上限に近づいている → アップグレードの案内
    • アクティベーションを達成した → お祝い
  4. セグメンテーション

    • アクティベーションの状況別
    • ユーザーペルソナ/役割別
    • 機能の利用状況別
    • エンゲージメントレベル別
    • 登録元別
ワークフロー 5:測定と最適化

パフォーマンスを追跡し、改善を繰り返します

  1. 主要な指標

    • アクティベーション率:アクティベーション状態に達した登録ユーザーの割合
    • アクティベーションまでの時間:登録からアクティベーションまでの日数/時間
    • ファネルコンバージョン率:各ステップを完了したユーザーの割合
    • 離脱ポイント:ユーザーが離脱する場所
    • 再訪率:初回セッション後に再訪したユーザーの割合
  2. ファネル分析

    • 各オンボーディングステップをイベントに対応付ける
    • ステップ間のコンバージョン率を計算する
    • 最大の離脱ポイントを特定する
    • ユーザー属性別にセグメント化する
    • コホートを経時的に比較する
  3. 最適化の実験

    • ステップの順序をA/Bテストする
    • コピーのバリエーションをテストする
    • さまざまなUIパターンを試す
    • パーソナライズを試す
    • メールの配信タイミングと内容をテストする
  4. 定性調査

    • ユーザーセッションの録画
    • 新規ユーザーへのインタビュー
    • サポートチケットの分析
    • 解約に関するアンケート
    • アプリ内フィードバックの収集

クイックリファレンス

アクションコマンド/トリガー
アクティベーションを定義する"[product] のアクティベーション指標を定義する"
オンボーディングフローを設計する"[product] のオンボーディングフローを作成する"
オンボーディングのコピーを作成する"[step] のオンボーディングコンテンツを書く"
メールシーケンスを作成する"オンボーディングメールシーケンスを設計する"
離脱を分析する"オンボーディングファネルを分析する"
ステップを最適化する"[step] のオンボーディングを改善する"
空の状態を設計する"[feature] の空の状態を作成する"
プロダクトツアーを作成する"[feature] のプロダクトツアーを設計する"
チェックリストを作成する"オンボーディングチェックリストを作成する"
競合を調査する"競合他社のオンボーディングを分析する"

ベストプラクティス

フロー設計
  • 5分以内にユーザーが価値を得られるようにする
  • 最初に収集する情報は必須のものだけにする
  • 重要度の低いセットアップは後回しにする
  • 説明するより、実際に見せる(インタラクティブ > 説明)
  • 最初のアクションで成功を実感できるようにする
パーソナライズ
  • 属性ではなく、目標について尋ねる
  • 回答を使って体験をカスタマイズする
  • 関連するユースケースや例を表示する
  • 該当しないステップは省略する
  • 次回以降のセッションでも選択内容を記憶する
進捗とモチベーション
  • 完了率を表示する
  • マイルストーンの達成を祝う
  • 複数ステップのプロセスにはチェックリストを使う
  • 早い段階で小さな成果を得られるようにする
  • 小さな成功を重ねて勢いを生み出す
摩擦の軽減
  • フォームの入力項目を最小限にする
  • ソーシャルログイン/SSOでの登録を可能にする
  • 可能な項目は事前入力する
  • 適切なデフォルト値を用意する
  • デフォルトでは任意のステップを省略する
再開のサポート
  • ユーザーが離脱した場合は進捗を保存する
  • 再エンゲージメントメールを送る
  • 複数の開始ポイントを用意する
  • 完了済みのステップをやり直させない
  • 行き詰まったときにヘルプを提供する

オンボーディングのパターン

パターン 1:ウェルカムモーダル
[Visual: Product screenshot or illustration]

# Welcome to [Product], [Name]!

You're about to [key benefit].

Let's get you set up in just 2 minutes.

[Get Started] [Skip for now]
パターン 2:ステップごとのセットアップ
Step 1 of 4: [Step Name]

[Clear instruction]

[Input or action area]

[Visual hint or example]

[Back] [Continue]

Progress: ████░░░░░░ 40%
パターン 3:チェックリストダッシュボード
# Getting Started

Complete these steps to get the most from [Product]:

☑ Create your account
☐ Set up your profile
☐ Connect your [integration]
☐ Create your first [item]
☐ Invite your team

[3 of 5 complete - 60%]
パターン 4:ガイダンス付きの空の状態
[Illustration]

# No [items] yet

[Items] help you [benefit].

Create your first one to see [Product] in action.

[Create [Item]]

---
Need inspiration? [See examples]
パターン 5:コンテキストに応じたツールチップ
┌─────────────────────────────────┐
│ 💡 Pro tip                      │
│                                 │
│ Click here to [action] and     │
│ [benefit explanation].          │
│                                 │
│ [Got it] [Show me more]         │
└─────────────────────────────────┘

メールテンプレート

0日目:ウェルカムメール
Subject: You're in! Here's your quick start guide

Hi [Name],

Welcome to [Product]!

You just took the first step toward [key benefit].

Here's how to get value in the next 5 minutes:

1. [Quick action with link]

That's it. Do that one thing and you'll see why [Product] is different.

Questions? Just reply to this email.

[CTA: Complete Your First [Action]]

— The [Product] Team
3日目:ユースケースの紹介
Subject: How [Customer] uses [Product] to [result]

Hi [Name],

Wondering what's possible with [Product]?

Here's how [Customer Name] uses it:

"[Short testimonial about specific use case and result]"

You can do the same thing in [Product] by:
1. [Step with link]
2. [Step with link]

[CTA: Try This Now]
7日目:アクティベーションの確認
Subject: Quick question about your experience

Hi [Name],

I noticed you [signed up but haven't / started to] [key action].

Is everything working okay? I'd love to help if you're stuck.

Just hit reply and let me know:
- What were you hoping to accomplish?
- What's getting in the way?

I read every response personally.

— [Name], [Title] at [Product]

注意すべき兆候

  • 情報過多:一度に多くの機能を紹介しすぎています
  • すぐに得られる成果がない:ユーザーが最初のセッションで価値を実感できません
  • 完了の強制:必須ではない手順をスキップできません
  • パーソナライズの欠如:すべてのユーザータイプで同じフローになっています
  • 進捗状況がわからない:残りの手順がどれくらいあるか示されていません
  • 行き詰まり:次に何をすればよいか明確でない手順があります
  • 進捗の喪失:ユーザーが離れると最初からやり直しになります
  • 専門用語:内部で使われる用語を使用しています

指標のベンチマーク

指標良好優秀クラス最高
登録からアクティベーションまでの割合30%50%70%+
アクティベーションまでの時間7日3日同一セッション内
初回セッションの時間5分10分15分以上
1日目の再訪率25%40%60%+
7日目の再訪率15%25%40%+
オンボーディング完了率40%60%80%+

コメント