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

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

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

目次

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

Prottとは

1.png
https://prottapp.com/ja/

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

プラン

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

Free Starter Pro Team Enterprise
月額料金 無料 1,900円 3,900円 7,400円 個別見積もり
プロジェクト数 1 3 無制限 無制限 無制限
ユーザー 1 1 1 2 15以上
スクリーン 無制限 無制限 無制限 無制限 無制限
レビュアー 無制限 無制限 無制限 無制限 無制限
ワイヤーフレーム機能 × ×
画面遷移図機能 × ×
macOSアプリ × ×
共同編集 × × ×
組織管理機能 × × ×
グループ機能 × × × ×

Prottの特徴

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

登録方法

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

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

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

Prottの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

その他の機能

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

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

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

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

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

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

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

21.png
プロジェクトの詳細画面で、メニューバー内の+(プラス)マークをクリックします。

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

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

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

まとめ

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

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