みずほ銀行のデザイン組織UXUIチームでは、デジタルマーケティング部内のプロダクト開発だけでなく、他部署が取り組むPR/マーケティングなどの案件をデザイン面から支援することをはじめています。
今回は「みずほ銀行ウェブサイトのリニューアル」を支援した事例をまとめます。
大規模な組織のなかで、非常に広い機能を持つ銀行のウェブサイトのリニューアルを進めるのは一筋縄ではいかないことです。
プロジェクト途中から加入したUXUIチームでは、ウェブサイトを所管するコーポレートカルチャー室 (以下、CC室) を支援する役割として、主に以下の2点に取り組みました。
一つひとつの画面の品質を高めるレビュー
リニューアル後の運用まで見据えたデザインルール整備
背景から、具体的な取り組みまでまとめてみます。
みずほ銀行のウェブサイトリニューアルプロジェクトは、2023年前半に開始。2024年3月末にリニューアルされたウェブサイトが公開されました。
コーポレートブランディングを担うCC室と協力する形で、UXUIチームがプロジェクトに参画し、Webマスターチームが組成されました。開発ベンダーを通して、各商品画面を担当している所管部とコミュニケーションを取りながらリニューアルを進めました。
一般的なウェブサイトリニューアルと違う部分や、課題は以下の2点があります。
みずほ銀行のウェブサイトの画面数は「約3400」。店舗情報、みずほダイレクトアプリ、投信、宝くじ...など、複数の機能の情報を扱う大規模なサイトです。
そのため、特徴的なデザインがあればよいわけでなく、すべての機能をどういう体験・情報で提供していくのかを考える必要があります。
さらに、それらの機能ごとに所管部が存在しており、彼らの合意を取りながら進めなければいけません。
つまり、ウェブサイトのリニューアルと言いつつも、みずほ銀行のウェブサイトはいわば巨大な一つの「プロダクト」のようなものなのです。
重複を除くと、実際にデザインが必要なのは1500画面ほどです。ただ、このすべての画面をデザイナーがつくるわけにもいかないので、機能ごとに伝えたい情報や優先度については、所管部からワイヤーを提示してもらいサイト設計を行うフローとしました。
開発ベンダーと協働しながらこれらのワイヤーを取りまとめ、一つのサイトに組み立ていくことが非常に難しいポイントとなります。
例えば、ベンダーのデザイナーの方が出してくれたモジュールのリストは、(画面数が多いので当たり前なのですが) 当初はすべてのコンポーネントが想定されたものではありませんでした。
それをもとに、所管部に「載せたい情報」「どのモジュールを使うか」を指示書にまとめてもらう流れが取られていましたが、なかなか画面のイメージが揃わない運用になっていました。
所管部の方々は、もちろんUIデザインの経験が豊富なわけではありません。それを踏まえると、以下のような点を考慮してデザインルールをさらにつくり込んでいく必要がありました。
- コンポーネント整理
- ユーザビリティやアクセシビリティを踏まえて、モジュールの組み合わせを指定する
- ユースケース整理
- コンポーネントごとに、どの場面で使用するかをまとめておく
そのような課題を捉え、UXUIチームとしては、デザインルールの整備を行うパートを中心に支援を進めていきました。
今回のUXUIチームとしての支援内容の一つは、「大規模なサイトのコンポーネントを統一する」ことでした。これまで、膨大な画面数のため、機能的には類似した複数のコンポーネントが存在する状態となっていました。
今回のリニューアルプロジェクトでは「すべての画面のデザインルールを統一し、長期的な運用もしやすくすること」を目的の一つとしていました。
具体的には、UXUIチームでは、「1. 主要な画面からコンポーネントを再整理」「2. 画面ごとの品質を高めるデザインレビュー」「3. 中長期的な運用を見据えたガイドライン化」の順で支援を行っています。
まずは、ベンダーのデザイナーに対して、主要画面のコンポーネントや複数画面をまたがるコンポーネントのレビューおよびデザインの発散をサポートしました。
同時に、主要なコンポーネントを、他の画面にも展開可能なように整備します。
これまではモジュール単位でのまとめでしたが、余白や組み合わせ方などもパターンごとに丁寧に整理したコンポーネント単位としてまとめています。
膨大な画面数のウェブサイトなので、最初からコンポーネントを完全に用意することは非常に難易度が高いことです。なので、各所幹部から出てきたワイヤーに対して一つひとつコンポーネントの使い方を精査していくデザインレビューを行います。
まずは、ユーザビリティとアクセシビリティの観点から、全画面の品質をレビューしていきました。
UXUIチームからレビューフローを定義し、出てきていたモックアップの約1500の画面をすべてFigjamに貼り付け、一画面ずつ担当を振り分けてエキスパートレビューを入れていきます。
具体的なレビュー観点として設定していたのは以下の5つです。
コンセプトとの整合
デザインとしての一貫性・バランス
運用時のフィージビリティ
ユーザビリティ・アクセシビリティ
ビジネスの狙いを実現できるか
これにより、細かく画面ごとにどこが問題となっているのかを整理することができました。
中長期的な運用も見据えて、ガイドライン化にも取り組んでいます。
具体的には、ここまでで作成したコンポーネントをユースケースごとにまとめていきました。
今後はこれらのガイドラインと連動させた指示書のテンプレートも用意していく予定です。
所管部があらかじめユーザビリティやアクセシビリティを踏まえたコンポーネントを、使用用途を理解しながら指定してワイヤーに落とし込めるようになり、運用がスムーズになることを狙っています。
そうして、画面ごとのユーザビリティ・アクセシビリティの観点から品質も高めたウェブサイトが、2024年3月に無事公開されました。
CC室の方からも、今回のUXUIチームの支援内容について以下のようにコメントをいただいています。
今回のように、みずほ銀行UXUIチームでは、アプリ開発だけでなく、各所管部の支援にも深く入り込んで、デザイン面からプロジェクト推進をサポートしています。
みずほ銀行でのプロジェクトは非常に大規模なものが多く、リリースするだけでも難易度が高く、そこに向けて各所管部は日々熱心に取り組んでいます。
そんな状況でデザイン面から支援する私たちUXUIチームとしては、リリース後にも目線を向け、長期的な運用体制を敷いていけるように意識した動きを心がけています。
大規模なみずほ銀行のすべてのサービスのUXを統制していくには、一つひとつの支援を五月雨に行うのではなく、確実に資産になるように行う必要があります。
今回のような動きを続け、みずほ銀行全体のユーザー体験を高めていきます。