Google+ もご覧ください
ユーザーアイコン

ピックアップ

Prott - スマホアプリのプロトタイプをさくさく作ろう

Prott - スマホアプリのプロトタイプをさくさく作ろう

あなたがスマホアプリを開発する際に大事にしていることは何ですか?一般的に言われるのはUI/UX、つまりデザインと操作性ですよね。人気のあるアプリはこの二つを限りなく突き詰めて作られているものばかりです。 ということで紹介したいのがPrott、Web上でモバイルアプリのプロトタイプを作成できるWebサービスです。現在ベータ版で、招待制となっています。開発は日々行われていますので近々オープンされるかも知れません!

Prott
Prott

プロジェクト

ユーザ登録後、最初に出てくるのがプロジェクト一覧です。今回はこのSample Projectを試してみます。

プロジェクト一覧
プロジェクト一覧

画像が多数並んでいます。これはデザイナーの方が作成し、アップロードします。手書きで書いて、カメラで撮ってアップロードしても良さそうですね。

スクリーン一覧
スクリーン一覧

スクリーンを選択して、アクションを付ける部分をマウスで囲みます。そうするとアクション先をワイヤーで繋げるようになります。

アクション先設定
アクション先設定

アクション先を指定すると、どういうエフェクトにするか指定できるようになります。進む、戻る、モーダルなど様々な表示が想定されています。

エフェクト指定
エフェクト指定

デザイン自体へのコメントを残すことができます。デザインフィードバックとして使うこともできますね。

コメント
コメント

基本的にはこれを繰り返して、画像をアニメーションしながら切り替えられるプロトタイプを作成していきます。そして随時プレビューができます。

プレビュー
プレビュー

シェアも可能です。このURLを実機で開けば、まるでアプリのように試すことができます。

シェア
シェア

アプリで試す際にはホーム画面に追加する必要があります。

iOSで実行した例
iOSで実行した例


この手のサービスとしてはPOPが知られていますが、あちらはiOS/Android上だけで完結するタイプになっています。手軽に使えそうな感じがする反面、画面の小さなアプリでは若干操作がしづらかった感もあります。

その点Prottはデスクトップのブラウザから操作が出来るのでPhotoshopやIllustratorを使って作ったデザインをそのままアップロードしてアクション設定して…とデザイナーにとっては使い慣れたデスクトップ環境で使えるのが便利です。後、そもそもアプリをインストールしないで使い始められるのは良いですね。

後はPOPの場合、一般的に手書きのラフなデザインをプロトタイプを作ると思いますが、Prottはもう少しデザインされたものを確認するのに向いているかも知れません。この辺りは好みや開発のステージによって異なると思いますので、両者を使い分けることもできそうです。

Prott - Rapid Prototyping for Mobile Apps

Prott
タグ:

記事をリクエストする

関連記事

コメント