【コラボお題】料理教室が自宅でできるアプリ

OVERVIEW

Cocoda!×cookpadのコラボお題 学生にとって、料理がもっと楽しみになるアプリ』のUIデザイン

YEAR 2019

プロトタイプ

https://xd.adobe.com/view/2edfd13f-047f-4e4b-7a96-b5090e1466f1-58ee/

デザインの意図

コンセプト

料理の基本をしっかり学べる! 楽しい料理教室を自宅で!


利用ユーザー

料理を勉強したい学生(現在一人暮らし/一人暮らしに向けて準備する学生)

ユーザーの課題やニーズ

【課題】
・レシピサイトは沢山あるけれど、包丁の使い方や調理のコツなど料理の基本を知りたい
・基本を知らないので、レシピサイトで見慣れない道具や、知らない調理法が書かれていてわからないまま作っていることがある
・きちんとした料理ができるようになりたいが、料理教室は値段が高かったり(1回4,000〜5,000円)教室を探して予約するのは大変…

【ニーズ】
・料理教室のように、一緒に作りながら教えてくれるような内容
・レベル別や学びたいスキルを選んでレッスンを受けることができる
・安価でしっかり料理を学ぶことができる

利用される場面

・料理を学びたい時
・イベントやパーティなど失敗したくない時にレッスンを見ながら料理する

コア機能

マイページのステータス画面(取り組んだレッスン数に応じて称号がもらえる)
レッスン検索画面(基本・和洋中・多国籍・菓子・イベントなどで分類分け、各レッスンに難易度と時間を表記)
レシピ概要(材料を用意しやすいように買い物リストをつける)
レッスン動画(1工程3分ほど、技術的な部分、変化があるところを丁寧に収録する)

どのようなプロセスでデザインしたか

【アイデア出し】
料理で困っていたこと、こういう機能が欲しいというアイデアを書き出しました。


【テーマとユーザの選定】
アイデア出しで2つのテーマにまとまりました。
●料理はレシピ見ればなんとか作れるけれど、包丁の扱いがおぼつかなかったり、下処理の仕方が分からないので調理スキルを身に着けたい人
●お金がない、体力がない、器具を持っていなくても簡単でおいしいレシピがほしい人
今回は、上のテーマで取り組みました。


【機能の選定+市場調査】
レシピサイトや料理教室を調べ、料理教室の良さやアプリにしたときのメリットを考えながら機能を選びました。

取り入れたポイントは以下の3点です。
・調理の細かい部分を飛ばさずに行う(極力調理時間=動画時間にしたい)
・豆知識(レッスンで使う野菜の選び方、栄養素も教えてくれる)
・受けたレッスンを記録を見返したり、達成感がわかるステータス表示


【UIの作成】
ラフスケッチを作成し、その後AdobeXDを使用してプロトタイプまで作成しました。

デザインで意識したこと

レッスン検索画面では、ジャンル別に分けて探しやすくしたり、タイトルや見出しから何が学べるのか分かるように工夫しました。
レシピ画面では、材料+概要を乗せ、慣れてきたらレッスンを受けなくてもレシピアプリとして利用できるようにしました。また、材料は買い物リスト形式にし、材料の準備をしやすくしています。

WEBSITE