coastdigitalgroup/coastai-skills

オンボーディングツアーシステム

目的

オンボーディングツアーシステムスキルは、多段階のガイド付き製品ウォークスルーを構造化、スタイル設定、および調整するための包括的な設計方法論を提供します。初めてのオンボーディングやメジャー機能リリース時に、ユーザーの認知負荷を軽減するために設計されており、主要なインターフェース要素を視覚的に分離し、シーケンシャルで高度に関連性の高いコンテキストを提供し、ユーザーをアクティブで成功した状態へと導きます。このシステムは、予測可能でアクセシブルかつユーザー制御のペースを確立することで、混乱を招く、混沌とした、または過度に邪魔なツアーを防止します。

ユースケース

• 初めてのユーザーオンボーディング: 複雑なSaaSアプリケーションのコアワークフローを新規登録ユーザーにガイドし、アクティベーションを促進します。
• 新機能のプロモーション: 新しくリリースされた高価値ツールやインターフェース要素を既存ユーザーに強調表示し説明します。
• UI再デザインへの慣れ親しみ: 大幅なインターフェースの再スタイリングや再編成後に、戻ってきたユーザーがおなじみのツールを見つけられるように支援します。
• 複雑なステップバイステップデータ入力ツアー: 初期設定時（例：最初の自動化ルールの設定）に、多面的なダッシュボードパネルをユーザーにガイドします。

使用すべきでない場合

• 自己説明的なインターフェース: タスクがより明確なレイアウト、優れたラベル、または直感的なアイコンによって簡略化できる場合、まずコアUIを改善し、悪いUXをツアーで隠すのではなく、改善してください。
• 高頻度の反復的なマイクロタスク: ポップアップで頻繁なワークフローを中断しないでください。定期的なヘルプには、tooltip-and-hint-system またはインラインヘルパーテキストを使用してください。
• モバイル専用または低解像度のインターフェース: 多段階のアンカー付きポップオーバーツアーは、多くの画面スペースを消費し、モバイルデバイスではクリッピングやオーバーラップが発生しやすいです。代わりに、全画面カードまたは統合された非表示可能なインラインステップを使用してください。
• 重要なエラーまたはトランザクションフィードバック: システムの即時フィードバックやエラーには、banner-and-alert-system または toast-and-snackbar-system を使用してください。

入力

1. 情報アーキテクチャとコンテキスト: ツアーが実行される特定のページレイアウト、ダッシュボードセクション、UI座標。
2. アンカー要素インベントリ: 各ステップで強調表示する必要がある特定のターゲットボタン、入力フィールド、テーブル、ナビゲーションリンク。
3. オンボーディングマイルストーン（「なぜ」）: オンボーディングを完了しアクティベーションを確実にするために必要な最小限の主要アクション。
4. デバイスブレークポイント: ツアーをレンダリングする必要があるレスポンシブターゲットビューポート。responsive-grid-system のガイドラインを使用します。

出力

1. 背景とマスク仕様: ターゲット要素を視覚的に分離し、インターフェースの残りの部分を暗くしてユーザーの注意を集中させます。
2. ポップオーバー（ツアーカード）アナトミー仕様: ツアーバブルの詳細な構造設計図（矢印、本文テキスト、ステップインジケーター、スキップ/次へ/戻るボタン、閉じるコントロール）。
3. シーケンスとフローロジック: ステップバイステップのルートマッピング、進行モデル（厳密なリニア vs ユーザー主導）、セッション永続性。
4. レスポンシブ戦略とモバイルフォールバック: フローティングアンカー付きポップオーバーが安全に収まらない小さな画面に対する適応ルール。
5. アクセシビリティランドマークとインタラクション仕様: 完全なARIA仕様、キーボードナビゲーションマップ、フォーカストラッピング動作。

ワークフロー

1. ステップシーケンスの定義（ハッピーパス）

• ツアーシーケンスを3〜5ステップに制限します（ミラーの法則）。それ以上長いと放棄率が高くなります。
• 各ステップは単なるラベルではなく、アクティブな利点に焦点を当てます（例：「これは設定メニューです」ではなく、「ここでチームのワークフローに合わせてワークスペースをカスタマイズしてください」）。
• 最後のステップには明確で実行可能なコールトゥアクション（CTA）があり、ユーザーをアクティブで生産的な状態にします。

2. 背景マスクと分離（フォーカス）の設計

• 暗い半透明の背景オーバーレイ（通常は #000000、50〜70％の不透明度）を使用して、背景ノイズをミュートし、視線を集中させます。
• アクティブなアンカー要素の周囲に「分離マスク」（SVGパスカットアウトまたはCSS clip-path もしくは box-shadow を使用）を作成します。
• 強調表示されたアンカーの周囲に4px〜8pxのパディングバッファを維持して、マスクが要素の境界に密着しすぎないようにします。

3. ポップオーバー（ツアーカード）階層の構築

• アンカーアライメント: 強調表示された要素の隣に動的にポップオーバーを配置します。小さな方向矢印/ポインターを使用して、カードとアンカーを視覚的にリンクします。
• コンポーネントアナトミー:
  • ヘッダー: 標準の閉じるボタン（'X'）と進行状況インジケーター（例：「ステップ 2/4」）を含めます。
  • 本文: 太字の簡潔なタイトルと、最大2文の説明的なテキストを使用します。
  • アクションバー: 「スキップ」リンクを左揃えにし、ナビゲーションボタンを右揃えにします。「次へ」（または「完了」）にはプライマリCTAスタイルを使用し、「戻る」には低コントラストのターシャリスタイルを使用します。

4. アクセシビリティのためのコーディング（キーボードとスクリーンリーダーのパリティ）

• フォーカストラッピング: ツアーステップがアクティブな場合、キーボードフォーカス（Tabキー）をツアーポップオーバー内にトラップし、キーボードユーザーが背景の項目を操作できないようにします。
• ARIAアソシエーション: ポップオーバーコンテナに role="dialog" または role="alertdialog" を設定し、aria-modal="false" を設定します（支援技術が背景要素がまだ存在していることを認識できるように）。ポップオーバーの見出しを aria-labelledby でリンクし、説明を aria-describedby でリンクします。
• キーボードショートカット: キーボードナビゲーションをサポートします。Escape でツアーを閉じる/スキップ、ArrowRight で「次へ」、ArrowLeft で「戻る」。

5. モバイル適応戦略のマッピング

• ビューポートが 768px（タブレット/モバイル）より小さい場合、アンカー付きフローティングポップオーバーからボトムシートドロワーまたは中央揃えの非アンカーモーダルに移行します。これにより、カードが画面外に押し出されたり、重要な要素を覆ったりするのを防ぎます。
• モバイルでは、モバイルスクロールによるクリッピングエラーを防ぐために、背景マスクを無効にするか簡略化します。

決定ルール

• リニアツアー vs ユーザー主導タスクリスト:
  • ステップAがステップBに先行する必要がある、厳格な初回設定シーケンスにはリニアツアーを使用します。
  • タスクを任意の順序で完了でき、ユーザーが自分のペースでタスクを選択できるようにする場合は、**インタラクティブ進行状況ウィジェット（タスクリスト）**を使用します。
• トリガー条件:
  • 初回実行時または明示的な更新後にのみ自動トリガーします。
  • 標準的な訪問で戻ってきたユーザーに対してツアーを自動トリガーしないでください。
• アンカー位置のオーバーライド:
  • デフォルト: ポップオーバーをアンカーの「下中央」または「右中央」に配置します。
  • 衝突ルール: アンカーが画面端の近くにある場合、クリッピングを防ぐためにポップオーバーの配置を反転します（例：「右」から「左」へ）。アンカーが非表示（折りたたまれたパネル内など）の場合、ポップオーバーをレンダリングする前にプログラムでパネルを展開します。
• 「スキップ」の提供:
  • 常にすべてのステップに表示可能な「ツアーをスキップ」または「閉じる」アクションを提供します。逃げ道なしにユーザーにツアーの完了を強制するとフラストレーションが生じます。

制約

• アクセシビリティ（WCAG 2.2）:
  • ツアーカード内のテキストコントラストはWCAG AA（少なくとも4.5:1）を満たす必要があります。
  • インタラクティブボタンには高コントラストの視覚フォーカスリング（outline）が必要です。
  • 次へ/戻るボタンのタッチターゲットは、少なくとも44x44px（推奨）、または最小24x24px（WCAG 2.2 SC 2.5.8）にする必要があります。
  • 背景カットアウト内のインタラクティブアンカーはフォーカス可能でなければなりません。
• レイアウトシフト管理:
  • 背景、カットアウトマスク、ポップオーバーの出現によって、既存のレイアウト要素が移動してはなりません。ドキュメントビューポートに対して position: absolute または position: fixed を使用します。
• Z-インデックスの調整:
  • 背景とツアーカードは、トーストなどのトップレベルのユーティリティアラートの下に配置する必要があります（例：背景はz-index 900、ポップオーバーはz-index 910）。これにより、優先度の高いシステムアラートがまだ割り込むことができます。

一般的な障害パターン

• 「無限ツアー」の罠: 5ステップを超えるツアーは、ユーザーがすぐに離脱します。
• 「二重フォーカス」の競合: 既にアクティブなモーダルがあるページでツアーを自動開始すると、オーバーレイが重なり入力がトラップされます。
• 盲目のアンカーハイライト: スクロールで画面外になったり折りたたまれたりした要素をハイライトし、矢印が空っぽのスペースを指す。
• 到達不能なバックグラウンドアクション: マスクされた要素に入力を要求するが、背景によってユーザーの入力やマウスクリックをブロックする。
• モバイルバブルの圧縮: アンカー付きバブルがモバイルで読めない幅に縮み、単語が不自然に改行される。

検証基準

• ツアーは厳密に3〜5ステップに制限されています。
• すべてのステップに明確にラベル付けされた表示可能な「スキップ」または閉じるオプションがあります。
• アクティブなステップ中、キーボードタブフォーカスがポップオーバー内にトラップされています。
• 「次へ」を押すと、フォーカスが次のツアーカード（または新しく強調表示された要素）にスムーズに移動します。
• ARIA属性（role="dialog"、aria-modal、aria-describedby）が正しく設定されています。
• ポップオーバーの衝突処理が定義されています（画面端近くで自動的に位置を反転）。
• モバイルビューポートでは、アンカー付きポップオーバーから中央モーダルまたは永続的なボトムシートにシームレスに移行します。
• 分離されたアンカーの周囲に4〜8pxのパディングバッファが維持されています。
• すべてのボタンのアクティブ状態とホバー状態がWCAG AA（4.5:1 コントラスト）を満たしています。