こんにちは、デザイナーの石橋です。

今回はプロトタイピング作成ツール「prott」の使い方をご紹介します。スマートフォンのアプリでも使用できますが、今回はPCのweb上での解説となります。

また、ワークショップ形式の解説となりますので、皆さんがデザインしたサイトなどがあればその画像を数点ご用意していただけると分かりやすいかと思います。

よろしくお願いします！

 

1.「prott」とは？

prottは株式会社グッドパッチさんが開発した、プロトタイピングツールです。一言で説明すると、コーディングの力を借りずに簡単にモックアップを作成できるアプリケーションです。

つまりデザインしたものをすぐに触って動きの確認が出来るわけですね。

プロトタイピングの目的には

• 情報設計の検証
• アイデアを実現させてイメージを深める

などさまざまありますが、それらの事をprottは、簡単かつシンプルに把握することが可能です。

 

2.実際にprottを触ってみましょう。

まずプロジェクト名とデバイスを決定するのですが、今回はスマートフォンを対象としたモックアップを作成するので、iPhone6の設定で進めます。

入力が完了して、「新規プロジェクトを作成する」ボタンを押すと↓のような画面へ遷移します。

↑これがこれから作業を進めるためのメインの画面になります。左がアップしたワイヤーフレームやデザインの画像の一覧エリアで、右が選択した各画像の編集エリアとなっております。

ではさっそく画像をアップしてみましょう。可能であれば遷移先の画像も同時にアップしておくと便利ですよ。アップできましたでしょうか？今回は仮に弊社HPのデザインをあげてみました。

画像をアップした後は上部ナビに「プレビュー」、「シェア」のボタンが追加されていますね。これについてはまた後ほど詳しく説明させていただきます。

 

3.モックアップを作成しましょう。

いよいよモックアップの作成です。まずは、トップ画面から編集していきましょう。

手始めにヘッダーから編集してみます。ピンクの枠で囲った部分がヘッダーを固定させるためのバーです。

動かした部分までが固定され、バー部分に数字が表示されていると思いますが、それはpx数です。デザイン通りぴったりpx数を合わせなくても大抵は違和感なく動かせますが、神経質な方はこちらを見て指定すると便利だと思います。

 

次は画面を遷移させてみましょう！私は試しにMENUバーからとんでみますね。右エリアの画像上をドラッグしてみてください。すると四角い枠が表示されますよね。そこがクリッカブルとなるので必要分囲んでください。

さらにその枠からひょろひょろした線が左エリアへ向かって出てきたと思います。それを動かして囲んだ枠の遷移先の画像に引っ張ってみてください。はい、見た目では分かりませんがこれだけで画面の遷移ができました。

え？どうやって確認するのかって？それでは先ほどから表示されているナビの「プレビューボタン」をクリックしてみましょう！おお！なにやらiPhone6の画面がでましたね。これは皆さんが先ほどヘッダーの固定とボタンの遷移先を設定した物の確認画面です。触ってみてください。コーディングしたわけでもないのにサイトのように動くはずです！

面白いですよね。私も最初は感動しました。

 

…ですがprottのすごいところはこれだけではありません。なんとインタラクションまで設定できるのです！

画面を戻ってさきほど皆さんが枠で囲んだ箇所をクリックしてみてください。すると「トランジションを編集」というやつが下から表示されたかと思います。その中の左から二番目のボタンを押してみましょう。　…なんだかよく分からないボタンが沢山現れましたね。

これは上段一列が遷移させるためのタップ方法、下段一列は遷移させる時のインタラクティブの表現方法を選ぶボタンです。私は「ダブルタップ」と「スライドダウン」を選んでみました。

では、またプレビューで確認してみましょう。ほー、なるほど。こうなりますか…。ダブルタップはおかしいですね。

 

…とまぁこんな感じでサイトのモックアップはこれだけで大体の事は出来てしまいます。素晴らしいです。

 

4.シェアしてみましょう。

それでは作ったものを誰かとシェアしてみましょう。　…とはいっても今回は練習なので、そのやり方を覚えていただくだけでも構いません。

ではナビのシェアボタンをクリックしてください。「プロトタイプをシェア」というモーダルが表示されたかと思います。 

「シェアするだけじゃん、楽勝楽勝」と思われるかもしれませんが、ここで一点大事なポイントがあります。

それは「パスワードを設定する」です。もし公開前のお仕事でprottを使ってクライアントとやりとりをする場合は、極秘情報としてパスワードは必須項目となりますよね。

やり方は簡単です。パスワードを入力して「パスワードを保存」をクリックするだけです。あとは下の共有したい相手のメールアドレスを入力をして送信すれば完了です。

 

5.終わりに

いかがでしたでしょうか。prottの便利さが伝わりましたでしょうか。

これを使いこなせるようになれば、情報設計とアイデアの落とし穴にはまることはもう無いでしょう。

実際に私も最近実案件でお世話になっています。

ぜひ皆さんもこれから活用してみてください！