ホワイトペーパーDLページのカテゴリナビ 導線改善
案件概要
ホワイトペーパーの種類が増加したことにより、ユーザーが目的の資料を直感的に探せるカテゴリナビゲーションUIを設計・デザインしました。
初期段階では既存トンマナから離れたデザイン案が進行していましたが、ブランド全体での統一感を重視し、方向性を再整理。
既存のアンカーリンク機能を活かしながら、視認性・操作性を高めるUIへと改修しました。
デザイン・設計で考慮した点
- 既存デザイン／トンマナに沿った自然なUI統合
- 各カテゴリを一目で識別できるようアイコンを追加
- PC閲覧中心のユーザーを想定し、PCファーストで設計
- ボタンのサイズ感や視覚的フィードバックを最適化し、操作性を改善
- ブランドトーンを維持しながら、新要素を違和感なく馴染ませるデザインを追求
対応領域
- UI設計・Figmaでのデザイン制作
- HTML / CSSコーディング（WordPress＋ACF環境）
Before
After（デザインデータ）
成果・効果
- ブランド整合性を維持したまま、UI改修を実現
- 改修後は運用担当者による更新もスムーズに行える構造を実現
