インタラクションデザインとはなにか？　クックパッドのエンジニアが、北欧のデザインスクール「CIID」で学んだこと

CIID Summer Schoolで学んだ、インタラクションデザインのこと

黒田健太氏（以下、黒田）：よろしくお願いします。まず自己紹介です。黒田健太と申します。

2019年の4月にクックパッド株式会社に新卒で入社いたしまして、現在、会員事業部のエンジニアをしております。主にレシピサービスのサーバーサイドや、データ分析などを担当しております。エンジニアリングとデザインの領域横断に興味があって、UXエンジニアを目指して奮闘しております。

今日は「CIID Summer School 2019」で学んだことを共有していきたいと思います。具体的にはインタラクションデザインの基礎や、そのプロトタイプをしていく中でアイディア出しのプロセスについて学んだことなどです。

そもそもなぜCIIDに行ったのかというと、先ほどお話したように、僕はエンジニアリングとデザインの領域横断に興味があります。しかし、デザインを体系的に学ぶ機会が少なかったため、一度講義を受けてみたいと思っていました。

加えて、インタラクションデザインという言葉を聞いたことはあったものの、具体的になにを指しているのかは理解できていなかったので、知りたいと思っていました。そして、自分にとって非常に重要な動機として、僕は日々、デザインをエンジニアにインストールするためにはどうしたらいいのかを考えて生きています。その中で「インタラクションデザインが、エンジニアにデザインをインストールするきっかけになるのではないか」と思い、参加しました。

インタラクションデザインとはなにか？

現地では「INTRO TO INTERCTION DESIGN」というワークに参加しました。

このワークでは、インタラクションデザインの基礎に焦点を当てて講義が行われました。講師の方は2人、生徒は13名で、デザイナーやエンジニア、コンサルタントや学生などさまざまな職種の方がいました。入門クラスのためか、デザイナーの方は少なかったことが印象的です。

それでは、果たしてインタラクションデザインとはなんでしょうか？　講義では「DO、FEEL、KNOWの3要素からなる相互作用のデザインをすること」と言われていました。

こちらの例で考えていきましょう。

ユーザがボタンを押したり、ドアノブを押し上げるという行動を起こす。これがDOです。次に、指先や手に対してなんらかのフィードバックを感じるのがFEELです。最後に、ボタンを押したあと、電子機器に電源が入ったり、扉が開いたことを理解するのがKNOWのプロセスです。

これらをユーザが期待するようなループで回すようにデザインするのが、インタラクションデザインです。

インタラクションデザインのデザインプロセス

ワーク中、実際にどのようなプロセスでデザインをしていったのかを紹介していきます。

まず初めに「どういったことに課題がありそうか」や、対象となるユーザにインタビューしたり、観察したりして調査を行っていきました。その結果をもとに、課題をグルーピングして分類していきました。

グルーピングされた課題をもとに、どれを解くべきかという課題の選定を行いました。そして、実際にどうやって課題を解決するのかというアイディアを、デザインプロセスによって考えていきました。そのあと、課題と、課題の遭遇場面と、その解決策によってユーザがどのような状態になってほしいかというストーリーを作って、ストーリーボードを作成しました。

最後に、解決策を検証するためのプロセスを作成していきました。基本的には一般的なデザインプロセスでデザインを出していたんですが、解決策を考える方法がよかったのでシェアしたいと思います。

アイデア出しのためのフレームワーク

こちらが、解決策を出すために用いたフレームワークです。

アイディア・メタファ・モデル・ディスプレイ、エラー・シナリオ・タスク・コントロールの8つの要素を埋めていくと、インタラクションデザインにおいて懸念がある要素に対して、それぞれ対処できることが確認できます。

8つの要素は上下で対になっていて、上段はより抽象的な概念、下段はより具体的な内容が入るようになっています。アイディア出しのときは、左側から順に埋めていきました。それぞれの項目を詳しく説明する前に、具体的なプロダクトを例にしたほうがわかりやすいと思うので、インタラクションデザインを使ったプロダクトを紹介させてください。

こちらは、CIIDの卒業生の方が作成した「LUMEN」というプロダクトです。

位置付けとしては、ライト型のMixed Realityのストーリーテーリングプラットフォームです。ヘッドセットを使わずに、いかに没入感を持つリアリティを与えられるかという課題に挑戦したプロダクトです。

具体的になにができるか・なにをするかというと、植物にライトを当てることでそれがどんな植物かを表示したり、照明の色を変化させるタッチパネル的なインターフェースを、ライトを付けて表示することによって操作できるという、非常に良いプラットフォームです。

デザインができるまで

まず、どういった動機でデザインをしたのかについて、先ほどのフレームワークの要素を1つずつ見ていきましょう。

エラーという項目では、課題がなにであるのかを定義していきます。先ほどのLUMENでは、ARやMRがヘッドセットに依存していることが課題として挙げられています。

次にアイディアでは、課題へのアプローチ方法及び、そのデザインによって解決したいこと、達成したいゴールを定めていきます。具体的には、スクリーンやヘッドセットがない世界において、人々にどのように没入感を与えられるかという方法です。

続いて、シナリオでは、このデザインに意味付けを行っていきます。

どういう場面でどのデザインを行うのかというコンテキストを考えます。なんの植物かを認識するというLUMENの機能にフォーカスしてみると、カフェに行ったとき、テーブルに名前のわからない植物があったというコンテキストが考えられます。

メタファは、ユーザの理解のコストを下げるものだと考えていきます。インタラクションデザインのDO、FEEL、KNOWのループでは、KNOWの理解のコストがボトルネックとなる非常に重要な役割になっています。メタファの良し悪しが、最終的なアウトプットの質を大きく左右するといっても過言ではありません。

LUMENでは懐中電灯がメタファになっていました。懐中電灯は、見たいものの方向に合わせてスイッチを押せばよいということを、私たちはよく知っています。そのメタファを利用して、なにかわからないものがあったときにそのライト型のものを対象物に向けてスイッチを押すという行動を行います。

動作仕様とマッピング

ここまでで課題と問題の整理ができたので、実際に解決策のデザインにいきたいと思います。この動作仕様の段階でのタスクにおいては、解決策を実施したときにユーザがどういった行動をとるのかを、段階的なタスクのレベルで描いていきます。

具体的には、対象物を見つけ、それにライトを向けて、スイッチを押したり離したりするという4つの段階があります。

モデルでは解決策の概念的なモデルで、その解決策のコアな部分がなにかを書いていきます。先ほどのLUMENでのコアな部分は、没入感を持った状態で認識した状態から、なにかがわからない状態からなにかをわかったと理解できる状態になっている点です。

最後に、インタラクションデザインのそれぞれの要素の解決策をマッピングしていきます。

コントロールという段階では、解決策においてユーザにどういうアクションを起こしてほしいかを書いていきます。先ほどの例でいうと「対象物に向けてスイッチを押す」という行動を起こしてほしいということです。

ディスプレイでは、どういった見た目をしているのか、どのようなフィードバックを返すかを書いていきます。ユーザが起こした行動によって、LUMENの場合だとこの植物はなにかということが解決できるという状態です。

繰り返しですが、講義では、このフレームワークではメタファの要素がかなり重要だと言われていました。この課題で、メタファがペットボトルだった場合を考えてみましょう。蓋を開けるという行動にはなっても、対象にペットボトルを向けるという行動は考えにくいです。懐中電灯のメタファを用いることで、どのように操作すればプロダクトを使えるのか、初見の人でも大多数が理解できます。

使い方をすぐに理解できないプロダクトはすぐに利用することができないので、理解のコストを下げることは重要です。メタファはユーザの理解の発信源となる手段なので、有効的に利用していくべきです。

ワークの実際の様子

ワークをどのように進めていたのか、少しだけ様子を紹介したいと思います。

ユーザの観察や自分の経験による調査の後に不安になりそうなものを付箋に貼り出して、その後グルーピングをしていきました。グルーピングした課題を選定して、先ほど紹介したフレームワークを使って、実際に解決策のアイディアを出していきました。

最後に、ストーリーボードとプロトタイプを並行して作っていきました。

最終的に作成したプロトタイプがこちらです。

今回の課題を解いたものとしましては、パブリックスペースにオブジェクトを設置することによって、人と人との交流を促進するという構築を考えました。

感想です。

ワークショップから出たこととして、モノを中心とした議論をすることが重要だとわかりました。コミュニケーションの中でいかに理解のコストを下げることができるかを仕事の中で意識するようになりました。そういったコミュニケーションをするときにインタラクションデザインを学ぶことは、デザイナー以外にとっても、非常に価値があるものだと思います。

例えば、エンジニアにおいてAPI設計で別のサーバーサイドエンジニアが、アプリのエンジニアの理解しやすいレスポンスになっているか。さらにその向こう側にいるユーザにとって理解し難いデータの作り方になっていないか、そういう視点を意識する必要があるということを、僕はインタラクションデザインから学びました。

インタラクションデザインのエッセンスとして、いかにオブジェクトを返した場合でもそのやり取りの中で理解のコストを下げられるかというところにつきると思います。

参加者のバックグラウンドが多種多様だったため、さまざまな意見や考え方が出てきていました。この議論の中で、自分は気付いたらWebやアプリの解決策に対して考えていくバイアスをワーク中に自分としては感じることができました。働き方の中でアイディアの幅を狭めないためにも、こういったことを意識してやることがすごく重要だと思います。

以上で発表を終わります。ありがとうございました。

（会場拍手）