Prottとは？スマホサイトやアプリのワイヤーデザインを簡単に作れる便利ツール

ここ数年、ワイヤーデザインを作成するための便利なツールが続々とリリースされています。Web担当者の皆さんも、一度は何かしらのツールを使ったことがあるのではないでしょうか。

今回ご紹介する「Prott」は、ワイヤーデザインを作成するツールの中でも、スマートフォン向けのWebサイトやアプリのワイヤーデザイン作成に向いているブラウザベースのツールです。

中でも注目したいのがプレビュー機能で、ジェスチャーやアニメーションを設定することで、本物のサイトやアプリのように画面を遷移できます。

目次

1. Prottとは
   1. プラン
2. Prottの特徴
3. 登録方法
4. Prottの使い方
   1. 新規プロジェクトを作成する
   2. 画像ファイルアップロードする
   3. トランジションを追加する
   4. プロトタイプをプレビューで確認する
   5. その他の機能
      1. プロジェクトをシェアする
      2. プロジェクトにメンバーを招待する
5. まとめ

Prottとは

https://prottapp.com/ja/

Prott（プロット）は、株式会社グッドパッチが提供する、ワイヤー・UIデザインのプロトタイピングツールです。2014年10月の正式リリース以降、IDEO･ヤフー･DeNA･クックパッド･グリーなど多くの企業に導入されています。

プラン

無料でも利用できますが、機能に制限があります。各プランの機能詳細は以下の通りです。30日のトライアルで、Proプランの全ての機能を使えます。

Prottの特徴

• 直感的なUI
  • ドラッグ＆ドロップで直感的に操作できます。
  • iOS・Androidアプリで、複数枚の画像を一度に取り込めます。
  • ジェスチャー・アニメーションを設定し、プレビューで本物のサイトやアプリと同様の遷移を確認できます。
• ワイヤーフレーム機能
  • Webサイト・アプリのワイヤーフレームを作成するための、豊富なパーツが用意されています。特にスマートフォンのパーツが充実しています。
  • パーツをドラッグ＆ドロップし、簡単にワイヤーフレームを作成できます。
• 複数デバイス対応
  • iOS・Android・Macのアプリ、Web版が用意されています。
  • データは常にクラウドで同期され、異なるデバイス間で最新のデータを確認できます。
• 共有
  • URL・QRコード・埋め込み・Slack・Hipchatの5種類の方法で共有できます。
  • コメント機能でフィードバックや質問を残し「解決済み」に変更してステータス管理できます。

登録方法

Prottの画面右上の「無料ではじめる」をクリックします。

ユーザーネーム・メールアドレス・パスワードを入力し、「サインアップ」ボタンをクリックします。

登録完了すると、そのままログインします。

Prottの使い方

新規プロジェクトを作成する

「+新規プロジェクト」をクリックします。

プロジェクト名を入力し、プルダウンからデバイスを選択し、デバイスの向きを選択したら、「新規プロジェクトを作成する」をクリックします。

プロジェクトの作成が完了し、プロジェクト内容が表示されます。

画像ファイルアップロードする

プロジェクト内で「+PCから画像を追加」をクリックします。

アップロードしたい画像を選択します。Shiftキーを押しながら複数選択することも可能です。

選択した画像がアップロードされます。

トランジションを追加する

トランジションとは、画面遷移のアニメーションです。設定すると、プレビュー画面にて、実際のサイトを回遊するのと同様に画面遷移を確認できます。トランジションを追加したい画面をクリックします。

画面内でトランジションを追加したい箇所をドラッグすると、黄色い四角が表示されます。

リンク先の画面をクリックして選択すると、曲線コネクタが連結します。

ジェスチャーとトランジションの種類を選択します。ここでは、ジェスチャーはTap、トランジションはNoneを選択します。選択が完了したら、「閉じる」をクリックします。

プロトタイプをプレビューで確認する

プレビューでは、作成したプロトタイプの画面遷移と動きを確認できます。メニューバーの「プレビュー」をクリックします。

プレビュー画面が表示され、マウスポインタが丸に変化します。Shiftキーで、2本指のポインタに変化します。

画面右側のボタンは上から順に、縦横表示切り替え・プレゼンモード・シェア・コメント・ヘルプ・閉じるです。

トランジションを追加した箇所をたどれば、実際のサイトを回遊するのと同様に画面遷移を確認できます。

その他の機能

プロジェクトをシェアする

プレビュー画面で、画面右側のボタンの中の「シェアする」をクリックします。

「共有設定をオンにする」をクリックします。

プロジェクトをシェアする方法は、URL・QRコード・埋め込み・Slack・Hipchatの5種類があります。ここではURLの共有方法をご紹介します。

URL直下のテキストエリアに共有したいメールアドレスを入力し、「送信」ボタンをクリックします。

共有されたユーザーにはメールが届きますので、「プロジェクトをチェックする」をクリックして、プロジェクトにアクセスします。

プロジェクトにメンバーを招待する

プロジェクトの詳細画面で、メニューバー内の＋（プラス）マークをクリックします。

追加したいメンバーのメールアドレスを入力し、下のプルダウンで、レビュアー（コメントのみ）・エディター（プロジェクトの編集）・オーナー（メンバーの管理）のいずれかの権限を選択し、「送信」ボタンをクリックします。

なお、トライアル期間に使えるProプランで追加できるのはレビュアーのみです。

招待されたユーザーにはメールが届きますので、「Prottにサインアップする」をクリックして、プロジェクトにアクセスします。

まとめ

Prottは、スマートフォンのWebサイトやアプリのワイヤーデザイン作成に便利なプロトタイピングツールです。プレビュー機能では、完成後のサイトやアプリと同様に画面遷移を確認できます。

手描きのワイヤーデザイン画像の一括アップロードや、共有・コメント機能も充実しているため、メンバー間で盛んに意見を出し合ってアイデアをブラッシュアップするにはぴったりなツールです。