クックパッドのデザイン品質を支える Apron Design System の構築

こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。
デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。

大規模サービスにおけるデザインガイドラインの世代交代

クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。
Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。

CSS Framework の Sara

モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開発が行われていましたが、デザイントレンドの変化や開発者の入れ替わりなどによって Sara を追従したデザインが合わなくなり、少しずつ Web とモバイルアプリでデザインの乖離が進んでいきました。

2018年に、今のデザイントレンドを踏襲したクックパッドの関連プロダクトを包括するデザインシステム Citrus が生まれます。Citrus は色やフォントなどのデザイントークンを全体的に刷新したものになっていて、これに合わせて Sara のアップデートも試みましたが、10年近く Sara が利用されているフロントエンドでは他のスタイルとの密に結合していたり上書きされていたりと簡単に Sara のデザインをアップデートすることができない状況でした。

モバイルアプリからデザインを再整理する

Sara から離れてモバイルアプリの開発が進んでいきますが、iOS, Android ともに明確なデザインのルールが存在しないためページのレイアウトや色の使い方などは施策ごとのデザイナーに依存している状態です。デザイナー同士でレビューしあうことでクックパッドらしいデザインを揃えていましたが、人力でカバーするのは限界があります。

デザインの指針がないと意図もなく他のページのデザインを参考にしたり、使いたいコンポーネントが見当たらなかったりと開発効率もデザイン品質も低くなります。結果として、ユーザーに価値を届ける速度も品質も落ちてしまうことは大きな問題です。

この問題を解決すべく、プラットフォーム横断でUIデザインの指針となるデザインガイドラインの整備に着手しました。
Web は Sara との共存など検討事項が多いため、まずは iOS, Android それぞれでデザインの指針となるデザインガイドラインの整備を行います。
デザイン戦略部のいちはら(@i_chi_)が主導となって現場のデザイナーと協力し、色やフォントサイズといったデザイントークン、ボタンなどのUIコンポーネントを収集し、そこからアプリ全体で適用するデザインのルールを iOS と Android それぞれ整理しました。
これらの作業はデザイナーがいつでも閲覧・修正できるよう Figma にまとめています。

Android のデザインの把握と整理(Figma)

プラットフォームをまたいだデザインガイドライン Apron の誕生 

iOS, Android それぞれのデザインガイドラインが整備されてきたら、つぎは共通化できる要素をモバイルアプリというくくりでガイドラインにまとめていきます。そしてこのタイミングで Web とのデザインの乖離問題を解消すべく、Web もこのモバイルアプリのデザインガイドラインを参照して開発を進める決断をしました。Sara の課題は残るものの、少しずつ Sara を参照している CSS を剥がして新しいデザインガイドラインに寄せていく予定です。

こうして、iOS, Android, Web それぞれプラットフォームのデザインのルールがまとまったデザインガイドラインが Apron が誕生しました。名前には料理をするときにエプロンを身につけるように、開発者がエプロン(ガイドライン)を身に着けてデザインをしよう！という気持ちが込められています。

また、このタイミングでガイドラインを開発者が参照しやすいよう Figma から社内用の Web ページへと移行しました。

クックパッドのデザインガイドライン Apron 

Apron の社内展開とその副次効果

Apron は主にアプリケーションの開発者向けのデザインガイドラインとして社内リリースしましたが、運用し始めてから多くの要望を受けて改善が続いています。今では UI 以外にもグラフィックのニュアンスや写真の表現方法など、開発者のみにとどまらずコンテンツを作り出す社員に向けたドキュメントも充実してきました。

Apron に掲載の全体のトンマナや写真にまつわるルール

また、前述の通り Web は Sara から Apron へとシフトする方向で進んでいます。Apron を社内公開したことにより、エンジニアが自発的に Sara ではなく Apron を参考にして開発するようになりました。
今はスマートフォン端末で見た Web のレシピページのみ Apron が適用されていますが、デスクトップも含めた Web 全体での Apron の適用を予定しています。

Apron をベースにエンジニアからのデザイン変更の提案

Apron をガイドラインからシステムへ拡張する

Apron デザインガイドラインによって、プラットフォーム全体で今のクックパッドらしいデザインをつくる環境ができつつあります。
しかし、デザインガイドラインはあくまでドキュメントなので、デザイナー・エンジニアが一つずつ確認しながら開発するのは時間も工数もかかるのが現状です。開発者が Apron を実現する実装の手間を減らすことができれば、ユーザーへ価値を届ける時間を更に短縮することができます。ここまで進むと Apron はいわゆるデザインシステムとして機能します。

この課題に取り組むべく、 Apron のデザイントークンやUIコンポーネントなどを実装で簡単に呼び出すことができるライブラリの開発を着手しました。
iOS, Android, Web の中でもユーザー数も多く フロントエンド環境を刷新した Next.js が開発から適用まで素早く行えると判断し、まずは React の UI コンポーネントライブラリを提供しています。

apron-react のボタンのドキュメントページ

デザインライブラリの提供だけでなく使い方に関するドキュメントページを用意し、Apron のデザインを実現するためのコードとサンプルをまとめることで開発者は細かいデザインを意識せずに実装することができています。

将来的には React のみならずモバイルアプリや Sara に代替する CSS のライブラリも含め、 Apron がデザインシステムとして全プラットフォームに簡単に適用できる仕組みを計画中です。ただやりたいことの5%もできていないのが現状なので、もっとスピードを上げてユーザーに多くの価値を届けられる環境づくりを目指していきます。

おわりに

レシピサービス「クックパッド」のデザインシステム Apron の構築についてついて書きました。Apron が開発者の武器となって開発効率を高め、ユーザーと向き合える時間が1秒でも増えるよう、今後も基盤の整備を整えていきます。

Apron は現在社内向けに公開していますが、Citrus に変わって近いうちに Figma Community などに公開予定です。

Apron | Figma Community

クックパッドのデザイン基盤はまだまだ始まったばかりで、実現したいことがたくさんあります。こういった基盤の整備に興味を持っている方や、Apron を使ってサービスを作りたいという方はぜひ気軽にご連絡ください！Twitter の DM でもウェルカムです。

ではでは👋