UI/UX Improvement
エックスサーバー「プラン診断チャート」のUI/UX設計
- 実務
エックスサーバーのトップページと料金ページに、用途とITリテラシーに応じて最適なプランを提案する診断ウィザードを設計・導入しました。料金表だけでは判断しづらい層の迷いを減らし、適切なプランへの送客とお申し込み導線の短縮を目指した施策です。UI/UX設計に加え、表示品質（CLS）とGA4/GTMの計測設計まで担当しました。
この案件の要点
課題
お申し込みがエックスサーバーに集中し、用途に合うプロダクトへの案内が弱かった。ITに詳しくない層は、料金表だけではプランを判断しづらい。
施策
最大3問（最短2問）の診断ウィザードを、トップFV直下と料金ページ上部に設置。結果画面から各プランのお申し込みフォームへ直接つなげた。
成果
2026年10月にリリース。9パターンの結果と18パターンのCTAをGA4/GTMで計測できる状態で公開し、改善サイクルを回せる設計に。
導入前後の情報設計
クリックで拡大表示
FV通過後、個人・法人・WordPress向けのプラン一覧を自力で読み比べる必要があり、選択ストレスやスタンダードプランへの偏りが起きやすかった。
FV直下に診断バナーを新設（本キャプチャは入口まで）。開始後は設問→結果→各プランのお申し込みフォームへ直結（料金ページ上部の設置は【設置】参照）。
背景と課題
事業面お申し込みがフラグシップのエックスサーバーに集中しがちで、XServer Business や XServer for WordPress など用途に合ったプロダクトへの案内が弱く、契約単価（ARPU）の最大化という事業目標に対して改善余地がありました。
ユーザー体験面診断を利用するユーザーはITリテラシーが必ずしも高くない層が想定され、複雑な料金プラン表や機能比較だけでは、自分に適したサービス・プランを判断しづらい状態でした。
施策のゴールと設計要件
料金表で比較させるのではなく、短い質問に答えるだけで「今の自分に合うプラン」が直感的に分かるコンテンツを提供することをコンセプトとしました。
- 対象サービスエックスサーバー、XServer Business、XServer for WordPress
- 設置箇所エックスサーバーのトップ（メインビジュアル直下）、料金ページ（/price）上部
- 成果地点（CTA）料金ページを挟まず、結果画面から各プランのお申し込みフォームへ直接遷移し離脱を抑える
- 体験ウィザード形式で、回答に沿って最適案を提示する
診断の流れ
ユーザーが入口からお申し込みまでたどる流れを、4つの段階で設計しました。
-
入口を見つける
トップのFV直下と料金ページ上部に、同じデザインの診断バナーを配置。「最大3つの質問」で所要感を伝える。
操作：「診断をはじめる」を押す
-
質問に答える
1問目の「用途」（個人利用・法人・制作代行）から分岐し、全ルート最大3問（最短2問）。選択肢をタップすると、すぐ次の設問へ進む。
操作：選択肢をタップ
-
結果を見る
標準は「最もおすすめ」と「コストを最優先するなら」の2案。該当プランが1つに定まる分岐では、条件ラベル付きで1案だけを表示する。
操作：推奨理由を読んで選ぶ
-
申し込む
料金ページを挟まず、結果画面から各プランのお申し込みフォームへ直接遷移し、途中の離脱を抑える。
操作：「このプランで始める」を押す
設計上の主要判断
案A：料金表・機能比較を前面に出す
既存の料金ページ構成を維持し、表や比較表でユーザーに自己判断してもらう案。
懸念点
- 初心者ほど情報量が多く、選択に時間がかかる
- 最適なプロダクト以外へのお申し込みが残りやすい
案B：短い診断ウィザードで構造化 採用
最大3問（最短2問）の分岐で迷いを整理し、結果画面で推奨プランと、お申し込みフォームへ直接つなぐCTAを提示する案。
採用理由
- 認知負荷を下げつつ、事業として望む送客先を設計できる
- タップ即次問の軽快な操作で完了までの離脱を抑えられる
- 2案提示と1案のみ提示など、結果パターンに応じたUIを用意できる
UI/UXデザインのこだわり
- 設問フロー全ルート最大3問（最短2問）。選択肢タップで即座に次の設問へ進むウィザード形式で、操作負荷を抑える。
- 結果画面（標準）「最もおすすめ」と「コストを最優先するなら」の2案を並べ、バランス型とコスト重視の選択肢を同時に提示。
- マイクロコピー各案のラベルと短い理由文で、料金表を読まなくても判断の軸が伝わるように設計。
- 結果画面（1案）「個人×WordPress×メール要否が不明」など、おすすめの該当プランが1つに定まる分岐では、条件に沿ったラベル（例：「独自ドメインのメールを使うなら」）とともに1プランのみ表示。
- サイト上の入口トップFV直下・料金ページ上部に同一デザインの診断バナーを配置し、「最大3つの質問」で負荷を伝えてウィザードへ誘導。
クリックで拡大表示
実装品質とマーケティング連携
- CLS（レイアウトシフト）対策動的コンテンツ差し込みによる表示崩れを防ぐため、初期読込領域の高さ確保（
min-height等）を実施。 - データ構造キャンペーン価格や訴求テキストの変更に備え、文言・判定ロジックを JSON としてコードから分離しメンテナンス性を確保。
- GA4 / GTM診断開始（
sd_start）、結果表示（9パターン）、CTAクリック（18パターン）のイベントを整理。データレイヤーとパラメータ引き継ぎ（sd_result/sd_plan）をマーケターと連携して実装。
KPI設計と改善サイクル
- 診断開始数設問1の回答タップ数（トップページ／料金ページの導線比較）
- 完了率結果画面到達率（離脱した設問の特定と文言改善）
- 診断経由CV結果画面CTAクリック率およびお申し込み転換率
リリース後は上記指標のボトルネックに応じて、設問文言の補正や推奨理由のA/Bテストなど PDCA を回す設計としました。
成果
- 2026年10月、エックスサーバーのトップ（FV直下）および料金ページ上部への診断UIの組み込みを完了。
- 9パターンの結果画面と18パターンのCTAについて、GA4/GTM で計測可能な状態でリリース。
- 分岐設計・結果UI・お申し込みフォームへの直接導線に加え、CLS対策とJSON分離により、運用・改善を見据えた実装品質を担保。