[&] #uicrunch 3 - Keynote Prototyping

#uicrunch 3
チーム開発における Keynote を使ったプロトタイピング／元山和之さん

実際に作る上での手法的、ツール的な話しをします。
実際にやってみるとどうなんだろう？
メリットデメリットを含めてお話しします。

仕事としては、 cookpad のメインのアプリを設計、エンジニアリングを
見ています。最近は iOS のリニューアルに携わっています。
エンジニアと協力してフレームワーク化し、その後のプロトにも使えるもの、
Cookpad で使えるシンボルタイポを作ったりしました。

新しいアプリを発表したかったのですが、リジェクトされてしまい.....

●プロトタイピングとは？

製品やサービスを作るまえに早期に完成形に近い試作品を作って、
問題点を検証したり、精度を高めたりする手法やそのプロセス。
目的は時間とコストの削減。
ユーザーから理解をもらえるようにする。
どこからフィードバックを得るかで、プロトの作り方も変わる。

●プロトタイピングの利点

思考／共有／検証の 3つがある。

思考：実際にスケッチをしたり、アウトプットしますが、
アウトプットしたものを客観視することで、
自分の中で思考を繰り返しブラッシュアップする。

共有：体験や価値を伝えたりコミュニケーションするためのツール

検証：作って満足するだけでなく、ユーザーを理解するためのツール

●Keynote を使ったプロトタイピング

1.誰でも使えるツール
2. より円滑にイメージを伝える（トランジション、アニメーション）
3. インタラクティブな動作を作ることができる

●1. 誰でも使えるツール
cookpad では、120人開発者がいますが、
そのうちデザイナーは 10人くらい。
結構カツカツです。
職種にかかわらず、UI/UX や、システム設計は考えながらやっています。
全員が専門家になる必要は無いが、考える姿勢は必要かと思っています。
ただ、きちんとしたスケッチを書くには以外と訓練が必要で、
ラフスケッチは雑に書くのとは違う。
他人がボタンと認識できないようあなヘタさであれば使えない。

グラフィックツール、Photoshop を使いこなせというのは難しい。
Keynote だと誰でも使えるし、新しく覚えなくてもいいし、
作り込みすぎないというのも良い点。

●Keynote でスケッチする
書類の設定から、スライドのサイズを変更します。
ここから、シェイプやテキスト、画像をおいていきます。
これだけでアプリっぽい画面ができます。
マスクで丸画像を作ったり、
シンボルフォントを読み込んでおけば、簡単にアプリっぽくなります。

●より円滑にイメージを伝える。
画面がどう動くんだろうという細かい部分は伝えにくい。
実際に動くもので伝えた方が伝えやすい。
トランジションやアニメーションエフェクトを追加できる。

画面を何枚か用意して、
エフェクトで Move in で秒数を減らして、下から上に移動すれば、モーダルが表現できます。

左下を押すとレシピの履歴が出てくるものがありますが、
最初は超過で暗いマスクは無しにして、
終わりと初めの画面を二つ作っておいて、magic move を選び、秒数を減らすと、
細かいトランジションも簡単に作れます。

こうしたい！と言うだけでは伝わらないので、
すんなり伝わることができるんじゃないかと。

●検証のためのインタラクション
ボタン押したら動くみたいな表現がしたいですよね。
Keynote はプレゼンツールなので、
このボタンをおしたら、これが動くとか、
それは Keynote でも可能で。

クリッカブルの領域を置いて、図形を置いて、そこにリンクをつける。
リンクをつけるときに、どのスライドに飛ぶのか指定でき、
クリッカブルの領域を透明にすると、簡単にできます。

●まとめ
デザイナーでなくても使え、実際に使うイメージが検証できます。
欠点もあり、画面遷移やインタラクションを複雑に作り込むのは難しい。
デバイスなど手元で確認するのにもう居ているとは言えない。
インタラクティブな PDF も考えましたが、うまくいきませんでした。
全てキーノートでヤル必要は無いかなと思っていて、

他にも誰でも使えるもので、
prott っていうのがありますよね（笑
細かいアニメーションは prott だけでは難しいので、
keynote と使い分けすると効果的なのかな... と。

WWDC でも同じプレゼンが行われていて。
Prototyping :Fake it till you make it.

https://developer.apple.com/videos/wwdc/2014/#223


(グラフィックレコーディングは、和波さんによるものです！）