スマホやWebサイトのワイヤーデザインが作成できる「Prott」

昨今、ワイヤーデザインを作成するために便利なツールが続々と出てきています。Web関係のお仕事をされる場合、もはや必須のツールといえるでしょう。そして、ワイヤーデザインを作成するツールの中でも、「Prott」はスマートフォン向けのWebサイトやアプリのワイヤーデザイン作成に向いているブラウザベースのツールです。

Prottの使い方

インストール

まずは、Prottのホームページにいきましょう。すると下記の画面が現れます。そこで「無料で始める」をクリックしましょう。なお、すでに導入を検討済の場合「導入を検討したい」をクリックしましょう。

すると、「さっそくProttを使いはじめよう!」という表示が現れます。名前、メ−ルアドレス、パスワード、「会社で利用」「個人で利用」について記載させるページが現れますので、各々記載した上で「次へ」をクリックしましょう。

次に、利用用途を選びましょう。「フリーランス」「趣味・サークル」「副業」「授業」「その他」など用途があるので自分の用途に合わせて選びましょう。選んだ後は「サインアップ」をクリックしましょう。以上で、Prottのインストールは終了です。メール確認もないままそのまま利用することができます。

ワイヤーフレームを作成する

まず、Prottを開くと以下の画面になります。「アクティブ」のタブをクリックしましょう。

次に、一から始める「新規プロジェクト」と「モバイルプロジェクト」「Webプロジェクト」があるのでお好みに応じて選びましょう。まずは、既存のサンプルプロジェクトの「モバイルプロジェクト」をクリックしてみましょう。

すると、下図の画面が現れます。変更したい画面を選択します。試しに一番最初のページをクリックしましょう。

すると、遷移するページが現れます。どのボタンを押せばどのように遷移されるか把握をしておきましょう。そして、変更するページをクリックしましょう

すると、画面が以下の形になります。

画面に様々なシェイプが用意されているので用途に沿って挿入していきましょう。文字を入れたい場合は、テキストをクリックして、文字を挿入してみましょう。

次に、完全に新規のプロジェクトを作成してみましょう。最初のアクティブの画面で「新規プロジェクト」をクリックしてみましょう。

そして、「プロジェクト名」「デバイス」を選択した上で「プロジェクト作成」をクリックしてみましょう。

すると、コンポーネントリストの作成という表示が現れるのでリスト名と公開範囲を設定した上で保存をクリックしましょう。

すると、完全に白地の画面が現れるのでシェイプからお好みの形などを選んで作成していきましょう。

また、作成したシェイプについては色を付けることが出来ます。右側に「塗り」のタブがあるのでそこで色を塗りましょう。

またアイコンを挿入することも出来ます。画像の中からアイコンを選択します。今回は、時計のアイコンを入れてみます。クリックして大きさなど自由に設定することが出来ます。

次に「保存」のボタンをクリックしましょう。「保存して新規スクリーンを作成する」か「スクリーンを複製する」か「保存して閉じる」を選択しましょう。今回は「保存して閉じる」をクリックします。

すると、作成したプロジェクトが保存された状態で見ることが出来ます。新たにプロジェクトを作成する場合には「プロジェクトを追加」をクリックすればいいでしょう。

また、作成したプロジェクトをアプリの画面で見れるよう設定できます。「Apps」をクリックしてお好みのデバイスを選択しましょう。今回は「iOS」を選びます。

すると、先程作成したプロジェクトが表示されます。縦横自由に切り替えができます。

Prottの制限

全てブラウザ上で作成することができるので、デバイスによる制限はありません。通常、このような画面遷移のツールはデバイス上で動くことが多いので、ブラウザ上で自由に設定できるのはかなり自由度が高くクリエイティブに向いた作りになっています。

Prottの価格

30日間限定でプロ版を無料で使うことが出来ます。有償で利用する場合には「Starter」「Pro」「Team」「Enterprise」の4つのプランがあります。Starterプランは月1900円かかり、３つのプロジェクトのみ作成することが出来ます。Proプランは月3900円かかりプロジェクトは無制限に作成できワイヤーフレーム機能などかなり自由度が高く設定することが出来ます。また、Teamプランは2ユーザーでEnterpriseプランは15ユーザーが利用できます。Teamプランは7400円、Enterpriseプランは15ユーザー利用することができます。30日間はトライアルとしてプロ版を無料で使用することができますのでまずは無料で利用してみてはいかがでしょうか？

Prottのサイト情報

URL：https://prottapp.com/ja/
運営会社: Goodpatch