My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

無料でお試し可能! ワイヤーフレームツール「Prott」を使ってみました

Prott

公式サイト:
https://prottapp.com/ja/


Webサイトの制作をする際、ワイヤーフレームをなるべく簡単にサクッと作れたらって思います。

今日は、そんな時にお役立ちのツール、「Prott」を使ってみたので、ご紹介します。

ワイヤーフレームツール「Prott」のご紹介

ユーザー登録から作成までの手順

まず、利用開始にはユーザー登録が必要です。

サイトトップページ右上の「無料ではじめる」をクリックします。
f:id:sntkk3:20180926233638p:plain


名前(姓名)、メールアドレス、パスワードを登録、会社・個人を選択し、登録し「次へ」ボタンをクリックします。
f:id:sntkk3:20180926232429p:plain


自身の属性を登録し「サインアップ」ボタンをクリックします。
※ここでは、「フリーランス」で登録しています。
f:id:sntkk3:20180926232515p:plain

これでユーザー登録は完了です。
登録したメールアドレスに確認メールが届いています。
メールボックスで、以下件名のメールを確認します。

件名:【Prott】アカウントを承認してください!


該当のメールを開き、「メールアドレスを確認する」ボタンをクリックします。

これでアカウント承認完了です。


ログインすると、このような画面が表示されます。
f:id:sntkk3:20180926233938p:plain

ワイヤーフレームを作ってみたいので、ここで、
「新規プロジェクト」ボタンをクリックします。


プロジェクト名を入力し、デバイスを設定します。
f:id:sntkk3:20180926234540p:plain


ここでは「Web」を選択します。
f:id:sntkk3:20180926234926p:plain


ワイヤーフレームを描く」ボタンをクリックします。
f:id:sntkk3:20180926235410p:plain


ワイヤーフレーム作成に必要な部品は画面左側に準備されています。

画面左側の部品(コンポーネント)をドラッグ&ドロップしながらスクリーンに配置しながら、ワイヤーフレームを描いていきます。
f:id:sntkk3:20180926235234p:plain

描き終わったら、画面右上の「保存」ボタンをクリックします。

こうして保存したワイヤーフレームは、メール、URL、QRなどでシェアすることもできますよ。

いかがでしょうか。
「Prott」を使うと、とっても簡単にワイヤーフレームが作成できます。

なお、ここでは、ワイヤーフレーム作成のみで使用していますが、他にもプロトタイプ作成も簡単にできるというありがた~い機能があります。

ちなみに、ワイヤーフレーム作成機能は本来有料サービスですが、
ユーザー登録開始後30日間はフル機能を無料で使えます。
30日間充分試してみて、気に入ったらアップグレードすればOK!

ということで、今日は、「Prott」のご紹介でした。
せっかくなので、ぜひお試しあれ。