迷わずたどり着けるポータルへ。大手銀行の確定拠出年金ポータルを、現状分析からUIデザインまで一貫して再設計

課題

確定拠出年金（DC）の制度運営を担う事業主向けに、刊行物・各種申込み・サービス案内など多岐にわたる情報を提供するポータルサイトを運用していたものの、DCの専門知識を持たない担当者が使うことも多く、わかりやすさと信頼感の両立が長年の課題となっていました。

サイトが資料置き場のようになり、ユーザーが必要な情報にたどり着けない状態が続いていました。
既存サイトはテキストリンク中心の構成で情報の重要度が視覚的に区別されておらず、DC担当者向けと従業員向けの情報の区別も不明確で、主要コンテンツへの導線や外部サイトとの接続部分にも課題を抱えていました。

ブランドとしての統一感やアクセシビリティの観点でも改善の余地があり、ページ構造・デザイン・コンテンツ設計の三層にわたる課題が複合していました。

こうした課題を多角的に構造化し、設計・デザインまで一貫して推進できる体制と、金融機関サイトに求められる信頼感やアクセシビリティへの理解、既存ベンダーとの連携を見据えた支援力を評価いただき、SORAMICHIへのご依頼に至りました。

ご支援内容

1. 現状分析・課題構造化

デザイン・コンテンツ・情報設計・ユーザビリティ・アクセシビリティなど多角的な観点で既存の全ページを分析し、「情報の優先順位が不明確」「ページ構造の非効率性」「視覚的な訴求力とユーザビリティの不足」という3つの主要課題を特定しました。

課題を構造化してから設計に入ることで改修の優先順位を明確にし、限られたリソースで最大限の成果を引き出す土台をつくりました。

2. 要件定義・ワイヤーフレーム作成

リニューアル対象の各画面について要求事項をヒアリングし、画面遷移図・画面一覧を整備しました。
DC担当者向け・従業員向けの情報を明確に区分したうえで、重要コンテンツへの導線を強化したワイヤーフレームを設計。情報の優先順位をユーザー目線で再整理しながら、目的別のグルーピングと重複機能の統合も同時に行いました。

3. UIデザイン制作

ブランドカラーを基軸にした、統一感のあるデザインコンポーネント一式を制作しました。
TOPページはヒーローバナーと「お役立ちコンテンツ」のカード形式で再構成し、各種資料ページはカテゴリボタンとサムネイル付きカード形式を採用することで**、一覧性と視認性を高めました。テキストリンク中心だった法改正情報・定期刊行物も、ビジュアルを前面に出した構成へと転換しています。
文字サイズ・クリック領域の最適化やアクセシビリティへの配慮も盛り込み、PC・スマートフォン両対応のレスポンシブデザインとして仕上げました。

4. 実装指示書作成・ベンダー連携

作成したデザインをもとに既存ベンダーが実装できるよう、実装指示書を別途整備しました。
デザインの意図や仕様を詳細にドキュメント化することで、認識の齟齬がないスムーズな実装引き継ぎを実現しました。

成果

デザイン一式・画面遷移図・実装指示書の納品を完遂し、テキスト中心で情報の優先順位が不明確だった既存サイトを、カード形式・サムネイル・アイコンを活用して情報を直感的に把握できる構成へと再設計しました。

情報設計・UXデザイン・ブランドの統一という複合的な課題に同時に応えるデザインとしてまとめ、本番公開に向けた実装フェーズへと引き継いでいます。

複合的な課題を抱えるサイトでも、現状分析で課題を構造化してから設計・デザインに入ることで改修の優先順位が明確になり、既存ベンダーとの連携を保ちながら質の高いリニューアルを進められます。

複雑な情報を扱うサイトのUI/UX改善にお困りでしたら、ぜひSORAMICHIにご相談ください。