コンポーネント化の基準も明文化 「一定の自由度が担保できる設計を」
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のさまざまなサービスやソリューションに染み出していくのだろう。ゆめみから得た知見をもとに、どのようなデザインが展開されていくのか注目していきたい。
JCBが活用したサービスの詳細をチェック
JCBが活用したゆめみの「デザインシステム構築・内製化サービス」では、最適なデザインシステムの構築をサポートします。特徴や流れなどの詳細はサービスサイトをご覧ください。
