onboard

必須の事前準備

/impeccable を呼び出してください。ここにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前に、このプロトコルに従ってください。デザインのコンテキストがまだ存在しない場合は、必ず最初に /impeccable teach を実行してください。さらに、ユーザーに到達してほしい「アハ体験」と、ユーザーの経験レベルを確認してください。

---

ユーザーが製品をすばやく理解し、使い始め、活用できるようにするオンボーディング体験を作成または改善します。

オンボーディングのニーズを評価する

ユーザーが何を、なぜ学ぶ必要があるのかを把握します。

1. 課題を特定する：

   • ユーザーは何を達成しようとしていますか？
   • 現在の体験のどこが分かりにくい、または不明確ですか？
   • ユーザーはどこで行き詰まったり、利用をやめたりしますか？
   • ユーザーに到達してほしい「アハ体験」とは何ですか？

2. ユーザーを理解する：

   • ユーザーの経験レベルはどの程度ですか？（初心者、パワーユーザー、さまざまなレベルが混在？）
   • ユーザーの動機は何ですか？（期待に胸を膨らませて試している？仕事で使う必要がある？）
   • どのくらい時間をかけられますか？（5分？30分？）
   • どんな代替手段を知っていますか？（競合製品からの乗り換え？このカテゴリは初めて？）

3. 成功を定義する：

   • ユーザーがうまく使えるようになるために、最低限学ぶ必要があることは何ですか？
   • ユーザーに取ってほしい重要なアクションは何ですか？（最初のプロジェクト？最初の招待？）
   • オンボーディングが機能したかどうかを、どう判断しますか？（完了率？価値を実感するまでの時間？）

重要：オンボーディングでは、可能な限り多くのことを教えるのではなく、できるだけ早くユーザーに価値を届ける必要があります。

オンボーディングの原則

次の基本原則に従います。

説明するより、見せる

• 説明だけでなく、実際に動作する例で示します
• オンボーディング専用のチュートリアルモードではなく、実際に使える機能を提供します
• 段階的な開示を活用し、一度に一つずつ教えます

可能な場合は任意にする

• 経験豊富なユーザーがオンボーディングをスキップできるようにします
• 製品へのアクセスを妨げないようにします
• 「スキップ」や「自分で試す」オプションを用意します

価値を実感するまでの時間

• ユーザーができるだけ早く「アハ体験」に到達できるようにします
• 最も重要な概念を最初に提示します
• 価値の80％をもたらす20％の内容を教えます
• 高度な機能は、状況に応じて見つけられるようにします

儀式よりコンテキスト

• 機能は事前に一括で教えるのではなく、ユーザーが必要とするときに教えます
• 空の状態をオンボーディングの機会として活用します
• ツールチップやヒントを、使う場所に表示します

ユーザーの知性を尊重する

• 見下したり、過剰に説明したりしないでください
• 簡潔で分かりやすくします
• ユーザーは標準的なパターンを理解できるものと考えます

オンボーディング体験を設計する

状況に合ったオンボーディングを作成します。

製品の初回オンボーディング

ウェルカム画面：

• 明確な価値提案（この製品は何ですか？）
• ユーザーが学ぶこと、達成すること
• 所要時間の目安（必要な時間を正直に伝えます）
• スキップするオプション（経験豊富なユーザー向け）

アカウント設定：

• 必要最小限の情報（詳細は後から収集します）
• 各情報を求める理由を説明します
• 可能な場合はスマートなデフォルトを設定します
• 適切な場合はソーシャルログインを利用します

コアコンセプトの紹介：

• コアコンセプトを1～3個紹介します（すべてを教えるわけではありません）
• 簡単な言葉と例を使います
• 可能な場合は操作できるようにします（読むだけでなく、実際に操作します）
• 進捗を表示します（ステップ1／3）

最初の成功：

• ユーザーが実際に何かを達成できるよう導きます
• データを事前に入力した例やテンプレートを用意します
• 完了を祝います（ただし、やりすぎないようにします）
• 次に進むための手順を明確に示します

機能の発見と活用

空の状態： 何もない画面ではなく、次の情報を表示します。

• ここに表示される内容（説明＋スクリーンショット／イラスト）
• それが役立つ理由
• 最初の項目を作成するための明確なCTA
• サンプルまたはテンプレートの選択肢

例：

No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]

コンテキストに応じたツールチップ：

• 適切なタイミング（ユーザーがその機能を初めて見るとき）に表示します
• 該当するUI要素を直接指し示します
• 簡潔な説明とメリットを提示します
• 閉じられるようにします（「今後表示しない」オプション付き）
• 任意で「詳細を見る」リンクを追加します

機能のお知らせ：

• 新機能のリリース時に紹介します
• 新機能の内容と重要な理由を示します
• ユーザーがすぐに試せるようにします
• 閉じられるようにします

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

• ユーザーが機能に出会ったときに使い方を案内します
• 新機能や未使用の機能にバッジまたはインジケーターを表示します
• 複雑さを段階的に解放します（すべてのオプションを最初から表示しないでください）

ガイド付きツアーとウォークスルー

使用する場面：

• 多くの機能を備えた複雑なインターフェース
• 既存の製品への大幅な変更
• 業界固有の知識が必要なツール

設計方法：

• 特定のUI要素を強調表示します（ページのほかの部分を暗くします）
• 各ステップを短くします（ツアーあたり最大3～7ステップ）
• ユーザーが自由にツアーを進められるようにします
• 「ツアーをスキップ」オプションを含めます
• 再度実行できるようにします（ヘルプメニューから）

ベストプラクティス：

• 受動的な案内よりインタラクティブな案内を優先します（ユーザーが実際のボタンをクリックできるようにします）
• 機能ではなくワークフローに焦点を当てます（「プロジェクトを作成」ではなく「これがプロジェクトボタンです」）
• 操作を試せるよう、サンプルデータを用意します

インタラクティブなチュートリアル

使用する場面：

• ユーザーに実践的な練習が必要な場合
• 概念が複雑、またはなじみがない場合
• 失敗したときの影響が大きい場合（安全な環境で練習できる方が望ましい）

設計方法：

• サンプルデータを使ったサンドボックス環境
• 明確な目標（「地域別の売上を示すグラフを作成する」）
• ステップごとのガイダンス
• 検証（正しく操作できたことを確認）
• 完了を実感できる演出（準備完了です！）

ドキュメントとヘルプ

製品内ヘルプ：

• インターフェース全体にコンテキストに応じたヘルプリンクを配置します
• キーボードショートカットの一覧
• 検索できるヘルプセンター
• 複雑なワークフロー向けの動画チュートリアル

ヘルプのパターン：

• 複雑な機能の近くに ? アイコンを配置します
• ツールチップに「詳細を見る」リンクを追加します
• キーボードショートカットのヒントを表示します（検索ボックスに ⌘K と表示）

空の状態の設計

空の状態には、次の要素が必要です。

ここに表示される内容

「最近のプロジェクトがここに表示されます」

重要な理由

「プロジェクトを使うと、作業を整理し、チームと共同作業できます」

始め方

［プロジェクトを作成］または［テンプレートからインポート］

視覚的な工夫

イラストまたはアイコン（何もないページにテキストだけを表示しない）

コンテキストに応じたヘルプ

「始め方についてお困りですか？［2分間のチュートリアルを見る］」

空の状態の種類：

• 初回利用：この機能を使ったことがない場合（価値を強調し、テンプレートを用意します）
• ユーザーがクリア：意図的にすべてを削除した場合（控えめに案内し、簡単に再作成できるようにします）
• 結果なし：検索またはフィルターで何も見つからなかった場合（別の検索語を提案し、フィルターを解除します）
• 権限なし：アクセスできない場合（理由とアクセス権を得る方法を説明します）
• エラー状態：読み込みに失敗した場合（何が起きたかを説明し、再試行できるようにします）

実装パターン

技術的なアプローチ：

ツールチップライブラリ：Tippy.js、Popper.js ツアーライブラリ：Intro.js、Shepherd.js、React Joyride モーダルのパターン：フォーカストラップ、バックドロップ、ESCキーで閉じる 進捗状況の追跡：「表示済み」の状態にはLocalStorageを使用 アナリティクス：完了率と離脱ポイントを追跡

保存のパターン：

// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');

重要：同じオンボーディングを二度表示しないでください（煩わしくなります）。完了状況を追跡し、ユーザーが閉じた操作を尊重してください。

絶対に避けること：

• 製品を使えるようになる前に、長いオンボーディングを強制する
• 当然の説明をして、ユーザーを見下す
• 同じツールチップを繰り返し表示する（閉じた操作を尊重する）
• ツアー中にすべてのUIを操作できなくする（ユーザーが自由に探索できるようにする）
• 実際の製品から切り離された別個のチュートリアルモードを作る
• 最初から情報を詰め込みすぎる（段階的に開示する！）
• 「スキップ」を隠したり、見つけにくくしたりする
• 再訪ユーザーへの配慮を忘れる（初回のオンボーディングを再度表示しない）

オンボーディングの品質を検証する

実際のユーザーを対象にテストします。

• 完了までの時間：ユーザーはオンボーディングをすばやく完了できますか？
• 理解度：完了後、ユーザーは内容を理解していますか？
• 行動：ユーザーは望ましい次のステップに進んでいますか？
• スキップ率：スキップするユーザーが多すぎませんか？（長すぎる、または価値が低い可能性があります）
• 完了率：ユーザーは完了していますか？（低い場合は、簡素化します）
• 価値を得るまでの時間：ユーザーが最初の価値を得るまでに、どのくらいかかりますか？

優れた指導の勘を備えたプロダクトエデュケーターとして取り組んでください。ユーザーができるだけ早く「なるほど」と気づく瞬間にたどり着けるようにします。不可欠なことを教え、状況に合わせ、ユーザーの時間と知性を尊重してください。