デジmag.

デジタルマーケティングの事例、ノウハウ情報メディア

新しいアプリやサイト開発に欠かせない「Prott」とは?

新たなアプリやウェブサイトを開発し、ローンチするのにはいくつかの重要なステップがあります。

斬新なアイデアがあり、それを使うターゲットを絞り、そのアプリでできることを決める。さあ、ここからはアプリやサイトを具現化する段階、というところにいくつものハードルが存在するのは、一回でもアプリやサイト開発に携わった人なら周知の事実でしょう。

今回は、そんな現場で大活躍してくれるであろう、オススメのプロトタイピングツール「Prott」について、その活用方法と共に紹介します。

誰でも直感的に使えるプロトタイピングツール「Prott」

https://prottapp.com/ja/

Prottは、株式会社グッドパッチが開発し、提供している「プロトタイピングツール」で、KDDI、ファミリーマート、DMMなど、アプリやサイトを頻繁に開発する必要がある大企業でも多く活用されています。

プロトタイプとは動作確認用に試験的に制作する最初のモデルのことであり、後々改良を見込んだものではあるものの、そのアプリやサイトが本当にいいものであるかどうかを大まかに掴むためには、プロトタイプの段階でいかに本番環境に近い形を再現できるかどうかはとても大事なポイントとなります。

Prottは直感的に使えるツールとなっていて、これまでアウトソースするか社内の開発チームに託すしかなかったプロトタイピングや、特定の人しかできなかったワイヤーフレームの作成まで、その気になれば担当者一人でこなせてしまいます。

“1000回の会議より、1つのプロトタイプ” 〜Prottのベネフィット〜

このPrott、単にアプリやサイトのプロトタイピングが簡単にできる、という以上の価値があります。このブロックの小見出しは公式サイトのコピーからの引用ですが、Prottのベネフィットを一言で表現しています。

社内稟議やクライアントへのプレゼンが通りやすくなる

いくら紙の上でアプリやサイトの必要性やユーザーの遷移イメージを説明したところで、
それを操作している時の感覚や、言語化できない「良さ」は伝わりません。すると、そこまでコストをかけてやることではない、という判断を下されかねません。

しかしProttを活用すれば、その良さをプレゼン相手に明確に提示できるので、その提案を受け入れられる可能性はグッと高まるのではないでしょうか。

Prottで作ったプロトタイプが、あまりにスムーズに動作するため、報告した上司に「(承認していないのに)もう本番を作ってしまったのか」と勘違いされるというケースもあったとか。

上司やクライアントへシェアするプロトタイプは、それとわかるようにあえて白黒で作る、というのも、ひとつの “ティップス” と言えるかも知れませんね。

開発者がユーザー視点を持てる

いくら素晴らしいアイデアと設計を持ってアプリやサイトを制作したとしても、実際に利用するユーザーが触ってみて快適に感じなければ意味がありません。それらUI、UXの課題を的確に捉えるためには、紙の上でユーザーの動きを設計しているだけでは限界があります。

Prottは、常に実際の動作をユーザー視点に立って検証しながらプロトタイピングを進められるため非常に効率的と言えますし、開発者がその視点を持つことで、新たな気づきが得られる場面も多くなるでしょう。

大きなプロジェクトでもアウトプットイメージに齟齬が生まれない

アプリやサイトの開発といったプロジェクトの場合、時にプロジェクトメンバーが何十人にも及ぶという状態になることも珍しくありません。すると、メンバー各々が勝手にイメージを膨らませてプロジェクトが進行していき、少し進捗するごとに方々から「ここはこうしたい」「こんなデザインじゃダメ」「役員から今更ですがこんな要望が…」といった横槍が入り、三歩進んで二歩下がる状態に陥ってしまうことも。

Prottはプロジェクトの進捗を常に共有でき、パーツごとにコメントを残せるため、今何が議論の対象になっているのか、どんなアウトプットになるのか、といったことが常にメンバー全員同時に把握でき、共通認識を作りやすいという特長があります。

Prottの基本的な使い方

Prottの使い方は非常に直感的で簡単です。ブラウザで使用するツールなので操作しやすいですし、初めてアプリ開発に関わるという方でも少し触ってみればすぐに慣れて、簡単な画面遷移まで作れるようになります。

まずはアカウントの作成が必要です。
Prottには無料版と、有料版のスタータープランからエンタープライズプランまで細かくプランが刻まれています(後述)が、プロプランの30日間無料トライアル期間が設けられているので、アカウントを登録してすぐ使い出すことができます。

プロジェクトの作成

ログインしたら、「新規プロジェクト」のボタンをクリックしてプロジェクトを作成します。

表示されたポップアップにプロジェクト名を入力し、アプリやサイトが使われる想定デバイス、画面の向き(縦、横)を選択します。こちらは現状で一番新しいiPhone Xにも対応しています。

スクリーンの作成

いよいよ作業画面です。スクリーンとは、スマホの画面やブラウザで見ているページのことで、ここでスクリーンをどんどん追加して、遷移を繋げて行くことができます。

スクリーンの作成方法は2つ。ワイヤーフレームを描いて作成する方法と、PCから画像をドラッグ&ドロップして作成する方法がありますが、最も簡単に作業できるのは後者です。

画面遷移をつける

ここからはアプリやサイトで最も大切な画面遷移をつける作業です。Prottならこの作業も非常に簡単。遷移元のページを選択し、クリックさせたいエリアを範囲指定。範囲指定すると自動的に現れる黄色の遷移指示線を遷移先のスクリーンに引っ張っていってくっつける、それだけです。

そして、この遷移を起こさせるためのアクション(タップなのか?ダブルタップなのか?スワイプなのか?など)と、オーバーレイ表示させるか(元のページを残したまま遷移先のページをレイヤーで表示すること)などを選択すればOKです。

プレビューで動作確認

この時点でも、本番環境と同じ見た目で動作確認ができます。作業画面、プロジェクト名の右にある「プレビュー」をクリックしましょう。

想定しているデバイスの画面が表示され、その中で実際にクリックやタップ、スワイプすることで動作を確認できます。

プロトタイプの共有

作業の進捗をプロジェクトメンバー以外の上司に共有したり、クライアントに報告することも簡単です。

作業画面のシェアボタンを押して「共有設定をオンにする」を選択すれば、URLやQRコード、埋め込みコードを発行できるようになるので、最適な方法を選んでシェアできます。パスワードの設定や、「ミスタップ時にヒントを表示する」「有効なタップをハイライトする」など、相手に合わせて共有の仕方をカスタマイズすることも可能です。

遷移図の作成

アプリやサイトの構成を紙の資料として求められる場面があった場合もProttなら即対応できます。

「遷移図」をクリックすれば、構築したサイトの遷移を矢印で示した遷移図がワンタッチで表示でき、それをそのままエクスポート可能です(※最新のGoogle Chromeに限る)。

スクリーンを隠したり、コメントを挿入したりカスタマイズも自在です。

株式会社グッドパッチの公式ブログでは使い方の詳細や、動画で見られるチュートリアルも豊富なので、チェックしてみてくださいね。

Prott料金プラン

Prottの料金プランはサブスクリプションモデルとなっており、月額制か年間契約が選択できます(年間契約の方が10%お得)。

上位プランであればあるほど、一度に使えるユーザーの数やプロジェクトの数、その他、共同編集や組織管理など、大規模プロジェクトのマネージに必要不可欠な機能が付与されていきますので、関わるプロジェクトサイズに最適なプランを選べます。

月間契約の料金プラン
https://prottapp.com/ja/plans/
年間契約の料金プラン
https://prottapp.com/ja/plans/

まとめ

いかがでしたか。

仮にアプリやサイト開発の素人であっても、触っていると楽しいですし、実際に触ることで様々なアイデアが生まれてくるということもあると思います。

もともとワイヤーフレームを描いていた、という人にとっても、手描きのワイヤーフレーム画像一括アップロードができたり、生産性の高まる機能が充実しています。

何より、プロジェクトメンバー全員がアウトプットイメージを共有しながら即座にブラッシュアップしていけるのは素晴らしい体験だと思いますので、ぜひ一度試してみてください。

Return Top