Keynoteプロトタイピングの効率的な取り入れ方

前回の記事で、アプリデザイン効率化のためのツールのご紹介をさせていただきましたが、VASILYではその他にもKeynoteによるプロトタイピングを取り入れています。

プロトタイピングを効率的に進めるにあたって、どの段階でどのツールを取り入れるかはとても重要な判断になってきます。

Keynoteによるプロトタイピングは導入コストが低いこともあり、話題にあがっているひとつでもあるので試してみたところ、やはりメリットデメリットはありますが、取り入れる段階によってはとても効率的なツールの一つでした。
今回は、実際VASILYではKeynoteによるプロトタイピングをどういう過程で取り入れてみたかを(失敗も含めて...)ご紹介をしたいと思います。

1.企画段階はペーパープロトタイピングから

まずはじめにVASILYではどのように進めているかというと、
アプリの改善を進める場合以下のような段階に分かれます。

デザイナーは要件定義の段階から加わって、KPIの設定や要素の洗い出しもエンジニアやハスラーとともに進めていき、プロジェクトメンバー内の共通意識や方向性にズレが無いようにプロトタイピングによるアウトプットで可視化していきます。

要件定義→アイディア拡散&収束→設計まではとにかくスピード重視で素早く回していくので、ペーパープロトタイピングでの簡単なラフから始まり、要素や遷移、使用感などを確認するときはInvisionなどのツールを使っています。

2.設計から実装依頼までのコミュニケーション

問題は、その先の設計から実装までのコミュニケーションをどううまく回していくかが、デザイナーにとっての一番の肝です。
ペーパープロトタイピングだけではなく実際にビジュアルに起こし、意図やニュアンス、動きを表現し伝えていかなければなりません。

Keynoteによるプロトタイピングを取り入れることで、エンジニアやテストユーザー、プロジェクトメンバー全員が、より分かりやすい形で、企画やデザインの意図を理解してもらえるのではと思い立ったのがきっかけで、まず以下のようなかたちで実際に取り入れてみました。

3.Keynoteを3つのフェーズでとりいれてみた

①設計フェーズ:全体の流れを把握してもらうためメンバーに共有する(対 プロジェクトメンバー)

-状況
チュートリアルの改善プロジェクト。ペーパープロトだけでなく、伝わりづらい部分もあるのでKeynoteを使って全体の流れや動きを共有したい

-作成したプロトタイピング

-結果

×


Keynoteでは端末でのインタラクションは適用されず、決められた動きしか見せることが出来ません。手描きラフで別途遷移の説明が必要になるほどの伝わりづらさだったので、設計フェーズでのKeynoteプロトタイピングの導入はあまり効果的とは言えませんでした。
このフェーズだと、メンバーからフィードバックをいただき、更なる修正も加わる場合が多いので、ことさらペーパープロトタイピングでスピード感もって回していく方が最適だと思われます。

 

②ユーザーヒアリングフェーズ:テストユーザーに実際の動きや流れを見てもらう(対 テストユーザー)

-状況
同じくチュートリアルの改善プロジェクト。実際に使ってもらうユーザーなので、よりニュアンスの伝わるもので試してもらいたい

-作成したプロトタイピングは①と同様

-結果


実際の端末で確認が出来て、より明確な指摘をもらえたことに対しては○と言えますが、やはり②と同様、決められた動きしか見せられないことや、説明を交えながら何度も繰り返し見てもらわないと状況が把握できずで、テストユーザーにとってかなりのストレスであったと言えます。
テストユーザーに触ってもらうには、ビジュアルを作成しInvisionで遷移確認のためのモックを作成するか、インタラクション型プロトタイプをつくれるPixateFramerなどの方が完成度高いので、より良質なフィードバックをもらえると思います。(後者はデザイナーにとってはかなり習得コストかかりますが...)

 

③実装フェーズ:画面スクロール時のアニメーションをエンジニアに伝える

-状況
ある画面のデザインは完成したが、複雑な動きが存在するのでエンジニアにアニメーション実装を依頼したい

-作成したプロトタイピング

-結果


今までは、デザイナーが「スクロール時にユーザー情報がウィーンって左上に縮小して、タブもある一定の場所でFIXしつつ、タブ以下の情報はスルスル潜り込みながらスクロールしていく」というような擬態語で表現したり、類似したアプリを参考に身振り手振り伝えても伝わりきれなかった動きが、一瞬でエンジニアに理解してもらえました。

デザイナーもエンジニアにとっても完成図を共有しやすく意図が伝わりやすいので、普段の指示書とデザインデータにプラスして少しのひと手間加えてあげることで、実装スピードが一段と上がります。

 

まとめ

今回は、Keynoteプロトタイピングの効率的な取り入れ方を、事例を含めて紹介しました。 まとめると、

Keynoteプロトタイピングが一番活躍するのは実装フェーズ

②一定の動きしか見せられないので、遷移や使用感をテストするには不向き

③ペーパープロト+Keynoteプロトのセットでよりスピード感ある開発を実現できる

という結果になり、開発の最終段階でコミュニケーションを円滑にする一つの手段として取り入れるにはとてもおすすめのツールでした。

ツールが色々あるのは知っているけれども、実際取り入れてみるとなるとどこでどう使ったら良いのかと模索状態でしたが、失敗することで課題も見えて次に試す術が見つかるので、様々なツールを試す価値は存分にあると思います。

デザイナーの役割によって、アプリ開発でのスピードは段違いに変わるので、もちろん個々人の経験やコミュニケーション力、知識力の差で変わることもありますが、その差を補うためにもツールを積極的に取り入れていくことはデザイナーとしての成長を加速させる一つになります。
VASILYでもまだまだ模索段階なので、一緒により良い開発の進め方を研究していける方を募集していますので、以下よりご応募お待ちしております。

https://www.wantedly.com/projects/5485

連絡先:info at vasily.jp