山田太郎

← トップ / Works

Web Design & Renewal

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

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

担当範囲
ワイヤーフレーム作成、デザイン制作、コーディング(レスポンシブ・アニメーション実装)、FAQ文面改修、サイト内導線整理
制作期間
2026年2月中旬〜2026年4月下旬(約2.5ヶ月)
使用ツール
Figma(またはPhotoshop / XD)、HTML/CSS、JavaScript、Redmine
公開状況
公開中(2026年4月27日本番リリース完了)

Background

制作背景・目的

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

Challenge

課題

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

Approach

デザイン方針

エックスサーバーおよびWordPressのトーン&マナーに配慮したブルー基調のデザインを採用。安定感と先進性を表現する六角形のモチーフを取り入れつつ、メインビジュアルには親しみやすい日本語のログイン画面モックアップを配置。2ステップの復元手順はプログレスバー連動アニメーションで視覚化し、導入の手軽さが直感的に伝わる構成としました。

Highlights

デザイン上の工夫

  • 直感的な機能認知を促すため、抽象的なグラフィックではなく日本語表記の「WPログイン画面」モックアップをメインビジュアルに採用。
  • 2ステップの復元手順をプログレスバーの進行と連動するアニメーションで実装し、スマホ・PC双方で手軽さを視覚的に伝達。
  • 経営層からのフィードバックを受け、FAQを「不対応ケースの羅列」から「対応範囲の広さ」を自然に訴求する文面へ再設計。
  • スマホ表示時の他社比較表において、項目名のコントラストを抑えつつ差別化ポイントを太字・強調フォントで際立たせ、閲覧負荷を軽減。

Gallery

画面画像

画像を設置するとクリックで拡大表示できます。

2ステップ復元 — プログレスバー連動
SP 他社比較表 または 改善後 FAQ

Results

成果・学び

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