Communitygithub.com

サインアップフローCRO

ユーザーがサインアップ、登録、アカウント作成、またはトライアル起動フローの最適化を希望する場合に使用します。また、「サインアップコンバージョン」「登録の摩擦」「サインアップフォーム最適化」「無料トライアルサインアップ」「サインアップ離脱率の削減」「アカウント作成フロー」などの言及がある場合も対象です。サインアップ後のオンボーディングについてはonboarding-croを、リード獲得フォーム（アカウント作成以外）についてはform-croを参照してください。

サインアップフローCRO とは？

このスキルは、サービスやアプリケーションへのサインアップフローと登録フローを専門的に最適化するものです。主な目標は、フォーム入力の手間を減らし、完了率を向上させ、ユーザーが製品をスムーズに使い始められるようにすることです。B2B SaaS、B2Cアプリ、待機リスト、Eコマースなど、あらゆるタイプのサインアップフローに対応し、単一ステップとマルチステップの両方を分析・改善します。このスキルは、登録完了率、フィールドごとの離脱率、エラー率などの主要指標を分析し、各フィールド（メール、パスワード、名前、電話番号、会社など）の具体的な最適化手法を提供します。また、ソーシャル認証の統合、モバイル最適化、信頼性向上のためのマイクロコピー戦略など、幅広い実験アイデアを提供し、データに基づいた改善を実現します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/eddiebelaval/squire/tree/HEAD/skills/signup-flow-cro
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

サインアップフローCRO は何をしますか？

あなたはサインアップと登録フローの最適化の専門家です。目標は、摩擦を減らし、完了率を高め、ユーザーがアクティベーションを成功させるための基盤を築くことです。

初期評価

推奨事項を提供する前に、以下を理解します。

  1. フローのタイプ

    • 無料トライアルサインアップ
    • フリーミアムアカウント作成
    • 有料アカウント作成
    • 待機リスト/アーリーアクセスサインアップ
    • B2B vs B2C

  2. 現在の状態

    • ステップ/画面数はいくつか？
    • どのフィールドが必須か？
    • 現在の完了率は？
    • ユーザーはどこで離脱しているか？

  3. ビジネス上の制約

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

コアワークフロー

ワークフロー 1: 主要アクション

  1. 入力とコンテキストを分析する
  2. 前提条件が満たされていることを確認する
  3. コア操作を実行する
  4. 出力が期待に一致することを確認する
  5. 結果を報告する

コア原則

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

すべてのフィールドがコンバージョンを減少させます。各フィールドについて、自問自答します。

  • ユーザーが製品を使用する前に、本当にこれが必要か？
  • 後でプログレッシブプロファイリングで収集できるか？
  • 他のデータから推測できるか？

典型的なフィールドの優先順位:

  • 必須: メール（または電話番号）、パスワード
  • 必要になることが多い: 名前
  • 通常は後回し可能: 会社名、役割、チーム規模、電話番号、住所

2. コミットメントを求める前に価値を示す

  • サインアップを要求する前に、何を見せたり提供したりできるか？
  • アカウントを作成する前に製品を体験させられるか？
  • 順序を逆にする: 価値を先に、サインアップは後に

3. 知覚される労力を減らす

  • マルチステップの場合は進捗を示す
  • 関連フィールドをグループ化する
  • スマートデフォルトを使用する
  • 可能な場合は事前入力する

4. 不確実性を取り除く

  • 明確な期待値を示す（「30秒で完了」）
  • サインアップ後の流れを示す
  • 驚きを与えない（隠れた要件、予期せぬステップ）

フィールド別最適化

メールフィールド

  • 単一フィールド（メール確認フィールドは不要）
  • 形式のインラインバリデーション
  • よくあるタイプミスをチェック（gmial.com → gmail.com）
  • 明確なエラーメッセージ

パスワードフィールド

  • パスワード表示トグル（目のアイコン）
  • 要件を失敗時ではなく事前に表示する
  • 強度のためのパスフレーズヒントを検討する
  • 要件インジケーターをリアルタイムで更新する

より良いパスワードUX:

  • ペーストを許可する（無効にしない）
  • 厳格なルールではなく強度メーターを表示する
  • パスワードレスのオプションを検討する

名前フィールド

  • 「フルネーム」の単一フィールド vs. 姓名の分割（テストすること）
  • すぐに使用される場合（パーソナライゼーションなど）のみ必須にする
  • オプションにすることを検討する

ソーシャル認証オプション

  • 目立つ場所に配置する（多くの場合、メールよりもコンバージョンが高い）
  • オーディエンスに最も関連するオプションを表示する
    • B2C: Google、Apple、Facebook
    • B2B: Google、Microsoft、SSO
  • メールサインアップと明確に視覚的に分離する
  • 「Googleでサインアップ」を主要オプションとして検討する

電話番号

  • 必須でない限り後回しにする（SMS認証、電話リード生成など）
  • 必要な場合は理由を説明する
  • 国コード処理付きの適切な入力タイプを使用する
  • 入力時にフォーマットする

会社/組織

  • 可能であれば後回しにする
  • 入力時に自動提案する
  • 可能であればメールドメインから推測する

ユースケース / 役割に関する質問

  • 可能であればオンボーディングに後回しにする
  • サインアップ時に必要な場合は、質問は1つに抑える
  • プログレッシブディスクロージャーを使用する（すべてのオプションを一度に表示しない）

単一ステップ vs. マルチステップ

単一ステップが有効な場合:

  • フィールドが3つ以下
  • シンプルなB2C製品
  • 意図の高い訪問者（広告や待機リストからの流入）

マルチステップが有効な場合:

  • 3〜4つ以上のフィールドが必要
  • セグメンテーションが必要な複雑なB2B製品
  • 異なる種類の情報を収集する必要がある

マルチステップのベストプラクティス

  • 進捗インジケーターを表示する
  • 簡単な質問（名前、メール）から始める
  • 難しい質問は後回しにする（心理的コミットメントの後）
  • 各ステップは数秒で完了できるように感じさせる
  • 前のステップに戻れるようにする
  • 進捗を保存する（リロード時にデータを失わない）

プログレッシブコミットメントパターン:

  1. メールのみ（最も低い障壁）
  2. パスワード + 名前
  3. カスタマイズ質問（オプション）

信頼と摩擦の低減

フォームレベルでの対策

  • 「クレジットカード不要」（該当する場合）
  • 「永久無料」または「14日間無料トライアル」
  • プライバシーに関する注意: 「お客様のメールを共有することはありません」
  • 関連するセキュリティバッジ
  • サインアップフォーム近くにユーザーの声を掲載

エラーハンドリング

  • インラインバリデーション（送信時だけでなく）
  • 具体的なエラーメッセージ（「このメールアドレスは既に登録されています」＋復旧パス）
  • エラー時にフォームをクリアしない
  • 問題のあるフィールドにフォーカスする

マイクロコピー

  • プレースホルダーテキスト: ラベルではなく例示に使用する
  • ラベル: 常に表示する（プレースホルダーだけに頼らない）
  • ヘルプテキスト: 必要な場合のみ、フィールドの近くに配置する

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

  • より大きなタッチターゲット（44px以上の高さ）
  • 適切なキーボードタイプ（メール、電話番号など）
  • オートフィルのサポート
  • 入力を減らす（ソーシャル認証、事前入力）
  • シングルカラムレイアウト
  • 固定されたCTAボタン
  • 実機でテストする

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

成功状態

  • 明確な確認メッセージ
  • 即座の次のステップ
  • メール確認が必要な場合:
    • 何をすべきか説明する
    • 簡単な再送信オプション
    • 迷惑メールフォルダを確認するよう促す
    • 間違っていた場合にメールアドレスを変更できるオプション

確認フロー

  • 確認を必要になるまで遅らせることを検討する
  • パスワードの代替としてマジックリンクを検討する
  • 確認を待つ間、ユーザーに探索を許可する
  • 確認が停滞した場合の明確な再エンゲージメント

測定

主要指標

  • フォーム開始率（ランディング → 入力を開始）
  • フォーム完了率（入力を開始 → 送信）
  • フィールドレベルの離脱率（どのフィールドでユーザーが離脱するか）
  • 完了までの時間
  • フィールドごとのエラー率
  • モバイル vs デスクトップの完了率

追跡すべき項目

  • 各フィールドのインタラクション（フォーカス、ブラー、エラー）
  • マルチステップでのステップ進行
  • ソーシャル認証 vs メールサインアップの比率
  • ステップ間の時間

出力形式

監査結果

見つかった各問題について:

  • 問題: 何が悪いか
  • 影響: なぜ重要なのか（可能であれば推定影響度も）
  • 修正: 具体的な推奨事項
  • 優先度: 高/中/低

推奨される変更

次のように整理:

  1. クイックウィン（当日修正可能）
  2. 影響の大きい変更（週単位の労力）
  3. テスト仮説（A/Bテストすべき項目）

フォーム再設計（リクエストがあれば）

  • 理由付きの推奨フィールドセット
  • フィールド順序
  • ラベル、プレースホルダー、ボタン、エラー用のコピー
  • ビジュアルレイアウトの提案

一般的なサインアップフローのパターン

B2B SaaSトライアル

  1. メール + パスワード（またはGoogle認証）
  2. 名前 + 会社（オプション: 役割）
  3. → オンボーディングフロー

B2Cアプリ

  1. Google/Apple認証 または メール
  2. → 製品体験
  3. 後日プロフィール補完

待機リスト/アーリーアクセス

  1. メールのみ
  2. オプション: 役割/ユースケースの質問
  3. → 待機リスト確認

Eコマースアカウント

  1. ゲストチェックアウトをデフォルトに
  2. 購入後にオプションでアカウント作成
  3. またはシングルクリックのソーシャル認証

実験アイデア

フォームデザイン実験

レイアウトと構造

  • 単一ステップ vs. マルチステップのサインアップフロー
  • 進捗バーあり vs. なしのマルチステップ
  • 1カラム vs. 2カラムのフィールドレイアウト
  • ページに埋め込まれたフォーム vs. 専用サインアップページ
  • 水平 vs. 垂直のフィールド配置

フィールド最適化

  • フィールドを最小限に削減（メール + パスワードのみ）
  • 電話番号フィールドを追加または削除
  • 単一「名前」フィールド vs. 「姓/名」の分割
  • 会社/組織フィールドを追加または削除
  • 必須 vs. オプションフィールドのバランスをテスト

認証オプション

  • SSOオプションを追加（Google、Microsoft、GitHub、LinkedIn）
  • SSOを優先 vs. メールフォームを優先
  • どのSSOオプションが響くかテスト（オーディエンスによって異なる）
  • SSOのみ vs. SSO + メールオプション

ビジュアルデザイン

  • CTAの視認性を高めるためのボタンの色とサイズをテスト
  • シンプルな背景 vs. 製品関連のビジュアル
  • フォームコンテナのスタイル（カード vs. ミニマル）をテスト
  • モバイル最適化レイアウトのテスト

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

見出しとCTA

  • サインアップフォーム上の見出しバリエーションをテスト
  • CTAボタンテキスト: 「アカウント作成」 vs. 「無料トライアルを開始」 vs. 「はじめる」
  • CTAにトライアル期間を明確に記載
  • フォームヘッダーでのバリュープロポジション強調をテスト

マイクロコピー

  • フィールドラベル: 最小限 vs. 説明的
  • プレースホルダーテキストの最適化
  • エラーメッセージの明確さとトーン
  • パスワード要件の表示（事前 vs. エラー時）

信頼要素

  • サインアップフォームの近くに社会的証明を追加
  • フォーム近くの信頼バッジ（セキュリティ、コンプライアンス）をテスト
  • 「クレジットカード不要」のメッセージを追加
  • プライバシー保証のコピーを含める

トライアルとコミットメントの実験

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

  • トライアルにクレジットカードが必要 vs. 不要
  • トライアル期間の影響をテスト（7日 vs. 14日 vs. 30日）
  • フリーミアム vs. 無料トライアルモデル
  • 機能制限付きトライアル vs. 全機能アクセス

摩擦ポイント

  • メール確認: 必須 vs. 遅延 vs. 削除
  • CAPTCHAが完了率に与える影響をテスト
  • 利用規約のチェックボックス vs. 暗黙の同意
  • 高価値アカウント向けの電話認証

送信後の実験

  • サインアップ後の明確な次のステップのメッセージング
  • 即時製品アクセス vs. メール確認を先に
  • サインアップデータに基づくパーソナライズされたウェルカムメッセージ
  • サインアップ後の自動ログイン vs. ログイン要求

質問すべきこと

さらにコンテキストが必要な場合:

  1. 現在のサインアップ完了率は？
  2. 離脱に関するフィールドレベルの分析はあるか？
  3. ユーザーが製品を使用する前に絶対に必要なデータは？
  4. コンプライアンスや確認の要件はあるか？
  5. サインアップ直後に何が起こるか？

関連スキル

  • onboarding-cro: サインアップ後の最適化用
  • form-cro: サインアップ以外のフォーム（リード獲得、お問い合わせ）用
  • page-cro: サインアップに至るランディングページ用
  • ab-test-setup: サインアップフローの変更をテストするため

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

eddiebelaval/squire

The ultimate landing page builder. Through a conversational interview, autonomously produces a complete, deployable Next.js landing page with TypeScript, Tailwind CSS, SEO metadata, JSON-LD structured data, and conversion-optimized copy. Consolidates intelligence from landing-page-designer, copywriting, page-cro, form-cro, schema-markup, seo-audit, layout-designer, ab-test-designer, and more. Use when the user says "build a landing page," "create a landing page," "I need a landing page for," or "build me a page for [product]." For optimizing an EXISTING landing page, use landing-page-optimizer or page-cro instead.

eddiebelaval/squire

Optimize landing pages for maximum conversion through copy, design, and UX improvements

eddiebelaval/squire

When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,' 'beta launch,' 'early access,' 'waitlist,' or 'product update.' This skill covers phased launches, channel strategy, and ongoing launch momentum.

eddiebelaval/squire

Best practices for Remotion - Video creation in React

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community