クックパッド開発者ブログスマートフォン用の表示で見るクックパッド開発者ブログ2016-06-27より良いデザインにするために大切にしたいと思っていることDesignこんにちは。デザイナーの遠藤です。私は今クックパッドiOS/Androidアプリのデザインを担当しています。みなさんは、既存の機能を別のプラットフォームに追加する際に、あまり考えずにそのまま追加してしまい、後で後悔したことはないでしょうか?今回は、web版にある機能「料理の基本」をクックパッドアプリへ追加した時のことを交えて、より良いデザインにするために大切にしたいと思っていることをご紹介します。料理の基本についてレシピをみて料理を作っている際に、「あれ、半月切りって何だっけ?」「水にさらすってどれだけやればいいんだろう」のような、基本的なことさえわからず手が止まってしまったことはありませんか?クックパッドでは、そんな方のために料理の基本を提供しています。今回私は、この機能をiOS/Androidアプリのレシピページに追加する際、デザインを担当しました。この機能の使い方は、レシピ中の手順欄にある言葉から利用できます。スマートフォンwebの場合、レシピ中にところどころ薄く下線が引いてあります。その下線の部分をクリックすると、詳しく内容が見れるようになっています。(↓下記の例では、下線「みじん切り」をクリックした場合)デザイン検討のプロセス上記のスマートフォンwebの機能をアプリに追加する際に、下記のようにデザインを検討しました。(1)現状把握(ユーザーのシーンを理解、今まで出来ていないことの洗い出し)PCやスマートフォンweb版では、料理の基本のキーワードをタップした際、レシピページから料理の基本ページへ遷移します。ユーザーは料理中にレシピを見ていることが多いため、料理中に画面の行き来が発生することで、本来の目的から少し脱線し料理の進行を妨げてしまっているのではないか、ということを課題にしていました。それを踏まえて、アプリではなるべく本来の目的の「料理をする」ということを妨げずに、知りたい情報を簡単に知れることを重視することになりました。(2)そのシーンでは、「ユーザーはどんな情報が必要で、何をしたいのか?」アイデアを考える料理中にわからない言葉に直面して困ってしまったというシーンでは、どういった情報が必要で、何ができると嬉しいのか?というアイデアを出しました。以下は、そのアイデアの一部です。3Dtouchの機能を使えばすぐに内容が知れて嬉しいのではないか?画面遷移して見に行くのは料理を妨げることにならないか?「料理の基本」を全文見せる必要はないのでは?こういったアイデアをプロジェクトの担当者同士で意見し合い、ブラッシュアップしていきます。アイデアだけでは実際に操作感がわからないため、すぐにUIを具体化していきます。(3)(3)アイデアをプロトタイプしてデザインの方向性を決めるアイデアが浮かんだ段階で、どんどんプロトタイプを作っていきます。今回iOSとAndroid両方での実装が必要だったため、両方でどういったデザインが必要かも都度検討していきます。以下、プロトタイプの一例です。プロトタイプを作っていくとたくさんの気づきがあり、方針がとても固めやすいです。上記の一番左のプロトタイプでは、モーダルを表示している時に背景を暗くしてモーダルを目立たせていましたが、「暗くすると、本来の料理をすることを妨げることになるのでは?」という意見のもと、背景を暗くするのをやめました。(4)デザインが決定したら、周りのデザイナーやエンジニアにレビューしてもらうプロトタイプである程度方針を固めたら、次に細部のデザインをつめ、決定したら周りのデザイナーやエンジニアに触ってもらいレビューをもらいます。他の機能の挙動との齟齬がないか情報が適切か、見せ方が適切か実装が現実的にできるものかどうかの観点でアドバイスをもらいます。決定したデザインプロトタイプ作成を重ね、周りの人にレビューしてもらった結果、このようになりました。Androidリリース後の評判はどうか?リリース後、一部のブログなどで「嬉しいアップデートだった」というご意見をいただいているのを発見し、とても嬉しく感じています。いえ、まだまだ課題もたくさんありますので、引き続き今後も改善していく予定です。まとめ今回、下記の3点を行ったことにより、ただの機能追加にとどまらず、より良いデザインは何か?ということを追求することが出来たと思っています。★現状把握をする既存の機能の追加であれば、現在できていることと、出来ていないことをきちんと把握することが大事です。何も考えずにそのまま追加した場合、ユーザーが現状で感じている疑問や不安を無視してしまう可能性があります。現状把握をして振り返ることで、デザインする際に大事にしたいことが浮き彫りになってくると思います。★「ユーザーがしたいことに対してどうアプローチするのか」という方針をある程度定める今回で言えば、「ユーザーが料理中にわからない言葉に出会った時に、その時していることをなるべく妨げずに、知りたい情報を簡単に知れるようにする」という方針があったので、それを軸にデザインがスムーズに出来たと思います。★アイデアを出した段階でなるべく早くプロトタイプを作るアイデアを出しているときに、頭のなかで想像するものでは議論が進まず、悩みのポイントもどんどんずれてきてしまいます。実際に触れるものになって気づく点や、想像と違ったものになってしまったときどうするかという方向転換も早い段階でできたのがとても良かったと思います。これらは、今後もデザインをする際に大切にしたいと思っていることです。既存の機能を他のプラットフォームへ追加する際にどう見せるべきか迷っている方は、ぜひ試してみてください。クックパッドでは、より良いユーザー体験を届けていきたい!というデザイナーやエンジニアを募集しています。10:00より良いデザインにするために大切にしたいと思っていることTweet関連記事2018-11-301週間で仮説検証を繰り返す、サービス開発のための取り組みこんにちは。エンジニアの角田と申します。〜ユーザーの課題を施策につなげるインタビューの取り組み...私たちは「レシピを投稿するユーザー」にとって最適なアプリを...2016-11-02サービス開発におけるアプリデザイナーの役割について投稿開発部デザイナーの辻(@cooktsuji)です。去る10月26日、「...2016-10-17"使える"プロトタイプ主導の開発プロセス検索事業部の須藤です。クックパッドの検索周りのサービス開発...2015-10-12「お料理アルバム」のアプリデザインこんにちは。投稿推進部の長野です。使ったセキュリティログ検索基盤の構築サービス特性にあった検索システムの設計戦略クックパッド採用説明会「クックパッドはサービスの作り手を採用したいんです。/*}*/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。