UI/UX Improvement
お申し込みフォーム内「WordPressクイックスタート」のUI/UX改善
- 実務
サーバー申し込み者の約8割がWordPress利用を希望する一方、導入を簡略化する「クイックスタート」の利用率は31.7%に留まっていました。本施策では、操作フローを妨げていた確認モーダルの廃止やメリット訴求の強化、入力補助UIを導入し、迷わずスムーズに利用選択できるフォーム体験への改善を行いました。
Problem
既存画面の課題
- サーバー契約者の約8割がWordPressを利用しているにもかかわらず、クイックスタートの利用率は平均31.7%と低調だった。
- UI上で機能の利点よりも注意書きや警告文が目立っており、初心者ユーザーに心理的な不安を与えていた。
- チェック時に表示される確認モーダルが入力を中断させ、操作の煩わしさや離脱につながる阻害要因となっていた。
Goal
改善の目的
初心者が「WordPressクイックスタート」のメリットを直感的に理解できるように訴求を強化し、割り込みモーダルの廃止や入力補完機能を導入することで操作負荷を削減。フォームからの途中離脱を防ぎ、機能利用選択率（CVR）の向上を目指しました。
Options
検討した選択肢
案A：確認モーダルのデザイン改善案
既存の確認モーダル内のレイアウトを見直し、メリット解説画像やアイコンを追加して利点を説明する案。
メリット
- モーダル領域を活かして詳細な機能補足ができる
- 画面遷移を伴わず注意点を確実に伝達できる
懸念点
- 操作途中にモーダルが挟まり入力が中断される
- スマホ画面でのスクロール負荷が増大する
案B：インライン展開とモーダル廃止案 採用
確認モーダルを全廃し、チェック時にインラインでメリット訴求と必要入力欄をスムーズに展開する案。
メリット
- 入力操作を中断させずシームレスな体験を提供できる
- 注意書きとメリットを同一画面内でバランス良く配置できる
懸念点
- アコーディオン展開時の画面縦長化に伴うスクロール量の増加
Decision
採用方針と判断根拠
ユーザーの操作体験（UX）を最優先とし、入力フローを中断させる確認モーダルを廃止する案Bを採用しました。注意書きの強調よりも「自動設置・独自ドメイン設定済み・HTTPS公開」という3大メリットを視認性の高いラベルで前面に押し出す方針へ変更。さらに、役員フィードバックを踏まえ、バックエンド調整をフェーズ分けで進行することで開発負荷を抑えつつ早期リリースを実現しました。
Before / After
改善前後の比較
クリックで拡大表示
モーダルによる画面の分断を解消し、チェック操作と同時に入力欄が自然に表示されるシームレスなレイアウトに変更しました。
Implementation
実施内容
- 「自動設置」「独自ドメイン設定済み」「HTTPS公開」の3大特長を強調した訴求エリアの配置。
- 割り込み確認モーダルを廃止し、選択時にそのまま追加入力欄へスムーズにつながるインライン導線へ改修。
- 「ブログ名」や「パスワード」へのデフォルト初期値設定による入力手間の軽減。
- 管理者メールアドレス未入力時に、XServerアカウント登録アドレスを自動適用する補完機能を導入。
Results
成果
- 役員レビューおよび開発チームとの仕様調整を経て、2026年6月に本番リリースを完了。
- 入力を阻害していた確認モーダルの撤廃により、フォーム全体でストレスのないシームレスな操作フローを構築。
- メリット解説ラベルの前面配置と初期値補完の導入により、初心者の不安や入力離脱要因を低減。
- リリースから約3か月が経過した時点の計測では、改修前と比較して「WordPressクイックスタート」の利用選択率（CVR）がおおむね3割増加。