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

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

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

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

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

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

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

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

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