モックアップ作成を強力サポート！Prototyperを徹底解説

Web開発には欠かせない！Prototyperを使ってモックアップを作成

Prototyperとは

Prototyper

Prototyper は、web サイトやアプリ、タブレットのモックアップ作成を手伝ってくれるソフトになります。

2006年に結成されたJustinmindというチームが開発ソフトEclipse（Androidのアプリ開発にも使われているIDE）を使って、簡単にスピーディーに、そしてオープンな形でモックアップを楽しめるようにPrototyperは開発されました。

Prototyperは、2014年7月にリリースされて以降、世界中のwebデザイナーやワークショップで活用されています。

Prototyperのすごいところ

Illustratorの画像をPrototyperにコピペして、タイムリーにIllustratorの編集を反映させることができる

豊富なマテリアル・デザイン

モックアップの対象となるほぼすべてのデバイスに対応できるようにアイコンやチェックボックス、入力フォームが用意されています。

また標準アイテム以外にも、プレートのサイズを調整し、AppleWatchなどお好みのウィジェット・ライブラリーを追加すると、標準外のモックアップも簡単に作成することができます。

標準のライブラリー／ iOS8 - iPhone、 iOS8 - iPad、Android Phone Material Design、Android Tablet Material Design、Web Design、Google Glass

■アップルウォッチのモックアップ作業例■

豊富なイベント要素

制作するモックアップに様々なイベント要素を追加・編集することができます。マウスオン時のアニメーションやスワイプ操作、リンクなど本番さながらのアニメーションをモックアップで表現することができます。

チームでモックアップを共有できる

作成中のモックアップを簡単にチームで共有し、みんなからコメントをもらうことができます。

無料利用枠300MB

Prototyperで制作したモックアップは、クラウド上にデータ保存することが可能です。（要ログイン）

Prototyperのインストールと初期設定

インストール

JUSTINMINDPrototyperトップページ

JUSTINMIND Prototyper トップページ http://www.justinmind.com/ にアクセスします。画面中央の DOWNLOAD FREE をクリックします（写真①）。メールアドレスとパスワードを入力し、アカウントを作成します（写真②）。DOWNLOAD AND INSTALL をクリック（写真③）すると、Prototyper のダウンロードが開始（247 MB）されます。ダウンロード終了後、インストールが開始されます。

ダッシュボード画面の説明

①ツールバー／ファイルの保存や出力、共有操作、サイトマップ、シナリオ作成など
②アカウント／アカウント情報や公開したモックアップなどの確認
③ウィジェット／モックアップに使用するアイテム集
④モックアップ画面／現在編集しているモックアップ画面
⑤イベント／各要素のイベント情報
⑥スクリーン／作成したモックアップのページ、Templates 機能がイイ
⑦プロパティ／各要素の ID、動き、サイズなどの情報
⑧レイヤー／Photoshop などのイラストツールと似た機能

シミュレーター画面

Simulate

Prototyper 編集画面の Simulate をクリックすると、新しいウィンドウでシミュレーターが表示されます。表示する端末を変えたい場合は、Simulate ボタン右の歯車マークをクリックし、設定変更します。
①現在のスクリーン名
②スクリーン一覧表示
③操作ツール／画面方向の切り替え、スワイプなどの操作、画面サイズ
④デモ画面／左クリックしたまま、スクロールすると画面が上下可動

ウィジェットの追加

標準搭載のウィジェット以外にも Justinmind では、 Apple Watch や Windows 8 、グラフや facebook 関連の素材が提供されています。簡単にセットアップできますので、ご紹介します。 まず Justinmind の Widget Libraries にアクセスします。気になる widget を選んで Download を実行します（写真①）。Prototyper を起動し、ツールバーの Widgets → Add／Remove libraries をクリックします（写真②）。My Libraries タブをクリックして、Import Library 枠右の ・・・ をクリックします（写真③）。先ほどダウンロードしたファイル（charts-widgets.jpl など）を選択し、OK をクリックします。すると My Libraries の下部に追加したウィジェットが表示されるので、+ Add to widgets をクリックします（写真④）。Prototype のウィジェットに Chart が追加されました（写真⑤）。

モックアップのシェア

まず Prototyper 起動後、ログインします（画面右上より）。Prototyper ツールバーの Share →　Share をクリックすると Prototyper のクラウド上にモックアップが保存されます。データの保存完了後、View in my account をクリックします。Projects の管理画面から Invite reviewers をクリックし、プロジェクトを共有するメンバーのメールアドレスを入力します。各メンバーに招待状が送信されて、モックアップにコメントを残す事ができます。プロジェクトの管理者は、モックアップにコメントが追加された事をメールとダッシュボードで確認することができます。

Prototyperのアニメーション例

マウスオーバーした時にボタンカラ―を変える

Justinmind から公開されているサンプルを元に作業していきます。今回はパララックス・デザインのモックアップ例を使います。（View）
まずスクリーン上のボタンを何回か左クリックし、緑色のポイントで囲まれるように範囲設定します。そしてスクリーン下の Events → Add Event を左クリックします。（右クリックでもイベント追加指定可能）

Event 管理画面が開き、左上の on Click を左クリックし、Mouse → on Mouse Over を選択します。次に Event 内容を指定するために、Change Style を選択します。Background にチェックを入れて、カラー選択を行い、OK をクリックします。

以上でモックアップにイベントを追加することができました。よろしければサンプルをご覧になって、下方のメール入力ボタンにマウス・オンしてみてください。

ドロワ―メニューの動きを表現する

Web、スマホ問わずにメニューナビの主流スタイルとなっているドロワ―メニューもPrototyperで表現することが可能です。Justinmindからサンプルが公開されています。（サンプル・データ元のページ）

メニュー画面が開いた時のワイヤーフレームを用意しておいて、リンクとスライドの動き、時差をイベント要素として加えています。サンプルをベースにサイズやカラーを変えてアレンジすることができますね。

英語画面が見にくい場合は・・・

ダウンロードしたPrototyperにいくつかの手間をかけることで、表示言語をある程度日本語に変えることができます。

まずEclipseを日本語化するプラグイン「Pleiades」の安定版をダウンロード（無料）します（写真①②）。 プラグインのダウンロードが完了すれば、解凍し、features と plugins のフォルダをコピーします（写真③）。

C:\Program Files (x86)\Justinmind\Justinmind Prototyper 6.8.0 のフォルダを開いて、先ほどの 2 つのフォルダを貼り付けます。上書き確認画面は、YES（はい）をクリックします（写真④）。 次に Justinmind Prottyper 6.8.0 内の JustinmindPrototyper.ini という構成設定のファイルを開きます（写真④）。
最後の行に -javaagent:./plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar 　を追記し、上書き保存します（写真⑤）。 そして prototype を開くと、ツール・バーなどが日本語化されています（写真⑥）。

まとめ

動きのあるモックアップ「Prototyper」は、いかがでしたでしょうか？Prototyper は無料で利用できる範囲が広く、個人や小規模の開発現場であれば十分使いこなせるツールです。

ご自身のサーバ―でモックアップを共有したい場合やより豊富な機能を追加したい場合は月19ドルからのPROバージョンも用意されています。一度Prototyperの使い方を覚えておくと、心軽やかにモックアップの作成に取り掛かれますね。

動きのあるモックアップ、試してみませんか？