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

• Yuichi Shiga
• Aug 2, 2015

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

顧客から素早くフィードバックをもらうことで、本当に求められるサービスを作ることが重要となっていることはもう説明する必要はないだろう。アプリのマーケットはすでに飽和状態に近づいており、多数のアプリで溢れている。ちょっと使いにくかったり、デザインがイケていなかったりしても、ユーザーが我慢してくれる時代はとっくに終わっており、インストールされても数日で使われないアプリは80%にも達する。詳しくは、モバイルアプリの80％が数日で使われなくなる理由と対策

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

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

こういった背景から、アプリの解析ツール、A/Bテストツールなどの手法が解決策として紹介されることが多い。しかし、大きな効果得られるのは、ユーザーが本当に求めているアプリだけである そもそもユーザーが必要としないものに対して、小手先のテクニックで対策を施しても、大きな効果は得られない。例えば、シェアボタンの色や大きさをA/Bテストで検証すれば、シェアをするユーザーの割合は多少上がるだろうがそもそもユーザーがシェアしたいと思うような価値を与えるアプリでないと大きな成果は得られない。

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

ユーザーが本当に求めているものを作るには、開発段階からプロトタイプを用いて開発チーム内で議論を行って価値を検証したり、必要に応じてユーザーヒアリングを行いながら、継続的にフィードバックを得ながら改善していくことが効果的だ。弊社btraxでは、スタートアップの本場サンフランシスコで、リーンスタートアップのサービス開発手法を学びながら新規事業の創出を目指すイノベーションプログラムを提供している。また、社内でもスタートアップ向けのiPhoneアプリの開発を行なっており、10月にリリースを予定している。今回は、社内でも利用している、本当に価値のあるものを開発するため、便利なプロトタイプツールを紹介する。短期間でクオリティの高いプロトタイプを作れるツールもあるため、ぜひハッカソンなどでも使ってほしい。

1. エレベータピッチ

「リーンスタートアップだ、とにかく動くものを作ればよい」といって、すぐにコードを書き始めていないだろうか。もちろん、言葉だけではアプリの価値は伝えられない、プロトタイプを見せないとこのアプリの価値は分からないという気持ちはわかる。ただ、ほとんど完成した後に、「全然価値を感じない」、「ほとんど同じアプリがもうある」とか、「以前に似たアプリがあったがクローズしている」いうような重要なフィードバックをもらうことも多い。

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

そこで、エレベータピッチを使って、友達や知り合いにアイデアを話してみて、フィードバックを早めにもらおう。エレベータピッチとは、30秒や60秒といった短い時間で自分のアイデアをピッチするというもの。自分が会いたかった投資家に、たまたまエレベーターの中で居合わせた時にビジネスアイディアを売り込むというところから来ている。この段階で競合がいても恐れることはない。ベンチマークを行い、彼らを凌駕するようなアプリを戦略的に作ればよいし、もし競合が強すぎるならピボットして違うアプリを作ることもできる。この段階で失うものは何もない。

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 高速でプロトタイプを作るツール 開発ツール

プログラミング不要で、アプリを作れる開発ツールが数多くあるのをご存知だろうか。比較的シンプルな機能のアプリなら、プログミングなしで作ることができる。フェスなどのイベントアプリなどで実際に使われていることも多い。例えば、Mobile Roadieは、ディズニーや、サンディエゴ動物園、複数のスポーツクラブなどの有力な企業がこのツールを利用してアプリをリリースしている。設定された位置に近づいたらPushを送信する機能や、リアルタイムチャットシステムが利用できるなど高い機能の提供も行っている。

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

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

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

5. ハイブリットアプリツール

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

最近人気が高まっている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の開発者は絶対に抑えておきたいサイトだ。

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等の有名サイトそっくりの”クローン”のオープンソースが多数集められている。

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

既存サイトのクローン以外にも、様々なオープンソースがあるので探してみるといいだろう。作ろうとしているアプリと似ているオープンソースがあれば少しソースコードを変えればよいだけでよい。使ってみる価値はあるだろう。試してみるには、Webサーバ上でデプロイして、モバイルアプリ側はWebViewでWebアプリを表示するだけでいい。もちろん、Webアプリとモバイルアプリでは使用感は違うが、根本的な価値を検証するためのプロトタイプとしては十分な場合が多い。

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

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

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

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

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

NotificationChatは、オープンソースで公開されているチャットアプリで、こちらもバックエンドにParseを用いている。リアルタイムでメッセージをやりとりしたり、グループチャットも作ることもできる。

mBaaSのParseを使ったオープンソースのチャットアプリ

10. アプリを買う

実は、動作するアプリを購入することもできる。代表的なのが、Chupamobileで、アプリを売買するためのマーケットプレイス。すぐにでもリリースできる状態のアプリが販売されている。数千のアプリが販売されており、50ドルから300ドル程度で購入できるものも多い。少しカスタマイズして使えるなら、自分たちでプロトタイプを作る手間を考えるとかなり安いだろう。また、購入したアプリに機能を付け加え、デザインを変更してリリースすることで、開発コストを大きく下げることができる。

世界最大級のアプリのマーケットプレイス Chupamobile

btraxでは、モバイルアプリを開発中

最新のテクノロジーとユーザーエクスペリエンスを日々研究、開発しているbtrax社では、現在、米国市場向けのモバイルアプリ(iOS)を開発している。米国向けのモバイルアプリの開発とデザイン、グロースハックを行うインターンシップを募集している。詳しくはこちら

また日本企業のクライアントと協同してサービスやプロダクトを作るプログラム「イノベーションプログラム」を実施中。

モバイルアプリを開発を行なっている人は、次の記事も読んでほしい。

• ユーザーに愛されるアプリをつくるための5の掟 〜イノベーションプログラムより〜
• モバイルアプリで海外で勝つために知っておきたい6つのポイント【VB Insight】
• 米国で人気のモバイルアプリ解析ツール【VB Insight】

photo by Betsy Weber

サンフランシスコにオフィスを出しませんか？

イノベーションの本場サンフランシスコに本社を置くクリエティブ・エージェンシーbtraxは、デザインをメインにしたコーワーキングスペース、D.Hausを開設致します。

D.Hausはデザイン的視点から日本企業と地元のスタートアップがコラボレーションを行うことを目的に、2015年秋よりサンフランシスコに開設されるオフィススペースです。単なる作業スペースだけではなく、最新情報の提供やメンターシップ、イベントを通じ、ヒトと技術をデザインで繋ぐ事により、イノベーション創出の為のプラットフォームを実現します。

先行予約中の今なら敷金、礼金、保証金無しでサンフランシスコにオフィスを持つ事が可能です。詳細、資料請求等は公式サイトまで。