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

Transcript

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