Skip to content

feat: onboarding D案(ステップバー削除・青い放射グラデーション背景)を C案と比較 - #503

Open
ujiro99 wants to merge 3 commits into
dev-1.4.0from
feat/onboarding-variant-d
Open

ujiro99 wants to merge 3 commits into
dev-1.4.0from
feat/onboarding-variant-d

Conversation

@ujiro99

@ujiro99 ujiro99 commented Oct 20, 2026

Copy link
Copy Markdown
Owner

Closes #494

概要

Onboarding の D案(C案+シンプル化)を実装し、新しい実験 onboarding_v4 で C案(対照群)と D案 を比較します。

変更内容

実験構成(onboarding_v4)

  • 実験ID を onboarding_v4 に変更し、振り分けを random < allocation ? "D" : "C" に変更
  • 対照群を C に変更。kill switch 時、割り当て失敗時のフォールバックも C
  • variant の文字は「UIパターン」を表し、どれを対照群にするかは実験ごとに決める方針に変更(types.ts のコメントを更新)。C の値の意味は v3 と変わらず、GA4 上は experiment_id で区別できます
  • ExperimentVariant に "D" を追加。"A" はもう割り当てられませんが、コード削除は別対応とするため型と ?variant=A は残しています
  • experiments.json に onboarding_v4 を追加(公開済みビルドのため onboarding_v3 は残しています)。DEFAULT_CONFIGS も更新

D案の UI

  • variant による UI の違いを getVariantUi()(onboardingVariantUi.ts)にまとめ、onboarding.ui として渡すようにしました。各ステップには variant の文字を判定する分岐を書いていません
  • ui.showRail = false のとき、Step 1〜3 の OnboardingRail を表示しない
    • Step 1・2 は Rail がないと吹き出しが説明文に重なるため、pb-14 で余白を確保
  • Welcome の青い放射グラデーションを OnboardingGlow として切り出し、D案ではこれを OnboardingLayout の背景に使用(ui.background = "glow")
    • Welcome と同じタイミングでマウントされるので、Welcome が blur-out すると、すでに広がり終えた同じ光が下から現れ、背景が途切れずにつながります
    • 背景の光はビューポートに固定し、中心位置を Welcome と一致させています

テスト

  • 実験・analytics・state のユニットテストを C/D と onboarding_v4 に合わせて更新
  • OnboardingLayout の背景切り替えテストを追加
  • スクリーンショット spec に D案の画面を追加し、他の画面は variant を明示的に指定(未指定時は C)

確認

  • yarn test(extension):108 files / 1503 tests passed
  • yarn lint:エラーなし
  • yarn build:e2e のビルドで C/D の各画面(Welcome、Step 1〜4 の explain / value_shown)を ja ロケールでキャプチャし、目視確認

🤖 Generated with Claude Code

https://claude.ai/code/session_01H7m4SrJWH9ySfRuqRtDVg6

ujiro99 and others added 2 commits October 20, 2026 09:13
Start a new onboarding experiment that compares the welcome-overlay flow
(variant C, now the control) with a simplified variant D. Variant letters
now name a UI pattern rather than a role, so the control is chosen per
experiment and C keeps meaning the same pattern it did in onboarding_v3.

The kill switch and the failed-assignment fallback both land on C. Variant
A is no longer assigned but stays in the type until its code is removed.

Add onboarding_v4 to the hub experiments config, keeping onboarding_v3 for
already-published builds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H7m4SrJWH9ySfRuqRtDVg6
…ground

Variant D drops the "select -> command -> result" OnboardingRail from
Steps 1-3 and replaces the slate vignette with the welcome overlay's blue
radial glow, kept behind every step. The glow is extracted into
OnboardingGlow and mounted by both the overlay and the layout at the same
time, so the overlay fades out onto an identical, already-bloomed glow.

Variant differences are resolved once in getVariantUi() and exposed as
onboarding.ui, so steps check `ui.showRail` instead of variant letters.
Steps 1 and 2 keep extra room above the target text without the rail so
its callout does not overlap the explanation.

Add variant D shots to the onboarding screenshot spec and pin the other
shots to an explicit variant.

Refs #494

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H7m4SrJWH9ySfRuqRtDVg6
@codecov

codecov Bot commented Oct 20, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 65.06849% with 51 lines in your changes missing coverage. Please review.
✅ Project coverage is 55.33%. Comparing base (5412f99) to head (eb99059).

Files with missing lines Patch % Lines
...omponents/onboarding/steps/StepAiPromptCommand.tsx 0.00% 18 Missing ⚠️
.../components/onboarding/steps/StepSearchCommand.tsx 0.00% 18 Missing ⚠️
...rc/components/onboarding/steps/StepLinkPreview.tsx 0.00% 12 Missing ⚠️
.../src/components/onboarding/useOnboardingVariant.ts 0.00% 2 Missing ⚠️
...nsion/src/components/onboarding/OnboardingPage.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #503      +/-   ##
==========================================
+ Coverage   55.15%   55.33%   +0.17%     
==========================================
  Files         294      295       +1     
  Lines       29904    29932      +28     
  Branches     3044     3052       +8     
==========================================
+ Hits        16494    16563      +69     
+ Misses      13410    13369      -41     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ujiro99
ujiro99 changed the base branch from main to dev-1.4.0 October 21, 2026 01:11

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Onboarding D案 シンプル化

1 participant