クックパッドの開発に携わっているデザイナーの茅島です。
今回はレシピサービスに関わるプロダクトデザイナーとして、実際にどうデザインシステムを運用, 活用しているのか紹介します。

いつからあるか

クックパッドには2013年からデザインシステムがあります。最初はOSごとの実装にフォーカスされているデザインシステムでしたが、適宜更新され続けていて、最近ではサービスや用途に合わせて分けています。

どんな内容か

レシピサービスのデザインシステム apron は内容の一部を2020年からFigma Communityに公開しています。気になる方は是非一度見てみてください。

実際には公開している内容がより詳細に書かれていて、iOSやAndroidのコンポーネントなども表記されています。
また、デザインシステムは職種に限らず誰でも簡単に参照できる状態になっていないと意味がないので、Figma Fileだけではなくサイトとして閲覧可能な状態になっていて、デザイナーに限らず誰でもアクセスしやすい状態になっています。

どこまで守るのか

レシピサービスでUIに関わる部分は基本的にapronを守るようにしています。ただ、バナーやLPなどは表現の幅を狭めてしまうので、その限りではありません。

また、新規の機能などはapronを遵守しすぎるとスピードが落ちてしまったり、施策の本質からずれてしまう可能性があるので参考にはしますが、必ず守らなければいけないという決まりにはなっていません。

新たに作ったUIでも多用することになれば、調整してコンポーネントに追加すれば良い精神で開発を進めています。

プロダクトでどう活用してるか

実際にデザイナーとして作業しているときは、Figmaに用意しているコンポーネント集のライブラリをアセットから読み込んで利用しています。

ライブラリにはカラーやテキストスタイル、UIコンポーネントが用意されていて、デザインする際には用意してあるものから選択してデザインを作っていきます。

どうやって更新し続けてるか

クックパッドデザイン推進部がapronの運営を担当していて、更新をする際にはSlackの #apron で相談したり、Githubでissueを立てて改善や追加の提案を行なっています。
自分も実際にapronを利用している中で気になったことや、追加したいことがあればissueを立てたり、推進部の誰かに相談したりしています。

Figmaのコンポーネントは、Figmaがアップデートしていく中で、新しいAutoLayoutが使えるようになったり、Variantsが使えるようになるなど、より効率的な手法が生まれれば、その都度プロダクトのメンバーや推進部の方がのコンポーネントの調整をしています。

サービスごとで同じデザインシステムを使っているか

クックパッドには9つのサービスがありますが、全てのサービスが先ほどから説明しているapronを利用しているわけではありません。apronはあくまでレシピサービスに関わるデザインシステムであり、他のサービスは他のデザインシステムを用意している場合があります。

サービスごとにレシピサービスとは違った体験を提供しているので、それぞれに最適なデザインシステムを用意する必要があり、1つにまとめる必要はないと考えています。

実際にKomercoのデザインルールを作った話はこちらで紹介されています。

最後に

他にクックパッドのデザインシステムについて紹介している記事があるので、気になった方は是非読んでみてください！

また、クックパッドでは、プロダクトデザイナー／コミュニケーションデザイナーを募集しています。

興味のある方、ぜひお話しましょう！