AD CreatorZineホットトピックス

JCBがゼロから始めたデザインシステム構築　その裏側をデザインチーム発足から振り返る

CreatorZine編集部中村直香[著] / 大森大祐[写]

2024/09/20 12:00

　企業やブランドとして一貫した体験を提供したり、デザイン業務の効率化などに効果を発揮したりすることからも、着手する企業が増えている「デザインシステム」。今回話を聞いたのは、2022年7月に発足したデザインチームを中心にデザインシステム構築に取り組んだ、日本発唯一の国際カードブランドを運営する「ジェーシービー（以下、JCB）」だ。さまざまな事業を展開するJCBは、どのようにデザインシステム構築を進めていったのか。ゼロからの構築だからこそ意識した点とは――。JCBの担当者3名と、本プロジェクトに伴走したゆめみの2名が振り返った。

共通のデザイン資材がない状態から始まった、デザインシステム構築

　さかのぼること2020年春。JCBのデザインを語るうえでひとつの転機があった。よりスピーティーにビジネスを進めるためのクラウドネイティブな開発基盤として、JCB Digital Enablement Platform（以下、JDEP）が構築されたことだ。JDEPには大きく分けると、個々のアプリケーションを開発するための「アプリチーム」と、それらを横断して支援するための「共通チーム」のふたつがある。

　発足当初は最低限のチーム構成であったが、徐々に規模は拡大。UIUXといったデザイン面でも、複数のアプリケーションを横断して支援するため、2022年7月に共通チームのひとつとして「デザインチーム」が誕生。その立ち上げをミッションに入社したのが、デザインマネージャーをつとめる入尾野由子さんだ。

　おもにデザインチームが活動している領域は次のふたつ。「アプリ開発」と「DesignOps」である。

「『アプリ開発』では、社員デザイナーがアプリチームの一員として参画し、アジャイル開発におけるUIUXデザインの推進を行っています。各チームは、プロダクトオーナー（以下、PO）、エンジニア、デザイナーで構成。デザイナーとして社外のパートナーが加わることもありますが、社内デザイナーがジョインする場合、POやエンジニアと直接会話をしながら、ワンチームでプロダクト開発を行っています」（入尾野さん）

株式会社ジェーシービーデジタルソリューション開発部開発Ⅳグループ副主査入尾野由子さん

　ふたつめの「DesignOps」における主要な柱のひとつが、今回取り上げる「デザインシステム」である。

　JCBではデザインチームが立ち上がるまでは、各アプリチームで個別にデザイン制作会社をパートナーとして招き、フロント画面のUIデザインなどを作成していた。標準的なデザインプロセスなども整備されておらず、共通のデザイン資材がない状態。そのため、カレンダーのUIで、表示を英語と日本語のどちらにするかといった細かい仕様も、最終的にはPOが意思決定をしなければならず負荷も高かった。

「こういった細部の仕様は標準的に使えるデザインアセットがあれば自然に決まっていくはずですし、それができれば、『お客さまへの価値提供』といったPOが本来注力すべきトピックに時間を割くことができる。そう考えたことが、デザインシステム構築に着手するきっかけでした」（入尾野さん）

　しかし2022年7月にデザインチームを立ち上げた当初は、社員のデザイナーも不在。そこでまずはデザインプロセスの標準化やデザイナーの採用に着手した。それを機に加わったのが、プロダクトデザイナーのジン・スジンさんと関豪志さんのふたりだ。アプリチームのいちデザイナーとして加わり、POとコミュニケーションをとりながら、プロダクト開発に必要なペルソナ設計やシナリオの策定、UIデザインの作成などを行う「社員デザイナー」である。

選定の決め手は「考えかたの一致」と「具体的なイメージが湧いたこと」

　そうやって着手したデザインシステム構築だが、進める際に知見をもつパートナー企業に依頼するケースも少なくない。JCBも例外ではなかった。

　JCBがサポートを依頼したのは、DX・内製化支援を行うゆめみだ。入尾野さんがデザインシステム構築を考え始めたタイミングで、ゆめみが「デザインシステム構築・内製化サービス」をリリース。さまざまな実績をもつ同社が、これまでの経験から導き出した再現性のあるプロセスによって、その構築に伴走していくサービスだ。それを見かけた同僚の話を聞き、LPより直接問い合わせをしたことがきっかけだったと言う。さまざまな検討を重ねた結果、実際に依頼をすることになった決め手は何だったのだろう。

「デザインシステムのプロジェクトが始まる前、デザインチーム立ち上げ時にまず着手したのが、デザインプロセスの言語化・可視化です。『あるべきデザインプロセス』の姿を明文化したのですが、ユーザーにヒアリングを行い、ユーザーが感じている課題や求めている価値をリサーチしてからプロダクト要件を決めていくといった、デザインシンキングのプロセスで考えていったんです。

そんな背景もあるなか、ゆめみさんの提案資料を拝見すると、構築プロセスが丁寧に示されており、その最初のステップには『ヒアリング』が入っていた。そういった部分から私たちの考えかたと合致していると感じられたこと、また進めかたの具体的なイメージが湧いた点などが、大きな決め手だったと思います」（入尾野さん）

　実際のデザインシステム構築では、入尾野さんがデザインマネージャーを、ジンさんと関さんがデザイナーとレビュアーを担当した。ガイドライン策定やカラーパレット、サンプルデザイン、コンポーネント作成などを行ったり、ゆめみが策定したデザインのガイドラインやUIコンポーネントのデザインに対し、JCBとして問題ないかなどをチェックしたりする役割だ。

　一方ゆめみは、デザインシステムをつくるプロセスづくりの提案からスクラムにおけるイベント設計、コンポーネントのデザイン、ファシリテーションなどを担った。同社の竹田学さんがデザインシステム全体の大枠を考えるデザインシステムマネージャーを、普段プロジェクトマネージャーとして活躍する大久保大祐さんはスクラムマスターとして伴走した。