WEBアプリなどのモックアップを作成できるツールを探す機会があったので、今回は、
ノーコードでモックアップ製作ができるMockflowについて感想記事を書きたいと思います。
Mockflowで作成できるものとして
UI Drawings, SiteMaps, Design Approvals, Annotations, StyleGuides
以上の5種類がありますが、この記事ではUI Drawingsの話だけをします。
エディターの操作感など
こちらが作成してみた画面です。適当にパーツを配置しただけなのでめちゃくちゃですが、
左メニュー・データ一覧・一覧の絞り込み条件入力欄のイメージです。
エディター画面を拡大・縮小できるのがありがたいです。個人的にこういうツールにおいてそれが一番うれしく思う要素なので…。
パーツはELEMENTSから選択し、ドラッグアンドドロップで配置することができます。
変更できるのはパーツ内のテキストとサイズ、色、角度、線のタイプなどぐらいです。
パーツに他ページへのリンクをつけることはできますが、入力フォームに値を入れることはできません。要するに付けられる動きは画面遷移ぐらいです。
テーブルパーツのセルの数を変えたりなどはできません。
また、パーツによっては下の画像のように、複数のパーツがグループ化されているものもあります。これは赤い枠で囲まれている範囲が一つのパーツになっています。
ですので、その中の要素がまた一つ一つ調整・削除可能です。
パーツが理想に完全にマッチしなくても、微調整は可能というわけですね。
ちなみにオート保存ではないようなので、変更を加えたら「Save Changes」を忘れないようにしなければいけません。
UI Packs / Templates
ELEMENTのパーツはUI Packsというまとまりで利用できます。
上の画像では「KendoUI 2017」とありますが、これがUI Packsの名前です。
STOREから下の画面に行くことで、自分のほしいパーツの入ったパックを探して使用することができます。
目的のサイト・アプリ作成に使用するつもりのツールやデバイスなどがはっきりしているなら、そういった単位でパックにしてくれているものもあるので便利です。
また、テンプレートも用意されています。
今回はテンプレートは利用していないのですが、かなり数が多いです。
Mockflowは完全無料なのですが、それでここまで種類があるのは珍しいのではないでしょうか？
使ってみてどうだったか
完全無料にしては、かなり充実したツールだと思いました。
手軽ですし、操作もわかりやすく、個人的に相性も良く感じました。
ただ細かいところでもどかしい感じもしますが、それはまあ仕方ない範囲だと思います。
英語版しかありませんが、そこまで難しくは感じませんでした。
今回は利用しませんでしたが、チームでの作成にも対応しているようで、チャット機能もありますし、手書きの文字も画面に書き込むことができます。
無料・お手軽で基本的に欲しい機能はだいたいある といえるツールだと思いました。