UI Crunch Vol.03「今、プロトタイピング開発に求められること」レポート
先日、ヒカリエで第三回目のUI Crunchが開催されました！
今回のテーマは「今、プロトタイピング開発に求められること」です。前回と同じくライトニングトークとパネルディスカッションが行なわれました。UI Crunchの公式ホームページはこちらをご覧ください。
【過去記事】
【DeNA×Goodpatch】 UIデザインを本気で追求するコミュニティ『UI Crunch』が始動！
目次
スタート！
会場はヒカリエ内にあるさくらカフェです。今回もすぐに満席となりたくさんの方々にお越しいただきました！
とりあえず…乾杯！
ライトニングトーク
プロトタイピングをテーマに4名によるライトニングトークが行われました。
- 「Prott Story」土屋 尚史（Goodpatch）
- 「チーム開発におけるKeynoteを使ったプロトタイピング」元山 和之（COOKPAD）
- 「プロトタイピングの助走と飛躍」吉竹 遼（Standard）
- 「プロトタイピングにおける段階」村越 悟（グリー）
1.チーム開発におけるKeynoteを使ったプロトタイピング(Cookpad 元山 和之さん)
Keynoteはスライドを作成するツールですが、プロトタイプにもぴったりのツールだそうです。実際にデモを行いながら具体的にどうやって作るかについてお話していただきました。
【要約メモ】
①プロトタイプの利点
⑴思考：アウトプットしたものを客観視することでユーザー視点の評価ができるため、自分の中で思考を深めることができる
⑵共有：簡単にイメージを形にできるため体験や価値をメンバー内に共有することができる
⑶検証：テストをすることによってユーザーを理解する
②keynoteが向いている理由
⑴デザイナーでなくても簡単に使えるツールである
⑵トランジションやアニメーションを簡単につけることができるため、言葉では伝わらない部分を補うことができる
⑶インタラクションの検証ができる
③keynoteでのプロトタイプの使い方
⑴スライドのサイズをスマホの画面サイズに変更し、パーツの画像を配置する
⑵トランジションを指定してアニメーションをつくる。マジックムーブを使用すると画面間でのパーツの変化をつくることができる
⑶リンク範囲を指定して、スクリーン同士の遷移をつける
ただし、Keynoteはプロトタイプをつくるためのツールではないため複雑な画面遷移や実機での確認には向いていないようです。
Cookpadでは、あくまで細かいインタラクションを検証するプロトタイプとしてKeynoteを使用し、全体を確認するプロトタイプにはProttを使用しているそうです。
２.プロトタイピングの助走と飛躍 (Standard 吉竹 遼さん)
吉竹さんが語るのは、いまとこれからのプロトタイピングの心構えでです。現在、試行錯誤を繰り返す上で注意すべきことから、「そもそも私たちがデザインしているのは何か」という深い問いについてまで
広くお話していただきました。
【要約メモ】
①プロトタイピングの助走(いま)
⑴プロトタイプとは試行錯誤である
⑵ワークフローの中には様々な試行錯誤がある。勇気を持って試行錯誤をしよう
⑶適材適所で人を配置し、実行し続けるプロトタイピングを心がける
②プロトタイピングの飛躍(これから)
⑴私たちがデザインしているのは体験・物語であり、Webデザイナーやディレクターといった肩書きによるしばりは薄まっていく
⑵Webやアプリは体験や物語を伝えるためのインターフェースのひとつにすぎない
⑶デザインするモノは変わっても人が主体であることは変わらない。人間への興味を持ち続けることが重要
デザインの対象が移り変わっても、私たちがすべきことは人の体験や物語をデザインすることである。というのは、とても大事な考え方だと思いました。トークの中で紹介されていた「Subject To Change ―予測不可能な世界で最高の製品とサービスを作る」も是非読んでみてください。
3.プロトタイピングにおける段階 (グリー 村越 悟さん)
村越さんは、実際のグリーでのワークフローを、チーム形成時に生じる三段階のズレに分けてお話してくださいました。各段階のズレにおけるプロトタイピングの活用の仕方はとても参考になります。
【要約メモ】
①紙とペンでプロトタイピング（個々のイメージのずれ）
インタラクティブな要素が強いゲームはオノマトペが多く、イメージを言葉で伝えるのが難しいため、絵として紙に書き出すことで定着させる。
⑴言葉から連想される個々のイメージを紙に書き出して比較して議論
⑵Prottにあげてお互いにレビューし合う
これを全員で行い、デザインに参加する意識をもってもらうことででチーム形成時のずれを解消させる
②Sketch、Prottでプロトタイピング（要件、認識のずれ）
制作するアプリが何画面で、どのくらいの遷移があるのかを可視化させる。
⑴Sketchでスクリーンを作成し、画面を並べる
⑵Prottでみんなでレビュー
⑶ユーザーテストを行い出た課題をその場で改善しながら
全員で中間成果物を共有し要件に抜け漏れがないか確認する
③Unityでプロトタイピング（全体品質への意識のずれ）
実装プロトタイプで品質を改善する。
⑴Unityを使ってインタラクティブなプロトタイプを作成
⑵ ユーザーテストを行い調整していく
体験価値に対するありかたやプロダクトとしての成長曲線を辿っているかをチームで共有する。
チームが馴染んでいないときはペーパープロトタイピングから始めるなど、チームの成熟度に応じてどのプロトタイピングを取り入れるかを決めるそうです。
Prottを使って個々のイメージをレビューし合うという使いかたは、Goodpatchでも是非取り入れたいです。
4.Prott Story Goodpatch 土屋 尚史
最後に、弊社土屋が語ったのはProttができるまでのストーリーです。社内でも普段聞くことのない初期の失敗談や、裏話が繰り広げられました。
【要約メモ】
①プロトタイピングを導入して変わったこと
⑴設計時点から動かしながら考えることができる
⑵デザイナーが動きや遷移、ストーリーを動かせる事によって想像しやすくなった
⑶クライアントや開発エンジニアとのコミュニケーション意思疎通が劇的に改善
受託案件をするなかで、海外のプロトタイピングツールを取り入れたことにより社内のデザインプロセスが大きく変わりProttを作るきっかけとなった。
③Prottのユーザーとの付き合い方
⑴ユーザーからのお問い合わせはすぐに返信する
⑵週一でイテレーションMTGを行いユーザーの声をチーム内共有する
⑶月に一回ユーザーミートアップを行い、ユーザーの生の声を聞く
③Prottに今後追加される体験
⑴ワイヤーフレームをつくる
⑵ひとつのリンク範囲に複数のジェスチャー
⑶PSD、Sketch連携
大赤字をだしながらもProttを作っている理由は、日本のデザインプロセスにプロトタイプを浸透させ、素晴らしいプロダクトをより多く生み出せる土壌をつくりたいという思いがあるからこそ。是非みなさんにもProttを使ってユーザーに求められるプロダクトを生み出していってください！
パネルディスカッション
パネルディスカッションではモデレーターして、DeNAの坪田 朋さんが加わり、各社で実際にどのようにプロトタイピングをしているのかなどについて話していただきました。プロトタイプを導入して変わったことや、独自のプロトタイピングツールの使い方など、日々の業務のヒントが多くちりばめられています。
懇親会
料理もたくさん！
参加できなかった方もSchoo でアーカイブを見ることができます！
開催については、Twitter
やFacebookグループでお知らせしています。毎回30分ほどで席が埋まってしまうので、参加したい方は是非チェックしてください！