ホワイトペーパーDLページのカテゴリナビ 導線改善

案件概要

ホワイトペーパーの種類が増加したことにより、ユーザーが目的の資料を直感的に探せるカテゴリナビゲーションUIを設計・デザインしました。
初期段階では既存トンマナから離れたデザイン案が進行していましたが、ブランド全体での統一感を重視し、方向性を再整理。
既存のアンカーリンク機能を活かしながら、視認性・操作性を高めるUIへと改修しました。

デザイン・設計で考慮した点

• 既存デザイン／トンマナに沿った自然なUI統合

• 各カテゴリを一目で識別できるようアイコンを追加

• PC閲覧中心のユーザーを想定し、PCファーストで設計

• ボタンのサイズ感や視覚的フィードバックを最適化し、操作性を改善

• ブランドトーンを維持しながら、新要素を違和感なく馴染ませるデザインを追求

対応領域

• UI設計・Figmaでのデザイン制作

• HTML / CSSコーディング（WordPress＋ACF環境）

Before

After（デザインデータ）

成果・効果

• ブランド整合性を維持したまま、UI改修を実現

• 改修後は運用担当者による更新もスムーズに行える構造を実現

関連記事

中途採用ページリニューアル（情報設計・デザイン・SEO最適化） メルマガ登録申込みページの新規作成 表組（テーブル）UIの改善・実装 セミナーページ改善PJ UIデザイン＋機能実装＋運用設計

Powered by YARPP.