【比較あり】Web制作のモックアップツールならmoqupsが神【愛用】
モックアップツールの利用価値から、おすすめツールをご紹介します。
「モックアップツールなんて使わなくていいっしょ」「モックアップ作る前にラフデザイン作ればいいっしょ」と思っている人も少しだけお時間ください。もしかしたら考えが変わるかもです。
モックアップツールってなに？紙で良くない？
モックアップツールとは制作イメージ共有用ツールです。
Web制作ってデザインがキモだったりする場合が多いので、口頭だけだと伝わりづらいです。そこで登場するのがモックアップツール。ラフデザインに入る前の、ざっくりしたサイト概要の共有に便利です。
いきなりラフデザイン作ればよくない？
たしかにそうなのですが、ラフデザインの方向性がズレていたときにデザイナーの負担が増えます。モックアップはサクっと作れるので、デザイナーの負担を減らすためにも利用価値があるかなと。
こういった部分に気配りできると、デザイナーから好かれますよ。きっと笑。
紙でよくない？
紙のほうが早いって人はそれでいいと思います。
僕も紙を使っていた時期がありましたが、今となってはモックアップツール一択です。その理由は次のとおり。
- よく使う素材が揃っている（アイコン・メニューボタンなど）
- モックアップ作成時点でピクセルをFIXできる（デザイナーと円滑に連携出来る）
- 参考サイトのスクショをベタベタ貼れる（デザイナーと円滑に連携出来る）
僕がmoqupsをオススメする理由
動画のとおりですが、サクサクモックアップが作れます。その中でも特に僕が気に入ってる機能が次のとおりです。
- URLから簡単にモックアップを共有できる
- 動作がサクサク（日本だと有名なCacooというツールは重たい）
- ダウンロード不要（基本はシェアする為のツールなのでアプリ化されると逆に不便）
- 値段が安い（月に13ドル程度で似たツールよりも安い／無料プランもあります）
実際に僕が作成したモックアップを公開
URLリンクはスマホだと動かなかったりしますが、PCだと問題なく動くかと。こんな感じでモックアップを作り、チームメンバーに共有できます。
モックアップツール比較表：まずは各種ツールを触ってみるのがオススメ
個人的にはmoqups一択なのですが、人によって用途が変わると思うので比較表を作りました。
| サービス名 | 無料プラン | 月額費用 | 公式サイト |
| Cacoo | あり | 454円〜 | cacoo.com |
| Fluid UI | あり | 8.25ドル〜 | fluidui.com |
| moqups | あり | 13ドル〜 | moqups.com |
| Marvel | あり | 14ドル〜 | marvelapp.com |
| invision | あり | 15ドル〜 | invisionapp.com |
| Justinmind | あり | 19ドル〜 | justinmind.com |
| proto.io | あり | 24ドル〜 | proto.io |
とりあえず、すべて無料プランがあるので予算に合わせて試してみましょう〜。以上、便利なモックアップツールを利用して、開発プロジェクトを加速させましょう！