こんにちは。デザイナーの遠藤です。 私は今クックパッドiOS/Androidアプリのデザインを担当しています。
みなさんは、既存の機能を別のプラットフォームに追加する際に、あまり考えずにそのまま追加してしまい、後で後悔したことはないでしょうか？今回は、web版にある機能「料理の基本」をクックパッドアプリへ追加した時のことを交えて、より良いデザインにするために大切にしたいと思っていることをご紹介します。
料理の基本について
レシピをみて料理を作っている際に、「あれ、半月切りって何だっけ？」「水にさらすってどれだけやればいいんだろう」のような、基本的なことさえわからず手が止まってしまったことはありませんか？クックパッドでは、そんな方のために料理の基本を提供しています。今回私は、この機能をiOS/Androidアプリのレシピページに追加する際、デザインを担当しました。
この機能の使い方は、レシピ中の手順欄にある言葉から利用できます。 例えば、スマートフォンwebの場合、レシピ中にところどころ薄く下線が引いてあります。 その下線の部分をクリックすると、詳しく内容が見れるようになっています。 （↓下記の例では、下線「みじん切り」をクリックした場合）
Image may be NSFW.
Clik here to view.
デザイン検討のプロセス
上記のスマートフォンwebの機能をアプリに追加する際に、下記のようにデザインを検討しました。
（１）現状把握（ユーザーのシーンを理解、今まで出来ていないことの洗い出し）
PCやスマートフォンweb版では、料理の基本のキーワードをタップした際、レシピページから料理の基本ページへ遷移します。ユーザーは料理中にレシピを見ていることが多いため、料理中に画面の行き来が発生することで、本来の目的から少し脱線し料理の進行を妨げてしまっているのではないか、ということを課題にしていました。 それを踏まえて、アプリではなるべく本来の目的の「料理をする」ということを妨げずに、知りたい情報を簡単に知れることを重視することになりました。
（２）そのシーンでは、「ユーザーはどんな情報が必要で、何をしたいのか？」アイデアを考える
料理中にわからない言葉に直面して困ってしまったというシーンでは、どういった情報が必要で、何ができると嬉しいのか？というアイデアを出しました。以下は、そのアイデアの一部です。
- 3Dtouchの機能を使えばすぐに内容が知れて嬉しいのではないか？
- 画面遷移して見に行くのは料理を妨げることにならないか？
- 「料理の基本」を全文見せる必要はないのでは？
こういったアイデアをプロジェクトの担当者同士で意見し合い、ブラッシュアップしていきます。 また、アイデアだけでは実際に操作感がわからないため、すぐにUIを具体化していきます。（３）
（３）アイデアをプロトタイプしてデザインの方向性を決める
アイデアが浮かんだ段階で、どんどんプロトタイプを作っていきます。 また、今回iOSとAndroid両方での実装が必要だったため、両方でどういったデザインが必要かも都度検討していきます。 以下、プロトタイプの一例です。
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
プロトタイプを作っていくとたくさんの気づきがあり、方針がとても固めやすいです。 例えば、上記の一番左のプロトタイプでは、モーダルを表示している時に背景を暗くしてモーダルを目立たせていましたが、「暗くすると、本来の料理をすることを妨げることになるのでは？」という意見のもと、背景を暗くするのをやめました。
（４）デザインが決定したら、周りのデザイナーやエンジニアにレビューしてもらう
プロトタイプである程度方針を固めたら、次に細部のデザインをつめ、決定したら周りのデザイナーやエンジニアに触ってもらいレビューをもらいます。 ここでは、
- 他の機能の挙動との齟齬がないか
- 情報が適切か、見せ方が適切か
- 実装が現実的にできるものかどうか
の観点でアドバイスをもらいます。
決定したデザイン
プロトタイプ作成を重ね、周りの人にレビューしてもらった結果、このようになりました。
iOS / Android
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
リリース後の評判はどうか？
リリース後、一部のブログなどで「嬉しいアップデートだった」というご意見をいただいているのを発見し、とても嬉しく感じています。とはいえ、まだまだ課題もたくさんありますので、引き続き今後も改善していく予定です。
まとめ
今回、下記の３点を行ったことにより、ただの機能追加にとどまらず、より良いデザインは何か？ということを追求することが出来たと思っています。
★現状把握をする
既存の機能の追加であれば、現在できていることと、出来ていないことをきちんと把握することが大事です。もし何も考えずにそのまま追加した場合、ユーザーが現状で感じている疑問や不安を無視してしまう可能性があります。現状把握をして振り返ることで、デザインする際に大事にしたいことが浮き彫りになってくると思います。
★「ユーザーがしたいことに対してどうアプローチするのか」という方針をある程度定める
今回で言えば、「ユーザーが料理中にわからない言葉に出会った時に、その時していることをなるべく妨げずに、知りたい情報を簡単に知れるようにする」という方針があったので、それを軸にデザインがスムーズに出来たと思います。
★アイデアを出した段階でなるべく早くプロトタイプを作る
アイデアを出しているときに、頭のなかで想像するものでは議論が進まず、悩みのポイントもどんどんずれてきてしまいます。実際に触れるものになって気づく点や、想像と違ったものになってしまったときどうするかという方向転換も早い段階でできたのがとても良かったと思います。
これらは、今後もデザインをする際に大切にしたいと思っていることです。 既存の機能を他のプラットフォームへ追加する際にどう見せるべきか迷っている方は、ぜひ試してみてください。
クックパッドでは、より良いユーザー体験を届けていきたい！というデザイナーやエンジニアを募集しています。