2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Prottでモバイルアプリのプロトタイピング環境を準備しよう!

Last updated at Posted at 2017-05-22

※本ドキュメントは新入社員向けのトレーニング資料です。

#1.はじめに
Prottとは
Goodpatch社が提供しているスマホアプリ/Web向けのプロトタイピング環境の呼称です。
Prottではアプリケーションそのものの開発はできませんが、スマホアプリ/Webページのデザインやタップ時のアクション等の動作に代表されるような、設計資料上では確認できない実際のアプリの動作を作成することができます。

alldevices.png

特にモバイルアプリ開発においてはデザインはもとより、UI/UXや開発スピードが重要視される傾向があります。開発を進めていく上で思い描いているアニメーション等のイメージが個々人で一致しない可能性が高く、手戻りが多く発生しているのが現状です。

これらの問題を早期に解決するためにProttを用いたプロトタイピング手法を学びます。

プロトタイピングとは
「プロトタイピングは、何のため? プロトタイピングを中心とした開発プロセスとは」が参考になります。

Prott以外のプロトタイピングツール
「2017年最新版!プロトタイピングツールのまとめ」が参考になります。

#2.プロトタイピング環境の準備(PC編)
アカウントの作成
Google Chromeにて以下のサイトにアクセスします。
https://prottapp.com/ja/

「無料ではじめる」をクリックします。
スクリーンショット 2017-05-17 10.26.26.png

ユーザネーム、メールアドレスとパスワードを入力して「サインアップ」をクリックします。
スクリーンショット 2017-05-17 10.27.52.png

ログイン後の画面が表示されることを確認します。
スクリーンショット 2017-05-17 10.28.23.png

#3.プロトタイピング環境の準備(スマホアプリ編)
Prottアプリのインストール
実機で確認するためにiPhone/Androidのアプリをインストールします。
AppStoreもしくはGooglePlayにて「Prott」で検索します。
IMG_0930.PNG

アプリの発行元が「Goodpatch inc.」であることを確認した上でインストールしてください。
IMG_0931.PNG

インストール完了後にアプリを起動します。
IMG_0124.PNG

※iOSアプリ立ち上げ直後に通知の有無と問われるアラートが表示されることがありますが、本研修ではどちらを選択しても結構です。
IMG_0126.PNG

既にアカウントは取得しているので、「ログイン」をタップし、PCにて登録したアカウントをパスワードを用いてログインします。
IMG_0130.PNG

ログインが完了すると以下のような画面になります。
IMG_0167.PNG

プロトタイピング環境の準備は以上で終了です。お疲れさまでした。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?