最新情報をお届けします！
サービスやプロダクトのデザインの過程でプロトタイピングを用いることは多い。しかし、その活用方法はひとつではない。「Retty」「CROSS ME」「クックパッド」「Yahoo! ニュース」といった名だたるサービスのUI/UXに、プロトタイピングはどのように貢献しているのだろうか。
UXのつくり手たちが相互に影響を与え合える場「UX生トーク」。
2016年12月9日（金）に行われた第５弾では「プロトタイピングを振り返る」をテーマに４人のデザイナーが登壇した。
彼らが手がけるのは「Retty」「CROSS ME」「クックパッド」「Yahoo! ニュース」と、Web業界の人間なら一度は名前を聞いたことがあるサービスばかり。多くのユーザーの人気を集めるサービスのUI/UXにプロトタイピングはどのように活用されているのだろうか。
［登壇者］
近藤 雄亮（Retty株式会社/UX Lead・Designer）
関 愛奈（株式会社サイバーエージェント/デザイナー）
倉光 美和（クックパッド株式会社/デザイナー）
宇野 雄（ヤフー株式会社/ニュース・スポーツ事業本部 デザイン部 部長）
近藤 雄亮（Retty株式会社/UX Lead・Designer）
Web制作会社にて大手企業の広告プロモーションのデザイン・アートディレクションを担当。食を通じて人々を幸せにしたいと考え、大手老舗グルメサイトに転職。メインデザイナーとして新規サービスやスマートフォンサイトのUI・UX開発などに従事。2014年Rettyに参画。世界中の人々に新しい食の体験を届けるサービス開発を目指す。
［使用ツール］
・prott
はじめに登壇したのは実名グルメサービス「Retty」のデザイナー、近藤雄亮さん。近藤さんは、プロトタイピングとは「作っては壊すこと」の反復作業だという。
「ものづくりにおける理想のプロセスは、スタートからゴールまで一直線に進むことだと思います。でも、実際の現場ではそんな簡単にはいかない。ゴールへの最適なルートから外れてしまったものは、そのたびに壊すことが大切です」
とはいえ、作るのは容易く壊すのは難しいのがものづくりの本質。つくり手でありデザイナーはなおさら、作ったものを壊すのには抵抗があるだろう。そこで近藤さんは、壊すための判断基準を設けておくことが必要だと語る。
１：ゴールを明確にすること
「ゴールの定義を明確にすることで、進むべき道をぶらすことなく壊すものを判断できます。ゴールの輪郭は、それを言語化するのはもちろん、数字やグラフなどいろいろな方法で示すことでよりはっきりしてきます」
２：制限を徐々に強めていくこと
「アイデアの可能性を最大限活かすことで、ゴールまでの最短距離を進めることがあります。はじめはあまり制限を設けずに、さまざまなアイデアに挑戦してみる方がいいでしょう。そうすることで、本当に必要な要素や最適な解が見えてきて、壊す基準が明確になります」
３：中間ゴールを設定すること
「最終的なゴールだけでなく、途中の道しるべのようなものを設定しておくと、具体的な目標が立てやすくなります。また、道から外れているかどうかの判断もしやすくなるんです」
実際に、これまで多くのものを作っては壊してきたという近藤さん。その過程でプロトタイピングは絶大な価値を発揮するという。
「サービスのコアな部分はぶらさないにしても、その表現方法はさまざまです。いろいろなパターンを試してみなければ最適な解は見つかりません。壊すことを前提としたプロトタイピングがゴールを達成するための最適な道筋を示してくれるんです」
プロトタイピングによって「作っては壊す」を繰り返した結果、APIやtableを変更する大幅な改修が最適という答えにたどり着いたことがあったが、はじめから壊す前提で作っていたためエンジニアからの反発もなかったそうだ。デザイナーだけでなくチームの全員が壊す勇気を持つことが、プロトタイピングを用いた開発には重要な要素なのだろう。
「ものづくりの過程に正解はないと思います。プロダクトや機能の数だけやり方がある。ただ、一直線でゴールにたどり着けるような方法論はありません。だからこそ、壊す勇気をもつことが必要です。黒澤明の言葉で『一番の名作はネクストワン』というものがありますが、ものづくりに”完璧”はありません。だから次につくるものが一番良いものなんです。そう思うと壊すことが楽しくなってきませんか？ 壊すことが楽しくなれば、作ることはもっと楽しくなると思います」
関 愛奈（株式会社サイバーエージェント/デザイナー）
2015年キャリア採用で入社。 Web制作会社にてキャンペーンサイトや大規模コーポレートサイト等幅広い案件にデザイナーとして携わる。自社サービスのデザイン業務に興味を持ち、サイバーエージェントに転職。メディア運用やAmeba Owndなどのプロジェクトに従事した後、子会社の株式会社プレイモーションにて、マッチングアプリ『CROSS ME』のUIデザインを担当。
［使用ツール］
・Pixate
・Marvel
次に登壇した関愛奈さんは、今回取り上げられたなかで一番新しいサービスであるマッチングアプリ「CROSS ME」のUIデザインを手がけている。新規サービスの開発において、プロトタイピングはチームのコミュニケーションツールとして、意思や情報を伝えるのに非常に役に立ったのだという。
「たとえば、異性の情報が書かれたカードをスワイプするときのUIを静止画で説明しようとすると、カードが重なった画像と少しズレた画像の２枚を提示して、その間にある空白を仕様書や口頭で補足する必要があります。でも、それでも完全とは言えません。そうすると、チームメンバーが各々の解釈で補完してしまうので、完成イメージにズレが出てしまうんです」
たしかに細かいアニメーションについて口頭で説明するのはなかなか骨が折れそうだ。まして説明される側は非デザイナーであることが多い。必要なのはそのUIがユーザーにとって”いい”のか”悪い”のかという見極めなのに、考察するうえでのスタートラインがバラバラでは、正しい判断ができるわけがない。
「賛否が分かれていた機能を実際にプロトタイプに落とし込んだら、チーム全体から高評価を得て実装に至ったケースもあります。それだけ、個人のイメージにはばらつきがあるということでしょう」
エンジニアとのやりとりも、実際にプロトタイプを動かしながら行うことで効率が格段によくなるという。言語化が難しい部分をプロトタイピングによって表現していくことが、チームのコミュニケーションの質を高めることにつながるようだ。また、実際にプロトタイプを触ってみることで、ユーザー視点に近づけるというメリットもある。
しかし、プロトタイピングによって非デザイナーがUX設計に深く関与できるようになると、意思決定が遅くなることはないのだろうか。そこで関さんは、チームメンバーに３つの判断基準を提示したという。
１：サービスのコンセプトに合っているかどうか
２：複雑でわかりにくいUIになっていないかどうか
３：どんな場所や時間帯でも使いやすいかどうか
３つ目の「どんな場所や時間帯でも使いやすいかどうか」は意外と見落とし安いポイントかもしれない。関さんはメンバーに、プロトタイプを使うとき、場所や時間を変えてなるべく多様な環境で試してもらうよう呼びかけているそうだ。そしてメンバーからのフィードバックをもとにプロトタイプをさらにブラッシュアップさせていく。その過程で、どの意見を採用すべきがどうかも自ずと見えてくるのだという。
「プロトタイピングはとても優秀なコミュニケーションツールです。チームのコミュニケーションの質を高めるために活用すれば、より良いプロダクトが作れるようになるはずです」
倉光 美和（クックパッド株式会社/デザイナー）
家庭用ゲーム業界でゲームのUIデザインを経て、2015年にクックパッドへ入社。現在は検索事業部でiOS/Android アプリの開発・改善を手がける。人間中心設計推進機構認定 人間中心設計専門家。
［使用ツール］
・sketch
・Flinto for Mac
3番目に登壇した倉光美和さんは、日本最大の料理レシピサービス「クックパッド」のアプリのUIデザイン/UXデザインを主に担当している。倉光さんは2016年のプロトタイピングを振り返ると「広める」「深める」という2つの視点からのアプローチがあったと話す。
まず「広める」という側面において、ディレクターやエンジニアでもUXをふまえたプロダクト提案ができるようなプロトタイピングを実施したという。
「サービスデザインにおけるプロトタイピングでは、はじめに最短の時間かつ最小の労力で最多のアイデアを引き出すようにしています」
倉光さんが考案したプロトタイピングの方法では、いわゆる「プロトタイピングツール」は使用しない。そもそもパソコンすら必要ではない。使うのはふせんと黒いペンだけ。長方形ふせんをスマートフォンの画面に見立てて、デザインを書き込んでいくというアナログなプロトタイピングだ。この方法なら、プロトタイピングツールの習熟度に関わらず容易にデザインのアイデアを提案することができる。デザイナーにとっても、もっとも高速でできるプロトタイピングの方法かもしれない。
「壁やホワイトボードに貼って遷移図を作成したり、大きさの違うふせんを使ってポップアップを表現したり、とにかく便利です。職種に関わらず同じツールを使えるので、チーム全体でイメージを共有したり方針を定めたりするのに役立ちます」
実際にこの方法を社内に広めたところ、ディレクターやエンジニア、学生インターン、海外拠点メンバーまで多くの社員が実践しているという。
プロトタイピングの「広める」という視点では、一連の体験を俯瞰して見ることも重要だという。
「実際にレシピを探して料理を作る前後の体験までデザインの対象範囲を広げるようにしています。ただ、先に理想の体験を定義してしまうと、プロダクトの現状とギャップがあってなかなか実現までこぎつけられなかったり、ユーザーの感情を数値に落とし込むのが難しいため、リリース後に効果が測りづらかったりするという問題点がありました」
そこで「Mixpanel」という分析ツールを使っていたことからヒントを受け、「ファネル分析(ユーザーが目的を達成するまでの各アクションでどこで離脱しているかを確認する方法)」にユーザーストーリーと想定し得る離脱理由を図解で書き出していくようにした。すると、ユーザーがレシピを探すとき、どんなストーリーや感情をもっているのか、整理できるようになった。これも一種のプロトタイピングの方法ととらえると、定量調査との親和性も期待できそうだ。
またもう一つの「深める」という視点では、プロトタイピングツールを利用し、アプリで新しいUIをデザインする時にトランジションのアイデアをいくつも作り、実際に操作してみるアプローチを実施した。プロトタイプを通してアプリの触り心地を実際に試すことができるので、よりユーザー視点にたった本質的な検証ができるのだ。
また料理をする人といっても、性別や年齢、ライフスタイルなど、ユーザーの属性によって、体験はまったく違うものになる。プロトタイプを実際にユーザーに使ってもらうことで、より深い部分に迫ったUXの実現に近づくのだという。
宇野 雄（ヤフー株式会社/ニュース・スポーツ事業本部 デザイン部 部長）
Yahoo!ニュースのデザイン責任者／プロダクトマネージャー。ひたすらUIとUXを磨きこむことに喜びを感じるUIオタク。全く新しいモノづくりよりも、既にあるモノを新しい視点でとらえるデザインが好き。犬派。
［使用ツール］
・prott
・Origami Studio
最後に登壇したのは、月間150億PVという途方もない数字を叩き出すサービスYahoo!ニュースのデザイン責任者である宇野雄さん。UIの変更でPVが1％が落ち込むだけで1.5億PVを失うという稀有なサービスにおいて、プロトタイピングはどのような価値を発揮するのだろうか。
「プロトタイピング自体は定性的な部分が大きいので、PVに直接的な関係があるわけではありません。ただ、大規模サービスがゆえに” フルリニューアルは行わない””マイナーチェンジで対応する”という基本スタンスがあるので、プロトタイピングの活用は必要不可欠です」
規模が大きいサービスだからこそ、些細なアップデートにも細心の注意を払わなければならない。プロトタイプを使ったUIデザインと定性調査はそのリスクヘッジに最適なのだという。
さらに宇野さんは、プロトタイピングのメリットとして下記の2点を挙げた。
１：抽象的な表現をなくすことができる
「”シュッ”とか”パッ”とか、アニメーションを言語化しようとすると抽象的な表現になることが多いんです。すると情報の伝達に大きなコストがかかってしまう。プロトタイピングによって実際に動く画面を見せてしまえば、効率的に情報を共有することができます」
２：認識のすれ違いを減らすことができる
「パーツやモーションの呼び方は使用するアプリやOSなどによって異なり、人によって表現が違うことが多々あります。認識のズレが起こらないようにするには、プロトタイピングで作られた実際の画面を共有することで個人間の呼び方などの差異を減らすことができます」
３：実際に作ってみることができる
「頭のなかで“カッコいい！”と思っていたものが、実際つくってみると”ダサい””違和感がある”ということはよくあります。もちろんまた逆も然り。プロトタイピングを通してより良い機能やプロダクトを模索することができます」
宇野さんはプロトタイピングの価値を認めつつ、一方で固執しすぎてはならないという。なぜなら、プロトタイピングはあくまで手段であって目的ではないからだ。
「プロトタイピングはあくまでゴールに最短距離で向かうための手段です。作り込み過ぎたり、作ったものに執着したりするのは禁物。壊すことにもツールを変えることにも柔軟に対応するのが大切です」
実際、宇野さんが作ったプロトタイプを新卒の社員の意見で壊すことが当たり前のようにあるという。チーム全体でプロトタイプに固執しすぎない空気をつくることも、プロトタイピングの真の価値を発揮するのに必要な要素かもしれない。
また、社内ではマネジメントの立場を担う宇野さんから若手デザイナーに向けてメッセージがあった。
「デザイナーにとって一番大切なのは夢を語ることです。”こんなデザインを作りたい””こんな演出をしてみたい”と夢を膨らませてください。もちろん、ビジネスはそれだけでは成り立ちません。でも夢を語れる人は絶対に強い。社内にKPIを設定しない会議体を作ったのですが、これは夢を語るため。数字を出すことだけでなく、”なんか気持ちいい””なんかカッコいい”という感性も大切にしてください」
（おわり）
文 ＝ 近藤世菜
4月から新社会人となるみなさんに、仕事にとって大切なこと、役立つ体験談などをお届けします。どんなに活躍している人もはじめはみんな新人。新たなスタートラインに立つ時、壁にぶつかったとき、ぜひこれらの記事を参考にしてみてください！
経営者たちの「現在に至るまでの困難＝ハードシングス」をテーマにした連載特集。HARD THINGS STORY（リーダーたちの迷いと決断）と題し、経営者たちが経験したさまざまな壁、困難、そして試練に迫ります。
Notionナシでは生きられない！そんなNotionを愛する人々、チームのケースをお届け。
