MIXI プロダクトデザイン室 エクスペリエンスデザイングループのジウンです。
2018年にミクシィ（現MIXI）に入社し、主にUI/UXデザインを軸に活動しています。その中で、MIXIの複数のサービスで「デザインシステムの構築・運用」に携わってきました。
デザインシステムの必要性や構築手法は、今やさまざまな場面で語られており、実際に運用を担っている方も多いと思います。
今回は、MIXIの複数のサービスに横断的に携わりながら、デザインシステムの構築に携わってきた私なりの視点から、その重要性に気づいたきっかけや、今まで取り組んできたことをまとめてみたいと思います。
私がデザインシステム構築に本格的に取り組むようになったきっかけは、2018年頃から関わっていたFINDJOB!のリニューアルプロジェクトでした。
20年以上の歴史を持つサービスのフルリニューアルにあたり、トンマナの統一、情報設計の再構築、技術環境の見直しなど、多くの論点を解決する必要がありました。その難易度は高く、試行錯誤を重ねる期間が長く続きました。
そんな中で突破口となったのが、デザインシステムの考え方でした。
特に課題だったのが「実装とデザインの統一」、そして「拡張性のあるデザインと実装をどう作るか」ということでした。
当時は、デザインの決め方や実装の方法に統一したルールがなく、場面ごとに都度判断していたので、似たようなUIでも微妙に異なるものが作られてしまうことがよくありました。その結果、開発のたびに修正が発生し、負担が増えていく。「このままではリニューアル後の運用も大変になる」「ただ見た目を揃えるだけではなく、今後の機能追加や変更にも柔軟に対応できる仕組みを考える必要がある」と感じたのが、デザインシステムの導入を考え始めたきっかけでした。
そんなとき、同じチームのエンジニアが「Atomic Design」について共有してくれたことで、デザインシステムの考え方を知り、そこから少しずつ知見を広げていきました。ただ、当時はデザインシステムに関する情報もまだ少なく、私自身も十分な知識があったわけではなかったので、正解のない中で手探りで進めるしかない状況。そこで、チームと議論を重ねながら、まずはタイポグラフィやカラーの定義、アイコン、ボタンなどの基本的なコンポーネントの整理からスタートし、少しずつガイドラインを作っていきました。そうすることで、デザインの意図が正しく伝わるようになり、テスト環境での確認やリリースまでの作業も少しずつスムーズになっていきました。
開発のスピードが一気に上がったわけではないものの、コンポーネントを活用することで、デザインの反映や実装の負担が減り、作業効率が確実に向上していきました。細かい修正作業にかかる時間が減ったことで、より重要なデザインや機能改善に注力できるようになり、事業部にとっても大きな成果となりました。結果的に、新機能のリリースや改修がしやすくなり、事業全体のスピード向上にも貢献できたと感じています。
この経験を通じて、デザインシステムは単なる「統一のための仕組み」ではなく、拡張性のあるデザインと実装を支えるための基盤になるのだと実感しました。
サービスの終了という結果にはなりましたが、この取り組みで得た学びは、その後のデザイン業務にも確実に生かされています。試行錯誤を繰り返しながらも、確かな成果を出せたことは、今後のキャリアにも活きるはず。そして、デザインシステムを活用すれば、より良いサービスづくりが実現できるのではないかという可能性を強く意識するようになりました。
FINDJOB!のクローズ後は、デザイン本部に異動することになります。
横断組織として、MIXIが展開するさまざまなサービスに関われることに魅力を感じると同時に、デザインシステムを組織全体に広げていく必要性とも一致したからです。
当時、デザインシステムの必要性を感じつつも、導入に踏み切れていない部署も増えてきていました。
そこで、横断的にさまざまなサービスに携わりながら、状況に合わせてデザインシステム導入を支援していくことで、MIXIらしいサービス品質を各プロダクトに浸透させるとともに、デザイナーとエンジニアが密に連携し、より良いサービスを生み出せる環境を整えていきたいと考えました。
その後、複数のサービスに携わりながらUI/UXデザインを担当するとともに、各サービスやチームの状況に応じて、デザインシステムの設計・構築を進めていきました。
ここからは、デザイン本部に異動して最初に携わることになった『Fansta』で、実際に行ったことをまとめたいと思います。
Fanstaは、スポーツバーや飲食店を検索・予約できるサービスです。私がジョインしたのはリリースから約3年が経ったタイミングで、デザイナーチームは1〜2名ほどの少人数体制でした。
https://fansta.jp/
当時は、新機能の追加や改修を優先する中で、以下のような課題が浮かび上がっていました。
デザインの統一感が失われ、特に使用するカラーの管理がごちゃついていた
一貫したデザインを作りづらく、開発者もコードの管理に苦労していた
新しいコンポーネントを作るたび、「どの色を使うか」で時間を取られ、プロジェクト全体の効率が低下していた
そこで、デザインの一貫性を保ちつつ、開発の効率も上げるために、まずはカラーシステムの構築に取り組みました。これにより、デザインや開発プロセスの効率化を図り、チームが本当に解決すべきユーザー課題に集中できる環境を整えることができました。
カラーシステムの構築は、まず当時使われていたカラーをすべて洗い出し、整理することからスタートしました。
具体的には、アプリ版・Web版（PC・SP）のすべての画面を並べ、使用されている色を抽出。その後、利用頻度や用途ごとに分類を行いました。
カラーコードも書き出して可視化したところ、サービスがダークテーマであるため、グレー系の色が非常に多い状態でした。中には、肉眼では区別が難しいほど似た色 も含まれていました。
そこで、Fanstaで本当に必要な色を精査し、役割が重複している色を統合していきました。
次に、色を「どこで」「どんな目的で」使うのかを直感的に分かりやすくするため、セマンティックカラーの命名を行いました。
色の使用場所や目的がすぐにイメージできる名称にする
同じカラーコードでも、用途が異なれば別の色名として命名する
カラーパレットが定義できた段階で、FigmaのVariablesに色を登録し、デザイナー間で色の使い方を統一しました。これにより、色名を見るだけで使用場所が直感的に分かるようになりました。
また、開発メンバーと共有し、新しいカラーシステムを実装してもらうとともに、本番環境のデザインにも適用しました。
カラーシステムの構築により、デザインと開発の効率が徐々に向上しています。
デザイン面：使用する色を統一したことで視認性が向上し、操作性の改善につながっている
開発面：カラーシステムの導入により、色選びの手間が減り、メンテナンス性も向上した
現在は、既存機能の改善に加え、デザイン原則やコンポーネントの整備を進め、さらなる品質向上を目指しています。
また、詳細は公開できないのですが、他のサービスでもデザインシステムの構築に携わっています。
例えば、サービスのリニューアルにおいては、以下のような位置づけでデザインシステムの構築を推進していきました。
デザインシステムを導入することで、デザインや技術的な負債を解消し、開発速度の向上を図る
デザインシステムの見直しやアップデートを行い、サービス全体の一貫性を確保する
アプリ版とWeb版の両方に対応する統一されたデザインシステムを構築し、ユーザー体験の統一を実現する
デザインシステムの構築・管理手法を整理し、事業部内のデザイナーにも理解しやすい形で共有、スムーズな運用を促進する
各サービスの状況に応じた最適なデザインシステムのあり方を柔軟に提案しながら、よりスケールしやすい形での導入・運用を推進しています。
当初は、私が先陣を切り、デザインシステムが必要な場面でその構築や運用を一手に担っていました。しかし、上記のような様々なプロジェクトでデザインシステムを導入していく中で、その価値が認識され、他のプロジェクトにも自然と広がっていきました。
現在では、エクスペリエンスデザイングループ内でもデザインシステムの運用に携わるメンバーが増え、より組織的に推進できる体制が整いつつあります。
初期から意識していたのは、「自分がいなければデザインシステムの運用が回らない状態は健全ではない」ということです。本来は、誰か一人ではなく、サービスに携わる人たちが長期的に育て、活用し続けられる状態をつくることが理想です。
そこで、チーム内でのナレッジシェアや勉強会、育成にも力を入れてきました。MIXIを横断して様々な事業に携わるエクスペリエンスデザイングループだからこそ、お互いの知見を共有し、チームとして提供できる武器を増やしていきたいと思っています。
また、デザインシステム運用を推進した実績が増えたことで、MIXI社内でもデザインシステム導入に関する相談や、プロジェクトが増えてきています。
今後も、サービスやチームの状況に応じた最適なアプローチを提案し、デザインシステム運用にとどまらず、デザインを通じてサービスの成長を推進していけるように取り組んでいきます。
さまざまなプロジェクトに携わる中で、デザインシステムのつくり方に正解はないと感じています。サービスやチームの状況によって、その必要性や要件、適した手法は変わっていきます。
また、デザインシステムを整備するよりも、素早く機能改善を進めたり、新機能のプロトタイピングや検証に時間を割いた方が良い場面も当然あります。
それでも、デザインに携わる一人ひとりが「なぜこのデザインであるべきなのか」を自分の言葉で語れる状態であることは、どんな環境でも変わらず大切だと考えています。
今回はデザインシステムをテーマにまとめましたが、「デザインシステムがこうなっているから...」と、意図を持たずに手を動かすだけでは、本来の目的を見失ってしまいます。
今後も、正解がないからこそ、常に意図を持ってデザインを推進できる人・チームであり続けたいと思います。