シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
注目記事ピックアップ
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
share0
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
share0
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
share0
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
Webサービス
2015/05/27 12:00

「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!

prott-wireframe_01_2 どうも、まさとらん(@0310lan)です!

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

過去にアプギガでもご紹介しましたが、大幅なバージョンアップに伴い「ワイヤーフレーム」を作成できるエディタが、ついに搭載されました。
prott-wireframe_02 これにより、スケッチやイメージ画像が無くても、「Prott」だけでゼロから動くプロトタイプが作れるようになったのでご紹介してみようと思います!


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

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

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

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

現時点では、ほぼスマホに最適化された「アイコン画像」となっていますが、シェイプ画像や手持ちの画像もアップロードできるようになっています。
prott-wireframe_07 これにより、PCやApple Watch用のワイヤーフレームもサクッと作れるようになっているので便利です。


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

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


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

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

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

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

あとは、下方向へコピペしていけば、タイムラインっぽくなります。
prott-wireframe_12 ここで、面白い機能を使ってみたいと思います。


まず、要素の範囲を指定し、すべて選択した状態で「右クリック」から「グループ化」を選択します。
prott-wireframe_13 これで、バラバラの「アイコン画像」が1つのアイコン画像になります。


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

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

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

これにより、左メニューからドラッグ&ドロップで、同じ要素を何度でも使えるようになるわけです。
prott-wireframe_17 しかも、別のワイヤーフレームを作成する時にも再利用できるため、よく使う要素はどんどん「コンポーネント化」していけば作業効率がアップしていきます!


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

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

これで、動くプロトタイプの出来上がりです!
prott-wireframe_20
もちろん、スマホアプリで実機確認も可能です!


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

まずは、先ほど作りかけた「Twitter」アプリ!
prott-wireframe_21

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

人気の画像共有SNS「Instagram」だとこんな感じ!
prott-wireframe_23

他にも、「SmartNews」や「Googleマップ」なども作ることができますね。
prott-wireframe_24 このように、ほぼ完成形に近いイメージのプロトタイプを、素早く簡単に作ることができるわけです。

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

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


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

【画像だけで動くプロトタイプを実現する「Prott」で、スマホ・PC・Apple Watch用アプリを作ってみた!】
prott-wireframe_25 手描きスケッチをスマホで撮影したり、手持ちのイメージ画像を使って簡単なプロトタイプを作成する手順をご紹介しています。

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


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

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

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


<参考>
「Prott」公式サイト



wirtten by まさとらん

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る