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

アプギガトップ > Webサービス > 「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
注目記事ピックアップ
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る