ショップカウンターのデザインシステム「MAX」の改善とその学び

※この記事は「COUNTERWORKS Advent Calendar」の18日目の記事です。

株式会社カウンターワークスでデザイナーをしている小野（@7_Petro）です。ショップカウンターおよびショップカウンター エンタープライズで使用しているデザインシステムを改善し、運用を始めてから約1年ほど経過しました。今回は、その過程で得られた知見や気づきをシェアしたいと思います。

デザインシステム「MAX」

非公開ですが、コンポーネントはサイト上にまとめて管理しています。
「マックス！」という気持ちが名に表れています。

ヘッドレスUIコンポーネントへの移行

従来のデザインシステムでは、ライブラリをインポートする形で運用していました。しかし、以下のような課題がありました。

• 独自実装のためアクセシビリティの細かい対応が困難
• Reactのバージョンアップ対応の煩雑さ
• コンポーネントの修正時にリリース作業が必要

こうした事情があり、RadixUIとTailwindを組み合わせたヘッドレスUIコンポーネントでの運用に移行しました。RadixUIはコンポーネントの振る舞いのみを提供し、スタイルについてはTailwindを使用して独自にカスタマイズできる柔軟な形となっています。

UIコンポーネントの改善

Buttonコンポーネントの刷新

従来あった青色（Secondary）のボタンは、オレンジ色のボタン（Primary）との使い分けが曖昧だったため廃止し、メインカラーであるオレンジに対する補完的な要素として、無彩色の黒色ボタンを新設しました。

また、新たにBasicボタンを追加しました。これは直接的なコンバージョンには関係しないものの、管理画面で頻繁に必要となる基本的なアクションのために設計されました。編集、削除、コピーなどのボタンに使われています。

新規コンポーネントの追加

ON/OFF切り替え用のSwitch、ホバー時の説明表示用のTooltipなど、新しいコンポーネントも追加しました。
こうした若干動きを必要とする系のコンポーネントは、独自に作成するか別のライブラリに依存する必要がありましたが、RadixUIにより、統一された形で簡単に実装できるようになりました。これにより、UIの選択肢が大幅に増え、デザイナーとしては嬉しい限りです。

見えてきた成果と学び

操作アクションのメリハリ向上

Buttonに使われる色を抑えた結果、よりPrimaryボタンが目立つようになりました。
主張が強めなボタンで画面がごちゃつくことなく、ユーザーが次何をすればいいのかがわかりやすくなりました。
一方Secondaryボタンを黒色にしたことで、ボタンとしての視認性がやや低下している点が課題として挙げられました。ただし、これはボタン自体の問題というよりも、周囲のUI要素との関係性や情報の整理方法に原因があると考えています。今後は、ボタン周辺の環境整理も含めた改善を検討していきたいと考えています。

一気に移行ではなく、徐々に移行

既存のデザインシステムからの完全な移行には相当なリソースが必要となります。開発を止めるわけにはいかないので、以下の方針で移行を進めていました。

• 新規画面開発時に新しいコンポーネントを使用
• 既存画面は改修のタイミングに合わせて段階的に移行

こうした方針により、開発の継続性を保ちながら、スムーズな移行を実現できたと思います。

デザイナー↔︎FE間のやりとりがグッと楽に

RadixUIの採用により、デザイナーとフロントエンドエンジニア間のコミュニケーションが円滑になりました。「RadixUIのこのコンポーネントが使えそう」「見た目はこう調整しよう」といった具体的な会話ができるようになり、コミュニケーション含め、実装の効率が向上しています。

デザインシステムの浸透は日々に

新しいデザインシステムの導入初期には、エンジニアが旧コンポーネントを使用してしまうケースがありました。説明会を開くのも大事ですが、日々のUI実装の説明時に「これはMAXのコンポーネントを使ってください」といったコミュニケーションを行うことがやはり重要であるように思います。

まとめ

デザインシステムはデザイナーだけのものではないし、エンジニアだけのものでもないなと今回感じました。デザイナーとエンジニアがお互い越境して、ユーザーに価値を与えるための土壌作りをしていくのが肝要ですね。

We are Hiring!

株式会社カウンターワークスでは、共に運用しやすいアプリケーション作りを考えながら事業を前進させるメンバーを募集しています！
興味のある方はぜひ以下のリンクからご応募ください！