Cookpad Design Magazine

186

本

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

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

#クックパッド

事業会社の新卒デザイナーが5タイプの現場で価値を発揮するためにしたこと

クックパッド Product Design Leadのよーた（@yotaszk）です。レシピサービス「クックパッド」のユーザー体験に責任を持ち、今年からチームをリードしていましたが、11月30日付でクックパッド株式会社を退職します。このnoteでは、2022年4月に新卒入社、インターンを含めると約3年間で実践した「事業会社の新卒デザイナーが5タイプの現場で価値発揮するための超具体的なコツ」を実例を交えながら紹介します。今日からぜひ真似してみてください！はじめに

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

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

プロダクトに生成AI技術をどう取り込むか？ーAlexa Cookpadを例に

こんにちは、デザイナーの橋本 (@hashcc) です。 4ヶ月ほど前にAmazon Alexa版クックパッドアプリ向けにGPT-3を使ってAIレシピ要約機能を実験的に導入していました。今回はこの機能の構想からリリースまでのプロセスを書いてみようかと思います。作る前にざっくり作り方がわかる機能を作ったAmazon Alexa版クックパッドアプリは、音声やタッチで料理をガイドするアプリです。レシピ検索や作り方画面を音声やタッチで操作できるので、「濡れた手でスマホを触りたく

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

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

60人以上のインタビューから価値と体験を具現化するためにデザイナーが行ったこと

クックパッドデザイナーのよーた（@yotaszk）です。このnoteでは、3ヶ月間で60人以上のユーザーさんにインタビューにご協力いただきながら「クックパッド」アプリトップのリニューアルを含んだ大施策の具現化のためにやっていた、Figma活用術を紹介します！事例：クックパッドアプリの新しいアプリトップとテーマ体験新しいアプリトップとテーマは、ユーザーさんが料理の趣味嗜好ごとにレシピをまとめられる仕組みで、検索だけでは出会いにくいレシピとの「偶然の出会い」を作ります（

サービスの周年記念!ユーザーへありがとうを伝えるロゴメイキング-クックパッド25th-

先日、クックパッドはサービス25周年を迎えました🎉社内には、「25歳！同い年だ〜🎂」という社員もいて、時間の重みを感じます。私 @azusanpomeは今回、コミュニケーションデザイナーとして、25周年を記念するロゴデザインの制作を担当しました。この記事では、日々のサービスの体験を損ねず、伝えたい特別なメッセージを伝えるには？と取り組んだ制作過程についてご紹介しようと思います。 💭 やりたいことは様々。伝えたいことは何だろう？はじめに声をかけてくださったのは広報のメンバ

チームのデザイナー間の連携を強化するためにやっていること

私は生鮮食品ECの「クックパッドマート」というサービスでプロダクトデザイナーをしています。現在クックパッドマートには私を含め4名のプロダクトデザイナーがいて、協力しながらアプリのデザイン制作をしています。複数のメンバーが並行してのデザイン制作は、品質の担保と分担を円滑に進めるためにデザインルールを整えることが必要になってくると思います。私たちは月に1度「Application cleanup day」という会を設けています。この会は2021年から開催をしていて、日々の

Figmaでここまで！？ゼロからはじめるUIアニメーションデザイン

クックパッドデザイナーのよーた（@yotaszk）です。突然ですが、あなたは「Figma」にどんなイメージをもっていますか？ UIデザインツール？、プロトタイプングツール？・・・もしそのイメージだけに留まっているなら、めっちゃ勿体無い。めっちゃ勿体無いです（本当に勿体無いので2回）。もちろん基本的な機能は、UIデザインやプロトタイピングです。ただし、Figma Communityのプラグインを活用することで、3Dデザイン・アニメーションなど、ハイクオリティなデザインを

クックパッドとの思い出をビジュアル化。抽象から考え、具体で検証する、コミュニケーションデザイン。

食べたり作るたびに、笑ったり、あの日のことを思い出す料理、みなさんはありますか？先日、そんなあの日の料理と、クックパッドをご利用いただく中でのエピソードを募集した「クックパッドあの日のごはんエピソードコンテスト」の受賞作品が発表されました。クックパッドのコミュニケーションデザイナーとして働く、私🍟（＠azusanpome)が今回この施策を担当しました。企画を具体化する段階から主体となって取り組み、具体的にどのように考え、動いていったのか、もっとこうすればうまくいった

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

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

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

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

コミュニケーションデザイナーは具体的に何をやっているのか？

こんにちは、クックパッドデザイン推進部のいちはら@ichinii3です。先日「コミュニケーションデザイナーって最近よく聞くけど、具体的に何しているのかわからない。」という声を頂きました。確かに。分かりにくいし、どう説明して良いか迷ったので、これを機にクックパッドで行われているコミュニケーションデザインの具体例に挙げて（ボツになった事例も紹介します）記事にまとめたいと思います。コミュニケーションデザイナーについて知りたい方の参考になれば嬉しいです！そもそもコミュ

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

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

すべての家に、料理が楽しみになるキッチンを。「たのしいキッチン」のデザインについて

こんにちは、クックパッドのデザイナーのgoto（@__chhi）です👋 私たちたのしいキッチン事業部は2019年にスタートしたクックパッドの新規事業部です。プロダクトの仮説検証を進めていく中で、この度キッチンを購入しリフォームができるサービス「たのしいキッチン」を開始することになりました。このnoteでは、たのしいキッチンのミッションと、今回リリースしたサービスのデザインについてお話します。 🏠 なぜキッチンリフォームなのか？キッチンも料理の体験をつくる要素クック