■はじめに
プロトタイプ作成サービス「Prott」を実際に使ってみました。
簡単に作ることができ、実際に社内のアプリ提案で使用しています。
とても便利でお勧めなので、使い方を分かりやすく説明します。
■使い方
１～３．プロトタイプを作成する画面を表示する：
１．サイトにアクセスし、ログインします。
※サービスの始め方は＜「Prott」アプリの企画を通すために有効なプロトタイプが簡単に作れるサービスの始め方＞をご覧ください
ログインしたら、「新規プロジェクト」をクリックします
２．プロジェクト名、デバイス（選択）、デバイスの向きを設定し、「プロジェクト作成」をクリック
３．「ワイヤーフレームを描く」をクリック
※「ドラッグ＆ドロップでスクリーンを追加」を選ぶと、画像をそのまま画面として使えます。ゼロからUIを作るには「ワイヤーフレームを描く」を選びます
↓
これがプロトタイプをつくる画面です
画面の左から配置するモノを選び、ドラッグアンドドロップで、右のアプリUIエリアに配置します。
４～６．プロトタイプの1ページ目を作成する：
それでは、プロトタイプの画面を作っていきましょう
４．まず、タイトルを配置します。左メニューから「Text」を選び、右に配置したら、タイトルを入力します（今回はNice!App）
５．画面の最下部に、検索ウィンドウを追加するには、左メニューからSearchを選んで右側に配置します。
この時点で、一度右上の「保存」をクリックしたら、その右にある「×」をクリックして、今作ったプロトタイプのアイコンを確認しましょう
６．「アクティブ」タブが、現在作っている最中のものです。選択すると、右側に見た目が表示されます
まずは、1画面目が完成しました。
この画面をコピーして、複数の遷移するページも作っていきます。
７．作ったスクリーンを複製する（プロトタイプの2ページ目を作成する）：
作ったプロジェクトのスクリーン（サムネイル）、右下の歯車をクリックし、「複製」を選びます
↓
最初に作った画面の右となりに、コピーした画面が作られました。
このままでは、1ページ目も、複製した2ページ目（スクリーンのコピー）も全く同じなので、わかりやすくするために、「Nice!App」という画面上のタイトルを、変えましょう。
今回は「Nice!App 2ページ目」と、変更しました。上の画像は、変更前のものです。
８．画面の最下部・最上部を固定にする方法：
この画面でいえば、「検索ウィンドウ」がその位置になります。
最下部、最上部には、△のマークがあり、これをクリックして動かすことで、クリーム色の範囲が広がります。
この範囲が、画面を上下にスクロールしても消えない固定エリアとなります。
９．特定の場所をクリックしたら、別の画面に遷移するようにする：
ここでは、最初に作った「スクリーン」の最下部にある検索ウィンドウをクリックしたら、「スクリーンのコピー」の画面に遷移する設定をしてみます。
９－１．「スクリーン」のサムネイルをクリックし、右側の画面の、検索ウィンドウ周辺をドラッグ→選択範囲（クリックすると遷移するエリア）をクリーム色にします
９－２．表示されるメニューアイコンから、「逆S字の矢印」をドラッグし、遷移先となる「スクリーンのコピー」のサムネイルへつなげます
９－３．どの操作をしたときに遷移するのかを選択します。
今回は「Tap」を選択し、「閉じる」をクリックします
これで、クリックすれば遷移する、という設定は完了です。
１０．プレビューで動きを確認する：
サムネイルをクリック→「プレビュー」をクリック
↓表示されたプレビュー上で、Serchをクリックすると、、
↓2ページ目に遷移します
１１．画像を画面として使用する：
１１－１．これまで、「Text」や「Search」を選んでいた左メニューのタブを「画像のアイコン」をクリックし変更します。
「PCから画像を選択」をクリック
１１－２．配置したい画像を選び、ドラッグアンドドロップで配置します。サイズも変更できます。
画像の配置はこれで完了です。
１２．スライドバーを表示する：
画面の右上「スクリーンの設定」をクリック→「スクリーンの縦幅」を既定のMAXよりも大きく設定します。
これで、スクリーンバーが表示されるようになります
１３．あらかじめ用意されているアイコンを利用する：
「Text」や「Search」を選んでいた左メニューのタブを「画像のアイコン」をクリックし変更します。
「アイコン」をクリック→今回は、設定、に関するアイコンを探すため、検索ウィンドウに「setting」と入力します。
すると、設定に関するアイコンがずらり、と表示されます。ドラッグアンドドロップで使用することができます。
■最後に：試しに作った、LINEのような画面
こんな画面も、10分ほどで、簡単に作れました。