ジェーシービー｜ゼロからデザインシステムを構築し、成長し続ける仕組みづくりも。ご担当者様・ゆめみ担当者による特別座談会
日本発唯一の国際カードブランド「JCB」を運営する企業として、金融領域で幅広いサービスを展開する株式会社ジェーシービー（JCB）。
同社は、2020年にビジネスをより素早く市場に展開するための開発基盤として、JCB Digital Enablement Platform（JDEP）を構築。個々のプロダクトを開発するアプリチームと、彼らを支える専門性を持った共通チームが一枚岩となり、アジャイル開発を推進してきました。
そして2022年7月には、UXUIデザインの内製化とデザインプロセスの最適化を目指し、共通チームの1つとしてデザインチームを立ち上げ。特に後者の実現のためには「デザインシステム」の構築が不可欠という課題意識から、ゆめみの「デザインシステム構築・内製化サービス」を導入しました。
実際の構築にあたっては、共通のデザインアセットが全くないゼロベースの状態から、エンドユーザー像をすり合わせた上で「あるべきデザイン」を定義。デザインシステムの構築、プロダクトへの適用、運用の仕組み化まで、二人三脚で取り組みました。
今回は、JCB様とゆめみがスクラムを組み、ワンチームとなって挑んだこのデザインシステム構築を、座談会形式でふりかえります。
クライアント
座談会参加メンバー
株式会社ジェーシービー デジタルソリューション開発部 開発Ⅳグループ
副主査 入尾野 由子様
主事 関 豪志様
副主事 ジン スジン様
株式会社ゆめみ
リードUIデザイナー / デザインシステムマネージャー 竹田 学
プロジェクトマネージャー / スクラムマスター 大久保 大祐
右から、JCB関様・入尾野様・ジン様 / ゆめみ 竹田・大久保
デザインシステムの構築の狙いは、顧客へのより大きな価値提供
――本日はどうぞよろしくお願いいたします。はじめに、JCB Digital Enablement Platform（JDEP）の開発体制やデザインチームの役割を教えてください。
入尾野様：JDEP全体の体制としては、アプリケーションを開発するアプリチームが複数あり、彼らを横断的に支援するチームを総称して「共通チーム」と呼んでいます。私は2022年7月に、その1つであるデザインチームの立ち上げをミッションとして入社しました。
入尾野様：デザインチームの役割は大きく分けると2つで、実際のアプリケーション開発におけるデザインと、DesignOps（デザイン業務の最適化）です。
まず前者のアプリ開発においては、社員のデザイナーがアプリチームの一員としてジョインし、デザインを行っています。そして後者のDesignOpsについては、その主要な柱の1つがデザインシステムです。
そもそもデザインチームが立ち上がるまでは、アプリチームが各自でUIデザインを作っていました。それぞれ個別にデザイン制作会社さんをパートナーとして招き入れていたのですが、共通で使えるデザインアセットがなく…。
運用やメンテナンスのフェーズに入った時にも効率的ではなかったので、標準的に利用できるデザインシステムが必要だと感じていました。
――それぞれのアプリで個別に作っていたデザインを統一するだけではなく、プロセスを改善する狙いもあったのですね。
入尾野様：そうですね。特にUIデザイン制作を効率化していくのが目的でした。それがデザイン制作におけるクオリティやコスト、デリバリーの向上にも繋がると考えていました。
当時は「このカレンダーのUIは、英語と日本語どっちにする？」といった、細部のデザインの意思決定までPOが行っている状態でした。そういった際に使えるアセットがあれば、「お客様により大きな価値を提供するにはどうすべきか」という、POが本来考えるべきことに多くの時間をかけられるだろうと思っていましたね。
ゆめみを選んだ決め手＝開発プロセスにおける「ユーザーファースト」
――デザインシステムの構築にあたり、パートナーとしてゆめみを選んでいただいた決め手はどういった部分でしょうか。
入尾野様：ゆめみさんとは、今回JDEPとしては初めて一緒に取り組みさせていただきました。実は私が「デザインシステムの構築をやりたい」と言いはじめたタイミングで、ちょうどゆめみさんが「デザインシステム構築・内製化サービス」をリリースされ、チームのメンバーが私にそのことを教えてくれたんです。
そして最終的にゆめみさんに決めた理由としては、デザインシステムを構築するまでのプロセスがきちんと提案資料にあり、「こうやって作っていくんだな」と具体的にイメージできたことが大きいです。
ゆめみのデザインシステム構築ステップ
入尾野様：デザインチームを立ち上げた時にまず着手したのが、デザインプロセスの言語化・可視化でした。そのなかで、最初にユーザーの課題や求めている価値をリサーチしてから、プロダクトの要件を決めていくというデザイン思考のプロセスを取り入れたんですね。
ゆめみさんから提案いただいたプロセスにも、「最初にヒアリングを実施する」としっかり明示されていて、プロセスの考え方が合致しているなと思いました。実際に取り組む時も、そこを徹底してやってくださいました。
竹田：ゆめみでは、人間中心設計というデザインプロセスの進め方を非常に大事にしています。デジタルプロダクトの開発であってもデザインシステムであっても、結局使うのは人です。このような考え方があったことで、開発プロセスにも共感いただけたのかなと思います。
ゼロからのデザインシステム構築。ユーザー層が幅広いゆえの課題も
――実際の構築は、2023年7月から着手されたとのこと。最初のステップであるユーザーヒアリングはどのように進めましたか？
入尾野様：最初の段階では、デザインシステムを実際に利用するアプリチームの開発メンバーや、パートナー企業のデザイナーさんにヒアリングをしていきました。
開発メンバーからは、「ライブラリとして使いやすいものが欲しい」「使いづらいものなら使いたくない」といった意見があったことが印象に残っています。「これは変なものを作っちゃいけないな」と思いましたね。
ジン様：私は2023年9月に入社したのですが、その頃はヒアリングも終わり、MVV（ミッション・ビジョン・バリュー）を具現化していくタイミングでした。
当時はさまざまな議論がありましたが、振り返ると、目線合わせをしていく過程で「ユーザー」という言葉が意味することも変わっていったと感じています。
入尾野様：当初は「デザインシステムを利用する人」をユーザーとして話をしていました。その後、議論をしていくなかで、デザインシステムを通して実際にサービスを利用する「エンドユーザー」像に、メンバー間でズレがあることに気が付いたんです。
ただ、チーム内で最も在籍が長い私でも、当時はまだJCBに入社して1年ほどだったので、正直エンドユーザーの解像度が低く、そこが苦労したポイントでした。
例えば1個のコンポーネントのサイズを決めるとしても、高齢世代がユーザーなのであれば、文字は大きめにした方が良いですよね。そのユーザー像がわかっていれば、皆さんはプロなので「このサイズ感にする」と答えがすぐ出せると思いますが、JCBはお客様の幅がとても広いんです。
ですので、「誰に向けてのサービスなのか」を定義することがとても難しくて。それでも、汎用的に作ってほしいと私は思っていたので、「汎用的に」というオーダーしか最初は出せず、ゆめみの皆さんもジンさんも苦労したんじゃないかなと思います。
――実際には、どのようにエンドユーザーの解像度を高めていったのですか？
ジン様：例えば、私が担当していたアプリケーションで定義されているエンドユーザー像を、ゆめみの皆さんにも共有しながらデザインシステム構築にも活かしていきました。
竹田：「一般的なデザインシステムとしてはこういうパーツが必要です」というベストプラクティスはありますが、そのなかにJBC様のエンドユーザーの視点を入れるためには、当時すでに他のプロダクトのデザインを担当していたジンさんの意見はとても重要でしたね。
チーム内の共通認識を作るため、「逆算方式」でゴールから作成
ーー他にも、進め方で工夫されたことはありましたか？
ジン様：あるべきデザインについてはたくさんの議論を重ねましたが、それぞれが正しいと思っているデザインも違いますし、そのなかで全員の接点となる何かが必要でした。
その解決のための具体的なHOWとして、「デザインガイドラインの策定」「サンプル画面の作成」「UIレビュー時のイメージコンポーネントの作成・共有」というの3つのプロセスを導入しました。
通常、デザインシステムでは、 すでにプロダクトがある状態からシステム化をしていきますが、私たちは本当にゼロベースで共通認識を持っていませんでした。
それなら一番「JCBらしい」何かしらの共通認識をアウトプットとしてまず作って語ろうということで、ビジュアルデザインやUIコンポーネントのサンプルを作成しました。ゼロから始めるからこそ、ビジュアルを通して共通認識を持てるようにしていったんです。
竹田：いわゆるデザインシステムのプロセスでは、ファウンデーションと呼ばれるカラーの組み合わせを決めて、 コンポーネントを作ってそのままリリースするか、画面に適用するという順番を採用することが多いです。
しかし、今回は一番最後の「適用する画面」の部分がゼロベースだったので、最後の過程にあるべきものをサンプルとして見立てて、カラーパレットの組み合わせなどを決めていくというプロセスを取っていきました。
大久保：1つのプロダクトだけに適用するデザインシステムではないからこそ、不確実要素が高いと思っています。未来のものを想像しながら作っていくというよりは、その時点で必要なものだけをまずは作っていきましたね。
――今回のデザインシステム構築には「Figma」を利用されていますが、その背景をお聞かせください。
入尾野様：もともとは別のデザインツールを使っていたのですが、ちょうど移行を検討しているタイミングでゆめみさんから提案を受けた形です。
ジン様：私はもともとFigmaを使っていたこともあり、入社前からFigmaを推奨していました。デザインシステムを構築するには、最適なツールだと思います。
竹田：Figmaをデザインシステムとして活用することの利点は、再利用性を意識したデザインが作りやすいこと、そしてエンジニアとの橋渡しがしやすいことですね。
今回はゆめみ側でFigmaの環境を用意させていただいたり、開発チーム向けの使い方の研修もご提供させていただきました。
デザインシステムが「半自動的に」成長し続ける仕組み化も
――本デザインシステムは2024年4月にリリースし、運用に入られましたが、実際のプロダクトに適用されてみていかがでしょうか。
関様：自分はある程度デザインシステムが出来上がった段階で入社したので、作っていただいたデザインシステムを、担当しているプロダクトに当てはめてみることがスタートでした。
案件は2つがあったのですが、そのうちの1つの要件が非常に複雑で、まさにデザインシステムをフルで活用して組み立てていくようなものだったんです。
そのなかで、最初にデザインシステムを作った時には想定していなかった使い方や、「こういうパーツも必要だったんだ」といった発見が出てきました。こうした課題を見つけるためにも、複雑なものを作ってみるのは良かったなと感じています。
そして、ゆめみさんに相談しながら改善を進めていくなかで「これはちゃんとコンポーネント化した方がいい」というものが他にも出てきましたね。
例えば、「ログイン」のように多くのサービスで使うものは、共有化していくことが望ましいです。一方で、あまりコンポーネント化しすぎてしまうとガチガチになって使いづらいので、自由度をある程度は担保できる設計にしておくことが大切だと思います。
大久保：最近では「これはコンポーネント化するべきかどうか」の判断を、スクラムのイベントに組み込むフローを構築しました。そうすることでデザインシステムが自動的にブラッシュアップされていって、成長し続ける仕組み化ができてきましたね。
入尾野様：これまでアプリチームでそれぞれ作っていたデザインがだんだん集約された上で、それらが半自動で成長していくような世界が理想だと思っていたのですが、ゆめみのお二人がそれを実現していってくれています。
現在は、デザインを作成する中で「これは汎用性がある」という判断になったらバックログ化して、デザインシステム側で取り組む、という流れができています。
実際に構築されたデザインシステムの一部
――ゆめみ側では、そういった仕組み化を最初から意識していましたか。
大久保：そうですね。ある程度デザインシステムの成果物としては形作られてきた一方で、今後JCB様でもデザイナーさんがどんどん増えていくなかで、チームの指針のような存在はあった方が良いなと思い、取り組んでいました。
入尾野様：ゆめみさんは「内製化支援サービス」という名前からもわかる通り、提案の時から「自分たちのノウハウは提供するけど、最終的には自立していってほしい」という空気があって。 それでいて、すごく寄り添ってくれるということを提案の時から感じていました。
実際にプロジェクトを進めていっても、心理的安全性が高く、何でも言い合える関係性でいられました。そしてやはり、最終的には自立して我々だけでできるようと支援してくれる姿勢があらゆるところで感じられて、そこが本当に良かったなと思います。
デザインシステムで、さまざまな自社コンテンツに「横串」を通す
――ちなみに、このデザインシステムには思いのこもったお名前があるとお聞きしています。
入尾野様：内部的にですが、このデザインシステムを「SHIMA（Standardize Human-centered Inclusive Main branch Accessible）」と読んでいます。
JCBは日本発、唯一の国際カードブランドなんです。それを表すという意味で、島国日本から「SHIMA」というのはなかなかいいよねと。加えて、SHIMAの各アルファベットを通して、デザインシステムの特徴を表せればと考えていました。
汎用的で標準的（Standardize）に使えるものにしたい、そして人間中心設計（Human-centered）としてのアクセシビリティ（Accessible）も大事にしたい、といった願いが込められています。
アクセシビリティについては、JCBのお客様の多様さも表していますね。さらには、JDEPに関わる全員でより良いものにしていき（Inclusive）、我々が展開しているさまざまなプロダクトの幹（Main branch）のような存在にしたい、という思いも入っています。
――今後、このデザインシステムについて取り組んでいかれたいことはありますか。
関様：半分、自分の思いも入ってしまっていますが、私は本当にJCBが好きで入社したんです。JCBはクレジットカードだけではなく、本当に良いコンテンツをたくさん持っているんですね。
ユーザーが日々の支払金額をチェックするためのサービスもあれば、旅行やポイント、キャンペーン等の情報を発信するサイトなどもあります。現状では、まだデザインシステムを使っているサービスはごく一部なので、より幅広く適用することで、横串を通していきたいと思ってます。
数あるコンテンツの基本となるパーツや挙動が統一されていれば、お客様に各サービスをよりシームレスに、快適にご利用いただけます。その一方では、そうするとどれも同じような画面になってしまいますので、個性や世界観は各プロダクトのデザインテイストが担う形です。
カード検討→入会→活用→退会のライフサイクルでも一貫した良い体験を提供したいですし、その上で、ご縁がなくJCBのサービスを退会してしまうようなお客様に対しても、「退会したけど使っててよかったな」と思われるような体験を作っていきたいです。
その実現のためには、Webだけではなくネイティブアプリなどにもデザインシステムの範囲を広げていければと思っています。
ーー皆さま、本日はありがとうございました。（了）
