UI/UX Improvement
お申し込みフォーム内「WordPressクイックスタート」のUI/UX改善
- 実務
- UI/UX Design
- Information Architecture
エックスサーバー（XS）のお申し込みフォーム内で、WordPressを最短導入するオプション「WordPressクイックスタート」の利用体験を再設計した案件です。チェックボックス周辺の見た目だけでなく、メリットの理解 → 利用判断 → 追加入力 → お申し込み完了までの一連の流れを対象に、情報の優先順位と画面構成を見直しました。
対象：エックスサーバー（XS）のお申し込みフォーム ／ 想定ユーザー：WordPress利用を検討する初心者〜初級者（契約と同時にサイト公開を目指す層）
この案件の要点
課題
WordPress利用を希望するユーザーが約8割いる一方、クイックスタートの選択率は平均31.7%。注意文が目立ち、確認モーダルで操作も中断していた。
施策
モーダルを廃止し、メリットを先に伝える3大特長ラベルとインライン展開の入力欄に再設計。初期値とメール補完で入力負荷も軽減。
成果
2026年6月にリリース。約3ヶ月時点の社内計測で、利用選択率が31.7%から約48%へ上昇（約16ポイント増、約1.5倍）。
改善前後の比較
クリックで拡大表示
ユーザー体験の全体像
お申し込みフォーム内でユーザーがたどる流れを、設計の単位として整理しました。単一パーツではなく、フォーム上の一連の判断と入力として捉えています。
-
クイックスタートの存在とメリットを知る
チェック項目付近で、自動設置・ドメイン・HTTPS など利用する理由が先に伝わる状態を目指す。
操作：オプション説明・3大特長ラベルを読む
-
内容を理解し、利用するか判断する
注意事項とメリットのバランスを調整し、利用可否の判断が同一画面内で完結するようにする。
操作：クイックスタートのチェックをオン／オフ
-
必要な設定項目を入力する
選択に応じて追加入力欄をインライン展開。モーダルでフローを切らない。
操作：ブログ名・パスワード等の入力（初期値・補完あり）
-
お申し込み手続きを完了する
他の契約項目と同じフォーム上で手続きを続行し、離脱や操作のやり直しを減らす。
操作：フォーム後半の項目入力 → お申し込み確定
課題の発見
既存画面の分析と、社内で確認できた利用データ（WordPress利用意向・クイックスタート選択率）を踏まえ、課題を整理しました。
| 課題 | ユーザー体験への影響 | 改善の方向性 |
|---|---|---|
| 利用ニーズに対し選択率が低い | WordPress利用意向が高い層でも、クイックスタートを選ばず手動構築に流れる。 | メリットを先に伝え、利用判断のハードルを下げる。 |
| 注意・警告が目立つ | 不安が先に立ち、機能の価値が理解しづらい（理解・判断の段階で離脱）。 | 情報の優先順位を見直し、メリットと注意のバランスを再配置。 |
| 確認モーダルで操作が中断 | チェック後に別レイヤーへ切り替わり、フォーム入力の連続性が失われる。 | モーダルを廃止し、同一画面内で展開する。 |
| 入力・設定の負担 | 初心者にとって項目数・専門性が負荷になり、入力段階で離脱しやすい。 | 初期値・登録情報の補完で入力負荷を軽減。 |
参考データ：サーバーのお申し込み者の約8割がWordPress利用を希望する一方、クイックスタートの利用選択率は平均31.7%でした（リリース前に社内で確認した数値）。
情報設計と解決策の検討
情報設計：提示タイミングと形式
フォーム内の情報を次の5類に分け、いつ・どの形式で出すかを定義しました。
- 利用メリットチェック前から視界に入るラベル・短文（常時／選択前）
- 判断に必要な情報利用条件・注意（メリットの直後、視認性を抑えたトーン）
- 選択操作クイックスタートのチェック（フォームの他項目と同列）
- 追加入力オン時のみインライン展開（モーダルなし）
- 補助初期値・メールアドレス補完（入力欄表示と同時）
UI案の比較検討
案A：確認モーダルの改善
モーダル内にメリットや補足を追加し、説明量を確保する案。
懸念点
- 操作の中断（連続性）が残る
- SPではモーダル内スクロールが増える
案B：インライン展開＋モーダル廃止 採用
同一画面でメリット提示と追加入力欄を展開する案。
採用理由
- 理解→判断→入力を一画面の流れで完結できる
- フォーム全体の構造を崩さず実装可能（段階リリースも可）
比較軸（UX・実装の観点）
| 比較軸 | 案A（モーダル改善） | 案B（インライン） |
|---|---|---|
| 情報の理解しやすさ | モーダル内に詳述可能 | ラベル＋インラインで要点を前置 |
| 操作の連続性 | △ 中断あり | ◎ チェックと入力が連続 |
| 入力のしやすさ | モーダル閉じ後に入力へ戻る | 展開直後に入力可能 |
| 画面の情報量 | モーダルで局所化 | 展開時は縦長（スクロール配慮） |
| 実装負荷 | 既存モーダル改修 | バックエンド連携を段階分割可能 |
操作連続性とフォーム全体の体験を最優先し案Bを採用。役員フィードバックを反映し、バックエンド調整をフェーズ分けして早期リリースしました。
最終UIと設計上の工夫
メリットを先に伝える情報設計
課題
注意文が目立ち、利用メリットが後回しになっていた。
設計判断
「自動設置」「独自ドメイン設定済み」「HTTPS公開」の3点を、チェック周辺で最優先表示。
UI上の工夫
視認性の高いラベルで特長を前置し、注意事項はトーンを抑えて同画面内に配置。
選択から入力まで途切れない導線
課題
確認モーダルにより、チェック操作と入力が分断されていた。
設計判断
モーダルを廃止し、オン選択時のみ同一ブロック内で入力欄を展開。
UI上の工夫
チェックと同時に追加入力が現れるインライン構成（上記 After 参照）。
入力負荷の軽減
課題
ブログ名・パスワード・管理者メールなど、初心者には負荷が大きい項目があった。
設計判断
合理的な初期値と、既知情報の自動補完で「考える量」を減らす。
UI上の工夫
ブログ名・パスワードの初期値設定、未入力時はXServerアカウント登録メールを管理者メールに適用。
成果と振り返り
リリース・実装
- 2026年6月、役員レビューおよび開発チームとの仕様調整を経て本番リリースを完了。
- モーダル撤廃とインライン展開、3大特長ラベル、初期値・メール補完を実装。
- バックエンド連携はフェーズ分割し、開発負荷とリリース時期のバランスを調整。
効果（確認できた範囲）
- リリースから約3ヶ月時点の社内計測では、クイックスタートの利用選択率が改修前の31.7%から約48%へ上昇（約16ポイント増、約1.5倍）。継続的なモニタリング対象。
今後の検証指標
- チェック率・展開後の入力完了率・フォーム全体のCVRなど、ファネル（段階）別の改善余地を追う。
設計で重視したこと
フォーム内の一部分ではなく、理解・判断・入力までを一つの体験として設計すること。見た目の調整だけでなく、情報の順序と操作の連続性を揃えたうえで、実装可能な粒度まで仕様を落とし込むことを意識しました。