加藤章太朗さん
  • コラボレーター
  • SELECK(デザイン)
  • 加藤章太朗

プログラミングなしでプロトタイプが作れる。プロトタイピングツールProttの使い方

  • -
  • このエントリーをはてなブックマークに追加
    -
  • tweet

Webサービスやアプリを作る際に、まずは簡単なプロトタイプを作り仮説検証をし、ユーザーのインサイトの検証ができた後に、プログラミングをしてプロダクトを作る手法が広がっています。

その流れにあわせて、プログラミングすることなしにWebサービスやアプリの動きを簡単に表現できる「プロトタイピングツール」も数多くリリースされています。今回は日本で広がりを見せるプロトタイピングツール「Prott」の使い方について整理しました。

Prottとは

ProttはWebサービスやアプリを素早く形にし、プログラミングなしで仮説検証を行えるプロトタイピングツールです。

Prott

まず無料トライヤルで始めてみましょう

どのようなものかを理解するためには、実際に使ってみるのが一番です。サイト右上のボタンから無料トライヤルを始めてみましょう。

Prott

ユーザーネーム、メールアドレス、パスワード、を入力し、利用規約、プライバシーポリシー、に同意したら利用可能になります。

Prott

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

ログインすると下記の画面が表示されるので、まずは右上の新規プロジェクトの作成からプロジェクトを作りましょう。

Prott

プロジェクト名を決め、プロトタイピングするデバイスを選択します。iPhone、iPad、Android(Nexus)、Web、Apple Watch、Custom、から選びましょう。

Prott

2.スクリーンの追加

イラストレーターやSketchなどで作成したプロトタイプの画像を追加していきます。時間をかけずに仮説検証をしたい場合、手描きのアプリ画像を登録していき、インタラクションを確認することもできます。ドラック&ドロップですぐにプロトタイプ画像が追加されます。

Prott

Prott

3.画像に動きをつける

それでは、追加した画像に動きをつけていきます。動きをつけたい画像をクリックしましょう。クリックすると、右側のスペースにその画像が表示されます。

Prott

動きのきっかけとなるボタンやタブをマウスで選択します。初めはここが少し分かりづらいかもしれませんが、マウスで範囲を選択する動きで慣れてしまえばすごく楽なUIだと思います。下記の画像の場合、選択した画像の左下の丸を選んでいます。

Prott

動きのきっかけを選択したら、下記の画像のように自動的に黄色いヒモのようなものが出てくるので、遷移する先の画面にくっつけます。

Prott

今回は左下の丸はメニューなので、丸を押すとメニューが出てくる遷移を作りました。また、逆にメニューのバツボタンを押すと、元の画面に戻る動きも同じ要領でつけます。

Prott

デフォルトでは「タップすると表示される」というインタラクションが設定されていますが、ダブルタップなど他のアクションも選択することができます。

Prott

4.プレビューで確認する

画面右上のプレビューボタンから、作成した動きをプレビューで確認しましょう。

Prott

プレビューを押すと先ほど作成した画面が出てきて、動きを設定した左下の丸をクリックすると、メニューが表示されます。

Prott

Prott

5.スマートフォンで確認する

スマートフォンで確認したい場合は、右上のシェアからURLをスマートフォンに送って、簡単に確認することができます。

Prott

このようにProttを使うと、プログラミングをすることなしに簡単に遷移を確認できるプロトタイプを作成することができます。

6.ワイヤーフレーム作成機能

Prott上でワイヤーフレームを作成することもできます。まずは画面右上の+ボタンを押しましょう。

Prott

「ワイヤーフレームを描く」というボタンがあるので押しましょう。

Prott

ワイヤーフレームを作成できる画面が現れます。四角形などの基本的な図形だけでなく、検索窓やラジオボタンなどアプリの部品も用意されているので、簡単にワイヤーフレームを作ることができます。

Prott

他にも便利な機能が沢山ありますので、試してみてはいかがでしょうか。

↓Prottの導入事例はこちら

カッコイイだけじゃない「使える」UIデザインを デザインプロセスを変えるツール

最高のUI/UX! 直感的に使えて、マルチデバイス対応のプロトタイプ制作ツール「Prott」

  • -
  • このエントリーをはてなブックマークに追加
    -
  • tweet