CIID Beyond the Pocket Computer

Ats
17 min readJul 20, 2020

--

ソフトウェアエンジニアが CIID の IDP コース(20週目)に参加して学んだことをゆるりと共有します。今週(7/13~7/17)は クラス名では想像しづらいですが、ウェアラブルデバイスや VUI デバイスのインタラクションのデザインです。講師陣がとても豪華で Apple watch, Sonos のデザイナーにレビューしてもらえて、とても勉強になりました。

Photo by timJ on Unsplash

17~19週目の記事もあるので良かったら読んでみてください。

Day 86: Get problem statement

この日は、早速課題が明らかになってそれに対して、自分たちが取り組む問題を設定する日でした。今週の課題は「チームでコンテキストを選んで、そのコンテキストでスマホにできない体験をデザインする」でした。主にブレインストーミングをして、生徒間でインタビューをして、チームの問題設定を行いました。授業では、Sonos チームの Design Thinking の実践を説明されてとても勉強になったので、それを共有しようと思います。

Design Thinking is an approach

Design Thinking は言わずも知れたデザインに対する考え方の一つです。IDEO が提唱して多くの企業やデザイナーが参考にしてる考え方だと思います。詳しい説明は下記の IDEO の公式サイトに譲ります。

今回の講師の一人の方も Sonos のデザインチームで、Design Thinking を実践しています。そして、彼は「Design thinking はデザインの過程(Process)ではなく、一つの手法(Approach)」だと説明してくれました。そして、それを具体的なアウトプットにまで分解して実践していました。この話を聞くまでは、なんとなく Design Thinking はダブルダイヤモンドのようなデザインの大局的な説明をしているものだという認識でした。(僕の勉強不足の可能性がありますが)しかし、この話を聞いて Design Thinking をどう自分たちのデザインに適用させていくかを具体化できたと思います。

Sonos チームでは上記の画像のように、Design Thinking を分解しています。基本的にダブルダイヤモンドの収束と発散を、「Observe」「Ideate」「Prototype」「Test」のフェーズにマップしています。そして、各期間にそれぞれのアウトプットを設定しています。

「Observe」では、「ターゲットユーザー(Audience)」「領域(Domain)」「課題(Obstacle)」を限定するように、「問題(Problem statement)」を作成します。このフェーズのアウトプットはこの「問題」です。テンプレート化すると下記です。

“Audience” wants to do “Domain” but they have “Obstacles”

この問題を設定するために、インタビューを行いるそうです。この日にやったのは、このフェーズです。

次に、「Ideate」では、仮説を設定します。このフェーズのアウトプットは、仮説をビジュアル化したものです。多くの場合が動画になるそうです。動画は短い期間で自分たちのプロダクトの価値を説明するのに最適だと教えてくれました。また、この段階では具体的なインターフェイスをデザインにする必要はないですが、「システム」をデザインするように言われました。この「システム」とは、「アプリがあって、プロダクトがあって、音声認識があって」のような体験の全体のことを指しています。なるべく一つのアプリで完結しないように、発想を大きく体験を広く見ることが重要だと教わりました。特に、ウェアラブルや VUI のように、まだ馴染みの薄いデバイスのデザインは、自分の先入観を取り除くように仮説を設定できると面白くなるのだと思います。

次に、「Prototype」「Test」と続きます。これは、今までの授業で散々実践してきたこととほとんど同じです。強調された点は、設定した仮説を計測可能なプロトタイプを作ることです。プロトタイプの結果を定性的でなく定量的に評価できるように仮説を設定することが大切だと教わりました。

僕たちのチームは、スマホにできない信頼できる安全な出会い系を問題に設定しました。下記が僕たちの Problem statement です。

How can we provide an authentic and safe dating experience for genuinely interested single people who dislike existing online platforms?

Day 87: Get storyboard

Photo by Clay Banks on Unsplash

この日は、前日に用意した Problem statement に対してソリューションを考えて、そのストーリーボードを作る日でした。やり方としては、基本的に今までやってきた方法と同じでした。自分たちの Problem statement に対してブレインストーミングして、更に問題を深ぼるように問いを設定して、またブレインストーミングすると言った感じです。この章では、VUI の基本を授業で説明されたので、復習のためにもまとめようと思います。

Conversation design

VUI において気をつける点が少々 GUI とは異なります。VUI はより人間的でより自然なインプットです。会話の中から「あれ」や「彼」などを理解する必要があるので、プロダクト自体が会話のコンテキストを理解できる必要があります。そのおかげ、一連のインプットが連続的なインタラクションになり、より人間らしいインプットになります。一方で、利用シーンにかなり左右される面もあります。例えば、周囲がうるさい環境では、そもそも VUI を利用することが難しいです。また、クレジットカードのカード番号やセキュリティー番号を VUI を使って入力するのは、プライバシーの観点からすると有り得ないです。

このように、VUI は GUI と違った考慮点が多くあります。その中でも、僕が一番違うなと感じた点は、フィードバックでした。GUI の感覚でユーザーの行動に対してのフィードバックを考えていると、VUI では少し不明瞭で弱いフィードバックになると感じました。例えば、VUI を使って下記のようなインプットをしたとします。

大きいサイズのペペロンチーノを注文して。

このインプットに対しては、下記のようにフィードバックするの模範解答です。

OK! 配達先の住所を教えて下さい。

この「OK!」がかなり重要だと教わりました。GUI の感覚だと、次のページで「配達先の住所を教えて下さい」と表示されると思います。しかし、VUI では前の会話のインプットが正しく理解されたことも同時にフィードバックする必要があります。この細かいフィードバックのおかげで、より人間らしく連続的に感じることができると教わりました。

また、VUI をデザインする上でより会話らしくするために、Intent と Entity という概念があります。簡単に説明すると Intent はユーザーの行動で、Entity が会話における類義語です。これらを適切に設定し、機械学習を用いることで、より自然な会話になります。これらは開発する際に必要なことなので、詳しい説明は下記のサイトに譲ります。

この日に VUI の基礎を習い、とても面白いと感じていました。しかし、僕たちのチームで VUI が使えるかどうかはこの時点ではなんとも言えない状況でした。笑

Day 88: Midweek presentation

Photo by Teemu Paananen on Unsplash

この日は週中の中間発表日でした。今まで2週間や3週間の授業が続いていたので、1週間の授業がとても短く感じました。僕たちのチームのプロダクトは、ウェアラブルを使った出会系アプリになりました。せっかく VUI を習ったので、VUI を使いたかったですがしょうがないと思っています。この章では VUI のプロトタイプ方法と僕たちのチームの収束と発散のやり方を共有しようと思います。

Take the easiest way

まずは教えてもらった VUI のプログラミングツールを共有します。

当然ながら音声ファイルを取り込むことができて、再生できることが最低条件です。そして、講師からは Low-Fi のプロトタイプでは Keynote を使うことを勧められました。どのようにプロトタイプするのかと言うと、各白紙のスライドに音声ファイルだけ埋め込んでおきます。そして、テスト時のユーザーの音声インプットに応じて、人間が適当なスライドを開いて音声を再生します。どのインプットに対して、どのページの音声ファイルを再生するか覚えておくことが大変な作業です。ただ、白紙の画面を切り替えるだけなのでユーザーには違いが分からず、本当に自動で音声が応えてくれているように感じると教えてもらいました。

更に、今までそんなに重宝して来ませんでしたが、オズの魔法使いの有効性を強く感じました。下の図のようにスクリプトだけ決め、それにそって人間が音声対応するのが一番簡単だと感じました。携帯を箱の中に入れて、通話状態にしておけば簡単に音声を別室から届けることができます。

今までのプロトタイプでも、「簡単に素早く作る」ということを強調されましたが、VUI では更にこの点が強く説明されていました。Keynote やオズの魔法使いといったように、全くコードを書かずに VUI の有効性をテストできます。個人的には Google home を持っているので、何か作りたいなと思っていました。しかし、 VUI は実物のプロトタイプを作る手間は、GUI のように手軽ではないと思います。そういう時こそ、Low-Fi のプロトタイプが効力を発揮してくれるのだなと改めて感じました。

Focus on problem

今回のチームは非常に効率的だと感じています。僕たちがコンセプトを形にしていくプロセスに慣れてきたというのがありますが、特定の時間にグッと集中してアウトプットを出すのが得意なように感じています。それを改めて言語化してみようと思います。

僕たちのチームのプロセスとして、常に1つの問題や問いに集中していると思います。その1つの問題や問いに対して、5~10分でブレインストーミングします。各々が好きなように思っていることや感じていることを書き出して、その後に2~3分でみんなに共有します。この段階は、チームを発散している状態です。その後、チームで体験に収束できるように30分ぐらいでストーリーボードやボーディーストーミングを使って議論をまとめていきます。

この1点に集中した小さい収束と発散のサイクルが非常に心地よいと感じています。1点に集中ができているので、無用に話が発散しすぎることがありません。更に、収束の際にストーリーボードやボーディーストーミングを使っているので、チームのみんなでお互いのイメージを確実に共有することができます。また、可視化されてアウトプットがあるので、それを見ながら「ここは辻褄が合っていない」や「ここにこういうインタラクション足したら面白そう」みたいな具体的な議論ができ、議論が常に前進できているように感じます。

僕の感想ベースですが、議題はなるべく1点に絞って、アウトプットを可視化する。そして、このサイクルを小さく多く繰り返すのが良いのだろうと感じています。下記にこの段階の発表動画を載せておきます。(初めて英語でボイスオーバーやってので緊張しました)

Day 89: Get concept video

Photo by Wahid Khene on Unsplash

この日は、翌日の発表に向けてコンセプトビデオを作成する日でした。なので、この日は新しいことを議論すると言うよりも、現状のストーリーを撮影して、編集しするのがメインでした。この章では、チームメイトから学んだビデオ制作ことを共有しようと思います。

Focus on the purpose of cuts

基本的には4週目で学んだビデオプロトタイプの内容を行っています。興味ある人は読んでみて下さい。

上記の記事に書いていないですが、ビデオ作成はおおよそ5つの段階に分けることができます。それは、「撮影」「カット割り」「アニメーション」「効果音/音楽」「カラーグレーディング」です。この5つの組み合わせによって、良いビデオができることを学びました。そして、今回のビデオ作成では、僕は「カット割り」を担当していました。撮影したフッテージを「どのように?」「どのくらい?」を決めて、順番通りに並べていきます。

その際に、ビデオ作成が得意なチームメイトから色々教わりながらカット割りを行いました。その中でも一番印象に残っているのは、登場人物の各動作の中で一番大切な動作を目立たせるように時間配分をするということでした。例えば、今回の動画の中で、歯を磨くシーンがあるのですが、もちろんこの動作の中で一番大切な動作は、「歯を磨く」ことです。しかし、「歯を磨く」には、歯ブラシを手に取ったり、蛇口をひねったりと複数の動作に分解できます。この一連の動作を、一つの動画で見せると全体的に同じアングル/構成のカットが続き、味気ない動画になります。そこで、「歯を磨く」「歯ブラシを手に取る」「蛇口をひねる」をそれぞれ別のカットで差し込むで、見ている側も飽きずに動画を見ることができます。その時に、「歯を磨く」というカット割りを長くし、その他を短くすることで、単なる冗長なカットの連続でなく、「歯を磨く」ことを強調することができます。このように、自分が動画の中で表現したいもの/動作を意識しながらカット割りを行いました。

少し話をメタに捉えると、この考えは GUI にも通ずることがあると思いました。GUI では、一つの画面の中で一番大切な情報にユーザーの視線を誘導できるように、画面内のヒエラルキーをデザインしています。この観点は、ビデオプロトタイプにおける視聴者に最も伝えたい情報を目立つようにフッテージと時間を決めるという観点に通ずると感じました。また、今回のカット割りでシーンの切り替わりに違和感がないように、アングルや被写体の態勢が似てるものを繋げると良いとチームメイトから教わりました。そして、その違和感をなくすために、各シーンの替わり目は1フレーム単位で、前後の被写体の一貫性を保つように意識してカット割りを行っていました。この切り替わり時に、前のシーンの情報を現シーンでも受け継ぐようにする考え方も GUI のページの替わり目の考え方と似ていてとても勉強になりました。

少し今回の授業の内容から逸れてしまいましたが、動画の編集をたくさん学べたので、個人的には満足度の高い日でした。最後に、「効果音/音楽」を探す際に有用なサイトを教えてもらったので共有します。

Day 90: Presentation

この日は今週のプロジェクトの発表の日でした。僕たちは「Lovester」というプロトタイプを考えました。その動画と発表資料を下記に載せておきます。(初めてメインの役でビデオに出ました。笑)

結局、VUI を考えることはできずにウェアラブルデバイスで終わってしまいました。また、久々の1週間の授業で、1週間では実物のプロトタイプを作るのは難しいなとも感じました。ただ、ディスカッションの練度は上がっているなと感じました。チーム内で発散と収束を意識しながらディスカッションをして、最終的には面白いコンセプトに纏まったのではないかと思っています。また、何よりビデオ制作に対して見識を深められたのが良かったと思っています。教えてくれたチームメイトにとても感謝しています。次は、Aftter Effect を使ってアニメーション作成の練習をしたいなと思いました。

21週目の記事もあるので良かったら読んでみてください。

--

--

Ats
Ats

Written by Ats

I like building something tangible like touch, gesture, and voice. Ruby on Rails / React Native / Yocto / Raspberry Pi / Interaction Design / CIID IDP alumni

No responses yet