Appleから学ぶiOSアプリのプロトタイピング『Prototyping: Fake It Till You Make It』

最近…といっても少し前の話ですが、知人と共にiOSアプリ開発の企画を立ち上げてみたんですね。
そこで話題に挙がったのが、どのようにして効率的にプロトタイピングを行うか？って話題だったんです。
そもそもプロトタイプ(Prototype)って名詞なのに、現在進行形のingが付くってなんかオカしいですね。『原型なう』ってことでしょうか？

そんなプロトタイピングなるものについて、個人的に学んだことをちょっと記事にしてみようかと思います。

そもそも『プロトタイピング』ってなに？

主にiOSやAndroid等の、携帯ガジェット用アプリ開発における用語で、

• 使用感や性能の良し悪しを、実際に使ってみて実験するためのテスト版アプリをプロトタイプと呼ぶ
• そのプロトタイプを作る行為、工程をプロトタイピングと呼ぶ

ざっくりとですが、こんなカンジだと思います。
このプロトタイプも呼び方が様々で、現場によっては『モックアップ』『アルファ版』『テスト』『ラフ』などなど…ややこしい話ですが要するに、製品版として機能や仕様を絞り込む前の、良いか悪いかもわからないものをテストしてみるための実験版を指すということですね。

このプロトタイプを作る＆使ってみてテストするまでの行為をプロトタイピングと呼ぶようです。

特にスマートフォン用アプリ開発においては、『そのアプリが良いか悪いか（便利か不便か、欲しいかいらないか）は実際に触って使ってみないと判明しない』という考え方のもとに、まずはプロトタイプを作成して検証し、『これはイケる！』と確証してから製品版として開発を開始する、という流れをとるのが好ましいとされています。
（テストも検証も曖昧なまま『これなら絶対売れるんや！』と突っ走り、製品版として出したはいいが鳴かず飛ばず…なんていうファンキーな結末は避けるべきですもんね）
思いついたアイデアをざっくりと形にして検証する〜この行為を数こなすために体系化させて効率化を図る〜『プロトタイピング』という名称がつけられた、なんていう過程がありそうですね。

プロトタイプの作り方って？

では実際、プロトタイプを作るにはどうするのが良いのでしょう？
プロトタイピングのゴールはそのアイデアが良いか悪いかを実際に試して明らかにする事なので、その目的を達成できるものであれば、キッチリとデザインされプログラムで組まれたものでなくても良しという事になります。
たとえダンボールのハリボテのようなものでも、ちゃんと使用感が試せれば全く問題なし。それをサクっと手早く、しかも特別な技術を用いなくても作ることができればなお良し、という事ですね。
しかし、企画会議で使うような鉛筆書きのラフでは、使用感を試すにはリアリティに欠けすぎるので、より実際の製品版に極めて近いハリボテを作るのがポイントとなります。

押さえるポイントとしては、

ざっくりとですが、こんなカンジになると思います。

Appleが提唱する『Keynoteを使ったプロトタイピング』

知人のiPhoneプログラマーから紹介してもらったものなんですが、Appleではプロトタイピングとしてこのような方法を提唱しているようです。

『Prototyping: Fake It Till You Make It』

2014年のWWDCでAppleが公開した動画ですね。
全編英語で解説されているので、英語がサッパリわからない私には内容もサッパリわかりませんでした…が、そこは流石のApple純正プレゼンテーション。わかりやすい単語と図解で説明してくれてますので、ぼーっと眺めるだけでもそれこそ感覚的に理解できる動画になっています。全部で１時間とちょっと長い動画ですが、見る価値は十分あると思いますよ！
（ちなみに英語講師の友人が親切に解説してくれたので、誤解なく内容を把握することができました。感謝！）

このプレゼンテーションの要点だけをかいつまんで、箇条書きにしてみました。

• アイデアをアプリにしてビジネスにしよう
• アプリのフェイク（偽物）を作って、人に使ってもらって、フィードバック（使った感想）を聞いて、より良いアプリにしていこう
• Keynoteを使って、本物そっくりなアプリのフェイクを作ろう
• サンプルとして『おいしいトーストのお店を投稿するアプリ』を作ります
• 使用する画像は、既存アプリのスクリーンショットを切り貼りして作っちゃおう
• 投稿されたトーストの一覧画面は、メールアプリのスクリーンショットの上にトーストの写真を貼り付けて、それっぽく作ろう
• タップすると次のスライドに切り替わるようにして、あたかも『ボタンをタップしたら投稿画面に移動した』っぽく見せよう
• Keynoteで『横にスライドして画面が切り替わる』等の設定をして、アプリの動きっぽく見せよう
• 投稿画面は、メールアプリのキーボード画面を貼り付けよう
• 入力フォームに１文字ずつ文字が増えるスライドショーを作り、『キーボードで文字を入力している』っぽく見せよう
• （後半）Keynoteのアニメーションスクリプトなどを駆使すれば、本物のアプリと同じような動きが見せられるよ

ざっくりとですが、こんなカンジですかね。
この方法なら、デザイナーやプログラマーに依頼をしなくても『いかにも本物っぽいアプリのフェイク』が作れるという事ですね。
これで作ったフェイクを色々な人に使ってもらって意見を反映し、改良したアプリのフェイクを作って再び使ってもらい…を繰り返し、アプリの仕様を磨き上げていくというワケですね。

この方法を参考にして実際にやってみた

実際にKeynoteを使ってアプリのフェイクを作ってみたんですね。
画面デザインに関しては、私の場合『Photoshopで作ったほうがずっと手っ取り早えや！』でしたので、iPhoneのキーボード画像だけスクリーンショットから拝借して、画面遷移として書き出したものをKeynoteに貼り付けて作りました。
（今のPhotoshopCCなら、Illustratorと同じようなアートボード機能が使えるので、遷移画面ごとに分けて作れるから便利ですね…！）
画面遷移時の細かいアニメーションは省略しちゃいました。

結局のところ、タップすると画面が次々と切り替わるだけのスライドショーを作るに留まったんですね。しかし、これを実際にiPhoneのKeynoteで触ってみると、意外にもなかなか本物のアプリっぽく見えました。企画メンバーに見せてみたところ『おお、それっぽい！』と結構な盛り上がり方でした。
ボタンにより遷移する画面を振り分けるかわりに、『○○○の操作をするシーンのプレゼンテーション』『□□□□操作をするシーンのプレゼンテーション』といった具合で、シーンごとにプレゼンテーションのファイルを作成しました。テストをしてもらう際に『これは○○○操作をする時の…』と一言説明を加えてあげれば、問題なく使用感の調査が可能だったようです。

私は最初『そんなに立派なものはできるワケないだろうな…』というネガティブな印象を持っていたんですが、このようにざっくりと作ってみただけで（悪い期待に反して）予想外のもの（良いもの）が出来たんですね。この手法は結構オススメできると思います。

個人的に気になる他の方法

『より本物に近いテスト用フェイクが簡単に作れる』という点で考えると、他にはどんな手段があるかな？と考えてみました。

Webページ形式で作る

いわゆるWebアプリ形式でテスト用のフェイクを作り、SafariからiOSホーム画面に登録してフルスクリーン表示にすれば、結構本物のアプリに近い感覚が出せるんじゃないでしょうか？ボタンによる画面遷移なども簡単に実装できそうです。

Flashで作る

『FlashだとiOSで動かないじゃん！』と自分で挙げておいてツッコんでますが、html5出力やCreateJSを駆使すれば対応可能ではないでしょうかね。
近頃Adobe Animateと改名したFlashですが、機械操作端末などのインターフェース画面をテスト用で作る時には、Flashで作る現場が多いようです。インタラクティブ性やアニメーション機能はかなり強力ですからね。

どちらもWeb制作（＋Flash）の技術を使ったものなので、テスト版としては若干敷居が高いかもしれません。
これらはむしろ使用感を試すテスト版ではなく、アプリとしてリリースする前の仮稼働版として立ち上げるのに良い手段ではないでしょうか？
『Keynoteで作ったプロトタイピングで実験』〜『イケる見込みができたら、Webアプリ形式で立ち上げて仮稼働』〜『運営がノってきたら正式にモバイルアプリとしてリリース』と、このような段階を踏んでいくことで、リスクやコストをおさえつつ着実にサービス運営を展開していく…こういう手法も十分にアリだと思いますよ。