先日の寒波にすっかりやられた橋本ですこんにちは。
さてさて、アプリでもサイトでもモックアップを作るのは超大事ですね。カンプよりモックアップ、遷移の確認はマップよりモックで実際に動かして体感、…という傾向が強まってるのではないでしょうか。
しかしなかなかやり方が定まらないというか、定番がなくて数多いサービスやツールから選ぶのも試すのもよくわからないというか…。
試行錯誤の毎日ですが、すごーいツールがあるよ！とのことで、新しくUI設計用のツールを試してみました。
「Prototyper」です。社名のJustinmindとごっちゃになって、どっちで呼べばいいものか迷います。
便利そうだぞい（σ｀・∀・´）σ
以前Skechで作ったサンプルからモックアップを起こしてみます。
これですね。
ちなみにPrototyperにはたくさんのパーツやテンプレートが用意されていますが、
Google Glassも対応です。まじか。
今回はiPhone6の画面を作っていきます。
ぺたぺたぺたり。
Skechから画像のコピー＆ペーストができたのでサクサクとできました。
文字や四角形は左のパーツ一覧からドラッグで配置してから編集しました。
パーツぞれぞれに、ボーダー、背景色、フォント等の設定ができます。
タップした時の動きを設定します。
上の画面でのCase1の設定はもうちょっと細かくしていて、
数字に加算するような設定に。
ここ、ものすごく細かく設定できます。組み合わせ次第で複雑な演算もできそうなので、凝る人にはモックアップ上で簡単なゲームくらい作れてしまうかも。
シミュレートボタンを押すとブラウザで動きが確認できます。
タップで動く様子が伝わるでしょうか。
キャプチャできていませんが、イベントが設定されている部分は時々青く点滅します。
イベントは、タップ以外にもスクロールやリサイズなどでも設定できます。
ボタンの部分は数字が1ずつ大きくなる＆色が変わる動きをつけています。
Prototyper公式サイトにいくつか作例があります。
Examples Build hi-fi wireframes and prototypes like these
この中の一つをダウンロードして開くと、
これ全部、普通に画像とテキストを置いてるのかなと思ったんですが、
ファイル自体はすごくすっきりしていまして、
変数みたいなのがありますね。
表示するデータの中身はここ。
データベースまで扱えるようです。
UI作成と確認に便利なPrototyperですが、サイトマップやシナリオ（ユースケースかな？使い方がよくわかりません）、コメントのための画面もあります。仕様の確認や変更のやりとりが1つのファイルで完結するようになっているようです。
フリー版にはない機能も多いのですが、有料版の試用期間中であればいくらでも使えます。
シミュレート用のHTMLを書き出す機能やリンク以外のイベント機能も有料版のみ。
有料版と無料版の比較はこちら。
どこまで作り込むか、誰と共有するかでプランが変わりそうです。
実際の業務にも使ってみてちょっと思ったことですが、何もないところからPrototyperを立ち上げて、そこだけでUIを書いていくのはちょっとキツい気がします。最初から細かい部分に注力してしまったり、少しの変更でも複数ページに影響が出る場合に一つずつ修正することになったり。手書きでもいいので、ざっくりしたワイヤーフレームと遷移図は先にあったほうが良さそうです。
それと、つい頑張ってリッチに作り込んだとしても、このまま納品したり組み込んだり、画像を綺麗に書き出したりはできません。当たり前ですが本物は一から別に作ります。ここでの作業に集中しすぎて時間を使いすぎたり、実現が難しい動きを盛り込んでしまったり、そういったことには注意が必要かもしれません。
その辺りに注意すれば、平面に描いただけではわからない動きが目に見えるようになる便利なツールだと思います。
スクロールとかパネルの切り替え、ダイアログやフォームの扱い等、すごく便利です。
しかし動きや仕様の基本的な検討よりは顧客へのプレゼン的な使い方がメインになるかもですね。
