おはようございます。飯野です。
他の記事でも紹介したんですが、Google Cloud Vision APIのデモ。すごくかっこいいんですよね。
このデモはわずか2週間（！）で完成したそうなんですが、
- そもそもこのデザインってどういう風にできていったの？
- 短い期間でどうやってプロジェクトが回っていったの？
って興味はありつつも、あまりにも想像つかなかったので、ストレートに聞いてきました。
答えてくれたのは今回のプロジェクトを担当されたreactiveのみなさん。デザインイメージを担当された玉木さん、プロジェクトマネジャーをされた堺さん、3D部分の実装を担当されたニックさんの3人です。
実際にデザインの途中で作ったムードボードなども見せていただきつつ、どういう風にデザインやプロジェクトが進んでいったのか説明してくださいました。
スピーディーにうまくプロジェクトを回すコツは「相手を過大評価すること」なんて気になる話も。それではスタートです。
先に体験を決めれば、あとはデザインに当て込むだけ
―どんな経緯であの宇宙のデザインはできあがったんでしょうか？
まずこの話を伺ったときに、膨大な数の画像を処理するってことからインスパイアされて「宇宙」を表現しようと考えました。
基本的にぼくはwhat ifでデザインを考えるようにしていて。今回であれば、「画像ひとつひとつが惑星だったら」と思い立ってそれを形にしてみたんですね。
驚くことに、3Dの実装をやっているニックさんや他のメンバーも、今回の話を聞いたときに宇宙っぽいものをイメージしていたんだそう。そこでコンセプトはズバッと決まったらしいです。
にしても「宇宙的なモノを作ろう！」からどういうフローを経て、あのクールなデザインができたのか。全く想像もできません……。
UXの設計？とかから取り組むんでしょうか……？
表面上のUXとかってあまり必要ないと思っていて。もっともっとリアルなものをイメージしていました。
サンフランシスコで行われるキーノートセッションで、オーディエンスが僕らが作ったデモを見て3秒間口をあんぐり開ける……といったような。そこをちゃんと最終目標として決めちゃえば、あとはそこに対してデザインを当て込むだけなんです。
GCP NextでVision Explorerが発表されたときの様子
いつどこで誰にどんな体験をさせたいのか？
ここをできるだけリアルに設定することで、これから自分が作るものの判断軸をしっかり持つことができるそうです。口に出すのは簡単ですし、いろいろな本に書いてあることかもしれないですが、実際にできている人はそこまでいないんじゃないでしょうか。
日頃できているか？と自問して、僕も耳が痛くなりました。
とにかくアウトプットを出す。頭の中にあるものを自分でテストする
―その体験を作っていくにあたって、デザイン面で苦労することはありましたか？
Googleのマテリアルデザインってすごく細かいレギュレーションがあるんですね。
正直マテリアルデザインのルールに従ってデザインを行えば、誰でもそれなりにかっこいいものができてしまうとは思うんですが、ユーザーをどう引き込むかという部分はそれだけだと少し難しいと考えていて。
なので今回のデモでは、ユーザーの体験する「宇宙」を壊さないようにGoogleらしさをどうディスラプト（破壊）できるかということを考えていました。そのバランス感を保つのはチャレンジングでしたね。
チャレンジの一つとして、あまり見たことがないような色使いにしたかったんだとか。そういった思いから黒の背景に対してエメラルドグリーンやミントグリーンを使っているんだそうです。
マテリアルデザインに純粋に従ってデザインをすると、どうしてもユーザーに体験させたい「宇宙」と画面が少し乖離してしまう懸念があったんだそう。そこで、どうマテリアルデザインとバランスを取っていけるか試行錯誤をしたんだとか。
マテリアルデザインに準拠して作成された当初の画面案。ユーザーに体験させたい世界とは少し乖離してしまうと判断され、他のデザインになった
現在の画面デザイン。確かに、宇宙感はまったく壊れていないと感じる
頭の中で思いついたら、とにかく作ってみて自分自身の考えをテストするということを繰り返しました。
こういうときはこうなるのか……というのをひとつひとつ試していく感じですね。ここはニックとも合わせてやっていました。
そうだね。ブロックがくるくる回るような簡単なものから、今のデザインにいきつくまで順を追っていろいろ試してみたね。
現在のモノにたどり着く少し前のインタラクション＆デザイン案。宇宙の中を進んで行くようなインタラクション部分はすでに完成されている
なんだかデザイナーの方ってけっこう頭の中で作りこんじゃってから、実際に画面に落としていくのかと思っていましたが、やっぱり地道に作っていくことが近道なんですね。
どんどんアウトプットしていくと、プロジェクトとしても「進んでいる感」がでますし、とにかく手を動かしてみるというのはありきたりですが、早くプロジェクトを回すための鉄則なのかもしれません。
いろいろな制約条件の中で、どうすれば最高のものができるか？
―チームとして動くときに、デザイン側の理想と実装側の制約で話が噛み合わなくて、チームが険悪になる……なんてよく聞きますが、今回のプロジェクトはどうでしたか？
よくありますよね。その結果、これって本当にユーザーのためになってるっけ？みたいなモノができちゃったり。
今回は「Googleの期待を大きく超えるものを作ろう」というビジョンはみんなで明確に持っていて。個々人が、自分ができる限りの最高のものを作る！という意気込みでひとつの方向を向けていたと思います。なのでうまく回ってましたね。
「Googleの期待を大きく超えるものを作ろう」という明確な目標を達成するために個々人が精一杯動いている、ということが大前提になっていれば、いろいろな制約がでてきても「その制約の中で、どうすれば最高のものが作れるか？」という考えに綺麗に考えがスイッチできるそう。
確かに、そこでうじうじしていてもどうしようもないですもんね。
たとえば、8万枚の画像が最初から表示されていた方が綺麗だとは思ったんですが、それは現実的ではないですよね。
それを解決するために、最初は半透明のブロックが浮かんでいるだけで、距離が近くなったらふわっと画像が出てくる、という今の見せ方になっています。正直、苦肉の策だったんですが、ただ実際やってみるとかなり上手くハマりました。
Vision Explorerの画面。画像が表示されている部分と、半透明のブロックが表示されている部分に分かれている
あの見せ方にはそんな背景があったんですね。制約があったことで結果的にうまくいった……なんてこともよく聞きますが、実はプロジェクトで大事なところは今回のように制約条件をポジティブに捉えられるか、ということなのかもしれません。
プロジェクト全体で何を目指しているのか？という指針さえあっていれば、ある程度の制約があってもちゃんと一つの方向を向いて建設的にいいプロダクトが生み出せる。
頭ではわかっているつもりでもなかなかできないのも正直なところ。さっきから耳が痛い……。
他の人の仕事を心配したところで何も生まれない。スゴイやつと思い込んだ方がいい
―すごい信頼感ですよね。お互いの言ったこと・作ったものをそのまま受け入れるって難しい気もするのですが、なんでそれができているんだと思いますか？
実はこのメンバーでプロジェクトをやるのは初めてだったんです。もちろんリファレンスとかを見て、どういうモノを作ってきたのかは見たんですが、個人的に大事だなあと思うのは「相手を過大評価すること」です。
わかる。他の人の仕事を心配したところで僕らが何かできるようになるわけじゃないしね。
自分のドメインがしっかり決まっていて、その部分については個々人が決定権をもっていれば、そこまでぶつかることってないよね。
そうだね。たとえば、僕は3Dは作れるけど、なんというかアーティスティックな感じではないから、そこはできる人に任せて。
相手のことを信頼して、自分のやるべきことに集中した結果すごくいいものができたよね。
「過大評価」ですか。。
そういったマインドが持てるのは、個々人のいつものアウトプットが高いというのももちろんあるとは思うんですが、初めて仕事をする相手に対して自然とそれができる……。
うーん、言うは易し行うは難し。ではありますが、うまくチームを回すにはそうあるべきなんですよね。楽しそうに当時の話をする3人を見て、本当に強い信頼感で結ばれているんだろうなあ、と感じました。
ビジョンがないとメンバーはちゃんと動けない
インタビューも終わりに差し掛かったころ、堺さんは改めてビジョンの重要性についてこんなことをおっしゃっていました。
企業でもビジョンが必要じゃないですか。所属するひとりひとりはそのビジョンにあってるかどうかで行動するわけなんで。
チームも言ってしまえば小さい企業なんで、そこにビジョンがないとちゃんと動けないんですよ。
むしろビジョンがバシッと決まっていれば、そこまでマネージって意識する必要がないんです。
2週間という短期間で世界を驚かせるプロダクトを作ってしまったreactiveのみなさん。
もちろん個々人のスキルが非常に高いということもありますが、根本は「当たり前のことを当たり前にやった」ということに尽きるかと。
チームで一貫していたのは、
- デザインにしてもプロジェクトにしても、最終目標とする体験やビジョンをドシッと決める。
- それと照らし合わせて自分の行動・アウトプットのOK/NGを判断する。
という目的思考で結論ベースの仕事の進め方でした。
これから僕ももっともっと意識して働かないとな……。
玉木さん、堺さん、ニックさん、お忙しい中ありがとうございました！
