Cookpad Design Magazine

186

本

毎日の料理を楽しみにするために、クックパッドで取り組んでいるデザイン事例をお届けしていきます

運営しているクリエイター

#デザインシステム

Webアクセスの93%にデザインシステムを届けた実践方法

デザイン推進部の村山です。今回はレシピサービスのデザインシステムである「Apron」を用いたデザインリニューアルの取り組みについて紹介したいと思います。 PCデザインリニューアルプロジェクト「Taranome」デザイン推進部では2021年末から2022年3月までTaranomeというPCのデザインリニューアルプロジェクトを行っていました。長く手の入っていなかったPCWebの主要ページであるTOP、レシピ詳細、検索結果、レシピの投稿/編集画面をApronベースのデザインに変更

デザインシステムでアニメーションを気軽に導入！

こんにちは、kenjowです。クックパッドのデザイン推進部デザイン基盤グループという、デザインシステムの管理運用などを行っている組織でデザイナーをしています。さて、今年3月にクックパッドのアプリ内で表示されるloadingアニメーションのデザインをリニューアルしました！このようにレシピ検索中などの画面表示時に表示されます。また、以下3種類のアニメーションがランダムで表示されるようになっています。今回はこのloadingアニメーションのリニューアルがどのような取り

デザインシステムを使ってプロダクトのデザイン負債を解消するその2

クックパッドでUXエンジニアをしている村山です。今回は2022年11月25日に行われた「Cookpad TechConf 2022」で発表した「デザインシステムを使ってプロダクトのデザイン負債を解消する」の内容を紹介します。前の記事では、デザイン負債のお話と、デザインシステムの紹介をしました。この記事では、デザインシステムのシステム化と、プロダクトへ適用した結果について紹介をします。内容の説明Apronをみんなで使うための以下のようなシステムについてご紹介します

デザインシステムを使ってプロダクトのデザイン負債を解消するその1

クックパッドでデザイナーをしているkenjowです。今回は2022年11月25日に行われた「Cookpad TechConf 2022」で発表した「デザインシステムを使ってプロダクトのデザイン負債を解消する」の内容を紹介します。 PART1のこの記事では、デザイン負債のお話と、デザインシステムの紹介をします。また、PART2の記事では、デザインシステムのシステム化と、プロダクトへ適用した結果について紹介をしますので、合わせてご覧いただけると嬉しいです。内容の説明

デザインシステムの運用と活用

クックパッドの開発に携わっているデザイナーの茅島です。今回はレシピサービスに関わるプロダクトデザイナーとして、実際にどうデザインシステムを運用, 活用しているのか紹介します。いつからあるかクックパッドには2013年からデザインシステムがあります。最初はOSごとの実装にフォーカスされているデザインシステムでしたが、適宜更新され続けていて、最近ではサービスや用途に合わせて分けています。どんな内容かレシピサービスのデザインシステム apron は内容の一部を2020年から

プロダクトのデザイン負債と対峙する君へ〜3. エンジニアリング編〜

最近は週休5日のフリーランスとして、知り合いベースで、プロダクト立ち上げのお手伝いや顧問的なお仕事をしつつ、趣味仕事としてクラフトビネガードリンクを作ったり、家にサウナを作ったり、Web3プロジェクトに関わったりしています。その中の一つとして、古巣クックパッドの「クックパッドPC版デザイン改修プロジェクト」にデザインエンジニアとして参加しました。 PC版が大規模に改修されるのは実に7年ぶり。それ相応にデザイン負債も溜まっており、その返却が主題となるプロジェクトです。

プロダクトのデザイン負債と対峙する君へ〜2.デザイン編〜

デザインシステムはデザイン負債解消に役立つ！というエピソードをお伝えします。今回、クックパッド・デザイン推進部での活動事例をもとに「デザイン負債」について全3部作にまとめています。第1弾はマネジメント、第2弾はデザイン、第3弾はエンジニアリングの観点からで、この記事はいちはら(@ichinii3)によるデザイン編です。 -------- デザイナーにとってのデザイン負債とは？まず、デザイナーにとってのデザイン負債とは何なのか？について考えてみます。 1,だんだんルール

プロダクトのデザイン負債と対峙する君へ〜1.マネジメント編〜

デザイン負債を適切に解消することは、組織の俊敏性とプロダクトの品質を高めることにつながるよ！というエピソードです。いつかあなたが悩める日が来たとき、思い出していただければ嬉しく思います。今回はクックパッド・デザイン推進部での活動事例をもとに「デザイン負債」について向き合ってみたいと思います。全3部作のnoteで、第1弾はマネジメント、第2弾はデザイン、第3弾はエンジニアリングの観点からお届けします。この記事は倉光 @transitkix によるマネジメント編です。デザ

デザインシステムは、作ってからが本番。

デザインシステムってどうやって作るの？運用どうするの？について考える。こんにちは、クックパッドデザイン推進部部長のいちはらです。クックパッドのレシピサービスにはapronというデザインシステムがあります。それが、この度Figma Communityに公開しました👏 ほんの一部ですが公開しましたので、このデザインシステムを作って得た気づきや、その後のことを一問一答形式で書いていこうと思います。この記事が、ガイドラインやデザインシステムについてお悩みの方の参考になればい

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

こんにちは、クックパッド株式会社デザイン戦略部のふじけん(@kenshir0f)です。デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生ま