こんにちは。GMOペパボ EC事業部でプロダクトデザイン領域を担当している小山田と岸野です。
GMOペパボでは、各サービスが個別に考えている原則・ガイドライン・アセットなど、重複しているものをすべてのサービスでも使えるよう一般化して取りまとめた「共通基盤デザインシステム『Inhouse』」を開発しています。カラーミーショップも、その「Inhouse」を基盤とし、ブランド固有の要素を取り入れた独自のデザインシステム「Flippers」を構築しました。
この記事では、これらのデザインシステムの開発背景や運用体制、課題解決に向けた取り組みを詳しく紹介します。
GMOペパボのデザインシステムについて
GMOペパボは、「人類のアウトプットを増やす」というミッションのもと、ホスティング事業やEC関連事業など複数のサービスを提供しています。多様なサービスによりあらゆるインターネット上でのアウトプット活動を支援する一方、サービス間で統一したデザインの実装が難しいという課題も抱えていました。
そこでGMOペパボでは、すべてのサービスで共通して利用できるよう、デザインの原則やガイドライン、カラーパレットやコンポーネントライブラリなどを一般化した共通基盤デザインシステム「Inhouse」を開発しました。「Inhouse」は、それぞれのブランドでデザインの品質を保ちながらも、各ブランドの独自性を維持するための仕組みを備えています。
カラーミーショップのデザインシステム「Flippers」の定義と実装
カラーミーショップでは、この「Inhouse」のデザインシステムをベースに、カラーミーショップ専用のデザイン要素やブランドらしさを反映した独自のデザインシステム「Flippers」を構築しています。「Flippers」では、「Inhouse」にある「Flavor」という仕組みを活用し、ブランド固有の要素を取り込んでいます。
「Flavor」とは、各ブランドが独自のビジュアルやトーンを維持するための「Inhouse」の仕組みで、デザイントークンをブランドごとに書き換えられる仕組みの提供を行っています。これを利用することにより、異なるサービス間で安定したユーザー体験を提供しつつ、個別の調整やカスタマイズが可能になり、それぞれのブランドらしさを維持することができます。
カラーミーショップでは2023年から、管理画面のデザインリニューアルを進めています。その際に課題だったのが、これまでの管理画面ではコンポーネントの管理やルールが明確でなく、デザインの判断が属人的になっていることでした。
そんな課題を解決するべく「Flippers」を導入したのですが、これによりカラーミーショップ全体で一貫したデザインシステムが適用されました。それだけでなくデザインを統一することで一定の品質を担保し、業務効率の向上を図ることも可能となりました。
「Flippers」では現在、コンポーネント、デザイントークン、ガイドラインの整備を行っています。将来的には、カラーミーショップ内のすべてのプロジェクトで「Flippers」が参照できるよう開発を進めていく予定です。
「Flippers」の開発体制
「Flippers」は、デザイナーとエンジニアが職種にとらわれず、協働しながら開発を進めているプロジェクトです。デザイナーはコンポーネント設計やガイドライン作成だけでなく、コーディングにも積極的に関わり、エンジニアと協力して実装を進めています。同様に、エンジニアも技術的な整備やnpmパッケージの提供にくわえ、コンポーネントのデザイン面での検討や改善にも積極的に参加しています。この協力体制により、「Flippers」のスムーズな開発が維持されています。
また、デザイナーとエンジニアが定期的に行っているディスカッションではプロダクトの課題を共有したり、解決策をともに検討する場を設けたりしています。これにより、デザインと技術の質の両立を図っています。
