見出し画像

料理とOOUI

みなさん、料理するときにレシピを見てますか?

おそらく多くの人が見ているのではないでしょうか。では、スマホやPCを使うときに説明書を見ますか? おそらく多くの人は見ないですよね。

なぜスマホやPCは説明書なしで使えるのに、料理はレシピが必要なのでしょうか。本稿ではOOUIをはじめとするデザインの考え方を用いながら、その疑問を深堀りしてみます。

使いやすいソフトウェアはOOUIでできている

OOUIとはObject Oriented User Interfaceの略で、オブジェクトというまとまりで情報やアクションを整理する設計手法です。オブジェクト指向UIやオブジェクトベースとも言います。よく対比される概念としてタスク指向UIという言葉もあります。こちらは、タスク(アクション)を中心とした設計手法です。

現実世界ではオブジェクトを中心に考えるのが自然です。例えばスーパーに行って牛乳(オブジェクト)を手に取り、賞味期限(情報/プロパティ)を確認し、購入する(アクション)という流れになります。まず目にするのはオブジェクトです。

ソフトウェアにおいてもまずオブジェクトを選び、それに対するアクションを選んだ方が、現実世界の知識をもとに類推できるので使いやすいです。スマホのホーム画面にはApp(オブジェクト)が並んでますし、PCのデスクトップにはファイル(オブジェクト)が並んでますよね。

スクリーンショット 2020-08-04 17.27.07

もしスマホのホーム画面にAppを開く・Appを追加する・Appを削除する・Appを並び替えるといったアクションだけが並んでたらどうでしょうか? 毎回「Appを開く」ボタンを押して開くアプリを選ぶのは面倒です。また、Appを並び替えている途中で削除したいと思ったらどうしましょう。並び替えモードを中断して、アクション一覧に戻り改めて「Appを削除する」を選ばないといけません。並び替えながら削除もできたほうがいいですよね。このようにタスク指向だと使いづらいUIができてしまいます。

OOUIについて詳しくは、こちらの本がおすすめです。クックパッド社内では有志で輪読会を行ったりワークアウトにチャレンジしたりしました。

レシピはタスク指向では!?

料理の話に戻ると、レシピに書かれている手順は思いっきり手続き的でタスク指向ではないでしょうか!?

レシピがあるからこそ、同じ味を誰でも再現可能になっているのはとても素晴らしいことです。ですが、レシピに頼るから料理において「説明書なしにスマホを使うような体験」ができていないのではないでしょうか。

料理をオブジェクト指向で捉える

画像2

トマトのナムルを例に挙げるとレシピはざっくり以下のようになります。

1. トマトを切る
2. 小ねぎを切る
3. にんにくをすりおろす
4. 「3」と塩、ごま油を混ぜ合わせる
5. 「1」「2」「4」をあえる

これをオブジェクト指向風に捉え直してみます。

料理におけるオブジェクトは何でしょうか? トマト、にんにく、小ねぎといった食材や塩、ごま油といった調味料はオブジェクトと言えそうです。それらに対して切る、すりおろすといったアクションを加えた中間成果物もオブジェクトと言えます。また、最終的な完成品もオブジェクトです。

画像3

こうして図にすると、料理は小さいパーツをレゴブロックのように組み合わせたものだとわかります。料理によっては順序が大事な場合もありますが、この場合はトマトを先に切ろうが小ねぎを先に切ろうがどっちでもよいと思います。

レシピを丸暗記しなくてもゴールイメージをもとに要素分解できれば、料理はつくれるのです。ですが、いざトマトを手に取り、トマトのナムルを作りたいと思っても、わからないことがいっぱい出てきます。

・ナムルってどの調味料をどれぐらい使えばいい?
・切り方は決まってる?
・どうしたらおいしくつくれる? 失敗しないか不安

ソフトウェアであれば、とりあえずオブジェクトを右クリックすれば取りうるアクションが一覧表示されるので選ぶだけです。リンクにマウスを重ねるとカーソルが変わるように、行為を示唆する手がかりがあります。もし操作に失敗してもUndoできます。

スクリーンショット 2020-08-05 0.35.28

しかし、実世界での料理はそうはいきません。トマトを手にしたときにそれを切るのかゆでるのか、あえるのか炒めるのか。つくり手の感覚と知識を頼りに発想するしかありません。

複雜性保存の法則

ここで、デザインにおける「複雑性保存の法則」を紹介します。

あらゆるプロセスには本来備わっている複雜性がある。プロセスにはそれ以上単純化できない「臨界点」があり、それ以降は本来備わっている複雜性を移動できるだけ。

インタラクションデザインの教科書参照。その他参考リンク[1][2]参照

プロセスがもつ複雜性をソフトウェアに移すことで、ユーザーは簡単にプロセスを実行できます。例えば、メールを送るには宛先アドレスが必要でこれは減らせません。宛先アドレスをユーザーが一文字も間違えずに入力するのは大変です。適切な入力補完機能があれば、アドレス入力の複雑性がソフトウェアに移動しことになり、ユーザーの操作を減らせます。

料理の複雜性をソフトウェアにうつす

料理がもつ複雜性も減らすことはできません。それをソフトウェア(+ハードウェア)に移す取り組みがあります。

例えばOiCy Tasteという調味料サーバーは、レシピに書かれている分量をもとに調味料を計る作業を自動化します。どの調味料をどれぐらい使えばいいのかをシステムが担うことで料理のつくり手の手間が減ります。

料理の複雜性を「うまく」ユーザーにうつす

別のアプローチとして、料理がもつ複雜性をうまくユーザーに移すことも考えられます。つまり、ユーザーが料理を学習するということです。

では、料理を学習しやすくするにはどうすればいいでしょうか?

前述のOOUIは、オブジェクトを選んでアクションするという最小限のことを覚えれば、何をどう操作すればいいか類推できてソフトウェアの使いやすさにつながりました。

OOUIでは何をメインオブジェクトとして抽出するかが肝になります。料理において、1覚えれば10料理がつくれるような、1覚えるのに1回だけ学習すれば済むような、そのようなパターン(UIデザインで言うところのイディオム)をオブジェクトとして抽出できれば、料理を学習しやすくなりそうです。

具体的に何をメインオブジェクトして抽出するのがベストなのかは模索中ですが、例えば以下のようなものかもしれません。

・野菜に共通する切り方
・ナムルだれのような合わせ調味料のつくりかた
・ナムルは「食材 × ナムルだれ × あえる」といったのようなもの
・おいしく感じる塩分濃度は1%という原則
・ナムルをおいしくつくるコツ、失敗しないコツ
・料理を学ぶきっかけ

まだ答えはわかりませんが、このようにデザインと料理の点をつなげながら、たべドリというアプリをつくっています。

画像5


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
🤗
138
UXエンジニア at Cookpad Inc.

こちらでもピックアップされています

note編集部お気に入りマガジン
note編集部お気に入りマガジン
  • 18064本

様々なジャンルでnote編集部がおすすめしている記事をまとめていきます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。