アプリのUIデザインには必須なプロトタイピングツールPrott

iOS
4.61

プロトタイピングツールが注目されていますが、新たにiPhoneアプリとして公開されたProttがなかなかにいい感じです。

Prottの主な特徴

アプリのデザインをする前にUIを確認できるタイピングツール

iPhoneアプリの開発時に本デザインに入る前に紙に手書きで書いた画面をカメラで取り込み、リンクを貼って擬似的に動作確認を行えるのがタイピングツールで、Prottはそのためのアプリです。

手書きの画面を描くメリットとしては、パソコン上でデザインを起こすよりもアイディアを素早く形にすることができ、また実際の動作に近い形で動作を確認することができるため、失敗した時のデザインやプログラミング修正素早く行えコストを抑えることができます。

プロトタイピングについてもっと知りたい人は、fladictの深津貴之さんが書いたこちらをチェックしてみるといいでしょう。

リンクや画面遷移の動作指定などが容易

同様のツールとして以前にPOPを紹介したことがあるのですが、POPをさらに改善進化させた感があり、リンクの貼り付けや画面遷移方法などの指定がより簡単になっています。

パソコンと同期して作成可能

iPhoneアプリを使って画面遷移を作ることもできますが、パソコンと同期したWebアプリやMacアプリも用意されているので、作業自体はそれらを使う方が早い場合もあります。

Windowsアプリも今後、登場予定です。

チームでの共有も可能

プロジェクトに対して行った操作履歴のアクティブ機能や、コメント、共有機能も付いており、チャットツールSlackやHipChatとも連携をしており、チームでアプリを開発する場合には便利です。

既に著名な企業としてIDEOやYahoo! Japan、DeNAが導入すると発表しています。

基本的に1プロジェクトを無料で利用できますが、それ以上は月額で有料となります。
Prottの料金

紹介動画。

無料!今すぐアプリをダウンロード

目次

使い方の目次です。

続きを読む

Prottの使い方

iPhoneアプリ版のProttの使い方の紹介をします。
直感的に利用できるので、さほど難しくはないでしょう。

作業の流れ

作業の流れは以下のような流れで行いますので、予め紙に描いたUIデザイン画面を用意しておきます。

  1. 紙にUIデザイン画面を描く
  2. カメラでUI画面の撮影
  3. Prottに取り込む
  4. リンクや画面遷移の方法、タップの方法を設定
  5. プレビュー、画面の置き換え
  6. 共有など

UIデザイン画面の撮影

まずはUIデザイン画面の撮影ですが、Prottのカメラ機能では場合によっては、明かりが足りなく暗くなることもあります。
そこで、露出をマニュアルで調整できるManual Camなどのアプリを使うと明るい状態で撮影することができますので、お薦めです。

Manual Cam

使い方は、こちらを参照してください。
本名的なマニュアル撮影が楽しめるカメラアプリManual Cam

暗い場合には露出を明るめに調整し、枠よりも少し大きめに撮影します。
手で撮影する場合、うまく枠に揃えられなくてイライラ(笑)することもあるので、少し大きめに撮影して後ほどトリミングした方が作業がスムーズに進みます。
Manual CamでUI画面を撮影

撮影したら写真をiPhoneデフォルトの「写真」から開いて、「編集」モードを選択し「フィルター」の「モノ」を適用します。
こうすると紙の画面が結構綺麗になります。
フィルターでモノを選択

続いては、拡大縮小、移動などをさせて写真のトリミングを行います。
iOS 8では、画面の角度をさらに細かく調整できるようになっています。
画面をトリミング

プロジェクトの作成

続いては、Prottでの作業です。

アカウントを作成したら「プロジェクトの作成」に進みます。
プロジェクトの作成

次にプロジェクト名の入力。
プロジェクト名の入力

ステータスバーの設定

ここで写真を取り込みたいところですが、そこを抑えて「プロジェクト設定」を選択します。
プロジェクト設定を選択

デフォルトのステータスバーはブラックですが、他のバージョンも選べますのでアプリによって選んでください。
好きなステータスバーを選択

Prottに取り込む

ここでやっと先ほど撮影した画面の取り込みをします。
そしたら「カメラアイコン」を選択します。
カメラアイコンを選択

「ライブラリ」を選択します。
ライブラリを選択

一度に複数枚読み込めるので、読み込み終わったらそのまま「完了」です。
完了を選択

リンクや画面遷移の方法、タップの方法を設定

続いては画面にリンクを追加していきます。

画面をタップするとリンクが追加されますので、領域を調整してリンク先の画面を選択します。
リンク先の追加

次は画面が切り替わるときの動き「トランジション」の選択です。
トランジションの選択

最後にダブルタップ、スワイプ、ピンチイン・ピンチアウトなどの動作「ジェスチャー」を選択して完了です。
ジェスチャーの選択

同様にして他の画面もリンクを追加したら、「プレビュー」をタップして確認します。
プレビュー

味気ないプレビュー画面ですが、この動作確認をすることでアプリ開発のイメージがしやすくなり、問題点も早期に発見することができます。
プレビュー画面

本デザインの画面の置き換え

プレビューが完了したら、本デザインの画面と置き換えます。
チェックボタンを選択

画面を選択して「置き換え」を選択して、ライブラリから呼び込みます。
置き換えを選択

そうするとこんな風に置き換えられてさらに完成に近い形で確認ができます。
置き換えられたUI画面

アプリ開発に必須なアプリと言っても過言ではありませんね。

無料! おすすめアプリ! 今すぐアプリをダウンロード
  • アプリ名:Prott
  • 販売者: Goodpatch Inc.
  • 価格(掲載時): 0円
  • アプリサイズ:23.4MB
  • バージョン(掲載時):1.0