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

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

　さかのぼること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として問題ないかなどをチェックしたりする役割だ。

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

共通認識を持つため、“先に”ビジュアルを作成

　構築の最初のステップに据えていた「ヒアリング」では、実際にデザインシステムを利用するアプリチームの開発メンバーや、外部の制作パートナーとしてJCBのデザインに関わっているデザイナーといったユーザーに話を聞いた。どういったデザインを大切にしているのか、それをもとにどんなデザインシステムにしていきたいかといった言語化を進めていったが、初期にイメージしていたこの「ユーザー像」は、プロジェクトを進めるなかで変化していくことになる。

「デザインシステムを利用する人へのヒアリングを重ねていくうちに、デザインシステムを通して実際にサービスを利用する『エンドユーザー』像がプロジェクトメンバーによって異なっていることに気づいたんです」（入尾野さん）

　デザインシステム構築に関わったJCBの3名も在籍歴が特別長くなかったことなどもあり、「正直最初は、エンドユーザーの解像度も粗かったと思います」と入尾野さん。ひとつのコンポーネントのサイズを決めるときも、最終的なエンドユーザーのイメージが明確であれば答えを導きやすいが、JCBのユーザーの幅広さや事業によってユーザー像が異なるため、「誰に向けたサービスなのか」を定義することが難しかったのだ。

　また、難易度が増していたのにはほかの理由もある。デザインシステムは通常、ベースとなるサービスのデザインが存在する状態で構築が進められるが、今回はゼロからのスタート。共通認識を持つための具体的なイメージもなかったため、「正しいと思う『良いデザイン』がそれぞれ異なっていた」とジンさんは振り返る。

　そんな課題を解決するために行ったのが「デザインガイドラインの策定」「サンプル画面の作成」「UIレビュー時にイメージコンポーネントを作成して共有すること」の3つだ。

「まずはJCBらしいアウトプットを作ってから議論を始めようと考えました。ガイドラインの策定では、サイズ、余白、カラー、シャドウなどに関するガイドを作成。またカラーパレットやビジュアルデザインのサンプルなどを作成することで、ビジュアル面から共通認識をつくっていきました」（ジンさん）

「何もないところからのスタートだったこともあり、最初にカラーの組み合わせを考えたり、本来であれば最後の工程で用意するサンプルを先に作ったり、進めかたを柔軟に入れ替えながら進めていきました」（竹田さん）

コンポーネント化の基準も明文化 「一定の自由度が担保できる設計を」

　JCBのデザインシステムがリリースされたのは2024年の4月末。関さんが実感したのは、「複雑な案件でこそ、デザインシステムを適用することが大切である」ということだ。

「デザインシステムのパーツをフルで活用しプロダクトに当てはめていく複雑な案件を担当したのですが、入り組んでいるケースだと、デザインシステム構築当初は想定していなかった使いかたや、本来用意すべきだったパーツの不足などが見えてくるんですよね。複雑な実案件でデザインシステムを適用することで課題を洗い出すことができた。実際に取り組んでみて、過剰にコンポーネント化するよりも、ある程度の自由度が担保できる設計のほうが良いのではないかと感じました」（関さん）

　何をコンポーネント化するのか。これはパーツ化すべきなのか――。そういった具体的な判断は、都度ゆめみに相談しながら進めていったと言う。あまり汎用性がないことからパーツ化しないほうが良いと考えたものもあった一方、コンポーネント化するべきだと判断したのは、ログインのような、ユーザーがほかのサービスでも共通して使用するもの。ゆめみからの「同じような画面であるほうがお客さまにとっては望ましいからコンポーネント化しましょう」といったアドバイスを受けながら精査していった。

　このようなコンポーネント化の基準は、ゆめみの竹田さんが中心となり明文化されている。最終的にはコンポーネントを見ながらひとつずつ決めていく必要があるものの、汎用性があると判断したら、デザインシステム側でバックログ化し、半自動的に取り込む流れもできているのだと言う。

「最近ですと、コンポーネント化をするか否かを判断する際のフローも確立されてきているため、それをスクラムのイベントに組み込んだりもしています。そういった進めかたによってデザインシステムがどんどんブラッシュアップされていき、成長し続けられる仕組みづくりができたのではないかと感じています」（大久保さん）

　実際にプロジェクトをともにするなかで、ゆめみの本サービスに関して入尾野さんが印象に残ったのは「最終的なゴールはクライアントの自走」であることだ。

「『デザインシステム構築・内製化サービス』の名のとおり、最終的には私たちが自走できるようになることを目指すためのサービスだと感じました。ゆめみさんは提案時からとても寄り添ってくれましたし、一緒にプロジェクトを進めていても、お互いに何でも言い合えていた感覚があった。私のなかで、とても心理的安全性が高い環境でした。プロジェクトのなかでも、JCBが自立して進めていくためのサポートをしてくださっているんだと感じる場面がたくさんありましたね」（入尾野さん）

「クライアントさんが自立して走れることをゴールに据えながらも、最初は丁寧に伴走することも大切にしています。今回はスクラム開発で進めたこともあり、よりチームとしての一体感も出たように思います」（竹田さん）

今後は「JCBのさまざまなサービスにデザインシステムを反映させたい」

　始まったばかりのJCBのデザインシステム構築プロジェクトだが、デザインチームとして取り組みたいことはまだまだ尽きそうにない。

「現在デザインシステムを活用し制作しているのはおもにJDEPで開発している一部のプロダクトなどですが、JCBにはそれ以外にもさまざまなコンテンツやサービスがあるため、デザインシステムによってそれらに横串を通していきたいと考えています。ユーザーが日々の支払金額をチェックするためのサービスもあれば、旅行やポイント、キャンペーンなどの情報を発信するサイトもある。そういった多岐にわたる接点で一貫性のある体験を提供することにより、『JCBを使っていて良かった』と思ってもらえるようなブランドを目指したいですし、それをデザインによって実現していきたいと考えています。

そのためにも、現在はウェブやレスポンシブへの対応を進めているところですが、それに加えて、iOSやアンドロイドといったネイティブアプリのパーツも個人的には揃えていきたい。

サービスごとの個性や世界観は、各サービスのデザインテイストによって決まるものだとすれば、お客さまがJCBのさまざまなサービスをよりシームレスかつ快適に利用できるよう基本となるパーツや挙動を統一させる、つまり「幹」の役割を担うのがデザインシステムだと感じています。

さまざまなデバイスへの対応を進めていくのと並行し、今あるJCBのサイトに、少しずつデザインシステムを反映させていけたらと思っています」（関さん）

　実は、このデザインシステムには「SHIMA」という名前がある。まだデザインチームが入尾野さんと別のメンバーのふたりだったころ、愛着が湧くのではないかとの思いから、日本が島国であることに着想を得て名付けたものだ。SHIMAの5文字にあわせ、Standardize（標準化）、Human-centered（人間中心）、Inclusive（誰も排除せずすべての人が参加できる）、Main branch（軸）、Accessible（利用しやすい）の5つの単語を定義し、より意味を持つ名前にした。

　「さまざまなプロダクトの幹となるものにしたい」。そんな思いから生まれたJCBのデザインシステム「SHIMA」は、これからJCBのさまざまなサービスやソリューションに染み出していくのだろう。ゆめみから得た知見をもとに、どのようなデザインが展開されていくのか注目していきたい。