SHIBATA KAITO

← トップ / Works

Web Design & Renewal

エックスサーバー「WordPressリカバリー」特設ページ新規制作

エックスサーバーの独自機能「WordPressリカバリー」をPRし、競合差別化とブランド信頼性向上を図る特設ページの制作案件です。デザイン作成からレスポンシブ実装、経営層レビューに基づくFAQ訴求文面の改修、サイト内導線の最適化まで一貫して担当しました。

WordPressリカバリー特設ページ:ファーストビュー(日本語WPログイン画面モックと独自機能バッジ)
担当範囲
  • ワイヤーフレーム作成
  • デザイン制作
  • コーディング(レスポンシブ・アニメーション)
  • FAQ文面の改修
  • サイト内導線の整理
制作期間
2026年2月〜4月
(約2.5ヶ月)
使用ツール
  • デザインFigma
  • コーディングHTML / CSS / JavaScript(PhpStorm)
  • 管理GitHub
公開状況
公開中
(2026年4月27日リリース)

この案件の要点

課題

差別化の要となる独自機能なのに専用ページがなく、価値が伝わっていなかった。FAQも免責事項が中心で、消極的な印象だった。

施策

特設ページを新設し、デザインからレスポンシブ実装まで担当。「わずか2ステップ」を軸に復旧の手軽さを可視化し、FAQは対応範囲の広さを伝える文面へ再設計した。

成果

2026年4月27日、特設ページと主要導線を予定どおりリリース。マニュアルへの直リンクを特設ページへ切り替え、サービス内での認知経路を確保。

制作背景・目的

メニュー改修時に独自機能として追加された「WordPressリカバリー」でしたが、専用ページが存在せずマニュアルへ直接遷移する状態となっていました。専門知識がなくてもクリック操作で復旧できる他社にはない強みをPRし、「修復まで完結できるサーバー」としての信頼感醸成・競合差別化を図ることで、新規契約および継続利用の後押しとすることを目的に特設ページを新設しました。

課題

  • 差別化の要となる独自機能でありながら専用ページがなく、価値やメリットの詳細訴求ができていなかった。
  • 初期FAQが免責事項や不対応ケース中心となっており、サービスの魅力が伝わりにくく消極的な印象を与えていた。
  • 主要ページから特設ページへの導線が未整理で、機能の認知経路が確保されていなかった。

デザイン方針

エックスサーバーおよびWordPressのトーン&マナーに配慮したブルー基調のデザインを採用。安定感と先進性を表現する六角形のモチーフと「XServer 独自機能」「標準提供」の訴求を組み合わせ、メインビジュアルには親しみやすい日本語表記のWordPressログイン画面モックアップを配置。クリックひとつでトラブル前の状態へ戻せる価値が、最初の画面で伝わる構成にしました。

デザイン上の工夫

  • ファーストビュー機能をすぐ理解してもらうため、抽象的なグラフィックではなく日本語表記の「WPログイン画面」モックアップをファーストビュー右側に配置。
  • 2ステップ復旧サーバーパネルUIモックと「わずか2ステップ」訴求を組み合わせ、プログレス表示と連動するアニメーションで復旧手順を視覚化。
  • 特長「WordPressリカバリーの特長」では01〜03の3カード(即実行・自動診断・クリーンアップ)で、機能価値を段階的に理解できるレイアウト。
  • 独自機能の根拠「エックスサーバーだから提供できる唯一無二の独自機能」として、国内WordPressサイトシェアNo.1の実績と、専門チームによる開発の2点を並べ、機能の信頼性を裏づけました。
  • 他社との比較復旧作業・エラー判別・対応に必要な知識・利用料金の項目で、エックスサーバーと他社を並べた比較表を設置。エックスサーバー側の列を青で強調し、違いがすぐ分かるようにしました。
  • FAQ経営層のフィードバックを受け、FAQを「不対応ケースの羅列」から「対応範囲の広さ」を自然に訴求する文面へ再設計。
  • スマホ表示他社比較表では、項目名のコントラストを抑えつつ差別化ポイントを太字で際立たせ、閲覧の負担を軽減。

成果・学び

  • 2026年4月27日に特設ページおよび主要導線の本番リリースを遅延なく完了。
  • トップページや機能一覧等からのマニュアル直リンクを特設ページへ切り替え、「おすすめ」バッジの付与等でサービス内認知を強化。
  • 免責事項を伝えるだけでなく、機能のカバー範囲や安心感を前面に出すFAQ設計の重要性を習得。
  • コールセンターとのリリース前連携を行い、現場での問い合わせ対応状況の把握や通知メールへの案内文展開など、運用面まで見据えた連携を遂行。