2016年08月24日
228 Views

非エンジニアでも簡単にプロトタイプが作れるよ!

タグ:
Prott
アプリ
プロトタイプ

こんにちは、みなさん。ばっさーです。
タイトルの通り、今回はプロトタイプについてです。

プロトタイプとは

プロトタイプとは、原型、試作品などの意味を持つ英単語。
ITの分野では、ハードウェア開発の際の量産前の試作品や、動作や機能を検証するために最小限の規模で試作されたソフトウェアなどのことを意味する。
出展: e-Words

このようにプロトタイプとは製品の詩作品だと考えてください。
ところで、このプロトタイプはどこで使うことができるのか。それは、
リーンスタートアップのように、仮説を設定、製品の仮実装(プロトタイプ実装)、軌道修正というサイクルを回すときです。
ほかにも、非エンジニアがエンジニアに製品のイメージを伝える手段としても使うことができます。

プロトタイピングツールの紹介

Prott

Prott_1 Protte_2

料金

  • 無料(Freeプラン)
  • 1,900円/月(Starterプラン)
  • 3,900円/月(Proプラン)
  • 7,400円/月(Teamプラン)

対応アプリケーションの種類

  • Webブラウザアプリ
  • デスクトップアプリ
  • スマホアプリ

日本企業のGoodpatchが開発しており、使い勝手が良いプロトタイピングツールです。
遷移先の画面を線で繋いで設定したり、アプリのカメラ撮影で手書きのワイヤーフレーム画像も取り込めます。
日本においてプロトタイピングツールは、Prottのユーザーが多い印象です。
この後Prottを使って、ちょっとしたプロトタイプを作ってみます。

※今回はProttのみ紹介します。プロトタイピングツールはPrott以外にもあるので下記を参考にしてください。
プロトタイピングツール集

Prottを使ってみよう

1. Prottにてアカウントを作成し、ログインします。
Prott登録ページ
Prottサインインページ

2. 新規プロジェクトを作成しましょう
Prott新規プロジェクト

こんな感じになるはずです。
Prottプロジェクトページ

3. 下記画像をダウンロードします。

画像1
画像2

※ 今回は手描きのワイヤフレーム画像を使うということで、画像からプロトタイプを作成します。
ワイヤーフレームを作成し、それからプロトタイプを作ることもできますが、今回は紹介しません。

4. 上記の画像を、プロジェクトに追加します。
Prottプロジェクトページ画像追加

5. ヘッダー、フッターを下記のように設定します。
ヘッダー
フッター

6. 下記のようにクリック時の遷移先を設定します。(タップ、ダブルタップ、スワイプなど様々なイベントを設定できます。)



7. 完成です。プレビューを押して再生してみましょう。完成は以下のようになります。

最後に

いかがでしたでしょうか。
これで非エンジニアの方でも簡単にプロトタイプを作ることができますね。

合わせて読みたい