みずほ銀行 UX/UIデザインチーム カルチャーデック

Transcript

1. MIZUHO UX UI TEAM Culture Deck
2. 本資料は情報提供のみを目的として作成されたものであり、特定の取引の勧誘・取次等を 強制するものではありません。また、本資料はみずほフィナンシャルグループ各社との取 引を前提とするものではありません。 本資料は、信頼に足り且つ正確であると考えた情報に基づき作成されておりますが、その 正確性・確実性を保証するものではありません。 本資料の著作権は当方行に属し、本資料の一部または全部を、①複写、写真複写、あるい はその他如何なる手段において複製すること、②当方の書面による許可なくして再配布す ることを禁じます。 この資料について
3. Contents 03 24 27 32 35 04 06 14 20 MPFチームの成り立ち キャリアインタビュー バリュー クロージング メディア インタビュー ミッション ワークス ユニークポイント
4. 2019年頃に、行内でのデザインの必要性が重要視されるようになり、社内の 複数の部門でサービスのUX/UI改善の動きがありました。当時は、独立した動 きでしたが、2021年にデジタルマーケティング部が設立され、銀行として、 手段としてのデザインだけでなく、ビジネスに接続することのできるUX/UIデ ザインを主力とする組織が立ち上がりました。 チームの 成り立ち MPF ダイレクトアプリ 評価アップ 2022 組織の形を 模索 2023 デザイン組織が ８名に拡大 組織拡大 2024 行内全体に デザイン文化浸透 取り組みの 拡大 2021 立ち上げ開始 グッドデザイン賞 受賞 03
5. 資格：HCD-net 人間中心設計スペシャリスト 佐竹 正之 デジタルマーケティング部　 デザインマネージャー 2008年みずほ銀行 入社、2017年みずほフィナンシャルグループ デジタル イノベーション部を経て、2021年より現職。みずほダイレクトアプリを中 心とするサービスのUX/UIデザイン及びデザイン組織づくりに従事。 Interview 顧客体験を追求し“お客さま第一”を 形にデザインの力で支える 04
6. なぜみずほ銀行にデザインチームを 作ったんですか？ 2017年にデジタルイノベーション部にいた時から、みずほ銀行内でのデジタル化は 目に見えて遅れており、顧客体験の改善（リアルもデジタルも）は重要な課題だと感 じていました。一方で、デザインはあくまで外注するもので、行内でデザイン思考を 用いて企画することや自分たちでデザインをアウトプットする文化はありませんでし た。2021年にデジタルマーケティング部に移ったことで、ダイレクトアプリの改善に 関わり、それがきっかけとなり、デザインチームを立ち上げることとなりました。 私が個人的に感じるデザインチームの強みは、メンバー全員がみずほ銀行の文化・金 融に関する知識を理解しており、その上で各メンバーが持つデザインノウハウと融合 をできています。それと、少し特殊ではありますが、大企業にありながらスタート アップのようなチームの文化があり、好奇心やキャリアパスによって様々なプロジェ クトにチャレンジすることができ、個人にも裁量が多いため、チーム全体で成長でき ている状況を感じることが最大の強みだと思っています。 デザインチームの強みを 教えてください。 05
7. MISSION 01 ミッション
8. 07 お金の 「見えづらい」 を デザインで形作る Mission 「お金」は時代や文化・ライフスタイルの変化によって 価値や使い方が日々変化します。私たちはお金とデザイ ンのプロとして、その不確実で見えづらいお金の価値や 使い方をデザインの力を通じてはっきりと見えるものに し、お客様がより一層安心して銀行のサービスを活用で きるような世界を作り上げます。
9. 今までのデザインに 対する行内のイメージ デザインはデザイナーが作るものという考 え方が根付いており、ビジネス側が要件を 決め、デザイナーにアウトプットを依頼す るという認識が強く、UIデザインやマーケ ティングに活用するLPやバナー・広告を作 ることが「デザインをする」という認識が ありました。 みずほ銀行が目指すデザイン デザインは、人と人を直接的・間接的につなぐも のであり、人が協働する時には必ずデザインが介 在すると考えています。みずほ銀行全体では 「ともに挑む、ともに実る」をパーパスに掲げて おり、このパーパスを実現するためにデザインは 必要不可欠な要素です。このパーパスの実現に向け デザインをデザイナーのみならず、多くの関係者が 協働し作り上げていくものだと考えております。 08
10. ABOUT DESIGN TEAM 02 デ ザ イ ン チ ーム に つ いて
11. 01 企業 みずほ銀行 みずほ信託銀行 みずほ証券 アセットマネジメント 部門 リテール・事業法人 グローバルマーケッツ グローバルトランザクション リサーチ＆コンサルティング 部署 デジタル マーケティング部 個人業務部 法人業務部 サービスクオリティ推進部 チーム マーケティング プラットフォーム VoCデータ解析チーム 法業務革新チーム マーケティング推進チーム みずほ銀行の組織図 10
12. データでみるデザインチーム 性別 年齢比 リモート ワーク 女性43% 男性57% 20代43% 毎日出社14% 40代43% 30代14% 週2,3日リモート86% In numbers デザインチームでは様々なキャリアのメンバーが フレキシブルに仕事をしています。 11
13. メンバー 構成 新卒入社29% キャリア採用71% キャリア採用6名の前職 インターネットサービス 1名 コンサルティング 1名 証券 1名 損害保険 1名 クラウドプラットフォーム 1名 In numbers 12
14. 01 一般的なOJTだったり、外部研修に参加することはベースとして実施して いますが、それ以外にも外部企業に協力してもらい、新規事業立ち上げにデ ザイナーとして参画するなどの育成機会の拡充に取り組んでいます。 メンタリング制度 13 カリキュラム ビジネス デザイン ビジネスゴールの 設定 機能の 優先順位付け サービス動線分析 情報設計 プロダクトビジョン 策定 ブランディング 施策検討 カスタマージャーニー 作成 ユーザーストーリー 作成 モックアップ 作成 プレゼン資料デザイン デザイン 基礎学習X ワイヤーフレーム 作成 デザインプロセス と プロジェクト連携図
15. WORKS 03 ワークス
16. 「みずほダイレクトアプリ」は、口座を登録するだけで、残高照会や振込、取引履歴や毎月の収支確認などが スマホで簡単にできるインターネットバンキングサービスです。多様な金融サービスをユーザーが直感的に使 えるようにするため、UX/UIの向上に力を入れており、そのデザインをデジタルマーケティング部が担ってい ます。アプリは2022年に大幅にリニューアルし、その後も新たな機能追加や改善などを継続しています。 みずほダイレクトアプリ 直感的に使えて快適なアプリ体験の追求 デザインチームがプロジェクトに介入するこ とで、UI/UXの評価基準の整備や、サービス を開発するうえでのデザインシステムの策定 などを行い、プロジェクト全体の開発効率を あげています。 アプリデザイン ビジネス オーナー PMチーム デザイン チーム 開発 ベンダー （所管部門） 要求定義 要求定義 フィードバック PMチーム＆ 開発チーム 要件定義書を 作成する 開発する 画面デザインを 作成する ワイヤーフレームを 作成し要件の洗出し 要求定義の明確化 受け入れテスト ビジネスオーナー デザインガイド ラインを更新する ユーザー ヒアリングを行う デザインプロセス と プロジェクト連携図 15
17. 16 2023年に、みずほダイレクトアプリでカードローンの借入・返済が行えるようになりました。デザインチー ムでは、金融システムならではの複雑性と、ユーザビリティが高いサービス提供というバランスに試行錯誤し ながらデザインを作り上げました。何気ないテキストやインタラクションにも小さな工夫を散りばめたデザイ ンになっています。 ダイレクトアプリ カードローン機能 デザインチームは開発チーム(PM)・開発ベン ダー・カードローン所管部門と連携しながら サービスを作ってきました。 ビジネス オーナー PMチーム デザイン チーム （所管部門） 開発チーム 開発 ベンダー 所管部 カードローン 実装PJ フィードバック 要件定義書を 作成する 開発する 要求定義の明確化 ビジネスオーナー デザインガイド ラインを更新する ユーザー ヒアリングを行う 受け入れテスト 画面デザインを 作成する ワイヤーフレームを 作成し要件の洗出し デザインプロセス と プロジェクト連携図 デザイン チーム UX/UIチーム システム デザイン・ 仕様具体化 PM ビジネス・仕様 PMチーム＆開発チーム
18. 17 2023年に、みずほダイレクトアプリからマネーフォワード for Mizuhoを利用できるようになりました。 これまでの一部の方がWebブラウザからご利用いただくことができたのですが、より多くの方に使っていただ けるようにアプリに搭載することになりました。直接アプリに搭載するのではなく、WebViewという方法を 用いてマネーフォワード社の提供するサービスと連携するため、これまでのサービスデザインとは違った形で のデザイン推進となり、デザインの進め方自体も試行錯誤をしながらのプロジェクトでした。 マネーフォワード ダイレクトアプリ for MIZUHO 課題・解決策の整理 要件定義の優先順位付 画面デザインを 作成する 要件定義書を 作成する 開発依頼 デザインチームは機能要件定義から使用検 討・画面デザインまでサポート ビジネス オーナー PMチーム デザイン チーム （所管部門） 所管部 アプリライン マネー フォワード デザイン チーム UX/UIチーム 仕様検討 ⁨⁩デザイン サポート マネーフォワード と協業 デザインプ ロセス と プ ロジ ェクト 連携図 要 求定義の 明確化 内部 テスト 実施
19. 18 2024年にみずほ銀行のHPを大幅リニューアルしました。総ページ数が数千ページ⁨⁩にも及ぶ大規模プロジェク トであり、様々な課題に直面しつつも関係部門との連携の中、リニューアルを実現していきました。デザイン チームは、デザインに関するディレクションとデザインルール※全般の確認を担当しました。※デザインその ものに加え、デザイン案をHP全体に展開した際の可用性・耐久性の確認、デザインシステムの一貫性等 みずほ銀行ウェブサイトリニューアル ビジネス オーナー PMチーム （所管部門） 所管部 デザイン チーム UX/UIチーム 開発 ベンダー 各所幹部 CC室 実装する デザインガイド ラインを更新する 内部テストをする コンセプトメイク 要件定義の明確化 ワイヤーフレーム作成 画面デザインを 作成する ユーザー ヒアリングを行う WEBマスターチーム フィードバック デザインチームの サポート範囲 デザインプロセス と プロジェクト連携図 ⁨⁩デザイン サポート ⁨⁩デザイン サポート ⁨⁩要件定義
20. 01 19 みずほダイレクトアプリのリニューアルに合わせ、ガイドラインを策定し ました。これまで、社内にはWebページ向けのガイドラインしかなかった ため、初の取り組みでした。外部のデザイナーの力を借り策定し、現在は 社内独自に運用しています。 みずほダイレクトアプリの デザインガイドライン コンセプトメイク 新機能デザイン完了 デザインチーム内で 方針検討 デザインガイドライン アップデート 関係各所への周知 運用フロー ダイレクトアプリ デザインガイドライン ver2.0 02 Foundation 02-01 カラー テーマカラー ブランドガイドラインに準拠し、配色す る。 シンプルながらも各色ごとの役割を明確 化し、全体を通じて共通のトーンマナー をユーザーへ提供する。 主としてコンテンツの背景、アイコン、 文字色に使⽤する色をテーマカラーと定 義。 Mizuho Cosmic Blue は、UIにおけるボ タン等の重要な情報に対し設定する。 「ウェブデザインルール」と同様にブラ ンドカラーの印象付けのため、アプリ全 体を通じて利⽤する。 THEME_PRIMARY_ACCENT #5096C8 THEME_PRIMARY #000066 THEME_PRIMARY_PALE #283296 次のアクションを示す重要なボタ ンや注意を向ける場合、アクティ ブな状態を表現するのに利用する THEME_PRIMARYの色面の上な ど、コントラストを主張したい場 合に利用する 主にアイコンなどに利用する 0 3 Co mpon ent s l 0 3-02 操作系パー ツ 0 3-01 -01 ボタンリ スト カード ボタン ラ ベル サービスのトップページなどで割り当てられている機能ををまとめて並べ、ユーザーが手軽に希 望する行動を選択して実行できるよう支援する。 アイコン ボタン NISA・
 投資信託 サービスのトップページなどで複数のサービスを案内するリストとして用いる。 4 アプリパスワードのピンコードボタンを⼊⼒画面で⽤いる。 画面遷移のトリガーとして、テキストリンクを⽤いる。 ンツ中にリンクを置く場合や、画面の中で相対的に重要度の低いリンク先 G ダイレクトデザインガイドライン（本書）はマーケティングプラットフォームチームが所有し、メンテナンスや社内外のプロダクトデザイン・開発関係者 に対する周知徹底の責任を持つ。 グプラットフ ォームチーム アプリの改善とともに、 デザインガイドラインも継続的に更新 0 3 Co mpon ent s 0 3-02 操作系パー ツ l 0 3-01 -01 ボタンリ スト 表示 イメー ジ ⽤途 基本ボタン テキスト 画面内において主とする動線への遷移にはプライマリーボタンを使用し、副次的に使用する動線 への遷移にはセカンダリーボタンを使用する。 カード ボタン ラ ベル サービスのトップページなどで割り当てられている機能ををまとめて並べ、ユーザーが手軽に希 望する行動を選択して実行できるよう支援する。 アイコン ボタン NISA・
 投資信託 サービスのトップページなどで複数のサービスを案内するリストとして用いる。 4 アプリパスワードのピンコードボタンを⼊⼒画面で⽤いる。 画面遷移のトリガーとして、テキストリンクを⽤いる。 ンツ中にリンクを置く場合や、画面の中で相対的に重要度の低いリンク先 01 Overvi ew 01-04 デザインガイドラインの運 営体制 G ダイレクトデザインガイドライン（本書）はマーケティングプラットフォームチームが所有し、メンテナンスや社内外のプロダクトデザイン・開発関係者 に対する周知徹底の責任を持つ。 アプリの改善とともに、 デザインガイドラインも継続的に更新 Mizuho Direct App Design Guideline JP / Basic / Title2 / Re gular / 1 JP / Basic / Title3 / Bold / 16pt JP / Basic / Title3 / Re gular / 16 pt JP / Basic / Subhe ad / Re gular / 14 pt JP / Basic / Body / Re gular / 12 pt JP / Basic / C allou t / Bold / 12 pt JP / Basic / C aption 1 / Re gular / 11pt font- lin e- heig ht: 140% font- size: 16pt (1rem) font-w eig ht: W3 lin e- heig ht: 140% font- size: 14pt (0.875rem) font-w eig ht: W3 lin e- heig ht: 150% font- size: 12pt (0.75rem) font-w eig ht: W3 lin e- heig ht: 130% font- size: 12pt (0.75rem) font-w eig ht: W6 lin e- heig ht: 100% font- size: 11pt (0.6875rem) font-w eig ht: W3 lin e- heig ht: 130% 基本スタイ ル 最小の文字サイズは11ptとする。 最大サイズは日本語では28pt、英語では 36ptとする。 原則として、日本語については右記の基 本スタイルからタイポグラフィを選択し て⽤いる（英語については⽤途別に細や かな定義があるため、Fig maのスタイル ガイドを参考とする。） その他、より詳細な定義はFig maのスタ イルガイドを参照する。 11ポイント以上の大きさの文字を使⽤ し、通常の閲覧距離でもズームすること なく快適に読めるようにする。 す ブランドカラ 01 Overvi ew 01-04 参考：UXガ バナン スルー ルと体制（全体像） G お客様への共通の提供価値を起点とすることで、統一的な基準でのUX構築と一貫性あるサービス提供が可F G また、共通のゴールを元に会話することで、複数部門に跨るコミュニケーションも円滑に⾏うことが可能になる みずほの 戦略・理念 ダイレクトアプリデザインガイド ダイレクトアプ リ アクセ シビリテ ィガイドライン ダイレクトアプ リ UIライテ ィン グガイド （予定） 他チ ャン ネルデザイン サー ビス企画 プロダクト KPI みずほの 戦略・理念 相互作用 UXコンセプ ト UIデザイン 02 Foundation 02-01 カラー テーマカラー ブランドガイドラインに準 る。 シンプルながらも各色ご 化し、全体を通じて共通 をユーザーへ提供する 主としてコンテンツ 文字色に使⽤する色 義。 Mizuho Cosmic タン等の重要な 「ウェブデザイ ンドカラーの印 体を通じて利
21. UNIQUE POINT 04 ユニークポイント
22. デザインの専門家として、グラフィックデザ インやプロダクトデザインなど多様な分野の 知識や経験を発揮することのできるプロジェ クトがたくさんあります。 銀行のさまざまな サービスのデザインに 関わることができる Unique Point 1 21
23. みずほ銀行は戦略立案からお客様に届けると ころまでの全ての工程を社内で行っていま す。デザインチームも上流から下流まで全て の工程に関わることができるため、大きな未 来図を描きながら、お客様の声も拾うことの できるデザインワークをすることができま す。 上流からプロダクトを 顧客に届けるまで 一気通貫で携われる 22 Unique Point 2
24. みずほ銀行の口座を持っている人は日本人の 5人に一人です。それだけなく、法人口座も 国内外の大企業の役90％の取引実績があるた め、どのサービスも何千万人という人が使う ことが想定された大規模サービスの立ち上げ や・改善に関わることができます。 大規模なサービスに デザイナーとして 関わることができる 23 Unique Point 3
25. CAREER INTERVIEW 05 キャリアインタビュー
26. Career Pass Akinori Nagai UX Designer / Director デジタル×デザインを軸にキャリアをスタート。 制作会社→金融系事業会社→フリーランスなどを経 て、キャリアを積み重ねる。デザインを通して、より 大きなインパクトを残したいという想いから、現在は 「みずほ銀行」のUX/UIチームにてPJや組織のマネジ メント、UXデザインを担当。 1,000万人の投資家を擁する総合証券会社のUXデザ イン組織の運営責任者。金融商品毎に乱立したチャ ネル群を横断し、顧客体験を最適化するべく、デザ イン組織の立ち上げから運営までを担当。また自ら もPLとして大規模リニューアルの推進を行った。 入社前のキャリア 1 50 年以上の 歴史を 持ち、いまや社会になくてはな らない 存在で ある「みずほ銀行」。 その「みずほ銀 行」 が抱える、 巨大な顧客 基盤に 対して、自 分の 考 えるデザインを 全力で ぶつけてい ける こと が一番の やり がいになっている。 みずほ銀行での やりがい WEB制作会社 デザイナー コーダー 大手クライアントのWEBサイトの運営を行う制作 会社で、運用から新規リニューアルまでを経験。 金融系事業会社 ディレクター デザイナー コーダー 事業会社に転職し、マーケティングの企画から、 分析、制作までを一気通貫で担当。 フリ ーランス ディレクター デザイナー メディア、旅行事業など、幅広いクライアントの ディレクションからデザインまでをワンストップ で担当。 大手証券会社 マネジメント ディレクター 1,000 万人の投資家を擁する総合証券会社のUX デ ザイン部署の運営責任者。 みずほ銀行 UXデザイ ナー ディレクター UX/UI チームにてPJ や組織のマネジメント、 UX デザインを担当。 25
27. Yumiko Nakata UI Designer 美術大学卒業後、３名体制の小さなデザイン事務所か らベンチャー企業まで、さまざまな現場をグラフィッ クデザイナーとして経験。クライアントワークでは中 小企業のロゴ・WEBデザインを主に行った。現在は、 UX/UIチームにてUIデザイン、グラフィックデザイン を担当。 ベンチャー企業にて、WEB・ロゴデザインのグラ フィックデザインを通して事業成長や組織活性に紐 づくクリエイティブの創出に従事。また、IT企業に て、UIデザイナーとしてアプリリニューアルの制作 を行いました。 入社前のキャリア 他職種との垣根が無く、ダイレクトアプリの改修を 通して、様々な人の視点や意見を踏まえた制作がで きること。また、グラフィックデザイナーとしての 経験も活かしながらデザイン組織づくりの一端を担 うことができる。 みずほ銀行でのやりがい デザイン事務所 デザイナー カフェなどの飲食店、中小企業等のロゴやパッ ケージ、WEBなどのグラフィックデザインを行う 制作会社 デザイナー WEB、動画、ロゴなどのグラフィックデザインを 幅広く担当。 フリーランス デザイナー ベンチャー企業にて、WEBデザインやバナー制作 を行う みずほ銀行 UIデザイナー デザイナー UX/UIチームでUIデザインやグラフィックの制作 を担当。 26 Career Pass
28. VALUE 06 バリュー
29. Value 1 デザイン業務は、目に見える成果だけでな く、目に見えない多くの要素も含んでいま す。私たちの役割は、お客さまの人生におい て、デザインを駆使し、ドラマの名脇役のよ うな立場でニーズに答え、期待を超える価値 を創造することが重要です。 共感を生み出す 「名脇役であれ」 28
30. 一人で完結する仕事は一つもなく、ステーク ホルダーや他部署と協力しなければ大きな成 果を出すことができません。そのためには周 囲のメンバーを理解し、リスペクトすること で、より多くの仲間や支援者を増やしましょ う 仲間に巻き込む 「仲間や支援者を増やそう」 29 Value 2
31. お客さまの未来を描く上で、逆境にも屈せ ず、常にポジティブに前を向き、導く役割を 担う必要があります。私たちは成長と学びを 楽しみ、常に前向きなアクションを起こすこ とで、お客さまの未来をより良いものに導く ための力となります。 逆境を楽しむ 「常に前を向く」 Value 3 30
32. 我々がデザイナーとして、妥協することな く、あらゆる知識を貪欲に吸収し、常に最新 のトレンドや技術を学び続け、UX/UIの品質 を追求し続けることで、お客さまが感じる不 安感を払拭することができます。 探究し続ける 「デザイナーとしてのこだわりを持つ」 31 Value 4
33. CLOSING 07 クロージング
34. みずほ銀行の デザインチームが目指す世界 「お金の「見えづらい」をデザインで形作る」というミッション のもと、デザインチームだけがサービスの品質をアップデートす るのではなく、みずほ銀行全体を横断して活動することで、組織 全体と協力し、サービスのクオリティを上げ、お客様の不安や課 題を解決できるようなハブのような存在になれればと思います。
35. MEDIA 08 メディアのご紹介
36. 「お客さまの声」を活かした みずほダイレクトアプリ改善の仕組み みずほ全体の体験をつなぐ みずほ銀行デザイン組織立ち上げについて グッドデザイン賞を獲得した「みずほダイレクトアプリ」の
 リニューアルなど、デザインを通じてDXを支えるUI/UXチー ム。 〈みずほ〉のUX/UIを支える 新生デザインチームがめざす場所 「使ってみれば、世界が変わる。コミュニケーションの効率化 で プロダクトのクオリティを底上げ ----- Coming soon... 35 掲載メディア一覧
37. THANK YOU !