インハウスデザインチームが挑んだ「SMBCデザインシステム」の裏側

より多くのお客さまに当行を選んでいただくため、デザインの品質をさらに高める——そんなミッションのもと、SMBCインハウスデザインチームでは1年半にわたり、ある大きなプロジェクトに取り組んできました。それが、「デザインシステム」の設計・構築です。

2021年度のグッドデザイン賞では、デザインを活用した顧客体験の向上に向けた取り組みの一つとして、このデザインシステムも受賞の対象となりました。

今回は、私たちがどのようにデザインシステムを構築していったのか、プロジェクトの裏側をご紹介したいと思います。

※デザインシステムの設計に一緒に取り組んだデザインパートナーのアジケさんのnoteでもデザインシステムの裏側について紹介していますのでぜひ

SMBCに「デザインシステム」が必要だった理由

これまで、SMBCが提供している数々のWebサイトやデジタルサービスは、媒体やプラットフォームごとに異なるデザインガイドラインや制作ルールなどが複数存在しており、すべてのデザインが一貫性をもって提供されているとはいえない状況でした。

「お客さまに対して、SMBCのどのサービスを利用いただいても一貫した体験をご提供できるようにしたい。」インハウスデザインチームでは以前からそうした課題感をもっていました。そこで自社のデザインシステムを構築し、業務の生産性を高めると共に、デザイン品質の底上げを図りたいと考えるようになりました。

プロジェクトチームによる振り返り座談会

私たちが社内でデザインシステムを設計・構築するのは初めてのこと。そこで今回はインハウスデザインチームのメンバーに加え、他2社の協力を得て進めました。

フロントエンドのエンジニアリングを担うトランスコスモスさんと、UI/UXデザインを専門とするアジケさんです。

実際にこの3社でプロジェクトをどのように進めていったのか、ここからはチームに参加したメンバーによる、振り返りの座談会をお届けいたします。

「本当にできる？」不安とプレッシャーの中でスタートしたプロジェクト

大塚：金澤さん、堀さんは当初、デザインシステムの構築プロジェクトをどう捉えていましたか？

金澤：とても価値あるもので、早々につくる必要があるものだという問題意識を持っていました。ただ、はじめての取り組みかつ大きなプロジェクトなので、本当に形にできるかどうか、不安は少なからずありましたね。

堀：私も同じです。でもお客さまに対して統一されたデザイン、体験を提供できるようになるのは素晴らしいことなので、ワクワクする感覚もありました。

大塚：インハウスデザイナーチームができてから「デザイナーって何をしてくれる人なの？」というところからはじまり、行内でもこれまでの実績が少しずつ認められるようになって、最近では他の部署の人たちからも信頼してもらえているからこそのプレッシャーも、みんな感じていたと思います。

神田（アジケ）：SMBCさんのような規模の組織の中で、立ち上がってまだ間もないインハウスデザインチームのみなさんが主導し、これだけのプロジェクトを進められる裁量、自由度があることがすごいですよね。

堀：そうですね。SMBCは確かに大きな組織ですが、社内は風通しが良くメンバーも意欲的な方が多いので、デザインやDXのような新しい領域のチャレンジを受け入れてくれる素地があるんですよね。そういった行内の文化と、今回の私たちの活動が目指すところがマッチしていたのではないかと思います。

膨大なデザイン要素を収集・整理し、ブラッシュアップを繰り返す

大塚：今回はトランスコスモスさんとアジケさんに、プロジェクトチームに加わってもらいました。まずはSMBCが保有しているコンテンツのデザイン要素、コンポーネントなどを収集するところからはじめたわけですが、これが最初のハードルでしたね。

堀：そうですね。行内にあるガイドラインやパーツを集めていったのですが、とにかくデザイン要素の量が膨大なので、初期作業は非常に大変でした。

藤戸（アジケ）：タイポグラフィやブランドカラーなどの精査にも、かなり時間をかけましたね。

金澤：スタート地点に立つまでがとにかく長かった。デザインの原則を決めるためのミーティングでも、ディスカッションが白熱した記憶がありますね。

神田（アジケ）：ただ理想のデザインを追求すればいいわけではなく、現状のブランドデザインや、同時進行で進んでいるものと連動しながら最適解を探っていく作業でもあったので、その難しさもありましたね。

大塚：そうなんですよね。既存のコンポーネントを統一していく地道な作業も多く、特にコーディングなどのエンジニアリング部分に関しては、イチからつくるよりも大変だったのではないでしょうか。

阪本（トランスコスモス）：はい。一つのデザインシステムを構築していくにあたって、微妙に異なるコンポーネントが複数存在することが多く、共通CSSなどぶつかってしまう箇所を調整していく作業に一番時間がかかりました。

金澤：デザインシステムでは現状のパーツなども活かす必要があったので、日頃からご一緒しているトランスコスモスさんがいなければ、今回のプロジェクトの難易度はさらに上がっていたと思います。

大塚：デザインシステムのサイトは一般的なお客さまが目にするものではないので、その難しさもあったのではないですか？

北村（トランスコスモス）：そうですね。デザインシステムはクリエイティブに関わるディレクターやデザイナーなど、作り手のみなさんが活用するものですので、作り手にとっての「使いやすさ」には徹底的にこだわりました。

堀：イラストのアバターシステム構築にも、いろいろとご協力いただきました。人のイラストを作るとき、体、目、口などの共通パーツを組み合わせることで、簡単に無数のバリエーションを作ることができるようにしたんです。さまざまなところで使われているイラストの世界観を統一していくための仕組みですね。

神田（アジケ）：堀さんのアイデアで実現したものですね。アバターシステムに関しても、かなり細かいところまでブラッシュアップを繰り返していたのが印象的でした。

大塚：今回のデザインシステム構築では、これまでパートナーさんたちがそれぞれで制作してきたものを集め、デザインの方向性を統一して調整を繰り返し、それらをさらに磨き上げていく作業が大半を占めていました。

だからインハウスデザインチームだけ、このプロジェクトメンバーだけではなく、SMBCのクリエイティブに関わってくださっている大勢のみなさんの力があってこそ成立したプロジェクトなんですよね。

オンライン環境下で、デザイナー同士のコラボレーションが実現

藤戸（アジケ）：今回のプロジェクトの大半はオンライン環境下で進行したわけですが、プロジェクト当初から「figma」を導入していたことで、メンバー全員がフラットな状態で議論を進められたと感じています。

金澤：僕もそう思います。オンライン上で共通のデータを複数人で編集しながら進行したのは、今回がはじめてでした。でも何のストレスもなかったですね。

大塚：メンバー全員がデザイナーだったので、オンラインミーティングの途中に、ふと気付くとfigma上でみんな黙々と自分がイメージするものを作り始めていることもよくありました（笑）。

堀：通常のプロジェクトでは、チームの中にデザイナーが1人か2人、というケースがほとんど。でも今回は全員が作り手で、自分のデザインに対し、多角的なフィードバックを得られてすごく勉強になりました。学生時代に自由にものをつくっていたワクワク感を、少し思い出しました。

金澤：一緒にプロジェクトを進めていく仲間なのですが、デザイナーとしてはライバルでもある。「自分も負けていられない」という気持ちになりましたよね。そんなメンバーと、これからのSMBCのデザインを支えていく土台をつくることができて、とてもうれしいですね。

堀：「いいものを作りたい」という原点の気持ちを共有し、かつインハウスデザインチームのメンバーだけではなく、他社のデザイナーさんともコラボレーションできたのはとても大きかったと思います。

デザインシステムは「完成形」ではない。これからが新たなスタート

大塚：プロジェクトはまだまだ続きますが、デザインシステムのサイトをリリースするところまで漕ぎ着けることができました。はじめは不安もあったと思いますが、振り返ってどう感じていますか？

堀：チームで一つのプロジェクトを完遂できたことで、自分にとっての自信につながりました。デザイナーとして、イチからコンセプトを立ててデザインを構築していくトレーニングにもなりました。

金澤：複数人のデザイナーとコラボレーションできたことで、自分がこれまでに経験してきた範囲、領域を超えた学びがありました。

今後はアクセシビリティの改善など、まだまだこれから着手しなければいけない課題はたくさんありますよね。さらに、金融領域のデジタルデザインにおけるトレンドはどんどん移り変わっていくので、デザインシステムを運用していくことで、それにすぐ適応できる体制をつくっていく必要があると思っています。

堀：私たちデザイナーチームの生産性を高めていくのはもちろんのこと、これからは行内の他のメンバーにも、デザインに対する意識を根付かせていきたいと考えています。デザインを、SMBCを選んでくださるお客さまの体験をさらに向上させる基盤にしていきたいですね。

大塚：インハウスデザイナーとしてどんな課題に取り組むことができるか、私たちはチームでさまざまなことを模索しながら進めている真っ最中です。これからインハウスデザインチームに加わるメンバーにも、デザインシステムを「完成形」と捉えず、積極的に進化させていってほしいと思います。課題はまだまだありますが、これからが新たなスタートです。

今すぐエントリーしたい方

hrmos.co 【リテールIT戦略部】デザイナー(デジタルプロダクト・ブランド・サービス・ユーザーリサーチ領域)

株式会社三井住友銀行 ほか0箇所 フルタイム

募集要項をみる

デザイナーの仕事やチームについてもっと知りたい方