UIデザインならPrott（プロット） 超便利なWebサイト・アプリのワイヤーフレーム作成ツール
こんにちは！@monaka496です。Webサイトやアプリを作る際に皆さんはどのようにしていますか。今回はWebサイトやアプリのUIデザインを考える上で、超便利な「Prott」というツールを紹介します。「Prott」があれば、Web制作や、アプリ開発のスピードを圧倒的に早くすることができます。
Prottとは
Prottは、簡単に言うと「UIデザイン／プロトタイプ開発用の便利なツール」になります。Webサイトやアプリを本格的に開発する前段階でモックを作成すると思うのですが、このProttならコーディング不要でプロトタイプを作成することができます。Web制作やアプリ開発など、長いスパンで行われる案件において、このProttがあれば意思決定を圧倒的に早く、効率的にすることができるため、非常に有用なツールだと思います。
つまりどういうこと・・・？
イメージつかみやすいようにProttで出来ることを動画にしてみました。「1000の会議より1のプロトタイプですね」簡単な画面キャプチャですが、ざっくりどんなことができそうかイメージをつかめます。
Prottの何が優れているの？
コーディングスキルの無い担当者でもUIデザインが可能
Prottはブラウザ上で利用できるデザインツールです。基本的にはドラッグ&ドロップで利用できるため、デザインに特別なスキルは必要ありません。引っ張ってきてそこにどんな内容を入れたいか入力するだけです。だれでも簡単に使える大変便利なツールです。このツールがあるおかげで「Web知識の浅い担当者」でも十分制作チーム側と会話できるようになるのでは無いでしょうか。制作チーム観点でも具体的なイメージを提供してもらうことで、要件の認識合わせをしやすくなると思います。
リンク機能をつけることができる
作成したプロトタイプの特定の箇所を選択して、このページに遷移させるということを簡単に設定することができます。Excelなどで要件書を作成すると、ツリー図が複雑になって結局どんな感じ？というのが頭の中で描きにくくなることがあると思います。この機能を使うことで、よりイメージしやすいプロトタイプを作ることができます。
作成したプロトタイプの共有が非常に優秀ですばらしい
Prottで作成したプロトタイプは簡単に共有することができます。共有のURLを送るだけで、作成したプロトタイプにアクセスすることができます。事前に会議の前にこのプロトタイプを送付しておけば、会議時間を短縮することができます。意思決定スピードを求められる案件についてはこのProttを活用しない手はありません。
こんな感じで共有できます。超かっこいい・・・
サポートチームの体制が充実。超短時間で反応してくれて親切
Prottにはチャットサポートが用意されています。このチャットポートですが、控えめにいっても最高です。レスポンスの早さ、回答の正確性、丁寧さどれも大変素晴らしく満足しています。コールセンターなどで電話をかけながら、といったサポートが一般的にあるサポートだと思いますが、その品質とは比べ物になりません。非常に快適です。
豊富なモジュール、初心者でもそれっぽく作成できる
Prottにはデフォルトでモジュールが提供されています。iPhoneのアプリを制作したい場合、iPhoneで利用されているようなボタンが使いたくなると思いますが、Prottなら最初から用意されているので心配する必要はありません。ドラッグ&ドロップで簡単にボタン配置ができてしまいます。ちなみにこのキャプチャですが、標準で搭載されているモジュールだけで作成しています。それっぽく作れますね・・・！
画像の取り込み機能、紙に書いたデザインでモックが作れる
とはいえ、パソコンに慣れていない方にとっては使いこなせるか不安な方もいると思います。そんなときに便利なのが画像の取り込み機能。画用紙などにワイヤーフレームを手書きしてiPhoneで撮影、それをパソコンに取り込んでProttにアップロードすることで、プロトタイプツールの完成です。もちろん画像で取り込んだワイヤーフレームにもリンク機能を付与することができます。
アカウントの作成方法
アカウントも非常に簡単に取得できます。無料でトライアルすることができますので、とにかく触ってみましょう。合う合わないはやはり触ってみないとわからないと思いますので。
手順１：Googleで「Prott」と検索
はじめに、Prottのサイトに行きます。スペルミスに注意しましょう！「Prott」です。
手順２：無料ではじめるを選択
画面中央の「無料ではじめる」を選択します
手順３：必要情報を入力
「氏名」、「ユーザー名」、「メールアドレス」、「パスワード」、「個人 or 会社」を選択します。私は個人なので個人を選択しました。企業のweb担当者の方は会社で利用を選択しましょう。
手順４．Prottの利用用途を選択
個人だと「副業」や「フリーランス」などの選択肢が出ました。一番当てはまりそうなものを選択しましょう
手順５．管理画面ログイン
このような画面にアクセスできたらアカウント作成は終了です。
まとめ
Prottはだれでも簡単にそれっぽいプロトタイプツールが作成できますので、まずは始めてみましょう。もし自分に合うなーと感じた方は有料プランも検討してみるとよいですし、合わなければやめちゃえばOKです。無料アカウントを作成するときに特にクレジットカードなども求められないので、精神的ハードルも低いです。AWSなどは無料期間すぎると自動課金だったので、Prottは優しいなと思いました
気になる方はぜひ使ってみてください。Web制作、アプリ開発やブログのデザインなど何でも使えますよー
気になる方はぜひ使ってみてください。Web制作、アプリ開発やブログのデザインなど何でも使えますよー
