非デザイナーが画面作成・設計ツール Prott を使ってみた
こんにちは。とうふ申します。
本記事が初投稿となります。
記念すべき第一投稿目は、画面 UI 作成ツール Prott について書こうと思います。
目次
1. 導入
筆者は普段、 Windows で仕事をしています。
画面設計をする際、 Excel に図を描いて行っていたのですが「Excel って表計算ソフトらしいもんなぁ。画面 UI 作成に適したツールで作成してみたいなー」と思い探してみました。
いくつかツールを探してみたのですが、「Prott」がわかりやすそうなので今回はこれを採用しました。
2. 試してみた事
今回はお試しという事で、非常に簡単な以下の操作を試してみました。
- プロジェクト作成 - ワイヤーフレーム
2.1 プロジェクト作成
画面 UI を作成する為に新規プロジェクトを作成しました。
こちらは、ただプロジェクトを作成するだけなので非常に簡単でした。
2.2 ワイヤーフレーム
画面同士をワイヤーフレームで繋いでみました。今回は、ログイン画面とファイルアップロード画面の UI を作成して繋いでみました。
まず、下記のような2画面を作成しました。
次に、2つの画面をワイヤーフレームで繋いでみました。 繋ぎ方は簡単で、ドラッグ & ドロップ で範囲を指定して別の画面に繋ぐだけで出来ました。
実際の動きは、プレビュー画面で確認する事が出来ます。
「クリックイベントを発生させる範囲を決めて他の画面と繋ぐ」という作業だけだったので、こちらも非常に簡単にできました。
「こうすればいいのかな？」というのを数回試してみると出来たので、非常に直感的で使いやすいなと思います。
試しに、ファイル削除の挙動もワイヤーフレームで作成してみました。
完成形をファイルアップロードと合わせて下記に載せておきます。
こちらは、ワイヤーフレームを少し工夫した感じですかね。
正式な使い方かはわかりませんが、各機能のイメージを可視化する事ができるので有りかなと思いました。
今回試した事は以上です。
3. 料金設定
料金表も載せておきますね。
無料体験版では Pro 版を使用できるようなので、同じクオリティの機能を使うなら月額 ￥3,900 になりますね。
筆者のように、画面設計ツール初心者にとっては手が出しにくいなと感じました。。。
Free 版は月額無料らしいので、画面だけをちょこっと作成するならこれでも良いかなと思いました。
(Free 版だとワイヤーフレームが使えないようなので、画面遷移のイメージは作成できませんが。。。)
4. 最後に
Excel でしか画面 UI を作成した事がない筆者からすると、
Prott は画期的なツールに思えました。
画面でよく使うようなアイコンが用意されていたり、
画面の遷移も設定する事が出来るのでイメージし易かったりしましたからね。
さくっと画面 UI を作成したい時は、効果的なツールかなぁって感じですかね。
ここまで読んでくださりありがとうございました。
次回も、何か面白そうなツールに関する記事を書こうかなと思います。 以上。
