mcpField
S
signup-flow-cro

signup-flow-cro

github.com/sickn33マーケティング・グロース48.7k450 回インストール1 日前に更新
リポジトリ

signup-flow-cro について

signup-flow-croは、登録フローの評価と改善を支援するスキルです。CRO担当者向けに、入力負担や離脱の分析、実験設計を案内し、プライバシー・安全性・アクセシビリティにも配慮します。

主な機能

  1. 01フロー種別・項目・制約の評価
  2. 02必須項目と操作負担の削減
  3. 03入力検証とエラー処理の改善
  4. 04モバイルと送信後の手順の最適化
  5. 05完了率と項目別離脱の測定
  6. 06A/Bテスト仮説の策定

活用シーン

  1. 01B2Bトライアル登録フォームの監査
  2. 02登録離脱につながる項目の特定
  3. 03ウェイトリスト登録の実験計画
  4. 04登録確認メッセージの改善

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill signup-flow-cro

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

詳細

サインアップフローのCRO

サインアップや登録フローの最適化を専門としています。摩擦を減らし、完了率を高め、ユーザーがアクティベーションを成功させられるようにすることが目標です。

プライバシー、セキュリティ、実験の制約

コンバージョンに関する主張は、明確に定義した分母とガードレール指標に照らして検証する仮説として扱ってください。完了率を上げるために、必須の同意、アカウント認証、不正利用対策、アクセシビリティを弱めてはいけません。機密性の高い公開フローでは、アカウントの有無を特定できるエラーを避け、中立的な復旧手段を用意してください。フィールドのイベントを計測する際は、パスワード、OTP、生の個人フィールド値を記録せず、同意や保持に関する要件を適用してください。メールアドレスをユーザーに知らせずに修正したり、製品で裏付けられないプライバシー/セキュリティのバッジを表示したりしてはいけません。候補を提示し、ユーザーが選択できるようにしてください。

初期評価

提案を行う前に、次の点を把握してください。

  1. フローの種類

    • 無料トライアルのサインアップ
    • フリーミアムアカウントの作成
    • 有料アカウントの作成
    • ウェイトリスト/早期アクセスへの登録
    • B2BかB2Cか
  2. 現状

    • ステップ/画面はいくつありますか?
    • 必須フィールドは何ですか?
    • 現在の完了率はどのくらいですか?
    • ユーザーはどこで離脱していますか?
  3. ビジネス上の制約

    • サインアップ時に本当に必要なデータは何ですか?
    • コンプライアンス要件はありますか?
    • サインアップ直後に何が起こりますか?

基本原則

1. 必須フィールドを最小限にする

フィールドが1つ増えるたびにコンバージョン率は下がります。各フィールドについて、次の点を確認してください。

  • ユーザーが製品を使う前に、これは絶対に必要ですか?
  • プログレッシブプロファイリングを使って、後から収集できますか?
  • ほかのデータから推測できますか?

一般的なフィールドの優先度:

  • 必須:メールアドレス(または電話番号)、パスワード
  • 多くの場合必要:名前
  • 通常は後回しにできる:会社、役職、チームの規模、電話番号、住所
2. コミットメントを求める前に価値を示す
  • サインアップを求める前に、何を見せたり提供したりできますか?
  • アカウントを作成する前に、製品を体験してもらえますか?
  • 順序を逆にして、まず価値を提供し、その後にサインアップを求めましょう
3. 手間の印象を減らす
  • 複数のステップがある場合は進行状況を表示する
  • 関連するフィールドをまとめる
  • 適切なデフォルト値を設定する
  • 可能な場合は事前に入力する
4. 不明点をなくす
  • 所要時間など、明確な見通しを示す(「30秒で完了します」)
  • サインアップ後に何が起こるかを示す
  • 予想外のことをなくす(隠れた必須項目や予期しないステップなど)

フィールドごとの最適化

メールアドレス欄
  • 1つのフィールドにする(メールアドレスの確認欄は設けない)
  • 形式をインラインで検証する
  • よくある入力ミスを確認する(gmial.com → gmail.com)
  • エラーメッセージを明確にする
パスワード欄
  • パスワード表示の切り替え(目のアイコン)を設ける
  • 要件は入力エラーの後ではなく、事前に示す
  • 強度を高めるため、パスフレーズのヒントを検討する
  • 要件の達成状況をリアルタイムで更新する

より使いやすいパスワード設定:

  • 貼り付けを許可する(無効にしない)
  • 厳格なルールの代わりに、強度メーターを表示する
  • パスワードレスの選択肢を検討する
名前欄
  • 「氏名」1つのフィールドにするか、名/姓に分けるかをテストする
  • すぐに使用する場合(パーソナライズなど)に限り必須にする
  • 任意項目にすることを検討する
ソーシャル認証の選択肢
  • 目立つ位置に配置する(メール登録よりコンバージョン率が高いことがよくあります)
  • 対象ユーザーに最も適した選択肢を表示する
    • B2C:Google、Apple、Facebook
    • B2B:Google、Microsoft、SSO
  • メールアドレスでのサインアップと明確に視覚的に分ける
  • 「Googleでサインアップ」を主要な選択肢にすることを検討する
電話番号
  • 必須でない限り後回しにする(SMS認証、見込み客への電話など)
  • 必須の場合は、その理由を説明する
  • 国番号に対応した適切な入力タイプを使用する
  • 入力中に書式を整える
会社/組織
  • 可能であれば後回しにする
  • 入力中に候補を表示する
  • 可能な場合はメールドメインから推測する
用途/役割に関する質問
  • 可能であればオンボーディングまで後回しにする
  • サインアップ時に必要な場合は、質問を1つにする
  • 段階的開示を使う(すべての選択肢を一度に表示しない)

1ステップ方式と複数ステップ方式

1ステップ方式が適している場合:
  • フィールドが3つ以下
  • シンプルなB2C製品
  • 購買意欲の高い訪問者(広告やウェイトリスト経由)
複数ステップ方式が適している場合:
  • 必要なフィールドが3~4つを超える
  • セグメンテーションが必要な複雑なB2B製品
  • 異なる種類の情報を収集する必要がある
複数ステップのベストプラクティス
  • 進捗インジケーターを表示する
  • 簡単な質問(名前、メールアドレス)から始める
  • 難しい質問は後に配置する(心理的なコミットメントが生まれた後)
  • 各ステップは数秒で完了できるようにする
  • 前のステップに戻れるようにする
  • 進捗を保存する(更新してもデータが失われないようにする)

段階的なコミットメントのパターン:

  1. メールアドレスのみ(最もハードルが低い)
  2. パスワード+名前
  3. カスタマイズに関する質問(任意)

信頼感と入力負担の軽減

フォームレベル
  • 「クレジットカードは不要です」(事実である場合)
  • 「ずっと無料」または「14日間の無料トライアル」
  • プライバシーに関する説明:「メールアドレスを第三者と共有することはありません」
  • 該当する場合はセキュリティバッジ
  • サインアップフォームの近くにお客様の声を掲載する
エラー処理
  • インライン検証を行う(送信時だけにしない)
  • 具体的なエラーメッセージを表示する(「このメールアドレスは登録済みです」+復旧方法)
  • エラーが発生してもフォームをクリアしない
  • 問題のあるフィールドにフォーカスする
マイクロコピー
  • プレースホルダーテキスト:ラベルではなく、入力例として使う
  • ラベル:常に表示する(プレースホルダーだけにしない)
  • ヘルプテキスト:必要な場合に限り、フィールドの近くに配置する

モバイルサインアップの最適化

  • タップ領域を大きくする(高さ44px以上)
  • 適切なキーボードの種類を指定する(メールアドレス、電話番号など)
  • オートフィルに対応する
  • 入力を減らす(ソーシャル認証、事前入力)
  • 1列のレイアウトにする
  • CTAボタンを固定表示する
  • 実際のデバイスでテストする

送信後のエクスペリエンス

成功状態
  • 明確な確認メッセージ
  • すぐに実行できる次のステップ
  • メール認証が必要な場合:
    • 何をすればよいか説明する
    • 簡単に再送できるようにする
    • 迷惑メールフォルダーを確認するよう案内する
    • メールアドレスが間違っていた場合に変更できるようにする
認証フロー
  • 必要になるまで認証を遅らせることを検討する
  • パスワードの代わりにマジックリンクを使う
  • 認証を待つ間もユーザーがサービスを試せるようにする
  • 認証が進まない場合に、再度利用を促す手段を用意する

測定

主要な指標
  • フォーム開始率(ページ到達 → 入力開始)
  • フォーム完了率(入力開始 → 送信)
  • フィールドごとの離脱率(どのフィールドでユーザーが離脱するか)
  • 完了までの時間
  • フィールドごとのエラー率
  • モバイルとデスクトップの完了率
記録する項目
  • 各フィールドでの操作(フォーカス、フォーカス解除、エラー)
  • 複数ステップでのステップ進行状況
  • ソーシャル認証とメールアドレス登録の比率
  • ステップ間の所要時間

出力形式

監査結果

見つかった問題ごとに:

  • 問題:何が問題か
  • 影響:なぜ重要か(可能であれば影響の推定値も記載)
  • 修正:具体的な推奨事項
  • 優先度:高/中/低
推奨する変更

次の項目ごとに整理する:

  1. すぐに対応できる改善(当日中の修正)
  2. 効果の大きい変更(1週間程度の作業)
  3. 仮説の検証(A/Bテストの候補)
フォームの再設計(依頼された場合)
  • 推奨するフィールドとその理由
  • フィールドの順序
  • ラベル、プレースホルダー、ボタン、エラーの文言
  • ビジュアルレイアウトの提案

よくあるサインアップフローのパターン

B2B SaaSのトライアル
  1. メールアドレス+パスワード(またはGoogle認証)
  2. 名前+会社名(任意:役職)
  3. → オンボーディングフロー
B2Cアプリ
  1. Google/Apple認証またはメールアドレス
  2. → プロダクトを利用開始
  3. プロフィールは後で入力
ウェイトリスト/先行アクセス
  1. メールアドレスのみ
  2. 任意:役職/用途に関する質問
  3. → ウェイトリストへの登録確認
Eコマースアカウント
  1. ゲスト購入をデフォルトにする
  2. 購入後のアカウント作成は任意
  3. または、ワンクリックのソーシャル認証

実験のアイデア

フォームデザインの実験

レイアウトと構成

  • 1 ステップと複数ステップの登録フローを比較
  • 進行状況バーありとなしの複数ステップを比較
  • 1 列と 2 列のフィールドレイアウトを比較
  • ページに埋め込んだフォームと、独立した登録ページを比較
  • 横並びと縦並びのフィールド配置を比較

フィールドの最適化

  • フィールドを最小限に減らす(メールアドレスとパスワードのみ)
  • 電話番号フィールドを追加または削除
  • 「氏名」フィールド 1 つと、「名/姓」の分割を比較
  • 会社/組織フィールドを追加または削除
  • 必須フィールドと任意フィールドのバランスをテスト

認証オプション

  • SSO オプション(Google、Microsoft、GitHub、LinkedIn)を追加
  • SSO を目立たせる場合と、メールフォームを目立たせる場合を比較
  • どの SSO オプションが利用者に響くかをテスト(利用者層によって異なります)
  • SSO のみの場合と、SSO とメールの両方を選べる場合を比較

ビジュアルデザイン

  • CTA を目立たせるため、ボタンの色やサイズをテスト
  • 無地の背景と、製品に関連したビジュアルを比較
  • フォームコンテナーのスタイル(カード型と最小限のデザイン)をテスト
  • モバイル向けに最適化したレイアウトをテスト

コピーとメッセージの実験

見出しと CTA

  • 登録フォーム上部の見出しのバリエーションをテスト
  • CTA ボタンの文言を比較:「アカウントを作成」対「無料トライアルを開始」対「始める」
  • CTA にトライアル期間を明記
  • フォームの見出しで、価値提案をどの程度強調するかテスト

マイクロコピー

  • フィールドラベルを比較:簡潔なものと、説明的なもの
  • プレースホルダーテキストを最適化
  • エラーメッセージのわかりやすさとトーン
  • パスワード要件の表示タイミング(最初から表示するか、エラー時に表示するか)

信頼性を高める要素

  • 登録フォームの横にソーシャルプルーフを追加
  • フォーム付近の信頼性バッジ(セキュリティ、コンプライアンス)をテスト
  • 「クレジットカード不要」のメッセージを追加
  • プライバシーに関する保証文を掲載

トライアルと利用開始条件の実験

無料トライアルのバリエーション

  • トライアルにクレジットカードが必要な場合と、不要な場合を比較
  • トライアル期間の影響をテスト(7 日、14 日、30 日を比較)
  • フリーミアムモデルと無料トライアルモデルを比較
  • 機能を制限したトライアルと、すべての機能を利用できるトライアルを比較

離脱につながる要因

  • メール認証を必須にする場合、後回しにする場合、なくす場合を比較
  • CAPTCHA が完了率に与える影響をテスト
  • 利用規約への同意チェックボックスと、暗黙の同意を比較
  • 価値の高いアカウントに対する電話番号認証

送信後の実験
  • 登録後の次のステップを明確に伝える
  • すぐに製品を利用可能にする場合と、最初にメール確認を求める場合を比較
  • 登録データに基づいてパーソナライズしたウェルカムメッセージを表示
  • 登録後に自動ログインさせる場合と、ログインを求める場合を比較

確認する質問

さらに詳しい情報が必要な場合:

  1. 現在の登録完了率はどのくらいですか?
  2. フィールドごとの離脱分析データはありますか?
  3. 製品を利用する前に、絶対に必要なデータは何ですか?
  4. コンプライアンスまたは認証に関する要件はありますか?
  5. 登録直後には何が起こりますか?

関連スキル

  • onboarding-cro:登録後の流れを最適化する場合
  • form-cro:登録以外のフォーム(リード獲得、問い合わせ)を対象とする場合
  • page-cro:登録につながるランディングページを対象とする場合
  • ab-test-setup:登録フローの変更をテストする場合

使用するタイミング

このスキルは、概要で説明されているワークフローやアクションを実行する際に適用できます。

例

ユーザーのリクエスト:

このタスクには @signup-flow-cro を使用してください:登録およびアカウント作成フローの最適化を専門としています。

制限事項

  • このスキルは、タスクが上記の説明範囲に明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
  • 必要な入力、権限、安全上の制約、または成功基準が不足している場合は、作業を中断して確認を求めてください。

コメント