読者です 読者をやめる 読者になる 読者になる

そごうソフトウェア研究所

SOA、開発プロセス、ITアーキテクチャなどについて書いています。Twitterやってます@rsogo

比較評価!モックアップ作成ツール「Justinmind」と「AppGyver」のPrototyperを使ってみた

モックアップ作成ツールとは

ここで言及しているモックアップとは、実際のアプリを作る前にUIだけを確認するために用意するものです。僕も実際のプロジェクトの中で、関係者に事前にモックアップで合意を取ってからアプリの開発に入ります。

同じジャンルのツールで一番有名なのはBalsamiqでしょうか


モックアップ作成ツールとして、同じPrototyperという名前のツールがJustinmind社とAppGyver社からでています。どちらも静止画だけでなく、動的なモックアップを簡単に作ってデザインや操作感の検証を行えるツールです。
どちらのツールも非常に今注目されているツールですが、コンセプトが結構違うので自分のやりたいことによって選択する必要があります。

Justinmind社のPrototyper

http://www.justinmind.com/prototyper/features-build
Freeプランで使っています。今までメインはこちらを使ってきました。

概要

iPhone/iPadAndroid、Webのデザインテンプレートが予め用意されており、それを使ってGUIを組み立てていきます。
http://www.justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/overview.png

組み立てたUIにアクションを埋め込むことができて、ブラウザでアプリが動いているかのように操作することができます。ボタンの背景にイメージを設定することもできるので、作り込んだデザインも用意することができます。

自分の使い方

アプリの特徴的な画像(ロゴ、グラフのイメージ、写真など)以外はテンプレートのデフォルトの部品でざくざくモックを作っていきます。
この時点で、このUIで何かできるのか、どんな情報が見られるのか、とのような配置、構成なのか、といったビジュアル以外のデザインはできあがるので、関係者や、想定ユーザに動くイメージを見てもらって検証します。

ここまでできているとアプリの開発には入れるので、IllustratorPhotoshopを使ったビジュアルデザインと並行して開発に着手します。


このツールでビジュアルまで凝ったモックを作り込むのは手間がかかるので、逆にIllustrator等で作ったイメージでビジュアルは評価して、改善を繰り返しています。


このツールの良い点は、デザインして設定して公開する機能が一つになっているので、その場で、デザインを直して公開という作業がスピーディーに行けます。

AppGyver社のPrototyper

http://www.appgyver.com/
Freeプランでは3画面までしかサポートしてないので、Basicプランで使っています。

概要

デザインテンプレートとかないです。デザイン済みのイメージをアップロードするところからはじめます。
そして、アップロードされたイメージに領域を指定して、アクションを埋め込んで行きます。

例えばボタンの場所をマウスで囲って、別の画面へ遷移するアクションを設定します。
http://www.appgyver.com/assets/prototyper/features_add_links-8218e48eace7b65bd2ee2b6843a052e1.png


作ったモックはURLや、QRコードを使って他の人にシェアでき、このツール用のスマフォアプリが用意されているので、そのアプリ上でモックを動かして評価します。

このモック実行用のアプリが、iPhone/iPadだとさくさく動いて良いですが、Android(Galaxy S3とSony Tablet Sで評価)ではアプリが頻繁に落ちてしまいました。

自分の使い方

Illustratorで先にビジュアルデザインを作ります。この段階では、デザイナーさんではなく自分でやりますので、あまり凝ったことはやりません。Illustrator用のiPhone/iPadAndroidのデザインテンプレートを使ってさくさく作ります。テンプレートは例えばこんなの。

それをAppGyverのツールに取り込んで、アクションを設定した後、関係者にシェアします。


こちらツールの良い点は、Illustratorで画面を作るので、自由度が高くてどんどんUIを作り込んで行けること。Justinmindのやつでは、ここにこの部品入れたいんだけど、なんか入らない・・・、ということもたまにあります。AppGyver側の設定操作も画面上を枠で囲って、アクションを埋め込むという直感的なもので良いです。

ただ、デザインが別ツール故に、デザインを修正して公開までのステップがJustinmind社のと比べると多いです。がんがん修正が発生するフェーズでは面倒に感じます。


面白いのはモックの元になるのは画像だったら何でも良いので、手書きのイラストを写真で取って取り込んでも良いわけです。後はパワポで作ったイメージとかも。

どっちを使うか。両方を使ってみた結論

ビジュアルデザインが重要で、それ次第で機能も変わるならAppGyver

ビジュアルデザインは置いておいて、機能性や操作性のデザインから進めて行けるならJustinmind

個人的にはAndroidのスマフォ、タブレットをメインに持っているのでAppGyverのAndroidアプリは改善を期待してます。
自社のアプリはデザインファーストで作っているので、今後はAppGyverにお世話になる機会が増えそうです。