アプリ開発に役立つ!「Prott」はドラッグ&ドロップで「動くプロトタイプ」が作れる神ツール

Prott Top Page
前職を卒業する数年前、プロトタイピングツール「Prott」に出会っていれば……と思うと悔しい。

社外からは「華形」と言われ、社内からは「開発もデザインもできない雑用」として扱われるアプリのプロデューサーやディレクター。実際に動くものを作るエンジニアやデザイナーも大変だが、そこに行き着くまで脳内にあるイメージを正確にアウトプットするのは意外と難しいのだ。

さらに上司や役員などに新規アプリをプレゼンする場合は難易度がさらに上がる。実際イメージしてもらいやすいために「動くプロトタイプ」を作る必要があるが、これがとにかく難しいのだ。パワーポイントでスマホの画面を描き、レイヤーを重ねながらアニメーションで画面の遷移を再現している人もいるのではないだろうか。

可能であれば新しいアプリ案を次々と考えたい。画面遷移図やプロトタイプの重要性はよく理解しているが、できるならもっと効率的に作業をしたい。

プロデューサー/ディレクターの皆さん、Prott」を使いましょう。今すぐ、使いましょう。

UI/UXデザインを専門とするGoodpatch(グッドパッチ)のプロトタイピングツール「Prott」を今更見せてもらったのだが、あまりにも便利すぎて鼻血が出そうになったので、まだ使ったことがない人は目を通してみるべし!

ブラウザで実際に動作するプロトタイプを作成し、iPhoneで確認できる神ツール

まずは「Prott」の紹介動画をどうぞ。



「Prott」は一言で言うとブラウザで実際に動作するプロトタイプを作成し、iPhoneで確認できるツールだ。ハッキリ言ってアプリのプロデューサー/ディレクターにとって神ツールと言っても過言ではない。僕が会社員時代、無駄にした時間を是非とも返して欲しいと思えるほど便利な機能が揃っている。

以下に個人的にアピールしたい「Prott」の魅力をいくつか紹介する!

あらゆる画面サイズに対応したプロトタイプを作成可能

Prototype Size
新規アプリを考える場合、iOSアプリだけではなくAndroidアプリも用意することが当たり前になてきた。ただ、それぞれの画面遷移を作るのはかなりのハードワークだ。もっと効率化したい。

「Prott」はiPhone 6/6 Plus」やiPadを含むiOSアプリはもちろんのこと、Androidアプリにも対応ウェブ用のプロトタイプを作成できる他、最近ではApple Watch」用アプリにも対応している。

Prototype App Type
使い方は至ってシンプル。手書きで画面図を作成し、それをiPhoneアプリやAndroidアプリで撮影し取り込む。タップ領域とタップの遷移先、そしてタップ時のアニメーションを選ぶことによって実際に動作するプロトタイプを簡単に制作することができるのだ。

実際に「Prott」を使っている様子は以下の動画で確認するべし!



SlackやHipChat、Dropboxなど外部サービスとも連携可能

Prototype Service
地味に嬉しいのがSlackやHipChatなどのチャットツールに対応しているということ。

アプリ開発には多くの人が関わり、多くの人の思いや考え方がぶつかり合う場だ。「Prott」では作成したプロトタイプの各要素ごとにコメントを入れることができ、それらを外部のチャットツールと連携することによって見逃さずにチェックできるようになる。

さらに、Dropboxとも連携するようになっため、Dropbox内に保存したファイルなどを簡単に呼び出し追加することができるようになった。この機能はワイヤーフレーム機能を使用する時にも力を発揮する。

困った時に!ワンクリックで呼び出せるチャット機能の提供

Prott help
この手のサービスを使い始めて最も避けたいのは途中で使い方が分からなくなり、「結局パワポで作った方がいいじゃん」となってしまうということ。

運営するGoodpatchはこれを解決するためにワンクリックで担当者を呼び出せるヘルプチャットを用意。営業時間内であればなかなかのスピード感を持って返信をもらえるとのこと。行き詰まってしまった場合は活用するべし!

ワイヤーフレームを爆速で作成する機能が物凄く便利!

Wireframe screen
手書きのプロトタイプを写真で撮影し、簡単にデジタル化することができる機能だけでも十分すごいが、先日アップデートされた最新バージョンではiOS 8」のUIコンポーネントを利用してドラッグ&ドロップでプロトタイプを簡単に作成することができるようになった

以下に詳しく紹介する!

限りなく完成品に近いプロトタイプを制作できる

思い返してみれば、プロデューサーだった頃、iPhoneアプリらしくするためにわざわざ「iPhone 5s」のPSDファイル「iOS 7」のPSDファイルをダウンロードし、Photoshopで必要な要素を抜き出し、パワポに貼り付けてアニメーションを制作する、という骨の折れるような作業をやっていた。 

「Prott」を活用すれば今までよりも遥かに効率的にアプリのプロトタイプを制作することができる。なぜなら「Prott」内に「iOS 8」のコンポーネントが全て用意されているから。必要な要素をドラッグアンドドロップで組み合わせるだけで極めてクオリティの高いプロトタイプを制作することができる。

Wireframe component
実際にワイヤーフレーム機能を使っている様子は以下の動画を参考にどうぞ!




「プレゼンテーションモード」でハイクオリティなプレゼンを!実機確認も

Presentation mode
便利なのはプロトタイプを作るプロセスだけではない。実際にそれをプレゼンするプロセスも効率化できる!

「Prott」に用意された「プレゼンテーションモード」を使用することによって動作するプロトタイプを目の前にプレゼンすることができる。デバイスの色や背景なども自由に選択できるようになっているため、制作したアプリの利用シーンに近いものを選ぶと効果的かもしれない。

もちろんブラウザで制作したプロトタイプはiOSアプリでも確認することができる。つまり、動くプロトタイプを画面上で紹介し、さらには実際に動作するプロトタイプを触ってもらい、意見をもらうことができるのだ!どう考えても最強すぎる!

参考にプレゼン機能を紹介している動画も併せてどうぞ!


作業効率を考えると破格!「Prott」の料金プラン

これほど驚異的に便利なプロトタイプツール「Prott」だが、意外と料金体系はリーズナブルだ。ハッキリ言って過去に苦労した自分のことを考えると個人的には破格だと思っている。

1つのプロジェクトの場合、無料で使用することができる。試すにはまずは無料で使用してみるといいかもしれない。3つのプロジェクトまでなら月額1,710円となっているが、残念ながらこれらの料金プランでは先ほど紹介した「ワイヤーフレーム機能」が使用できない。Proアカウント(月額3,510円)以上限定の機能だ(6月末まで、全てのユーザーに無料で利用可能)。

Prottの料金体系
月額3,510円となればせいぜい社会人の飲み会1回分にも満たないだろう。アプリプロデューサー/ディレクターは自分で奮発するなり会社に交渉するなりして最低でもProアカウントを契約した方が良い。

ユーザー数やプロジェクト数、ワイヤーフレーム機能の有無などをプランごとにまとめた表は以下。

Prottの料金体系

開発効率、上げましょう!アプリ開発に関わる人は契約の検討を!

「Prott」は既にDeNAやリクルート、クックパッドやなどの名立たる企業が導入している。国内にとどまらず、海外からも高い支持を受けていて特にヨーロッパやアメリカ、インドや中国などのユーザーが多いとのこと。2015年5月時点で25,000人以上のユーザーが利用している。

Prott
「Prott」がアプリ開発に役立つツールであることは「Prott」を開発しているグッドパッチが自ら証明している。実は、FlatキャリアトレックDingbelなどグッドパッチがこれまで手掛けてきたアプリは全て「Prott」を使用して開発されている。これほど見やすく、使いやすく、快適に操作できるアプリをリリースできているのは「Prott」を活用して効率的にトライアル・アンド・エラーを実践することができているからだろう。

まずは無料プランで使ってみましょう。今なら6月末まで無料でワイヤーフレーム機能を使用することができる。

僕のようにこの機能の便利さに圧倒された人は「Prott」のProプランを契約した方が良いだろう。より良いアプリを考え、世に送り出すためにはプロトタイプで時間を消耗している暇はない。効率化できるところは効率化しなければ、勿体無い!

詳細は以下からどうぞ!

オススメ
Prott

gori.meの最新情報をチェック!!

  1. iPhone-6s-In-Depth-Review-15.jpg
    「iPhone 6s」の電源が突然落ちる不具合、製造工程に問題があったと判明
  2. iphone6s-shutdown.png
    Apple、「iPhone 6s が突然シャットダウンする問題に対するプログラム」ページを公開、シリアル番号で確認可能に
  3. macbook-pro-2016-gpu-freaking-out
    「MacBook Pro (Late 2016)」のGPUに関する不具合、影響範囲が拡大中
  4. 25-more-hidden-ios10-features.png
    「iOS 10.2 Beta 5 / Public Beta 5」、配信開始
  5. delete-iphone-else-top.jpg
    【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法