プロトタイピングツール比較！「Axure」と「Mockplus」で作るテーブルデザイン

近頃、使いやすく直感的なプロトタイピングツールがたくさんリリースされています。
どのツールを使用するかは、ユーザビリティや学習コスト、短い時間で作れるかなどの好みによって選んでいることでしょう。

この記事では、まだ日本ではあまり知られていないプロトタイピングツールを紹介します。今回は、「Axure（アクシュア）」と「Mockplus（モックプラス）」のテーブルのデザインの使い勝手を比較していきます。

テーブルの配置、変更の使い勝手比較

AxureとMockplusは、要素を自由に配置することができるタイプのプロトタイピングツールです。
テーブルの配置や、大きさの変更に関するUIの使い勝手や違いを比較していきます。

セルの変更

Axure

Axureは、Microsoft Office系ソフトに近い操作方法で使うことができます。Excelやスプレッドシートを使う人にとっては簡単に使いこなすことができるでしょう。ガイドがないため、正確にサイズを変更したり位置を変えるにはわかりにくく、使い勝手を悪く感じる部分もあります。

Mockplus

Mockplusも同じように、Excelやスプレッドシートのように使えます。
UXの部分でMockplusがAxureに勝っているのは、マウスの位置に赤色のガイドラインが表示される点です。それにより、ユーザーはピクセル単位のサイズ調節が可能になりました。元のテーブルとサイズ変更後のテーブルの両方が表示されるため、サイズの比較も可能です。

テーブルの移動

Axure

Axureでは、ドラッグでテーブル全体の移動を行います。
テーブルを動かすには線の上にカーソルをあわせます。これはよく見る使い方ですが、線の上でしか反応せず範囲が狭いので、これでは動かしにくいです。

Mockplus

Mockplusのテーブル移動は、テーブルのどこをクリックしても移動ができます。テーブルの移動を簡単にしたことで、デザイナーも作業に集中できることでしょう。移動前と移動先が表示されているので、テスト的にレイアウトを変えてみるときも簡単に移動できます。

セルのホバー

Axure

Axureでは、ホバーで特徴的な視覚の変化はありませんがセルの上ではアイコンがプラスマークに変化します。このプラスマークによって、編集が可能であることが伝わります。

Mockplus

Mockplusは、マウスホバーで選択したセルの輪郭線が変わります。大きな変化ではないように感じるかもしれないですが、膨大な数のセルを編集するときに有効なデザインです。

編集機能の使い勝手比較

次は、AxureとMockplusの機能の違いを比較します。

セルの追加と削除

Axure

Axureは、サイドメニューの各アイコンと右クリックメニューのオプションからセルの追加と削除が可能です。

Mockplus

Mockplusでも、Axureと同様に右クリックメニューからセルの追加と削除ができます。Mockplusは、テーブルの一番最後のセルに表示されるプラスアイコンをクリックすることで行と列の追加も可能です。

セルのインタラクション

Axure

Axureでは、サイドメニューの「Add Case」からインタラクションを追加できます。MockplusよりAxureが優れている点は、ひとつひとつのセルにインタラクションが設定できることです。

Mockplus

Mockplusは、ドラッグ＆ドロップでインタラクティブな要素を追加することができて、処理結果をシンプルに表示しています。Axureで使えた、個別のセルにインタラクションを追加する機能は現在はありません。随時アップデートが行われているので、今後の対応に期待です。

Excelとの互換性

プロトタイピングソフトでテーブルを作るときは、既にデータの入力されたExcelが用意されている場合もあれば、その逆もあります。今回紹介した、AxureとMockplusではExcelとのデータのやり取りが可能です。（ただし、Axureではアジア圏の言語は文字化けが起こります。）

今回紹介したAxureとMockplusは、プロトタイピングツールからExcelへ、Excelからプロトタイピングツールへのコピー＆ペーストによるデータのやり取りが可能なプロトタイピングツールです。

まとめ

AxureとMockplusの比較をしてきましたが、どちらが好みでしたか？
プロトタイピングツールを選ぶのに、常に決まりきった最善はありません。

Axureは情報量の多いテーブルに強く、個別セルのインタラクションも特徴的です。データ量が多いときに使う候補のひとつでしょう。

Mockplusはユーザービリティに強く、合理化されて使いやすいUX設計が特徴です。データ量が少なければ動作の軽いMockplusが適しています。
実際に使用する場合、Mockplusを使用するケースのほうが多いかもしれませんね。
Mockplusの新機能については、こちらを確認してください。

プロトタイピングツールを選ぶ参考にしてみてください。