プロトタイプ作成サービス「Prott(プロット)」の簡単な使い方 ~実際に作ってみた~

  • 2019-09-15
  • 2019-09-16
  • Prott
  • 70view

■はじめに

プロトタイプ作成サービス「Prott」を実際に使ってみました。

簡単に作ることができ、実際に社内のアプリ提案で使用しています。

とても便利でお勧めなので、使い方を分かりやすく説明します。

 

■使い方

1~3.プロトタイプを作成する画面を表示する:

1.サイトにアクセスし、ログインします。

https://prottapp.com/ja/

※サービスの始め方は<「Prott」アプリの企画を通すために有効なプロトタイプが簡単に作れるサービスの始め方>をご覧ください

ログインしたら、「新規プロジェクト」をクリックします

 

2.プロジェクト名、デバイス(選択)、デバイスの向きを設定し、「プロジェクト作成」をクリック

 

3.「ワイヤーフレームを描く」をクリック

※「ドラッグ&ドロップでスクリーンを追加」を選ぶと、画像をそのまま画面として使えます。ゼロからUIを作るには「ワイヤーフレームを描く」を選びます

これがプロトタイプをつくる画面です

画面の左から配置するモノを選び、ドラッグアンドドロップで、右のアプリUIエリアに配置します。

 

4~6.プロトタイプの1ページ目を作成する:

それでは、プロトタイプの画面を作っていきましょう

4.まず、タイトルを配置します。左メニューから「Text」を選び、右に配置したら、タイトルを入力します(今回はNice!App)

 

5.画面の最下部に、検索ウィンドウを追加するには、左メニューからSearchを選んで右側に配置します。

この時点で、一度右上の「保存」をクリックしたら、その右にある「×」をクリックして、今作ったプロトタイプのアイコンを確認しましょう

 

6.「アクティブ」タブが、現在作っている最中のものです。選択すると、右側に見た目が表示されます

まずは、1画面目が完成しました。
この画面をコピーして、複数の遷移するページも作っていきます。

 

7.作ったスクリーンを複製する(プロトタイプの2ページ目を作成する):

作ったプロジェクトのスクリーン(サムネイル)、右下の歯車をクリックし、「複製」を選びます

最初に作った画面の右となりに、コピーした画面が作られました。
このままでは、1ページ目も、複製した2ページ目(スクリーンのコピー)も全く同じなので、わかりやすくするために、「Nice!App」という画面上のタイトルを、変えましょう。

今回は「Nice!App 2ページ目」と、変更しました。上の画像は、変更前のものです。

 

8.画面の最下部・最上部を固定にする方法:

この画面でいえば、「検索ウィンドウ」がその位置になります。
最下部、最上部には、△のマークがあり、これをクリックして動かすことで、クリーム色の範囲が広がります。

この範囲が、画面を上下にスクロールしても消えない固定エリアとなります。

 

9.特定の場所をクリックしたら、別の画面に遷移するようにする:

ここでは、最初に作った「スクリーン」の最下部にある検索ウィンドウをクリックしたら、「スクリーンのコピー」の画面に遷移する設定をしてみます。

9-1.「スクリーン」のサムネイルをクリックし、右側の画面の、検索ウィンドウ周辺をドラッグ→選択範囲(クリックすると遷移するエリア)をクリーム色にします

 

9-2.表示されるメニューアイコンから、「逆S字の矢印」をドラッグし、遷移先となる「スクリーンのコピー」のサムネイルへつなげます

 

9-3.どの操作をしたときに遷移するのかを選択します。
今回は「Tap」を選択し、「閉じる」をクリックします

これで、クリックすれば遷移する、という設定は完了です。

 

10.プレビューで動きを確認する:

サムネイルをクリック→「プレビュー」をクリック

↓表示されたプレビュー上で、Serchをクリックすると、、

↓2ページ目に遷移します

 

11.画像を画面として使用する:

11-1.これまで、「Text」や「Search」を選んでいた左メニューのタブを「画像のアイコン」をクリックし変更します。

「PCから画像を選択」をクリック

 

11-2.配置したい画像を選び、ドラッグアンドドロップで配置します。サイズも変更できます。

画像の配置はこれで完了です。

 

12.スライドバーを表示する:

画面の右上「スクリーンの設定」をクリック→「スクリーンの縦幅」を既定のMAXよりも大きく設定します。

これで、スクリーンバーが表示されるようになります

 

13.あらかじめ用意されているアイコンを利用する:

「Text」や「Search」を選んでいた左メニューのタブを「画像のアイコン」をクリックし変更します。

「アイコン」をクリック→今回は、設定、に関するアイコンを探すため、検索ウィンドウに「setting」と入力します。

すると、設定に関するアイコンがずらり、と表示されます。ドラッグアンドドロップで使用することができます。

 

■最後に:試しに作った、LINEのような画面

こんな画面も、10分ほどで、簡単に作れました。

最新情報をチェックしよう!