mcpField
O
onboarding-design

onboarding-design

github.com/owl-listenerデザイン・UI3.1k1.8k 回インストール8 週間前に更新
リポジトリ

onboarding-design について

登録から初めて意味のある操作を行うまでの初回体験を設計するオンボーディングのスキルです。製品チームが手法を選び、設定の負担を減らし、アクティベーションや離脱を測定するのに役立ちます。

主な機能

  1. 01初回利用体験の設計
  2. 024種類のオンボーディング手法
  3. 03設定負担の軽減
  4. 04オンボーディング指標の定義
  5. 05よくある設計上の問題を提示

活用シーン

  1. 01新規ユーザーの設定フロー計画
  2. 02初回価値到達までの時間短縮
  3. 03設定中の離脱削減
  4. 04オンボーディング効果の評価

インストール

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

$npx skills add https://github.com/owl-listener/designer-skills --skill onboarding-design

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

詳細

オンボーディング設計

ユーザーを導き、安心感を育み、価値を実感するまでの時間を短縮するオンボーディングフローの設計を専門としています。

できること

サインアップから最初の意味あるアクションまで、初回利用の体験をエンドツーエンドで設計します。新規ユーザーが、製品の機能や自分にとっての重要性、使い始め方を理解できるようにします。

オンボーディングの目標(優先順位順)

  1. すばやく価値を実感してもらう:ユーザーが中核となるメリットを早く体験するほど、離脱する可能性は低くなります
  2. 教え込むのではなく、状況を把握してもらう:背景や次のステップを示し、最初からすべての機能を教えようとしないでください
  3. 自信を育む:機能を見せることよりも、早い段階で成功体験を得てもらうことが重要です
  4. セットアップの手間を減らす:今必要な情報だけを集め、残りは後回しにしてください

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

段階的なオンボーディング

専用のオンボーディングフローではなく、機能が必要になるタイミングで、その場に応じて使い方を説明します。機能が多い複雑なツールや、経験豊富なユーザーに最適です。

  • 機能の初回使用時にツールチップを表示する
  • 空の状態で、ここに何を追加するのかを説明するプロンプトを表示する
  • ユーザーの操作をきっかけに、状況に応じたコーチマークを表示する
セットアップウィザード/ステップ

製品を使えるようになる前に必要な設定を、順を追って案内します。初期設定なしでは機能しない製品(チームツール、データ連携、設定項目の多いアプリ)に最適です。

  • ステップは最小限にします。ステップが増えるたびに、離脱するユーザーが出てきます
  • 進捗を表示し、任意のステップはスキップできるようにします
  • 完了を祝います
サンプルデータ/デモモード

サンプルコンテンツをあらかじめ製品に用意し、ユーザーが自分のデータを追加する前に、すべての機能を使える製品を体験できるようにします。空の状態では使い方がわかりにくい製品(ダッシュボード、プロジェクトツール、CRM)に最適です。

  • サンプルデータであることを明確にします
  • 簡単に消去して、最初からやり直せるようにします
  • 現実的でプロフェッショナルなサンプルコンテンツを使います
インタラクティブな製品ツアー

実際の製品 UI を案内しながら、主要なエリアを強調表示します。中核となる3~5つの概念に絞り、網羅的なツアーは避けましょう。

  • いつでも終了できるようにします
  • ツアーからユーザーが抜け出せなくなるような設計は避けます
  • 存在する機能だけでなく、何をすべきかを示します

オンボーディングとしての空の状態

新規ユーザーが目にする空の状態は、製品の中核となるループを体験する最初の機会です。意図を持って設計しましょう。

  • この場所が何のためにあるのかを説明する
  • 最初のアクションを明確に示す(「最初のプロジェクトを作成」)
  • データが入力された状態をプレビューで見せる(イラストまたはサンプル)
  • 列見出しだけが並ぶ空のテーブルを表示しない

セットアップの手間を減らす

  • 情報収集を後回しにする:ユーザーが価値を実感する前に、プロフィール写真、請求情報、設定を求めないでください
  • 段階的に情報を開示する:最初にまとめて尋ねるのではなく、ユーザーの進行に合わせて追加情報を尋ねます
  • 適切なデフォルト値を設定する:妥当な初期設定をあらかじめ適用し、すぐに使い始められるようにします
  • ソーシャルログイン/SSO サインアップ:ワンクリックのサインインで登録の手間を減らします
  • スキップ/後で行うオプション:重要でないステップはスキップできるようにし、後から製品内で表示します

オンボーディングの成功を測定する

  • アクティベーション率:定義された「最初の価値」につながるアクションを完了したサインアップユーザーの割合
  • アクティベーションまでの時間:サインアップから最初の価値につながるアクションまでの時間
  • オンボーディング完了率:セットアップのステップを完了したユーザーの割合
  • 7日後/30日後のリテンション率:オンボーディングの質を予測する、その後の指標
  • ステップごとの離脱率:フローのどこでユーザーが離脱するか

よくある間違い

  • ユーザーが機能を使う理由を理解する前に、機能ツアーを見せる
  • 価値を届ける前に、プロフィール、設定、請求情報などを過剰に集める
  • オンボーディングを一度きりのイベントとして扱う。オンボーディングを逃した再訪ユーザーや、しばらく間を空けて戻ってきたユーザーにも、改めて案内が必要です
  • 空の状態の設計を省略する。新規ユーザーは、ほかのどの状態よりも空の状態で過ごす時間が長くなります

ベストプラクティス

  • ユーザーが初めて製品の価値を実感する行動や気づきである「アハ体験」を定義し、そこにできるだけ直接たどり着けるよう、フロー全体を設計します
  • すべてのステップを計測して離脱率を測定します。オンボーディングは、最適化による効果が最も大きいファネルです
  • 社内チームのメンバーではなく、実際の新規ユーザー像に合ったユーザーでオンボーディングをテストします
  • 製品の主要な部分を変更したら、オンボーディングを再テストします。見た目以上に頻繁に壊れます

コメント