UXデザインの品質を上げるためには、早い段階での検証が必要です。そのためには、ペーパープロトタイピングをはじめ、さまざまな手法が考えられてきましたが、プロトタイピングを支援する、ツールやサービスもたくさん登場しています。Qiitaのまとめサイトでは、全部で29にものぼるツールやサービスが紹介されています。他のサイトでの評価も参考に、どれが便利か、いくつか試してみました。

1.Adobe Experience Design CC(Adobe XD)

xd.png

アドビが満を期して発表したプロトタイプツールです。基本的な操作感がアドビのソフトなので使い慣れるのは早いと思います。デザインをするモードと、画面遷移を設定するモードにわかれており、画面設定をすると実際に画面遷移を試してみることができます。このモードはUSBケーブルで接続した実機でもプレビューできます。(将来はWi-Fiにも対応とのこと)ネットを介してプレビューすることのできる共有URLの発行もできます。UIキットとして、iOS/Googleマテリアル/Windowsの主要なインターフェース素材が揃っており、これだけでも高品質なプロトタイプが作成できそうです。まだ、Mac版だけのプレビューリリースですが、正式発表が待ち遠しいツールですね。

2.Prott

prott2.png

Goodpatchが開発した、純国産のプロトタイプツールです。エディターモードで、ワイヤーフレームを書いたり、手書きのワイヤーフレームを撮影したものや、使い慣れた画像ソフトで作成したデーターをアップロードしたりして、プロトタイプを仕上げていきます。ホットポイントを設定して画面遷移を作成し、ブラウザーや専用アプリを使って実機でプレビューが可能です。各モードの切り替えがわかりづらい、あらかじめ用意されているアートボードが1種類しかないなど、細かな不満点はありますが、総じて使いやすく、良くできたツールだと思います。国産というところも安心ですね。

3.inVision

invision.png

ワイヤーフレームなどの作成機能はなく、いつものアプリで作成した画像をまとめてドラッグ&ドロップでアップロードすることで、画面遷移が動作するモックアップが完成します。共有して画面にコメントを残せるのも便利です。専用のURLを発行して、実機での検証も可能です。長いページもスクロールすることができます。英語サイトなので、細かいところがわかりづらい、ホットポイントと遷移先の画面をつなぐ方法が他のツールのようにドラッグ&ドロップでなく直感的でないなど、細かな使いづらさはありますが、総じて直感的に使えるようになっているので、日本でも人気のサービスです。無料で使える範囲が広いのもいいですね。

4. POP


pop.png

台湾発のペーパープロトタイピングツールです。サイトもアプリも日本語版があるので安心です。無料ダウンロードできるスマホ等の台紙を印刷し、ペーパープロトタイプを書き、専用のアプリで撮影をします。ホットポイントの設定は、PCからでも、スマホアプリからでも可能です。機能がシンプルな分、直感的で使いやすく、気軽にペーパープロトタイピングを実機動作させられるのは便利だと思います。画面は画像アップロードできるので、より作り込んだプロトタイプでも使用可能だと思います。注目のサービスです。

5. MarvelApp

marvel.png

エディターモードでプロトタイプ作成が可能で、作成した画面にホットポイントを設定して画面遷移が可能になるのは、これまであげたツールと同じです。特筆する点は、無料で使える範囲が広いこと、プロジェクトも無制限に作成可能です。画面共有も専用のURLが発行され、それを実機で見ることができます。エディターモードでアートボードのサイズが1種類しか見当たらず、サイズを変更する方法がわからなかったなど、英語のツールならではの難解さもあります。


代表的なプロトタイピングツールをご紹介しましたが、いかがでしたでしょうか。各社基本的な機能は共通していて、あとは相性の問題という感じもありますが、UIのテンプレートがそろってるとプロトタイプ作りがはかどりますね。個人的にはペーパープロトタイピングにターゲットをしぼったPOPが気楽に使えて好印象でした。初期段階はPOPで検証して、プロジェクトが進んだら、XDでつくるかSkech+他のオンラインツール(inVisionとか)という感じですかね。XDはまだプレビューリリースこれからの進化に期待したいです。Googleが水面下でプロトタイピングのできるデザインツールを開発中とのニュースも飛び込んできました。こちらも期待したいですね。

(担当:小山智久)

キゴウラボでは、ワイヤーフレームの作成と、その後のプロトタイピングテストをお受けしています。仕様書やざっくりとした画面設計書から、ワイヤーフレームまたはモックアップを作成し、画面遷移が検証できるプロトタイプを作成します。ぜひお問い合わせください。