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