Prottの使い方完全解説！料金プランや特徴もまとめて解説します！

Prottとは？

Prottとは、株式会社グッドパッチによって開発されたツールです。ワイヤーやUIデザインのプロトタイプツールとして生まれました。

Webデザインといえば、デザイナーが作成したものをディレクターが確認し、動作や見え方などを確認するのが一般的。この確認の段階でプロトタイプを使うことが増えてきたのです。

ちなみに、プロトタイプとは、実際に公開したときを想定したサンプルのようなものです。動きや見え方などは公開したとき同様のものとなるので、公開前のチェックなどで使われます。Webデザインの知識がなくても、完成イメージを確認できることから、ディレクターから他のメンバーに共有する際などにプロトタイプを作ることが多い傾向にあります。

Prottの料金プラン

Prottの料金プランは、「Free」「Starter」「Pro」「Team」「Enterprise」の5つです。

それぞれの料金や特徴などについては以下をご確認ください。

 プランによって、料金はもちろんのこと、ユーザー数や使用可能な機能などが異なります。

使用人数や使いたい機能、使用規模などと照らし合わせたうえで、適切なプランを確認してください。

Prottの特徴

Prottのようなプロトタイプツールは他にも存在しますが、他にはない魅力的な特徴は多いものです。

使用するユーザーや、使用方法などによっては、他のツールよりもProttのほうが圧倒的に使いやすいといったケースもあるので、ぜひその特徴を把握しておきましょう。

H3：日本語に完全対応している

Prottの特徴として、まず挙げられるのが日本語に完全対応している点です。

日本語に対応しているので、英語が読めない方でもスムーズに使用ができます。日本語に完全対応している理由は、そもそもProttが日本で誕生したツールであるからです。現在展開されているプロトタイプツールの多くは、海外で開発されたものであるため、日本語に対応していないことが少なくありません。英語表記のみのツールも多いため、英語や読めない方としては、その都度翻訳しながら操作方法を確認したり、直感で操作してみたりしながら、使い方を学んでいきます。

しかし、Prottなら日本語表記なので、翻訳などの無駄な手間はかかりませんし、すぐに使用を始められます。

Sketchと連携して確認できる

ProttはSketchと連携することが可能です。Sketchはデザインを作成するにあたって必要なツールの一つ。デザインのほか、イラストなどの作成も可能です。しかし、他のツールとは異なり、プロトタイプ作成機能まで一貫しているわけではありません。そのため、別途でプロトタイプツールを取り入れる必要があるのです。

ProttであればSketchと連携させて、プロトタイプを作成できるうえに、それぞれの「UIデザインツール」と、「プロトタイピングツール」の専門的な機能性を確保できます。

Adobe XDのようなツールは、UIデザインツールもプロトタイプにも対応しているのが魅力ですが、それぞれの専門的な機能性は不十分であることから「もっとこんな機能が使えたら」といった声が少なくありませんでした。

ProttとSketchを連携させれば、デザインの作成や動作・見え方の確認、フィードバックフローに至るまで完結できます。

ワイヤーフレームを作成できる

Prottは、デザインに特化したツールではないものの、ワイヤーフレームを作成できるのが特徴です。

シンプルな機能のみを搭載しているので、複雑なワイヤーフレームの設計は難しいものの、簡易的なワイヤーフレームならサクッと作成することができます。

Prottを活用してワイヤーフレームを作成すれば、デザイナーに指示が出しやすくなるだけでなく、作成したワイヤーフレームに基づいてデザインを作成してもらうことが可能。作成されたデザインは、そのままPrott側でプロトタイプに使えるので、非常に便利です。

時間や手間がかかりがちな仕様書の作成や変更ですが、ワイヤーフレームを活用して必要最低限の業務量に抑えられるようにしてはいかがでしょうか。

プロトタイプ上にコメントを残せる

Prottの特徴として挙げられるのが「コメントを残せること」です。作成したプロトタイプ上に直接コメントを残せるので、チャットツールやメールなどの別の機能を使ってフィードバックをする必要がありません。

コメントは、記入した人の名前のほか、追加した日時も記録されるので、どのコメントが最新なのかは一目瞭然です。

制作現場でありがちな、「言った、言わない」のトラブルを防ぎやすいので、デザインの確認時には重宝するツールといえるでしょう。

Prottの使い方

これからProttを導入したいと考えている方にとって、気になるのがそもそもどのように使うのかといった点でしょう。

スムーズに使い始めることができるよう、ここからはProttの使い方を詳しくご紹介していきます。

Prottへの登録方法

まずは、Prottへの登録が必要です。

公式サイトへアクセスし、右上の「無料で始める」をクリックします。ユーザーネームやメールアドレス、パスワードなどを入力して「サインアップ」を選んでください。入力内容に問題がなければ、次に進むとそのままログイン後の画面が表示されます。

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

ログイン後の画面を表示して、左下の青いボタン「+新規プロジェクト」を選択してください。

プロジェクト名やデバイスなどの入力を行い、「新規プロジェクトを作成する」をクリックします。

プロジェクトの作成が完了されると、プロジェクトを編集できる画面が表示されるので、プロダクトやワイヤーフレームの作成の際は各機能を使いながら作業を進めていきましょう。

画像をアップロードする

まずは、画像をアップロードしてみましょう。

プロジェクト画面を開いて、「+PCから画像を追加」を選択。選択画面が表示されるので、追加したい画像を選択して「開く」をクリックします。複数の画像を選択したい場合には、Shiftキーを押しながら選ぶと一度に複数枚を選ぶことが可能です。

必要な画像を選んだら、右下の「開く」を押すと画像が追加されます。

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

次にトランジションの追加を進めていきます。トランジションとは、画面遷移のアニメーションのこと。事前の設定を済ませておくことで、プレビュー画面を開いたときに、実際に公開するサイトにアクセスしたときのような画面遷移を確認することが可能です。

画面ごとにトランジションを選択できるので、追加したい画面を選んで設定してみましょう。

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

プロトタイプをプレビューで確認する際には、まずメニューバーを選択してください。

メニューバーを選ぶと「プレビュー」の文字が現れるのでクリックすると、プレビュー確認ができます。

プレビュー画面になると、マウスポインターは丸型に変わります。Shiftキーを押すと2本指のマウスポインターに変わるので使いやすい方法を選んでください。

Prottをもっと便利にする使い方

Prottは基本的な機能を使うだけでも十分便利なツールです。使いやすいうえに、ツールに関する知識がなくても、簡単に操作ができます。

しかし、他にも「知っておくことでもっと便利になる使い方」もあるので、ぜひ覚えておきましょう。

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

Prottは、プロジェクトのシェアが簡単に行えます。

プレビュー画面を開くと、画面の右側に6つのアイコンが縦に表示されるので、上から3番目を選択。「共有設定をオンにする」をクリックして、シェアする方法を選びます。

シェアする方法は、URLリンクのほかQRコードや埋め込み、スラックなどがあるので、やりやすい方法でプロジェクトのシェアを行いましょう。

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

プロジェクトを作成した後は自由にメンバー招待可能です。途中でチームが変更されたり、人数が増えたりしたときには、その都度必要に応じてメンバーを招待しましょう。

メンバーの招待方法は、メニューバー内の「+」をクリックし、追加したいメンバーのメールアドレスを入力します。権限が「レビュアー」「エディター」「オーナー」から1つ選択して、「送信」をクリックします。

招待メールを受信した方が、メールを開いて「Prottにサインアップする」をクリックすると、プロジェクトにアクセスできるようになります。

まとめ

今回はProttの使い方や特徴、便利な機能などについてご紹介しました。

Web制作の現場では欠かせないプロトタイプ。しかし、作成には時間がかかるうえに手間も多く、現場が回らなくなってしまう原因でもあります。

Prottを導入することで、簡単にプロトタイプを作れるだけでなく、制作の前段階の時点でワイヤーフレームを活用すればより効率的にweb制作のプロセスを進めて言うことが可能です。

プロトタイプの作成に悩んでいる方や、web制作関連で連携や共有などに課題を感じている方は、ぜひProttの導入を検討してみてはいかがでしょうか。