直感的なラピッドプロトタイピングツールMockplusを使ってみた

プロトタイピングはWebやアプリのデザイナーの間ではもはや無視できない工程となってきており、最近ではAdobeなどの参戦も騒がれたように、世界中で多くのツールが日々生まれています。

プロトタイピングと一言で言っても様々な開発段階や目的によって細かい用途や使用感は変わってきます。多くのツールの中でもどれが優れている、というよりも自分の用途にマッチングして、使いやすいものを選ぶのが大事です。

ということで、今回は国内ではまだあまり紹介されていないMockplusというツールをご紹介します。

Mockplusとは

MockplusはJongde Softwareが提供するラピッドプロトタイピングツールです。WYSIWYG（What You See is What You Get = つまり見たままのとおりに動く）なプロトタイピングツールがテーマらしく、直感的でわかりやすい操作がウリです。

このあとすぐ、このツールでの作業をレポートしていきますが、途中のチュートリアルはほとんどなく、私自身も初見で全操作を行ったのにも関わらず、迷うことなく進めることができました。決して美しいUIでもありませんが、「直感的でわかりやすい」ツールなのは間違いないようです。

百聞は一見にしかずということで、さっそく初期起動から簡単なワイヤープロトタイプを作るまでをレポートしていきたいと思います。

Mockplusを使ってみる

MockplusはWin/Mac両対応で、iOS/Androidの補助アプリもあります。基本無料利用ができ、クラウド機能などの一部機能は有料です。

アプリケーションをダウンロードし、起動すると会員登録画面が出てきます。

レジストレーションを終えるとUIの見た目を選ぶ画面になります。

ワイヤーフレームとスケッチの２種類ありますが、この時点であまりキレイで丁寧なものを作るのではないのだな、ということを察することができます。ツールのスタンスが示されていていいですね。

そしてサンプルプロジェクトを読み込んでみます。

いきなり限りなくアウトに近いの出てきました。

画面内はさておき、こちらがメイン画面になります。左側がコンポーネントツールバーで、右側に画面などのツリーやらスタイルのプロパティやらがあります。少しわかりづらいですが上部中央には再生ボタンがあり、プロトタイプを動かすモードになります。

なんとなく触ったところで、さっそく作ってみようと思います（実際試したときも30秒くらいで閉じてしまいました）。

ワイヤープロトを作ってみる

今回はとあるメディアサイトのアプリの、初期段階のプロトを作ってみようかと思います。

こんな感じのものですね。ちなみにこのときはSketchでPDFに書き出したりして検証していた気がします。

インタラクションをつくる

まず左のコンポーネントバーにInteractionとあったので、Sliding Drawer（スライドするドロワー）を入れてみたいと思います。ツールバーから当該アイコンをドラッグ＆ドロップ。そして悪名高きハンバーガーメニューがデスクトップに転がっていたので適当に放り込んでみました。

Sliding Drawerのアイコンをダブルクリックするとこのような画面になります。

ドロワーの中が編集できるようになります。

画像と思しきアイコンから画像を追加。デフォルトは×になっていますが、画像を入れることも可能です。

これはアプリのサイドメニューになるのでテーブルビューを入れてみます。

左のバーからテーブルビューを発見。ドラッグ＆ドロップでサンプルが出てきました。これをダブルクリックすると…

なんとテキストエリアが出現。テキストのみで編集できます。文字の組み合わせでピクトグラムが出てくるようです。これは独特ですが、慣れると編集しやすいかもしれません。

さっそく編集してみました。

編集終了すると、反映されます。なるほど！

さて、このドロワーメニューを動かしたいので、メイン画面に戻ります。

先ほど置いたハンバーガーメニューをクリックすると細かいアイコンがたくさん出てきます。上部のものは画像にまつわるものですが、白い３つのアイコンが入ったハコは何でしょう。

丸いアイコンから適当にドラッグ＆ドロップしてたら伸びたので、とりあえず繋いでみました。ここでは見えませんが、確認ウィンドウがでて、とりあえずOKを押してみました。さあ動くでしょうか。

GIFが荒くて申し訳ないのですが、申し分なく動いてました。簡単ですね！

遷移をつくる

楽しくなってきました。どうせなら簡単なタブ、記事リストと記事ページを作ってみましょう。

まずはカテゴリのタブを用意します。見るからにそれっぽいアイコンがあったのでドラッグ＆ドロップ。アイコンのピクトも決してお洒落ではないですが、テキストラベルもあってわかりやすくて好感が持てます。

こちらも先ほどのテーブルビューと同じく、テキストのみで編集可能です。今回はカンマ区切りです。よく見ると各項目の上にドラッグして繋ぐ用の丸があります。なるほど、ここをまた繋ぐのですね。

タブの下に表示する領域が必要だな、とツールバーを見ていると何ページが束ねているようなStack Panelなるものを見つけました。これはこのときイメージ通りのものか、正直わからなかったのですが、結果的には想像通りの用途でした。

Stack Panelは複数のページをつなぐことで、この四角の領域にページを表示できるというものです。

画面の右側にはページリストがあるのですが、新規ページを作成して、記事一覧のようなものを作っておきます。

さきほどのStack Panelをタブの真下に設置し、すぐ右側の黒い四角にマウスを持って行くとどうやら繋げと言っているようだったので適当に繋いでみます。

繋いでみると、Panel 1とあったものが繋いだ「記事リスト」に変わりました。なるほど。「＋」を押してもう一つPanel 2を増やし、同様に「おすすめ記事リスト」に繋いでみます。

これでこの領域にこの2ページ分の情報が入ったようです。

ここまできたらやることは一つ。タブとコンテンツ領域を繋いでみます。

ニュースのタブ→記事リスト、おすすめのタブ→おすすめ記事リストに繋げました。ここらへんはかなり手探りだったのですが、基本的には繋げば動くだろう、と思いつつやってみたら本当に動きました。やったぜ。

デモを動かしてみる

さて今回はタブでコンテンツ領域を切り替えられて、かつコンテンツ領域にある記事リストがスクロールしたらいいな、と思ってイメージだけで作ってみましたが、果たして動くでしょうか。

再生ボタンを押します。

思い浮かべた動作はほぼ動いてますね！

ラーニングコストほぼゼロで、ポチポチ動かしていただけでここまで作れるのは結構すごい気がします。

ちなみにiOS/Androidのアプリを落とせばQRコード経由ですぐ共有できます。これも手軽でいいです（が、日本語フォントが少し崩れ気味なので、きれいにやりたければ画像などを使用したほうがいいかもしれません）。

まとめ

Mockplusは「思いたった先に動くワイヤーをラフスケッチする」ように使える、ラピッドプロトタイピングを地で行くツールだと思います。

私の場合、多少他のツールにも馴染みがあるくらいのレベルだったので、全くの初心者がイチから使うとなるとこうは行かないかもしれませんが、それでも数あるツールの中でもかなり直感的に使えるレベルの仕上がりだと思います。

きれいにも作り込めますが、個人的には今回のように敢えて汚い感じで使うのも速さ重視っぽくていい気がします。

オンラインでの共有などもできればよかったのですが、そのあたりは有料版となるそうです。とはいえ、そこそこのところまでは無料で使えますので、ぜひ何かの折にいじってみてはいかがでしょうか？

Mockplus : http://www.mockplus.com/