正しくKeynoteでプロトタイプを作るコツ

09より最新版を

ChatWorkの社内勉強会で、Keynote をプロトタイプ制作に使う方法を共有したことがあります。コード不要な点と、共有が比較的しやすいのでオススメしています。しかし、他のプロトタイプツールと同様、得意・不得意をしっかり理解していないと時間がかかるだけで無意味な作業になることがあります。

古くから Keynote を使っている方は Keynote 09 を好む方がいます。最新版に比べて UI が分かりやすく分類されていたり、AppleScript のサポートが充実していることから、今でも使っている方がいると思います（私も講演時は 09 を使うことがあります）。ただ、プロトタイプを作る際は必ず最新版を使うようにしています。最新版のほうが優れているのは以下の4点です。

0.01秒単位で微調整が可能

Keynote 09 では、スライドショーを再生しなければアニメーションを見ることができませんでした。しかし、最新版ではインスペクタパネルにある「プレビュー」ボタンを押すだけで、スライドショーを再生することなくアニメーションを見ることができます。これは、0.1 秒ごと動かして動きを調整したい場合に最適で、数字を動かしながら徐々に好みの動きを作り上げることができます。

増えたアニメーション

過剰にアニメーションを付け加えるのは良くありませんが、iOS で実装可能な動きは再現したいところ。Keynote は iOS と同様、Core Animation を利用したアニメーションを適応できることから、手軽に iOS アプリっぽさを再現することができます。09 でも豊富なアニメーションがありましたが、最新版では「点滅」や「（アクションとしての）ポップ」といった UI のちょっとした演出や、ユーザーに情報を伝えるときに便利なアクションが追加されています。

安定したマジックムーブ

プロトタイプ制作において必須機能といえる「マジックムーブ」。2枚のスライドを比較して、その差分をアニメーションで埋めてくれる機能です。これは前バージョンからあった機能ですが、うまくいかないことがあり、信頼できる機能とはいえませんでした。最新版ではマジックムーブが安定しただけでなく、オブジェクトやテキストのモーフィングもできるようになりました。

均等配置の改善

Keynote 09 からスマートガイドがあるので、複数のオブジェクトを整列させることができました。しかし、すべての調整をマウスで行う必要があるだけでなく、オブジェクトが多くなるとスナップするタイミングが増えて操作が難しくなることがありました。最新版ではオブジェクトの均等配置と整列がひとつの操作でできるようになりました。

検証ツールとして利用

設計の早期からアニメーションを加えた全体の印象や画面遷移を検証する方法として Keynote は優れていますが、万能とは言えません。以下のことを注意して Keynote の良さを活かせるタイミングで使ってみてください。

デザインが細部まで決まっていないとき

まずは操作感や動きを見てみたいというときに Keynote は非常に便利です。あらかじめアプリ向けのステンシルや無難なアイコンセットを Keynote テンプレートとして保存しておけば、手描きよりリアルなデザインを素早く共有することができます。手描きやペーパープロトタイプでは「分からない」と言っているひとでも Keynote で作ったものは「よく分かる」と納得してくれることもあります。

用意してあるUIステンシルの一部
Keynote上で色を変えることができます。

すべてのパーツを Keynote 上である程度作れば早いのですが、Photoshop や Sketch で作ったパーツを動かすとなると効率が悪いです。自動的にパーツが更新されるわけではないので「書き出し → 貼付け」を繰り替えすことになりますし、パーツによっては適応できないエフェクトもあります。ビジュアルデザインに入る前の検証ツールと捉えたほうが良いかもしれません。

特定のシナリオを決めて検証

小さめのアプリケーションであれば、ひとつの Keynote ファイルですべての画面遷移を再現することができます。豊富にあるスライドのリンク追加機能を活用すれば、スライダー、タブ、スクロール、戻るといったアプリにある一連の操作を再現することができますし、ユーザーに実際使ってもらうこともできます。

できればひとつの Keynote ファイルにまとめておきたいですが、新しい画面や、操作を加えることで複雑になりがちです。早く作るためのプロトタイプが、プロトタイプを管理するために時間が奪われては意味がありません。そこで、「会員登録」「ウォークスルー」などユーザーが出くわすシナリオをひとつ絞ってプロトタイプを作ることをオススメします。何のために作っているのかが明確になるだけでなく、設計と評価のサイクルも小さくまとめることができます。

パソコン上で多くの方と共有したいとき

Keynote には iPhone アプリ がありますが、Keynote で作ったプロトタイプを理想的なかたちでプレビューすることができません。AirPlay を活用できると良いのですが、2014 年 10 月現在では難しいようです。iOS アプリを設計しているのに、実機で見れないというのは致命的ではありますが、使うタイミングによると思っています。

リモートも含め、複数人でデザインをチェックする際、小さなモバイルデバイスで見るより大きめなスクリーンで見た方が共有しやすいことがあります。微調整であれば Keynote 上で即座にできるので、その場で出た意見をすぐに反映できるのも魅力です。Keynote にある「発表者ノート」に画面の説明を書いておけば、PDF に書き出して即席資料を作ることもできます。