初めてでも簡単！Prottの使い方講座〜基本機能編〜
Goodpatchでは、業務を効率的に進めるプロトタイピングを簡単に行えるツール、「Prott」を提供しています。
サービスの中でも基本的な以下機能の使い方について、画像付きで丁寧にご説明します。
- プロジェクト作成
- スクリーン作成
- 画面遷移
- プレビュー
- プロジェクト共有
目次
1.ログイン・プロジェクト作成を行いましょう
まず始めにサービスにログインしてください。こちらからログインできます。
https://prottapp.com/users/sign_in
アカウントをお持ちでない方は、こちらから無料でアカウント作成ができます。
サービスにログインすると、以下のような画面が表示されます。
まず始めにプロジェクトを作成します。
プロジェクトとは、1つのプロトタイピングを作成する箱の様なイメージです。
では早速プロジェクトを作成してみましょう。「＋新規プロジェクト」ボタンを押してください。ポップアップが表示されます。
まずはプロジェクト名を入力してください。名前の付け方ですが、今後様々なプロジェクトが作成されることを想定して名付けることをおすすめします。
例えば「事業名-案件名-バージョン」のように名付けておけば、プロジェクトが増えても探しやすくなります。
プロジェクトを作成する単位も、案件ごとか、案件のバージョンごとか、ある程度決めておくと後々管理が楽になります。
次にデバイスを選択してください。iPhone、Nexus、Webなどの規定サイズや、用途に合わせたカスタムサイズが用意されています。
また、選択肢によってはデバイスの向きを縦・横どちらか選択することができます。
※デバイスの向きは途中で変更できないのでご注意ください
設定が完了したら「新規プロジェクトを作成する」を押してください。これでプロジェクト作成は完了です。
では、早速作成したプロジェクトを選択してみましょう。
2.スクリーンを作成してみましょう
プロジェクトを選択すると作業画面が表示されます。ここにスクリーンを追加して、遷移を繋げていきます。
スクリーン追加方法ですが、3つの方法があります。
- ワイヤーフレーム機能を使って作成
- PCから画像を追加
- Dropboxから画像を追加
ワイヤーフレーム機能では、あらかじめ用意されたパーツを組み合わせてスクリーンを作成します。パワーポイントやエクセルを使わなくても、簡単にクオリティの高いワイヤーフレームを作ることができます。
ワイヤーフレーム機能に関しては後日詳しく使い方をご説明します。（概要を知りたい方はこちらのリリースノートをご覧ください。）
今回は1番簡単なPCから画像を追加する方法でスクリーンを作成しましょう。
まずは、手書きやパワーポイント、エクセル等で作成したワイヤーフレーム画像を用意してください。
「PCから画像を追加」ボタンを押してワイヤーフレーム画像を選択し、アップロードしてください。ドラッグ＆ドロップでもアップロードすることができます。
完了すると以下のようにスクリーンが追加されます。
3.画面遷移をつけてみましょう
ここからは、実際のアプリらしく動かすために画面遷移の設定を行います。
まず1画面選択してください。次にクリックしたい範囲をドラッグ＆ドロップで選択してみましょう。
遷移させたい範囲を選択します。後から選択範囲のサイズ変更も可能です。
範囲を選択したら、遷移先の画面をクリックしてください。そうすると以下のようなポップアップが表示されます。
画面設定は細かく行うことができますが、ここではよく使う2つの機能をご紹介します。
1つ目は手のアイコン。これはタップやスワイプなど、どのような操作を行った時に遷移するかを指定します。
2つ目は遷移時のアニメーション。スライドやフリップなどいくつかアニメーションが用意されています。
では、ここまでの作業を動画でおさらいしましょう。
これでスクリーンが指定した画面遷移で繋がります。
画面遷移について、動画でも説明しているのでこちらも参考にして下さい。
4.プレビューでプロトタイプを確認しましょう
作成したプロトタイプをプレビュー機能で確認しましょう。遷移元のスクリーンを選択し、画面上部の「▷プレビュー」ボタンを押してください。
今回はiPhone 6/7 を選択したので、iPhoneの中にプレビューが表示されています。
では、先ほど設定した範囲を押してみましょう。
無事遷移することができました。
押下時に青く点滅する箇所がありますが、これは遷移を設定した範囲を教えてくれる機能です。今回のデモのような、画像の一部分だけに遷移をつけた場合などに、どこを押せば良いのかわかりやすくなっています。
5.プロトタイプをシェアしましょう
プレビューで確認して問題がなければ、プロトタイプをシェアしましょう。
URLを発行、共有するだけで、Prottを利用していない方にも簡単にシェアすることができます。シェアの方法ですが、URL共有の他に、QRコード埋め込み、<iframe>タグ埋め込みが可能です。
まずは画面右上のシェアアイコン
を押してください。するとシェア画面が表示されます。「共有設定をオンにする」をクリックしてください。
共有によってプロトタイプが外部に漏れるリスクがある場合には、「パスワードを設定する」にチェックを入れてください。
今回は参考として<iframe>を使った埋め込みを行ってみました。<iframe>埋め込みの場合、以下の様にブラウザ上に直接プロトタイプを埋め込むことができます。
早速実践してみましょう！
今回の記事では、基本的な使い方についてご紹介しました。プロジェクト作成から共有まで簡単に行うことができます。
他にもProttには多くの機能があります。詳しい紹介はまた改めて行いますのでお楽しみに。まずは色々触って試してみましょう！
