aismiley
AIプロダクトポータルの情報設計を見直し、CTRを大幅に改善したリニューアル
AIプロダクトの製品比較検討ポータルサイトのリニューアルを担当しました。情報量の多いサイトにおいて、ユーザーが必要な情報に迷わずたどり着けるよう、情報設計とUI導線の見直しを中心に取り組みました。
My Role
情報設計、UIデザイン、グラフィックデザイン
The Team
プロダクトマネージャー (1)、ディレクター (1)、デザイナー (1)、フロントエンドエンジニア (1)
Period
2021/03 - 2022/02
Background / 背景・課題
掲載コンテンツの量は充実していたものの、情報の整理が十分でなく、ユーザーが内容を把握しにくい状態でした。また、ページ内の導線が複雑で、目的のコンテンツへのアクセスにストレスが生じているという課題もありました。
Approach / 方針
情報の「読みやすさ」と「たどり着きやすさ」を軸に設計を進めました。テキストで説明していた内容をアイコンでビジュアル化することで、すぐに内容が伝わる状態を目指しています。また、ロゴや画像が運用ごとに変わることを前提に、どのような素材が入っても見た目が破綻しない設計を意識しました。
Solution / 取り組み
情報構造の整理
複数の見出しが並列に並んでいた箇所を、関連するものでグループ化・細分化しました。各項目にアイコンを添えることで視線が自然に見出しへ向かう構造に整理し、テキストで説明していた内容をビジュアル化することで流し読みしながらでも内容が伝わる状態を目指しています。
スタイルガイドの作成
ボタンやリンク、各UI要素の挙動がページごとにばらついていたため、共通認識を持つためのスタイルガイドを作成しました。記事コンテンツの読みやすさも考慮しながら、デザイナー不在でも一貫した状態を保てるようルールを整理しています。
またロゴや画像が運用ごとに変わることを前提に、どのような素材が入っても見た目が破綻しない各表示パターンに対応したデザインを用意しています。
Outcome / 成果
リニューアル後、オーガニックリサーチが 160%増加。平均CTRは 25.8% → 67.7% に改善しました。情報設計とビジュアルの見直しにより、ユーザーがコンテンツを理解しやすくなり、行動につながる状態へと改善されたと考えています。