2015/7/15開催のセミナーで仕様した資料です。 アプリのUI/UXを検討する上で参考となるプロトタイピングに関するセミナーを行いました。 ・ペーパープロトタイピング ・keynoteを使ったプロトタイピング ・POPを使ってプロトタイプを作る ・Prottを使ってプロトタイプを作る

1. スマートフォンアプリエンジニアのための
最新プロトタイピング講座
2015/7/15 アットビジネスセンター渋谷東口駅前
廣田博之

2. 自己紹介
• 廣田博之（@xxhiro）
• 株式会社ブレスサービス
CCO（Chief Creative Officer）
http://bless-service.co.jp
• WEBデザイン、サーバ構築、アプリ開発を担当

3. 今回の内容
• ペーパープロトタイピング
• keynoteを使ったプロトタイピング
• POPを使ったプロトタイピング
• Prottを使ったプロトタイピング

4. なぜプロトタイプを作るのか
• アプリ作成の早い段階で使い勝手を確認し、手戻り
を防ぐ
• デザインだけのイメージと、実際に動かして感じた
イメージとではギャップがある場合がある
• 第三者からのフィードバックを得られる

5. ペーパープロトタイピング

6. ペーパープロトタイピングのメリット
• ツールなどの専門的な知識が不要
• 打ち合わせの内容をその場で即座に反映できる
• PDCA(計画→実行→検証→修正)のサイクルを高速
に繰り返すことができる

7. テンプレートを使おう
• スマートフォンのフレームが描かれているPDF等を
テンプレートとして印刷して使うと便利！
http://cloud-prototyping.jp/sample/template_20150715.pdf
© Cloud-Prototyping
※グリッド表示されているものを推奨

8. 繰り返し修正する事を前提に
• ペーパープロトタイピングの段階では作り込み過ぎない。
• なんども繰り返し作成し、使い勝手はどうか、仕様の漏れはない
か確認する。

9. ペーパープロトタイピングの応用編
• 大きめのポストイットを使うと便利！
• ダイアログの表示など様な一時的に表示が変わる部
分は別で切り出してパーツを用意しておく
• 動作確認は別のプロトタイピングツールで確認
※後述のPOPの説明で紹介します

10. ペーパープロトタイピングに使える便利道具
• ペーパープロトタイピング・パッド
https://theguild.stores.jp/#!/

11. ペーパープロトタイピングに使える便利道具
• UI Stencil Kit
http://www.uistencils.com/products/iphone-stencil-kit
※海外からの購入となるので、到着まで時間がかかる点には注意

12. ペーパープロトタイピングに使える便利道具
• gramPad（ホワイトボード）
http://www.amazon.co.jp/exec/obidos/ASIN/B00P0I9D5K/
tsumitobats0a-22/ref=nosim/

13. ペーパープロトタイピングに使える
その他の便利道具
• はってはがせるスティックのり
http://www.mmm.co.jp/office/adhesive/gr.html

14. keynoteを使ったプロトタイピング
• スライドショー作成アプリであるkeynoteやパワー
ポイントでもプロトタイプを作る事が出来る！

15. keynoteでのプロトタイピングのメリット
• OS X Mavericksなら無料で利用可能
• 基本図形やネット上にあるフリーのアイコンを並べ
るだけでもプロトタイプが作成可能
• keynoteでも画面遷移は確認できる

16. keynoteでのプロトタイピングの実践例
画面名がわかるように
メモが取れるエリアを
確保しておく
使い回すパーツは
マスタースライドに保存

17. ハイパーリンクの設定
• リンクを設定するパーツを選択し
て右クリックし「リンクを追加」
を選択
• どの画面へ遷移するのかリンク先
を指定
• 「スライドに移動」を選択し、正
しい画面に遷移するかどうかを確
認

18. 動作確認
• こちらのページにサンプルを公開中
http://cloud-prototyping.jp/sample/sample_20150715.key.zip
ハイパーリンクを設定したスライドではマウスポインタが表示される
のでクリックして遷移が確認できます

19. keynoteでのプロトタイピングに使える
アイコンや素材まとめ
• iconfinder
有料無料含め、商用でも利用可能なアイコンが検索可能
https://www.iconfinder.com/

20. keynoteでのプロトタイピングに使える
アイコンや素材まとめ
• Sketchkit
iOSのさまざまなUIエレメントが った、iPhoneアプリ用のワイヤーフレーム素材
http://coliss.com/articles/freebies/freebies-iphone-app-wireframes-kit-sketchkit.html

21. keynoteでのプロトタイピングに使える
アイコンや素材まとめ
• Keynotopia
手書き風keynote用ベクター素材
http://keynotopia.com/keynote-mockups-templates/

22. POPでのプロトタイピング
https://popapp.in/jp/

23. POPのメリット
• 無料でも使える（２プロジェクト）
• 最初から作り込まれたペーパープロトタイピングの
サンプルが閲覧可能
• プロジェクトを共同で編集可能（無料版でも可）
• 画面に対してコメントすることができる
• 専用アプリを使って実機で動作確認できる

24. POPのプランの比較
https://popapp.in/jp/pricing/ から引用

25. POPでの各画面の編集
・編集したい画像をクリック
・右側に編集画面が表示されます
※管理画面にデザインファイルをアップロードした後の状態です。

26. POPでの各画面の編集
・マウスをドラッグし四角形のリンクエリアを作成
・Link toをクリックし、遷移させたい画面を選択

27. POPでのプロジェクトの動作確認
プレビューをクリックで確認
指定したエリアタップで
画面遷移

28. POPでのプロジェクトの動作確認
リンクを設定したポイントを忘れてしまった場合の確認方法
リンクを設定していない
ポイントをタップすると
タップできるエリアが
緑色に表示されます

29. 画面へのコメントを投稿
プロジェクト内の画面に対してコメントが可能！
コメントされると一覧上の画面の右上にコメント数が表示されます

30. 実機での動作確認
専用アプリでログインすると実機で動作確認が可能
終了するときは２本指でタップ

31. プリインされているプロジェクトも確認しよう
デフォルト状態でもペーパープロトタイピングで作成した画像を元にした
プロジェクトが用意されています。
確認するだけペーパープロトタイピングの参考にもなります。

32. Prottでのプロトタイピング
https://prottapp.com/ja/

33. Prottのメリット
• 無料でも使える（１プロジェクト）
• 有料版ではワイヤーフレームツールで簡単に綺麗なプロ
トタイプが作成可能
※無料でもお試し期間中は利用可能
• 有料版ではプロジェクトを共同で編集可能
• お試し期間中はPRO版を利用可能
• 専用アプリを使って実機で動作確認できる

34. Prottのプランの比較
https://prottapp.com/app/#/users/edit/plans から引用

35. Prottでの各画面の編集
・編集したい画像をクリック
・右側に編集画面が表示されます
※管理画面にデザインファイルをアップロードした後の状態です。

36. Prottでの各画面の編集
・マウスをドラッグし四角形のリンクエリアを作成
・遷移先の紐が表示されますので、遷移させたい画面を選択

37. Prottでの各画面の編集
• リンク先を間違えた場合は①
のアイコンをクリックすると
別の画面へ設定可能
• リンク自体が不要な場合はゴ
ミ箱アイコンをクリックで削
除できます
• スライドに移動を選択し、遷
移するかどうかを確認

38. Prott上でワイヤーフレームを作成
• 「+」ボタンクリックで画面追加メニューが表示されます
• ワイヤーフレームを描くを選択すると、編集画面が表示されます

39. Prott上でワイヤーフレームを作成
パーツ一画像を右へドラッグ＆ドロップして画面のイメージを作成します

40. Prott上でワイヤーフレームを作成
アップした画像にワイヤーフレーム画面からパーツを追加することも可能
角丸四角形と
テキストを使って
ボタンイメージを作成

41. Prottでのプロジェクトの動作確認
プレビューをクリックで確認
指定したエリアタップで
画面遷移

42. Prottでのプロジェクトの動作確認
リンクを設定したポイントを忘れてしまった場合の確認方法
リンクを設定していない
ポイントをタップすると
タップできるエリアが
青く表示されます

43. 実機での動作確認
専用アプリでログインすると実機で動作確認が可能
終了するときは３本指でタップか端末をシェイク

44. プロトタイピング比較
プロジェクトの段階によってプロトタイピングツール使い分けることが大切
料金 精度 実機確認 改修の容易さ 共同編集
ペーパープロト
タイピング
無料 低精度 ○
keynote 無料 中精度 △
POP 一部有料 高精度 ○ ※○
Prott 一部有料 高精度 ○ ※△ ※○
※Prottoの改修の容易さについてはワイヤーフレームツールが使えるかによって容易さが変わります。
※共同編集についてはご利用のプランによって異なります

45. まとめ
• プロトタイピングによって早い段階で使い勝手を確認し、手戻り
や仕様の漏れを防ぐ
• PDCAサイクルを高速に！繰り返し試行する回数を増やしよりよ
いUI/UXを目指す
• プロジェクトの段階によって、プロトタイピングのツールを使い
分ける
• 作成したプロトタイピングは第三者のフィードバックをもらう事
が大事
• プロトタイピング自体が目的とならない事に注意する

46. 最後に
Cloud-Prototypingではプロトタイプ開発者を募集しています！
メルマガに登録して頂くとプロトタイプ作成案件や次回セミナー情報をなど
お送りさせて頂きます！
またプロトタイピングの受託も行っています！
Cloud-Prototyping
http://cloud-prototyping.jp/event_20150711.php
メルマガ登録フォームはこちら
https://goo.gl/wdMxe9

47. 最後の最後に
弊社ではプッシュ通知のASPサービスも行っています！
サンプルソースもあり、簡単に導入できますので是非一度お試しください！
興味がある方は是非下記ページをご参照ください！
http://core-asp.com

48. ご静聴ありがとうございました！
次回のセミナー開催は8月予定です
内容：InVision,Origamiなど