色や文字、余白、角丸、影、アニメーションといったデザインの基本要素を、デザイントークンとして定義しました。カラーは「Mint60」「Sun60」のような色相と明度によるパレットの上に、「Background」「Text」「Interactive」「Impression」など役割ごとのトークンを重ねる二層構造にしています。テキストやボーダーは不透明度でHigh・Mid・Lowの三段階を表し、どの背景に乗せても読みやすさを保てるようにしました。キャラクターの感情を表す「Feeling」や、画面ごとにばらつきやすいアニメーションもトークン化し、色だけでなく動きにも一貫性を持たせています。トークンはStyle Dictionaryで各プラットフォーム向けに変換して配布し、デザインと実装で同じ値を参照できるようにしました。

Figmaのライブラリは、デザイントークン、アプリのUIを組み立てる「App Components」、キャンペーンや告知に使う「Communication Components」の3つに分けて構成しました。コンポーネントは1つずつファイルを分けた疎な作りにしています。変更の影響範囲を小さく保てるため、コンポーネントごとに安心して更新・公開でき、バージョンの追跡もしやすくなりました。また、各ファイルにはコンポーネント本体だけでなく、用途やVariant、使い分けのルールといったガイドラインも一緒に置いています。デザイナーもエンジニアも、使いたいコンポーネントを開けば必要な情報にたどり着けるため、仕様を探したり確認したりする手間を減らせています。

デザインシステムは、作って終わりではなく使われ続けることで育ちます。そこで、デザイナーとアプリエンジニアが隔週で集まり、プロジェクトを進める中で出たデザインシステムの課題について自由に意見を出し合う「アプリデザイン会」を主宰しました。コンポーネントの追加や変更をこの場で議論し、デザインと実装の認識を揃えながらサービス全体の一貫性を保っています。

アプリで育てたデザインシステムを、Webにも広げました。デザイントークンをパッケージ（b43-design-token）として配布し、Web向けのコンポーネントライブラリ（b43-web-components）を整備しています。これにより、コーポレートサイトやキャンペーンページ、アプリ内のWebView画面でも、アプリと同じ見た目と振る舞いを少ない手間で実現できるようになりました。

整備してきたデザインシステムは、生成AIを使ったプロトタイピングでも土台になっています。トークンとコンポーネントに意味のある名前と使い方が定義されているため、AIにもワンバンクらしいUIを組み立ててもらいやすくなりました。「考えなくていいことを考えなくてすむ」というデザインシステムの価値は、AIの登場でさらに大きくなっていると感じています。