WEB

UIデザインがさらに捗る!Prottのワイヤーフレーム機能を使ってみました

UIデザインがさらに捗る!Prottのワイヤーフレーム機能を使ってみました

こんにちは。LIGでデザイナーをしています、マチルダです。

以前、「UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう」という記事で、簡単ですばやくプロトタイプを作成できるツール「Prott(プロット)」の使い方をご紹介しました。

今回は、そんな「Prott」にワイヤーフレーム作成機能が追加され、巷ではかなり話題となっていたので、早速レポートをします^^
※ワイヤーフレーム作成機能は有料プランPro・Team・Enterpriseプランでの提供です。新規アカウント登録から30日間は無料で使用できるので、ぜひお試しを^^

「Prott(プロット)」とは?

Prott   Rapid prototyping tool. Now gets an app.

「Prott(プロット)」はUIデザインで有名な株式会社グッドパッチさんがリリースしているプロトタイピングツールです。

ワイヤーフレーム作成機能とは?

パーツをドラッグアンドドロップすることで、あっというまにワイヤーフレームが作成が可能になりました。
今までPowerPointやExcelなどのツールでワイヤーフレームを作成していた方は、Prott上で他のツールを使うことなくワイヤーフレームを作成することができるようになります。

引用元:https://blog.prottapp.com/post/ja/wireframe

「Prott(プロット)」では、手書きで書いたワイヤーフレームを撮影(または画像のアップロード)すれば、リンク設定などするだけでサイトやアプリ制作のモックアップを手軽に作成できます。
しかし、ページ数が多い場合やPCサイトの場合は手書きで一枚一枚キレイに書くの、結構大変だな……とこっそり悩んでいたので、今回のワイヤーフレーム作成機能は本当に助かります!

ワイヤーフレーム機能を使ってみよう

今回は「Prott(プロット)」のWebアプリ版を使用していきたいと思います。

※ユーザー登録がお済みでない方は下記リンクからどうぞ!

ステップは下記のとおり。

  1. 新規プロジェクトの作成
  2. 作業画面の設定
  3. パーツ(コンポーネント)を配置する
  4. 保存と再編集

1. 新規プロジェクトの作成

21

まずはブルーの「新規プロジェクトを作成する」をクリックして、プロジェクトを作成しましょう。
初期はスマートフォンやタブレットのみの対応でしたが、現在ではPCやアップルウォッチ、カスタムモードも追加され、用途に合わせて使用することができます^^b

今回はPCサイトのワイヤーフレームを作成したいので、「Web」を選択しました。

2. 作業画面の設定

03

通常通り画像を読み込むこともできますが、今回は「ワイヤーフレームを描く」を選択します。

そうすると、ワイヤーフレームがさくさくできそうな画面が出現しました!
もはや勘の良い方ならば、以降の記事を読まずともワイヤーフレームの作成ができることでしょう。新しい機能が追加されると、便利になる嬉しさとともに、グッドパッチさんの考え抜かれたUIを見ることができる嬉しさもあります^^
04

今回はスクリーンをカスタムで設定したので、やや両端が隠れてしまっています……。
できれば全体を見て作業したい!という方は、左上の「拡大」「縮小」で見える範囲を調整することができます!
05

お隣の「スクリーンの設定」では、スクリーンのサイズを変更することができる、非常に嬉しい機能が……! グリッド表示の有無もこちらで設定できます。

※ ここで変更したサイズは他のページには反映されず、ページを追加した際ははじめに設定したスクリーンサイズが適用されるようです。

3. パーツ(コンポーネント)を配置する

06

あらかじめ用意されているパーツ(コンポーネント)をドラッグ&ドロップ。以上で配置完了です。簡単です。
07

サイズはパーツの端をドラッグして調整するもよし、右側の数値を変更するもよしで使い勝手抜群です。
08

さらに、こちらのコンポーネントたち、種類によってはダブルクリックで、色の設定やコンポーネントの削除などができることに感動しました!
画像を配置するだけのアプリが多いので、この機能は非常に助かります!
24

もちろん自分でシェイプを描くこともできるので、幅広い用途に対応してくれそうです!
シェイプを使うと、イラストのようなものを描くこともできます。自分はワイヤーフレームを白黒でつくる派ですが、カラーも設定することも可能で、カラーコード指定できるのも嬉しいですね^^
09

個人的には、スクリーン上でも右側のエリアでも、好きな方でテキストが編集できるUIが素敵だなと思いました。

さらに嬉しい機能が以下の通りです。

よく使うパーツをグループ化してコンポーネント登録できる!

例えば画像+テキストなど、よく使用するものは、グループ化してコンポーネント登録すればいつでも好きなときに使用することができます。
リストも作成できる&自分だけではなくプロジェクト内でも共有できる設定があります!

画像を読み込んで、コンポーネント登録できる!

11

自分で作成したパーツもドラッグ&ドロップでコンポーネント(形式は画像)として登録することができます! これは便利!
12

ショートカットも用意されているので、作業がサクサク進みます^^b

ショートカットキー一覧

Ctrl / ⌘ + C : コピー
Ctrl / ⌘ + V : ぺースト
Ctrl / ⌘ + X : 切り取り
Ctrl / ⌘ + G : グループ化
Ctrl / ⌘ + Shift + G: グループ化解除
Ctrl / ⌘ + S : 保存
Ctrl / ⌘ + Z : 戻る
Ctrl / ⌘ + Shift + Z: 進む
Ctrl / ⌘ 押しながらオブジェクトをドラッグ: オブジェクトの回転
Shiftを押しながらサイズ変更: 等倍拡縮
オブジェクト選択した状態で矢印キーで上下左右移動 : 移動

引用元:https://blog.prottapp.com/post/ja/wireframe

23

シンプルなワイヤーフレームならあっという間に作成できちゃいます!

4. 保存と再編集

作成したワイヤーフレームは、右上の「保存」ボタンをクリックして保存します。続いて、お隣の「×」ボタンをクリックすると、ワイヤーフレーム編集を終了して一覧ページに移動することができます。

22

ワイヤーフレームを再度編集したい場合は、スクリーンのサムネイル下部にある「ワイヤーフレームを編集する」アイコンをクリックすれば、OKです。
一覧ページでスクリーンを選択すれば、今までのようにリンク先やトランジションの設定をすることができます!

まとめ

いかがでしたでしょうか?

実際に使用してみて、今回のワイヤーフレーム機能が話題になっていた理由がものすごくわかりました。
いつもワイヤーフレームを何でつくろう……と悩んでいましたが、すばやく、そしてキレイに作成でき、リンク先や動きまで設定できる「Prott(プロット)」は、今後も使い込んでみたいと思います^^

最後までお付き合いいただきありがとうございました!

それでは、また!

 

【ワイヤーフレーム作成ならこちらもどうぞ!】

UIデザインが捗る!Prottでスマホサイトのプロトタイプを作成しよう

Web制作に超便利な無料ワイヤーフレームツール4選

Web制作者のためのワイヤーフレーム講座「役割と考え方」編

“Amazon”に学ぶ、4つの観点で考察するUXデザイン

先取り感満載!最近よく見るWebデザインの「あしらい」やUIまとめ10選

この記事を書いた人

マチルダ
マチルダ デザイナー 2014年入社
デザイナーのマチルダです。
好きなお酒はビールと澤の井です。よろしくお願いいたします。