ホワイトペーパーDL導線改善
案件背景
ホワイトペーパーの種類増加により資料を探しづらくなっていた一覧ページに対し、カテゴリナビゲーションUIを設計・実装。既存トンマナを維持しながら、目的の資料へ直感的にたどり着ける導線へ改善。
課題
- ホワイトペーパーの種類が増え、目的の資料を探しにくい状態になっていた
- 既存のアンカーリンクだけではカテゴリの違いが直感的に伝わりにくかった
- 初期案では既存トンマナから離れており、ブランド全体との統一感に課題があった
- PC閲覧中心のユーザーに対して、視認性・操作性を高める必要があった
やったこと
- 既存デザイン/トンマナに沿ったカテゴリナビゲーションUIを再設計
- 各カテゴリを識別しやすいよう、アイコン付きのボタンUIを設計
- 既存のアンカーリンク機能を活かしながら、視認性・操作性を改善
- PCファーストでボタンサイズ・余白・視覚的フィードバックを調整
- FigmaでのUI設計後、WordPress+ACF環境でHTML / CSS実装まで対応
実現したこと
- 目的のホワイトペーパーをカテゴリから探しやすい導線を実現
- ブランドトーンを維持しながら、新しいナビゲーションUIを自然に統合
- 既存機能を活かした改修により、実装負荷を抑えながら操作性を改善
- 運用担当者が更新しやすい構造を保ったまま、一覧ページの使いやすさを向上
設計のポイント
既存トンマナを崩さないUI統合
新しい導線を追加するだけでなく、既存サイト全体のデザインルールと自然につながる見せ方を重視。ブランドトーンを維持しながら、カテゴリの識別性を高めるUIへ調整した。
既存機能を活かした操作性改善
アンカーリンクの仕組みは維持しつつ、ボタンサイズ・アイコン・余白・ホバー表現を調整。実装負荷を抑えながら、ユーザーが目的の資料へ移動しやすい導線に改善した。
ビジュアル
よくなったこと
ホワイトペーパー一覧にカテゴリナビゲーションを追加し、目的の資料を探しやすいUIへ改善。既存トンマナと運用構造を維持しながら、視認性と操作性を高めた。
補足
- 資料数が増えても迷いにくいカテゴリ導線を整備
- 既存デザインとの統一感を保ちながらUIを改善
- WordPress+ACF環境で運用しやすい構造を維持