どうも、まさとらん（@0310lan）です！

スマホ、PC、Apple Watchなどのプロトタイプを、手描きスケッチやイメージ画像だけで作れる「Prott」をご存知でしょうか？

過去にアプギガでもご紹介しましたが、大幅なバージョンアップに伴い「ワイヤーフレーム」を作成できるエディタが、ついに搭載されました。

これにより、スケッチやイメージ画像が無くても、「Prott」だけでゼロから動くプロトタイプが作れるようになったのでご紹介してみようと思います！


どうやって使うの？
まず、通常通り「Prott」のマイページへアクセスし、画像を追加しようとすると新しく「ワイヤーフレームを描く」というボタンが現れるのでクリックします。



すると、今までは無かった「ワイヤーフレーム作成ツール」が表示されます。



使い方は非常にシンプルで、左メニューにある「アイコン画像」をキャンバス上へドラッグ＆ドロップしていくだけで「画面」が作れます！



アイコン画像の詳細設定は、右メニューで一括して行えるようになっています。



現時点では、ほぼスマホに最適化された「アイコン画像」となっていますが、シェイプ画像や手持ちの画像もアップロードできるようになっています。

これにより、PCやApple Watch用のワイヤーフレームもサクッと作れるようになっているので便利です。


プロトタイピングに挑戦！
それでは、簡単な「ワイヤーフレーム」を作りながら、手っ取り早くプロトタイプを作ってみましょう！

作るのは、簡易的な「Twitter風」のタイムライン画面です。


そこで、まずは画面トップに「ナビゲーションバー」を配置してみましょう。



「ステータスバー」も配置すると、それっぽくなりますね。



次に、「ユーザーアイコン」と「テキスト」を配置してみましょう！



テキストは、フォントやカラー、サイズ、行間など、右側メニューから細かく設定できるので自分好みにしておきます。



あとは、下方向へコピペしていけば、タイムラインっぽくなります。

ここで、面白い機能を使ってみたいと思います。


まず、要素の範囲を指定し、すべて選択した状態で「右クリック」から「グループ化」を選択します。

これで、バラバラの「アイコン画像」が1つのアイコン画像になります。


さらに、右クリックから「コンポーネント化」をクリックしてみましょう！



「コンポーネント名」は好きな名称を設定して「保存」をクリックします。



すると、左メニューに先ほど「グループ化」したアイコン画像が出現します！



これにより、左メニューからドラッグ＆ドロップで、同じ要素を何度でも使えるようになるわけです。

しかも、別のワイヤーフレームを作成する時にも再利用できるため、よく使う要素はどんどん「コンポーネント化」していけば作業効率がアップしていきます！


ちなみに、コンポーネント化した要素は、ダブルクリックで個別に中身を編集することも可能です。



このようにして「ワイヤーフレーム」をどんどん作成し、「Prott」の得意技である画面遷移も編集しましょう！



これで、動くプロトタイプの出来上がりです！


もちろん、スマホアプリで実機確認も可能です！


こんな「ワイヤーフレーム」も作ってみた！
「Prott」のワイヤーフレーム作成ツールを使って、いくつかサンプルを作ってみたのでご紹介しようと思います！

まずは、先ほど作りかけた「Twitter」アプリ！



こちらは、「LINE」のチャット画面。



人気の画像共有SNS「Instagram」だとこんな感じ！



他にも、「SmartNews」や「Googleマップ」なども作ることができますね。

このように、ほぼ完成形に近いイメージのプロトタイプを、素早く簡単に作ることができるわけです。

上記サンプルは、すべて「Prott」標準のアイコン画像だけで作ってますが、手持ちのイメージ画像を組み合わせれば、さらに応用範囲が広がるかと思います。

このワイヤーフレーム作成機能は、6月30日までどのプランでも無料で利用可能なので、ご興味ある方はぜひ試してみましょう！


おまけ
今回は、「Prott」の新機能であるワイヤーフレームについてご紹介しましたが、基本的な使い方は以下の記事で解説しています！

【画像だけで動くプロトタイプを実現する「Prott」で、スマホ・PC・Apple Watch用アプリを作ってみた！】

手描きスケッチをスマホで撮影したり、手持ちのイメージ画像を使って簡単なプロトタイプを作成する手順をご紹介しています。

また、複数の画面遷移が可能な「マルチジェスチャー機能」についても、詳しく解説しているので、ぜひ参考にしてみてください！


まとめ
「Prott」は、アイデアが閃いた時に、素早くカタチにできるのが最大の魅力かと思います。

「URL」だけで手軽に友人・知人へシェア出来るうえ、実際に触って試せるので意見交換も活発化するでしょう。

みなさんも、何か面白いアイデアがあれば、まずは「Prott」で動くプロトタイプを作ってみては如何でしょうか。


＜参考＞
・「Prott」公式サイト



wirtten by まさとらん