views

デザイン会社 btrax > Freshtrax > 数日で忘れ去られないために。モ...

数日で忘れ去られないために。モバイルアプリの高速プロトタイプ開発法10選

Published on 8月 02, 2015

Yuichi Shiga

Published on 8月 02, 2015

80%のアプリは数日で使われなくなる

顧客から素早くフィードバックをもらうことで、本当に求められるサービスを作ることが重要となっていることはもう説明する必要はないだろう。

アプリのマーケットはすでに飽和状態に近づいており多数のアプリで溢れている。

ちょっと使いにくかったりデザインがイケていなかったりしてもユーザーが我慢してくれる時代はとっくに終わっており、インストールされても数日で使われないアプリは80%にも達する。詳しくは、モバイルアプリの80％が数日で使われなくなる理由と対策

App retaintion
Androidアプリの継続利用率。ほとんどのアプリはすぐに存在を忘れ去られる

重要なのは本当に価値があるか、小手先のテクニックではない

こういった背景から、アプリの解析ツール、A/Bテストツールなどの手法が解決策として紹介されることが多い。しかし、大きな効果得られるのは、ユーザーが本当に求めているアプリだけである そもそもユーザーが必要としないものに対して、小手先のテクニックで対策を施しても、

大きな効果は得られない。例えば、シェアボタンの色や大きさをA/Bテストで検証すれば、シェアをするユーザーの割合は多少上がるだろうがそもそもユーザーがシェアしたいと思うような価値を与えるアプリでないと大きな成果は得られない。

重要となるリーンスタートアップの考え方

ユーザーが本当に求めているものを作るには、開発段階からプロトタイプを用いて開発チーム内で議論を行って価値を検証したり、必要に応じてユーザーヒアリングを行いながら継続的にフィードバックを得ながら改善していくことが効果的だ。

弊社btraxでは、スタートアップの本場サンフランシスコで、リーンスタートアップのサービス開発手法を学びながら新規事業の創出を目指すイノベーションプログラムを提供している。

また、社内でもスタートアップ向けのiPhoneアプリの開発を行なっており、10月にリリースを予定している。今回は、社内でも利用している、本当に価値のあるものを開発するため、便利なプロトタイプツールを紹介する。

短期間でクオリティの高いプロトタイプを作れるツールもあるため、ぜひハッカソンなどでも使ってほしい。

1. エレベータピッチ

「リーンスタートアップだ、とにかく動くものを作ればよい」といって、すぐにコードを書き始めていないだろうか。もちろん、言葉だけではアプリの価値は伝えられない、プロトタイプを見せないとこのアプリの価値は分からないという気持ちはわかる。

ただ、ほとんど完成した後に、「全然価値を感じない」、「ほとんど同じアプリがもうある」とか、「以前に似たアプリがあったがクローズしている」いうような重要なフィードバックをもらうことも多い。

特に競合については、すでにApple StoreやGoogle Playに登録されたアプリは数百万に達しており、競合や類似のアプリがないというほうが珍しいだろう。また、アプリだけでなく、Webで同じような価値、機能を提供するサービスがすでに存在していることもある。

そこで、エレベータピッチを使って、友達や知り合いにアイデアを話してみて、フィードバックを早めにもらおう。エレベータピッチとは、30秒や60秒といった短い時間で自分のアイデアをピッチするというもの。

自分が会いたかった投資家に、たまたまエレベーターの中で居合わせた時にビジネスアイディアを売り込むというところから来ている。

この段階で競合がいても恐れることはない。ベンチマークを行い、彼らを凌駕するようなアプリを戦略的に作ればよいし、もし競合が強すぎるならピボットして違うアプリを作ることもできる。この段階で失うものは何もない。

2. ペーパープロトタイプ

ペーパープロトタイプとは、紙にペンでアプリのUIを書き込み、それを元にユーザービリティをテストする手法だ。POP等のアプリを使えば、タップやスワイプのイベントを追加して動作させることができる。

pop
ペーパープロトタイプのツールとして人気が高いPOP

これを見せれば、どのようなアプリであるかをある程度まで想像できるし、フィードバックを得やすい。作り直すのも消しゴムで消して書き直すだけだ。ペーパープロトを作る段階で、画面遷移やインタラクションの設計の不備が見つかることも多い。また、本格的なデザイン作業に入る前に、どこの位置にボタンを配置したら使いやすいか、画像はどのくらいの大きさが良さそうか等のUのデザインの検討が行える。

さらに、オフィスから出ていって実際の利用シーンで、想定しているユーザーストーリーを模擬してみよう。オフィスでは気付かなかった点に気づくことも多く、UIだけでなくUXの設計を磨き込むこともできる。なお、UIとUXの違いについては、誰にでも分かるUXの基本を読んでほしい。

iPhoneやAndroidの端末が印刷されたスケッチの用紙のデータは、POPのサイトから無料でダウンロードできる。POP提供のスケッチ用データ

3. プロトタイピングツール

ほとんどのアプリの開発では、デザイナーがPhotoshopやIllustratorを使ってUIデザインを作成しそれを受け取ったエンジニアが開発を始める。開発には時間がかかり、最初のプロトタイプが動くようになるまで数週間以上かかることは珍しくない。

そこで、UIデザインを使ってよりリッチなプロトタイプを作ろう。最近では、ツールも進化しており実際のアプリのような体験が得ることができる。

弊社では、Goodpatch社のProttの利用を行なっている。操作感がよいことはもちろん、ツール上でワイヤーフレームを作成しながら使えることに大きなメリットを感じている。重要な画面以外は一旦ワイヤーフレームで作ることで作業時間を短縮できるし、PhotoshopやIllustratorをスキルがないエンジニアや企画職もプロタイプの開発に積極的に参加できるためだ。

prott
Goodpatchが提供するPrott。操作性が高い

他には、Proto.ioが高機能でおすすめだ。TinderのスワイプのUI、Pathのアクションメニュー等の高度なアニメーションや操作を再現できる。さらにプロトタイプを閲覧するための専用のモバイルアプリを提供しており、実際のアプリとかなり近い操作感が出せる。

protoio
Proto.ioが提供するリッチなアニメーションの例の一部

これらのツールを使えば、アプリの限られた部分であれば、実際のアプリとかなり近い体験を得られることができる。実装した後にイメージと違うからデザインを変えようとなることも多い。なるべく早い段階で検証して、改善していこう。

4. プログラミング不要のアプリ開発ツール

プログラミング不要で、アプリを作れる開発ツールが数多くあるのをご存知だろうか。比較的シンプルな機能のアプリなら、プログミングなしで作ることができる。フェスなどのイベントアプリなどで実際に使われていることも多い。

例えば、Mobile Roadieは、ディズニーや、サンディエゴ動物園、複数のスポーツクラブなどの有力な企業がこのツールを利用してアプリをリリースしている。設定された位置に近づいたらPushを送信する機能やリアルタイムチャットシステムが利用できるなど高い機能の提供も行っている。

また、もしカジュアルゲームを作ろうと思っているなら、GameSaladがおすすめだ。実際にGameSaladを使って作られた多くのアプリがリリースされている。カジュアルゲームであれば、プログラミングなしで作ることが十分にできる。

多くのカジュアルゲームの開発に使われているGameSalad

もしあなたがエンジニアでもデザイナーでもない場合、これらのツールでプロトタイプを使ることは効果的だ。プロトタイプを見せてフィードバックを得ることができるし、エンジニアやデザイナーにアイデアを形にして伝えることができる。

5. Web技術で作る、ハイブリットアプリ開発ツール

PhoneGapやionicのように、Html,CSS,Javascriptを使ってiOSとAndroidのアプリを同時に開発できるツールは人気がある。Web開発者であれば、ツールの使い方を学習すればすばやくプロトタイプを実装することができる。もちろん、そのまま作り込んでリリースすることも可能だ。

ionic
最近人気が高まっているionic

また、意外と恩恵が大きいのが、HtmlやCSSを知っていればデザイナーもプロトタイプの開発に参加できることだ。Webアプリの開発では、HtmlやCSSはデザイナーが担当し、PHPやRuby等の言語でエンジニアがロジックを実装することが多い。

しかしモバイルアプリでは、UIとロジックが分離しにくく、エンジニアがUIもロジックも実装することが多い。これによりエンジニアに負荷が集中しスピードも落ちる。

これらのツールには、最新のAPIや、デバイスに対応しない、パフォーマンスが低いなどのリスクがあるが、少なくともプロトタイプの段階だと問題になることはない。

6. イケてるUIライブラリ

Cocoa Controlsは、iOSとOS XのUIのオープンソースがまとめられているサイトだ。ここで紹介されているUIコンポーネントを使えば、すぐにデザイン性の高いアプリを作ることができる。

FacebookやWhatsApp、eBayなど有名アプリのほとんどがここで紹介されているオープンソースのUIを利用している。 iPhoneの開発者は絶対に抑えておきたいサイトだ。

chatui
chat風UIの一例

例えば、LineやFacebookメッセンジャーのような画面が作りたいときには、チャット画面のUIを取得してくればよい。すぐに似た画面を作ることができる。他にも、Pinterest風のグリッドのUIや、TinderのスワイプのUIなど、有名なアプリのUIならだいたい見つかるし、独創的なUIも公開されている。

7. mBaaS(mobile backend as a service)

mBaaSとは、モバイルアプリのバックエンド側をAPI形式で提供するサービス。ログイン、データの保存などを簡単に行うことができる。サーバーサイドの開発が不要になり、アプリ側の通信処理も大きく簡素化されるため、開発速度が速くなる。

プロトタイプ開発や、リーンスタートアップの場合には、頻繁に仕様が変わることがあり、その都度データ構造を見直す必要がでてくる。この修正を行うには、まずバックエンド側でデータ構造を変更し、その後APIの実装を修正、モバイルアプリと結合させる流れとなる。

ソースコードの変更量はごくわずかだが、コミュニケーションや、バックエンドとモバイルアプリの両方の実装が終わるまで待つ必要がでることによって、意外と時間がかかってしまうことも多い。

多くのmBaaSのデータ構造はスキーマレスであり、モバイルアプリ側で簡単にデータ構造を変更できるメリットは大きく、仕様がかっちりと固まっていないプロトタイプ開発に向いている。mBaaSの提供サービスとしては、Facebook傘下のParseが有名だが、Google傘下で、リアルタイム通信が可能なFirebaseなどがあり、小さなものを合わせると数十以上存在する。

リアルタイム通信が可能なmBaaSであるFirebase(Google傘下)

これらのサービスは、通信量やAPIのリクエスト回数に応じた従量課金をとっているものがほとんどで、使用量が少ないと無料で使えるものが多い。特に長期的に運用するアプリの場合、サービスが突然打ち切られたりする可能性や、途中で料金プランが変更されるリスクなどを考慮して慎重に考える必要があるが、プロトタイプであれば使わない理由がない。

8. Webのオープンソース

膨大な数のオープンソースのWebアプリが存在する。これらを使えばすぐにサービスを作ることができる。例えば、Clone Scriptsというサイトには、Facebook、Twitter, Pinterest等の有名サイトそっくりの”クローン”のオープンソースが多数集められている。

clonescript
様々なサービスのクローンが紹介されているClone Scripts

既存サイトのクローン以外にも、様々なオープンソースがあるので探してみるといいだろう。作ろうとしているアプリと似ているオープンソースがあれば少しソースコードを変えればよいだけでよい。使ってみる価値はあるだろう。

試してみるには、Webサーバ上でデプロイして、モバイルアプリ側はWebViewでWebアプリを表示するだけでいい。もちろん、Webアプリとモバイルアプリでは使用感は違うが、根本的な価値を検証するためのプロトタイプとしては十分な場合が多い。

9. オープンソースのモバイルアプリ

Webアプリと比べると数はかなり少ないが、オープンソースのモバイルアプリもある。ソースコードをダウンロードして実装するだけで、アプリとして使える。カスタマイズが難しく、長く開発を続けていくなら最初から作ったほうが早い場合もあるが、手っ取り早く自分たちが作りたいアプリと似たアプリを開発し試してみるのもよいだろう。

GitHubにオープンソースをまとめている有志のレポジトリがあり、Open-Source iOS Appsには、オープンソースのiOSアプリがまとめられている。また、open-source-android-appsにはAndroidアプリがまとめられている。

ここでは先ほどのmBaaSのところで紹介した、Parseを使ったオープンソースのiOSアプリを紹介する。

Anypicは、Parseがチュートリアルとして公開している、Instagramのようなアプリだ。バックエンドにはParseが用いられており、ログイン、写真の投稿、コメントの追加、他のユーザーのフォローなど基本機能を備えている。また、このアプリは実際にApple Storeに公開されている。

anypic
Instagramのような機能をもったオープンソースアプリ