三菱UFJ銀行 CXデザイン室では、リテール領域全体の顧客体験を高めることをミッションに、組織横断で戦略的なデザインアプローチに取り組んでいます。
その一環として進めているのが、銀行サービス全体の顧客体験をより良くするためのデザインシステムの構築・運用です。
私たちがつくっているデザインシステムは、Webやアプリといったデジタル領域に閉じず、店舗空間などのリアル領域まで含め、チャネルを横断して活用できるものを目指しています。もうひとつ大きなテーマとなっているのが「どうすれば組織のなかで実際に使われるのか」ということです。
三菱UFJ銀行のような大規模な組織の中で、デザインシステムをつくるだけでなく、その目的や役割を多くの関係者に理解してもらい、実際の業務で活用される状態をつくる必要があります。そのため、トップダウンとボトムアップ双方のアプローチを取り入れながら推進してきました。
コンポーネントライブラリやUIキットを整備するだけではなく、銀行サービス全体の顧客体験を高める仕組みとして、継続的に使われる状態をつくっていくこと。この点に、三菱UFJ銀行ならではの難しさとやりがいがあると感じています。
三菱UFJ銀行のデザインシステムをどのように設計し、組織への浸透を進めているのか。現時点での取り組みを振り返ります。
三菱UFJ銀行には、アプリやWeb、店舗、店頭端末など、さまざまな顧客接点があり、提供するプロダクトも多岐にわたります。
お客さまは目的や状況に応じて複数のチャネルを行き来しながら銀行サービスを利用します。そのため、どの接点でも一貫した良い体験を提供することが重要です。
一方、サービスの開発・運営体制は、チャネルやプロダクトごとに担当部署が分かれ、開発・制作を担うベンダーも異なります。それぞれの領域で最適化が進められてきましたが、銀行サービス全体として見ると、顧客体験の一貫性をさらに高められる余地がありました。
これまでも、デザインに関するマニュアルやガイドラインは各領域で整備されてきました。ただ対象領域や所管部門が異なるため、参照先が複数に分かれ、内容や粒度にもバラつきがありました。
とはいえ、こうした状況に対してCXデザイン室がすべての案件に入り込み、個別に品質を支え続けることには限界があります。
そこで取り組み始めたのが、三菱UFJ銀行のさまざまなサービスづくりで参照・活用できるデザインシステムの構築です。私たちが目指したのは、次のようなデザインシステムでした。
お客さまが複数のサービスやチャネルを利用する際にも、使いやすく一貫性のある体験を提供すること
アプリやWeb、店舗、店頭端末など、異なるチャネル・プロダクトに共通する考え方を扱えること
サービスづくりに携わる各部署の行員やベンダーが理解しやすく、実務で活用しやすいこと
しかし、デザインシステムはつくるだけでは使われません。特に三菱UFJ銀行のような大規模な組織では、複数の部門や関係者を巻き込みながらデザインシステムを構築し、実際の活用まで広げていくことは一筋縄ではいきません。
ここからは、CXデザイン室がどのようにデザインシステムの構築・浸透を進めてきたのか、3つのポイントに沿って取り組みを紹介します。
最初に取り組んだのが、デザインシステムの土台となる「デザインプリンシプル」の策定です。
策定にあたっては、三菱UFJ銀行の役員・部長をはじめとする経営層へのインタビューを行いました。その内容をもとに、当行として大切にしたい顧客体験の在り方や、デザインの軸となる考え方を整理しました。
デザインプリンシプルの策定から始めた理由は、大きく2つあります。
1つ目は、チャネルをまたいでもブレないデザインの軸をつくるためです。
はじめから具体的なガイドラインやコンポーネントをつくろうとすると、アプリやWeb、店舗など、チャネルごとの要件に引っ張られやすくなります。
そこでまずは、サービスやチャネルを横断する共通の判断軸として、デザインプリンシプルを策定することにしました。
2つ目は、経営層の想いを反映し、トップダウンでの推進力を得るためです。
大規模な組織の中でデザインシステムの活用を広げていくには、現場への働きかけだけでなく、経営層の理解や後押しも欠かせません。
そこで取り組みの初期段階から、デザインシステムへの期待や、顧客体験において大切にしたいことを、経営層自身の言葉で語ってもらいました。それらをデザインプリンシプルに反映することで、デザインシステムを制作部門だけの活動ではなく、事業やブランド戦略と結びついた取り組みとして位置づけていきました。
具体的には、以下のようなプロセスで策定を進めています。
リテール・デジタル事業本部／部門の役員に加えて、MUFGグループ全体のブランド戦略を担う部門の責任者にもインタビューを行いました。
デザインプリンシプルは、めざすブランドの在り方と密接に関係するためです。初期段階から全社ブランド戦略との整合性を確認するとともに、リテール・デジタル事業本部／部門の役割を明確にすることで、互いに連携できる関係を築きました。
インタビューでは、「リテール・デジタル事業本部」「MUFG」「経営視点」「ブランド」「デザインシステム」「顧客体験」など、いくつかの観点から質問を用意しました。
1人ひとりにデザインシステムの概要やインタビューの目的を説明したうえで、組織としての強みや課題、デザインプリンシプルに込めるべき考え方を棚卸ししていきました。
次に、インタビューで得られた意見から重要なポイントを抽出・分類していきました。
このとき意識したのは、デザインプリンシプルをデザイン領域だけで完結する独立したルールにしないことです。MUFG Wayやブランドパーソナリティ、パーパス、バリューとのつながりを意識しながら、三菱UFJ銀行が目指す顧客体験と結びつけて整理していきました。
具体的には、デザインプリンシプルをMUFGのブランド戦略を体現するための「デザインの方針」として位置づけています。そのうえで、デザインに必要な「機能的な要素」と、つくり手が「意識すべきマインド」を言語化しました。
こうして定めた3つの要素が、「直感的に使えるデザイン」「誇りを持てるデザイン」「常に進化し続けるデザイン」です。
こうして、チャネルごとの具体的なガイドラインやコンポーネントを整備する前に、三菱UFJ銀行のデザインに共通する判断のよりどころを定めました。
デザインプリンシプルを土台に、次はデザインシステムの具体的な設計へ進みました。
三菱UFJ銀行のデザインシステムの特徴の１つは、Webやアプリなどのデジタル領域に加え、店舗空間をはじめとするリアル領域まで対象としていることです。
デジタル領域では、カラーやテキストスタイル、ライティング、アクセシビリティといった基本要素をはじめ、ホームページやアプリのデザインに必要となるルール、UIコンポーネント、ビジュアルアセットに関する情報をまとめています。
もともと「三菱UFJ銀行アプリ」の開発時に、アプリを対象としたデザインシステムの土台がありました。そのデザインを推進していた戦略子会社Japan Digital Designと連携し、Webを含むほかのチャネルでも活用できるよう汎用性を高め、デジタル領域のデザインシステムへと発展させています。
構成要素は、スタイル、ライティング、コンポーネントなど、一般的なデザインシステムにも見られるものです。
ただ、三菱UFJ銀行でとくに重要なのは、それらを単体のWebサイトやアプリの中だけで完結させず、複数のプロダクトや部署、開発・制作パートナーが関わる環境でも活用できる状態にすることです。 今後は実装面の環境整備も進めながら、実際のサービス開発でより使いやすいものにしていく予定です。
リアル領域では、三菱UFJ銀行が展開する個人のお客さま向けの新しい店舗形態「エムットスクエア」を対象に、店舗空間のデザインシステムをまとめています。
エムットスクエアの店舗設計にはCXデザイン室が携わっています。今後の店舗展開を見据えると、店舗ごとにゼロから空間を設計するのではなく、エムットスクエアらしさを再現できる仕組みが必要になります。そこで、空間づくりで大切にしたい考え方や、再現性を高めるためのルールをデザインシステムとして整理しました。
具体的には、店舗のムードボード、窓口・待合スペース・相談ラウンジといったエリアごとの設計、家具・什器、植栽、キーマテリアル、カラー配分などをまとめています。
さらに、照明の色温度、床・壁のマテリアル、造作物の寸法、既製品の品番など、設計や施工、制作に関わる人が迷わず判断できる粒度まで落とし込んでいます。
ただし、店舗空間の場合、すべての要素を一律のルールで固定することはできません。店舗によって立地や面積、利用されるお客さまの特性、既存の空間条件などが異なるからです。
そこで、リアル領域のデザインシステムでは、守るべき要素を「定数」、店舗ごとの条件に応じて調整できる要素を「変数」として整理しました。
定数：エムットスクエアらしさや、一定の品質を担保するために、共通して取り入れる構成要素
変数：立地やスペース、利用されるお客さまの特性、既存条件などに応じて、柔軟に調整できる要素
現在は標準的な店舗設計を中心にカバーした内容となっていますが、今後は、ATMを中心とした店舗の空間設計や、店舗内のサインなど、まだ標準化しきれていない領域にも広げていく予定です。
こうして整備した三菱UFJ銀行のデザインシステムを、2026年6月に行内向けに公開しました。
とはいえ、デザインシステムは公開しただけで自然に活用が広がるものではありません。さまざまなプロジェクトで当たり前に使われるようになるまで、長い目で取り組みを続けていく必要があります。 ここでは、組織への浸透に向けて進めてきたことをいくつか紹介します。
まず進めたのが、MUFGグループ全体のブランド戦略を担う部門との連携です。既存のMUFGグループ全体のブランドマニュアルとデザインシステムの役割を整理し、それぞれを適切に参照できる導線を整えました。
ブランドマニュアルは、ブランドアセットを使うときや、基本的なデザイン要素を確認するためのもの。デザインシステムは、Webやアプリ、店舗空間など、より具体的なサービスづくりに活用できるもの。
このように役割を整理したうえで、ブランドマニュアルとデザインシステムの間に相互リンクを設けています。たとえば、ブランドを具体的なサービス上でどう表現すればよいかを知りたいときはデザインシステムを見る、といった流れです。
これには、大きく2つの目的がありました。
1つ目は、将来的に三菱UFJ銀行だけでなく、MUFGグループ各社でも使われることを見据え、デザインシステムをMUFGグループ全体のブランド戦略と紐づいた取り組みとして位置づけるためです。ブランド戦略グループと連携することで、ガバナンスを効かせやすくする狙いもありました。
2つ目は、行員が迷わず使えるようにするためです。多くの行員にとって、ブランドマニュアルとデザインシステムの違いは必ずしも分かりやすいものではありません。だからこそ、それぞれを「いつ、どのような場面で見るのか」が分かるように、シンプルに整理しておく必要がありました。
ブランド戦略グループでは、ブランドそのものやMUFGブランド戦略への理解を深めてもらうため、グループ従業員向けのセミナーを定期的に開催しています。そのなかで、ブランドを具体的に体現するための方法の一つとして、デザインシステムを紹介するといった連携も進めています。
デザインプリンシプル策定の段階からブランド戦略グループと密に連携し、MUFGのブランド戦略を具体的な体験へ落とし込むための仕組みとしてデザインシステムを位置づけられたことは、その後、組織への浸透を進めていくうえでも大きな意味があったと考えています。
デザインシステムの入り口として、SharePoint上で社内向けサイトを公開しました。
サイトでは、デザインシステムの目的や活用できる場面を紹介するだけでなく、ガイドラインやFigmaのUIキットなど、実際に使い始めるために必要な情報やリソースをまとめています。
行内で利用するためには、いくつか必要な手続きもあります。また、社内のデザイナーだけでなく、企画部門のメンバーや外部ベンダーなど、さまざまな方々が利用することになるため、利用開始までの流れをできるだけ丁寧に整理しました。
なかには、これまでExcelなどで作っていたワイヤーフレームを、Figma上でデザインシステムを使いながら作りたいという声もありました。一方で、そうした方々が必ずしもFigmaに慣れているとは限りません。
そこで、デザインキットのライブラリをどう有効化するかといった、基本的な利用手順についても細かく掲載しています。
デザインシステムへの理解を深め、利用につなげるため、社内向けの説明会も実施しています。
初回の説明会には約200名が参加しました。参加者は、Webサービスやアプリを所管する企画部門や、開発子会社のメンバーなどが中心でした。想定以上の反響があり、リテール領域を対象として整備したデザインシステムでありながら、法人向けサービスの担当者も関心を持って参加してくれました。
参加者からは、以下のような声が寄せられています。
行内のプロダクトにはデザインのばらつきがあり、アクセシビリティの面でも課題を感じています。今回の取り組みを通じて、行内のデザインガイドが統一され、より良いプロダクトにつながっていくことを期待しています。
基礎的な部分には、現在のプロダクトにも取り入れられそうな要素が多いと感じました。また、必ず従うルールではなく、各プロダクトの状況に応じて活用できる点にも好感を持ちました。
担当システムにはモックがなく、設計フェーズでは実画面の修正イメージを関係者間で共有することに苦労しています。現在は画面キャプチャを切り貼りして対応しているため、デザインシステムをすぐにでも取り入れたいと感じました。
今後もこうした機会を設け、デザインシステムを知ってもらうだけではなく、実際の利用につなげていきたいと考えています。
デジタル・リアル両方の領域をカバーし、行内で広く活用できる仕組みとしてデザインシステムを公開できたことは、大きな一歩でした。
ただ、公開しただけで組織に根づくわけではありません。デザインシステムが実際の業務で使われ、顧客体験を高める仕組みとして機能していくためには、利用支援や環境整備を続ける必要があります。
個別の活用支援や説明会といった草の根的な取り組みを続ける一方で、理想的な活用事例を実績としてつくっていくことも重要です。
現在は、ある主要なWebサイトで、デザインシステムを適用したリニューアルプロジェクトを進めています。まずは代表的な適用事例をつくり、そのプロセスや成果を共有することで、ほかのプロジェクトにも「使ってみよう」という動きが広がることを期待しています。
デザインシステムが扱う領域についても、まだ拡充の余地があります。さらに、AI活用を前提に、これまでのワークフローそのものを見直す取り組みも始めています。
大切なのは、ツールやドキュメントを整備すること自体ではなく、それらが日常の業務の中で使われ、行内全体で顧客体験を高める仕組みとして機能することです。まだ道半ばではありますが、その状態を目指して、検証と改善を重ねていきます。
デザインシステムは、つくるだけでは意味がないとよく言われます。三菱UFJ銀行のような大規模な組織では、なおさらその難しさを感じています。仕組みを整えたからといって、組織全体がすぐに変わるわけではありません。そこに至るまでには、多くの関係者との合意形成も必要です。
だからこそ、顧客起点でサービスを考える姿勢が組織に広がり、より良い金融体験を生み出し続けられるようになれば、大きなインパクトにつながると考えています。
そのためには、ガイドラインやコンポーネントをつくるだけでなく、この大きな組織のなかで、誰と連携し、どのように合意を形成し、どの順番で広げていくのか。そこまで含めて考える必要があります。トップダウンで進めるのか、現場から活用を広げるのか。あるいは、その両方をどう組み合わせるのか。取り組むテーマや組織の状況に応じて、進め方も変わります。
AIによってアウトプットをつくる手段が広がるほど、こうした課題設定や合意形成、仕組みづくりは、これからのデザイナーにとってより重要になっていくと感じています。難しさはありますが、こうした複雑さも含めてデザインしていくことに、大きなやりがいがあります。
今後もデザインシステムに限らず、CXデザイン室として、銀行全体の顧客体験を向上させていく取り組みを発信していきます。